Scalable Design System for Martin & Servera

The challenge

Martin & Servera, a prominent Swedish food service wholesaler, recognized the need for a unified design system to power their growing digital ecosystem. With multiple products and platforms, the company faced challenges in maintaining brand consistency and streamlining the development process.

‍

There are 6 brands within Martin & Servera Group and each team had their own small design library in Figma, which resulted in UI inconsistency and negative user experience.

‍

‍

The process

Research

To lay the foundation for the design system, I conducted in-depth research and analysis to understand Martin & Servera's brand, existing design elements, and user needs. I engaged with stakeholders, analyzed user feedback, and reviewed the company's digital assets to uncover key insights that would shape the direction of the design system.

‍

Approach

I used a mobile-first approach for building components, because the number of mobile users was rapidly increasing. This included increased click-areas and gestures interactions.

‍

Method

As for the design system creation method, I chose to use Atomic design method which I thought would fit this project the best.

Atoms: typography, colors, grid
Molecules: buttons, input fields, steppers
Organisms: modals, product cards, headers
Templates and pages

The result

What I delivered

I created responsive, accessible, intuitive and elegant components, after that I collaborate with developers in order to implement design system.

‍

‍

‍

Efficient design process

When the design system has been created we defined the effective design process for the client tailored to their needs:

1. UX designer receives a task from the product owner (for example, the need for “an improved checkout flow”)

2. UX designer makes a list of components needed for that flow and defines functionality and flow requirements in collaboration with a product team

3. UX designer create solution prototypes in collaboration with front-end developers to include all scenarios and cases as errors

4. A visual designer is reviewing the prototypes

5. Design system team creates components and publishes them in Figma

6. Front end developers code and add components to Storybook

7. Design system team documents developed component in Confluence

‍

‍

The outcome: consistent user experience across all platforms

The design system developed for Martin & Servera has been instrumental in unifying the company's digital presence, ensuring a consistent and professional user experience across all touchpoints. By establishing a cohesive design language and a robust library of reusable components, the design system has streamlined the development process, reduced maintenance overhead, and empowered the team to deliver high-quality digital experiences that align with the brand's identity.

‍

The outcome

The design system creation project for Martin & Servera has been a transformative journey, enabling the company to elevate their digital presence, enhance the user experience, and strengthen their brand identity. By establishing a cohesive and scalable design system, Martin & Servera has positioned themselves for continued success in the competitive food service industry.The key takeaways from this project include the importance of thorough research and analysis, the value of defining clear design principles, the efficiency gained through reusable UI components, and the critical role of adoption and governance in ensuring the long-term success of a design system. These lessons can serve as a blueprint for other organizations looking to embark on their own design system journey.

‍