The initial situation

The Migros Group stands for versatility and innovation - from the Federation of Migros Cooperatives and Migros Bank to Migros Online and Micasa. All these brands pursue a common goal: to create a consistent, inspiring user experience. This is exactly where our latest project comes in - the Migros Design Experience MDX.

Challenges

Before the introduction of MDX, it was difficult to create a consistent experience across all Migros Group channels. Each product has its own independent designs which are based on the CI/CD, but are always interpreted slightly differently.

Each team therefore develops the basic components from scratch. This results in duplication and inconsistencies.

The big challenge is the management, bringing the designers and developers together.

Efficient collaboration

MDX brings everyone on board. A clear design system promotes the joint alignment of business, design and development teams.

A centralized design and component system that unites all brands under one roof. Put an end to duplication and move towards an automated, seamless design-to-code pipeline.

Advantages of a multi-brand design system

30%

More efficient development

30%

Lower maintenance costs

25%

Faster designs

3-4x faster time-to-market

Better user experience, faster development, lower costs. A multi-brand design system promises a lot. Good planning and coordination are important.

A multi-brand design system saves resources at all levels in the long term. A sustainable investment in the user experience and automated processes become all the more important.

With the Migros Design Experience (MDX), designs are automatically transferred from Figma directly into the code via design tokens - no redesign or new brand has ever been created so quickly.

Solution

Together with Migros, we have developed the Migros Design Experience (MDX). We support them in the conception, development, implementation and integration of the design system.

With MDX, changes to designs in Figma are applied directly to the code with a single click. Our development team creates reusable web components based on this.

The design tokens are automatically converted into Tailwind and CSS templates and React, Angular and Vue components are generated from the web components. This allows us to cover a very wide range of use cases with minimal manual effort.

New brands and themes can also be created directly by the UI/UX team with minimal effort - and the synchronized React and web components can be used immediately.

Results

Thanks to the development of MDX, Migros now has a standardized, universally usable and scalable design system. MDX is already in use on various Migros Group platforms: from various CMS pages in the Migros Cooperative Federation to Migros Bank and stores such as Migros Online and Micasa.

From UX to design to ready-to-use components as Web Components, React, Angular or Vue components - the process is automated and synchronized. Designers and developers can now quickly and easily access a library of components that comply with the corporate identity, ensure accessibility and are checked by UI, UX and automated E2E, accessibility and security tests.

Better products

• Uniform look & feel: A consistent design system and reusable components ensure a uniform and professional brand experience
• High quality: Standardized components and accessibility as standard expands the target group and strengthens customer loyalty
• Uniform standards: Shared best practices fuel innovation and increase product quality

30% increase in efficiency

• Sustainable cost reduction: Components are built once and reused several times. Teams save on repetitive work steps and manual coordination
• Faster time-to-market: Adjustments in Figma are flushed into the code base with a click - so a new branding, feature or design adjustment reaches the customer much faster
• Documentation and examples: Clear documentation and code snippets for copying minimize the need for coordination and speed up processes

Conclusion

MDX impressively demonstrates how a well thought-out multi-brand design system accelerates processes, creates a consistent user experience and reduces costs at the same time. Whether a completely new project or a redesign in the Migros world: MDX provides the ideal basis for innovation and scaling.

Designs, design tokens and components are reused instead of newly developed, resulting in massive cost and time savings. We are proud to be a part of this project and look forward to continuing to work closely with Migros in the future.