Case Studies

Design System | Standardization

client

Deutsche Bahn

project

Komponentenbau

year

2020

Brief

Summary

The development of a Design System within Deutsche Bahn was imperative to establish a foundation for building various digital interfaces as well as unify their existing design languages.

As digital design of a company evolves, it often leads to fragmentation and inconsistency. The same happened within Deutsche Bahn due to multiple products in different development phases and also due to external partners. To consolidate, and bring together all interfaces under one coherent design language, specifications alone were not good enough. A full-fledged design system was imperative to standardize and streamline their brand digitally.

The aim of this project was to standardize mobile, web, in-train displays as well as employee-facing applications. However, our contribution was only for the mobile channel. The development of the component library for mobile was spread across six months and included various phases of research, design and standardization.

Key Points

What was standardized?

Our overarching intention was to provide a framework that covers all aspects of digital design. We not only made a design library but created guidelines and definitions to ensure a branded and consistent experience.

Deutsche Bahn already had a defined branding for print media. Our efforts standardized the same for digital media through a specific UI element called "Puls" along with colours and typography. Deutsche Bahn created a new typeface called "DB Screen" for digital typography. We gathered icons from ongoing projects and made them uniform through specifications. All of these standards collectively helped in creating over 700 components in our DB UX Component Library.

Apart from this, we also created detailed sticker sheets for every component that outlined all possible variations and states. The teams who were beta-testing the library appreciated this effort as it provided a clear idea about individual usage of the components.

What did the design system standardize?

Design Library

Highlights

Several projects within Deutsche Bahn are already in development and have their design language defined.

A significant challenge was to standardize all existing as well as upcoming projects. To achieve this standardization, firstly existing patterns and components were identified through a visual audit of the design in existing projects. We collected the results in an inventory along with the discrepancy between similar components across projects. In addition to generic elements like "Button", "Input", "List Items", etc., we also listed brand-specific components like "Tickets" and "Itinerary".

More

Related Projects