DB Everyday Mobility

My contribution

As Team Lead I have led the Design System creation and migration from Sketch to Figma. I have collaborated with product, research, analytics and engineering to optimise and track performance of the design team and the Design System.

To view my Features Design contributions see DB Streckenagent project.

Here are some of my responsibilities:

• Design System
  • roadmap and vision (incl. Sketch to Figma migration strategy)
  • strategy development for design system adoption
  • processes
  • documentation and onboarding
  • working with engineering on implementation
  • maintenance, bug fixing, backlog ownership
• OKRs and design KPIs
• hiring and growing people, budgeting, tooling, meetings and rituals
• collaborating with Product, User Research, Data and Analytics

Here are some more details about my involvement in this project.

Figma migration

One of my first tasks when taking over the DesingOps team was to plan the migration from Sketch to Figma. The entire design system was migrated together with the key screens of the app.

Roadmap

My responsibilities included the estimation of all the steps and the creation of a migration plan. The OKRs were also estimated and the work was planned accordingly based on the available design team bandwidth.

Processes

Also as part of my duties, DesignOps was responsible for setting up process for the entire design team. The way we work together is very important for achieving consistency of the design system and the app. An example of such a process is the component creation and review flow.

Building a Design System

The most important part of DesignOps is the delivery of the Design System. As the Design System is used by everyone, its structure and quality determines the speed of the entire design team. The Mobimeo design system was a bit special as it contains generic components (like buttons) as well as specialised components (like public transport search result cards). All the need a good structure and I made sure every component variant was carefully designed to fit the purpose and to be as easy to use as possible for designers.

Using tokens for branding and dark mode

With the introduction of tokens branding has never been easier. As a side effect Dark and Light modes are also now one click away for every team designer. The example below illustrates quick theme switching between Streckenagent and Mobility Stuttgart as well as Light and Dark mode.

Complex components

Figma properties are a powerful tool, but it can become overwhelming if used improperly. Here is an example of one of the most complex modular components that I have designed and how properties can make everything simpler.

Building a new documentation

For a Design System to be effective it needs a strong documentation. The platform that we have chosen for this was ZeroHeight. For this I planned the documentation migration from Zeplin to ZeroHeight and sketched the new structure. I have set up processes and created templates for the entire team while at the same time participated to the actual work.

Measuring performance using KPIs

In order to measure the impact, the DesignOps team started measuring a number of key performance indicators (KPIs). These are important to measure both team health and well as work throughput and quality. Together with analytics I set up a number of things to measure continuously from our day to day work: Jira bug tickets, design system documentation access, Figma component usage and others. This helped us to better understand where we were could optimise our processes, what is our true capacity and how efficiently we work together.

Here are just a few examples of KPIs that we track.

Design System statistic data

In order to take the best decisions data is an invaluable tool. It is extremely important to predict who and where might be affected by a Design System. This way measures can be taken in advance to attenuate possible breaking changes or even avoid them all-together. We are tracking number of component instances and their location. We are also tracking how many disconnects and what are the most disconnected components.

Measuring team health

Team health is extremely important as it can predict the long term performance and personnel turnover rate. A sudden increase in meeting hours can determine a lot of stress. Designers also need time to think, so checking the remaining usable time is also a good tool to have as a team manager. Making all these measurable offers unique insights on how the team is performing.

The apps

Streckenagent and mobility Stuttgart are now available in App Store and Play Store for anyone to try. See below some of the main screens the app.

here are just a few screens from the DB Streckenagent app.