Gall & Gall // Token Based Design System

I unified Gall & Gall’s web and app with a reusable library of 100+ components, raising design maturity across squads and turning what used to be a clunky process into a rapid, data-led loop of design, build, and iterate.
Role
Lead UX Designer
Tools
Figma, Miro
Project phase
Production
MacBook mockupiPhone mockup
Client

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.
Challenge

Shifting Focus with the creation of a Design System

Creating the design system for Gall & Gall elevated the UX maturity and streamlined 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

Documentation

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.
Statistics

Project by the numbers.

100+

Components created

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

3

Platforms integrated

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

30%

Efficiency Improvement

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

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.

Component & Feature 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.

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.

20+ 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.
Learnings

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.
Dashboard mockup