Creation of a multi-brand design system

By creating a comprehensive design system in close collaboration with the Global Savings Group, design components can be standardised across widely varying brands and several different touchpoints. In addition, product design and development expenditures are lowered and the consistent quality of the user experience is ensured. This reinforces GSG’s customer-centric approach and makes its design processes future-ready, allowing smooth integration of new partner platforms and a rapid scaling of GSG’s business model.

The Challenge

The Global Savings Group, Europe’s leading company in the field of shopping rewards, offers international customers a web-platform to market coupon content. The unique aspect of the platform is that every brand receives the product in a way that fits its brand design including the option to individualise the content in various ways. Ensuring the consistent creation, scaling, implementation, and management of design components requires the introduction of a comprehensive design logic. To this end, a complex design system needs to be developed that can be adapted flawlessly to a large, growing number of brands and can be individualised, while nevertheless being based on reusable design standards.

The Result

In the project, a multi-brand design system covering over 28 brands with their individual style guides and accompanying page templates was created alongside a central component database with a wide selection of core components and numerous variations. This library of reusable design elements leads to more efficiency, consistency and scalability in the incorporation of new partner platforms and adaptation of existing designs.

In addition to the design elements, detailed guidelines on the creation and use of design systems were created. These help the growing team of designers and developers achieve rapid onboarding and enable the extension and continued management of the system in the future.

Our Approach

1. Audit of the existing product design:
Creation of existing design elements and development of a logic for the use of overarching components. The basic design of the product was already in place and was unified, extended and improved over the course of the project.

2. Conception of the design system structure:
The unusually high complexity of a system for many different brands required a structure with many more subdivisions compared to typical design systems.

3. Definition of a design language:
Determination of clear design principles that set reusable standards.

4. Development of a component library:
Creation of a collection of reusable UI components and brand-specific style guides, with page templates to the Atomic Design principle.

5. Documentation:
Extensive onboarding documents including training videos, checklists and how-to-guides in textual form alongside 8 hours of video material.

6. Consultation during the design process and in the implementation of the design system:
Definition of the process for design development with the aid of the design system. In addition, general standards for the transfer and takeover of design into code development was created (e.g. naming, versioning…).

7. Cross-functional collaboration:
The design system was created in close cooperation with the internal GSG team, consisting of Designers, Engineers, Product Managers, Marketing- and SEO Specialists.