METRO Design System

01 June 2021

Metro Design System is a multiperspective product for designers and developers that helps them create digital experience for millions of METRO customers in 22 countries.

In this project, I take a role of Product Owner to help the team with the strategic aspects of the system and its day-to-day operations. That role also includes elements of service design and managing the project.

Data-driven approach and OKRs

The project goals are set and tracked by the OKR framework. Mainly, the focus of design system team was to increase the adoption of its products (libraries of components implemented in different technologies) across the company. Such an approach assumed creating and constant usage of the metrics system. The metrics such as amount of products using different libraries and amount of library components used in these products — are frequently and regularly analysed to find out the potential gaps and forward the team focus to close them.

Marketing and in-house community management

As a head of the product, I ensure its usage within the company and popularity in the design and development circles. While the usage of the design system is not mandatory, it turns out to be very important that people use it on their own will and, at first, get familiar with it. As specific actions towards this goal, I commit the following:

  • Representing the design system to the business levels and communicating its value and impact
  • Presenting and reminding about the design system in company's design and development forums
  • Regular onbording meeting for recently joined engineers
  • Processing the other teams' request to meet their expectations

Service design for a design system

Project innovations are driven and tackled by applying service design techniques such as:

  • User research
  • Ideation
  • Prototyping
  • Facilitation

Achivements and the overcome challenges

  • New library of Web Components
    The team has sucessfully built a library of Web Components that enabled products to integrate them regardless of a framework they are using on the frontend.
  • Defined workflows
    The workflows for both design system team operations and contributions are now defined, visualised and documented. These artifacts are huge help in guidance for the new and old team members. They also enable and encorage contributions to the design system.
  • Onboarding as a regular activity
    Through constant enganging activity, the onboarding session has became a known regular event in the company calendar. Gradual update of the presented materials ensures meeting the needs of the newcomers so that they get relevant information about a design system which makes their working path with it easier and smoother. In turn, that ensures that the design system is known among the developers and widely adopted in the product codebases.
  • Outlined security policy
    In a series of workshops, the team has made initial audit of resources and tools in the context of potential security threats. The structed representation of the artifacts, risks, their impacts, countermeasures to them and respond actions clearly communicates to all the team members what they should be aware of and how they should act in different scenarios.

You can hire me to set up, manage, develop, and champion your design system. I can align the design and development processes in your organisation for a larger business impact.

© Varya Stepanova 2022