Design System | Standardization
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.
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.
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".
We identified commonly used components as well as general features of a design library through a study of existing design systems. However, we still wanted to question the library structure that Apple and Google offered. So as a next step, we probed deeper into real scenarios of library-usage in Sketch.
In the end, we defined two variants of the library structure and validated with designers as well as developers. Based on their feedback, we conceived a consolidated library structure.
An effective way of establishing conformity with accessibility guidelines in a design system is to ensure that the fonts and colours used have distinct contrast and visibility. Closely following the Web Content Accessibility Guidelines (WCAG) and maintaining a contrast ratio that achieves "AA" Standard in our components, we deliver pre-defined accessibility compatibility through our component library. In this way, we ensure that Deutsche Bahn can make their products available to a wider group of users.
The motive of our holistic approach was not only to create a high-quality design library but also to ensure that the library served the specific usage within various teams under Deutsche Bahn. We developed a library that enables the possibility of using it directly as well as derive libraries for various DB Products and DB Services. Our effort resulted in a design foundation that is consistent, accessible, and scalable.