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

Accomplishments and Overcoming Challenges

  • Creation of a New Web Components Library
    As a product owner and project manager, I guided my team to successfully engineer a comprehensive library of Web Components, enabling seamless integration into products regardless of the frontend framework they employ.

  • Workflow Definitions
    I took the initiative to define and document the workflows for both our design system team operations and contribution. These visual and written artifacts provide vital guidance for both new and established team members, fostering a collaborative environment and encouraging contributions to the design system.

  • Regular Onboarding Sessions
    Thanks to our continuous engagement, the onboarding session has become a recognized recurring event on the company calendar. regularly review and update the materials presented ensure the needs of newcomers are met, providing them with relevant information about our design system. This in turn facilitates their integration into our workflow and promotes wide adoption of the design system within product codebases.

  • Security Policy Development
    Recognizing the importance of security, I organized a series of workshops where our team performed an initial audit of resources and tools in relation to potential security threats. By creating a structured representation of artifacts, risks, impacts, countermeasures, and response actions, I have enabled all team members to understand and effectively manage various security scenarios.

You can hire me and the whole Bridge-the-Gap team 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 2024