Get In Touch

Gall & Gall // Token Based Design System

Gall & Gall, a leading Dutch retailer specializing in wines, spirits, and beers, elevated its digital presence with a design system. The project aimed to enhance UX maturity and streamline the design process across all digital touchpoints. Through a structured design process, we developed a unified foundation for both the website and mobile app, creating over 100 reusable components and mapping out key customer journeys. The design system was implemented incrementally, incorporating continuous improvements based on A/B testing results. The result is a robust design system that enhances consistency, improves efficiency for UX designers, and provides a great user experience across Gall & Gall’s digital platforms.

  • Tools

    Figma, Userzoom

  • Role

    Lead UX Designer

  • Project phase



A Legacy of Excellence in Wines, Spirits, and Beers

Gall & Gall is a well-established Dutch retailer specializing in wines, spirits, and beers. With a rich history dating back to 1884, Gall & Gall has grown into one of the largest and most respected chains in the Netherlands, boasting a network of over 600 stores. Known for their extensive product range and expert advice, Gall & Gall aims to provide customers with an exceptional shopping experience, whether they are experts or casual consumers. Their commitment to quality, convenience, and customer service has solidified their reputation as a trusted name in the industry.


Shifting Focus with the creation of a Design System

Creating a design system for Gall & Gall to elevate their UX maturity and streamline the design process. The challenge was to develop a robust and flexible design system that ensured consistency across all digital touchpoints, allowing designers to focus on enhancing the customer journey. By eliminating the need to recreate existing designs repeatedly, the design system enabled designers to devote more time to improving the user experience.

Design Process

Audit and Analysis

We began by evaluating the current webpage, identifying UI elements, and cataloging design patterns and inconsistencies. User feedback and analytics were also gathered to pinpoint areas for improvement.

Design Process

Define Design Principles and Goals

Establishing a clear vision, we set objectives to achieve consistency, scalability, and efficiency. The main goal of the design system was to improve the efficiency of UX designers and enhance UX maturity within the organization. We also defined the structure of the design system, ensuring it was organized and easy to use. Guiding principles such as accessibility, responsiveness, and usability were defined to align with brand and user needs.

Design Process

Foundation Development

We developed a design foundation that served both the website and the mobile app. This comprehensive foundation included typography, color palette, spacing and layout system ect. to ensure visual harmony and consistency. Additionally, the Etos app was integrated to work on the same foundation, providing a seamless and cohesive user experience across multiple banners.

Design Process

Component Creation

Utilizing an atomic design approach, we created a library of reusable components, ranging from simple elements to more complex structures. Examples of simple components include filter chips and buttons, while more complex components include product cards and product listing pages. Each component was carefully documented including usage guidelines and variations.

Design Process


A detailed guide for each was created, covering all design elements and providing clear usage guidelines. This documentation also included the locations where each component is used, ensuring consistency and clarity for design and development teams.

Design Process

Features & Journeys

Full features and customer journeys were mapped out using the created components. This ensured that all user interactions were consistent and intuitive, providing a seamless user experience across different devices.

Design Process

Maintenance and Iteration

We implemented the design system components incrementally. Whenever a specific feature was added or adjusted, the new components were implemented simultaneously to maximize efficiency.

Design Process

Implementation & Rollout

Given that multiple designers were using the design system, we established a feedback loop to keep the design system up to date. For instance, during A/B testing, we created multiple components, and the winners of these tests were added or updated in the design system. This process ensured continuous improvement and relevance of the design system.


Project by the numbers.


Components Created

Total number of reusable components developed, ranging from simple elements like buttons to complex structures.


Efficiency Improvement

Percentage improvement in design efficiency due to the implementation of the design system.


Platforms Integrated

Number of platforms (Gall & Gall website, Gall & Gall mobile app, Etos app) utilizing the unified design foundation.


Delivered Products


Unified Design System:

A robust and flexible design system that ensures consistency across all digital touchpoints, providing a scalable foundation for future development.


Comprehensive Documentation

A detailed guide covering all design elements, including typography, color palettes, spacing, and layout systems. The style guide also included the locations where each component is used, ensuring clarity and consistency for design and development teams.


Component Library

A library of over 100 reusable components, ranging from simple elements like filter chips and buttons to complex structures such as product cards and product listing pages. Each component was carefully documented with usage guidelines and variations.


Various Customer Journeys

Various customer journeys were mapped out using the created components. These included a new “My Account” environment, core shopping journeys (browsing, searching, checkout), special promotions, and improved customer support pathways.


Design Challenges

Scalability of Design Systems: Creating a flexible and scalable design system was essential for accommodating future updates and expansions. This approach not only saved time but also made it easier to introduce new features without compromising on design quality.

Collaboration is Key: Successful implementation of the design system required close collaboration between designers, developers, and other stakeholders. Regular communication and feedback loops were vital in ensuring everyone was aligned and the design system was effectively integrated.

Balancing Flexibility and Consistency: Striking the right balance between flexibility and consistency was challenging. While it was important to allow for customization and unique branding elements, maintaining a consistent look and feel across all platforms was paramount.

Managing Stakeholder Expectations: Aligning the vision and expectations of various stakeholders was a complex process. It required clear communication and sometimes, compromise, to ensure that the design system met the needs of all parties involved.


Let’s Discuss Your Next Project!

Interested in elevating your digital experience? Book a 15-minute call and learn how my UX/UI design expertise can bring your vision to life. I’m here to help you create compelling, user-centric solutions that drive success.


This website stores cookies on your computer. Cookie Policy