METRO Design System
Varya Stepanova
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, Varya took 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, Varya ensured 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, Varya committed 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 were 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, Varya guided the team to successfully engineer a comprehensive library of Web Components, enabling seamless integration into products regardless of the frontend framework they employ.Workflow Definitions
Varya 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, Varya 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, Varya has enabled all team members to understand and effectively manage various security scenarios.