Our design team at Mobimeo developed a highly customisable white-label solution for a Mobility-as-a-Service app, alongside a design system that incorporated various building blocks from UI style guides and component libraries to copywriting documentation and a detailed customisation strategy. The result of this effort was a new common design language for our mobility apps based on principles that would enable people to effortlessly navigate transportation options .
Mobility-as-a-Service
Mobimeo was founded as a corporate venture of Deutsche Bahn in 2018 with the aim to become one of Europe’s largest platform developers for Mobility-as-a-Service (MaaS) solutions. This platform would bundle and process transportation-related data from a variety of sources, from geospatial information and public transit timetables to fare structures and the positions of available sharing options, and provide them to a mobile app which offers the user the best options to get from A to B.
When I joined Mobimeo in 2019, the idea of a white-label mobility app that would fit the needs of public transit providers across Germany, was still in an early phase. Especially product design was not ready to scale, lacking reusable components, style guides or regular close exchange with engineering and product management.
One App to Rule them All
Since then, the amount of B2B partnerships with transit operators –and hence the number of apps in the market– multiplied, making a more streamlined and consistent approach to product design necessary. In this time, I was responsible for cleaning up current design files and resources, and helping to get the next generation of our design language on the way.
Process, Process, Process
During my first two years at Mobimeo, I had the pleasure to work in various feature teams, from search and routing to ticketing to account management, as well on a wide range of horizontal topics that often had to do with setting up processes and organizing design resources and assets for production:
- Designing ticketing and account management features for the app through several generations.
- Conducting qualitative user tests and interviews around various ticketing features.
Created and maintained service documentation in the form of information architecture and user flow diagrams. - Re-organising copywriting procedures, created Tone-of-Voice guidelines, and set up multi-language support for our apps.
- Setting up production pipelines for front-end assets like icons, modality symbols, logos etc.
- Creating customization guidelines for Mobimeo’s B2B partners, their individual brands and local public transit signage.
- Contributing to component libraries and design system foundation.
A cornerstone of the cleaned-up information architecture was a thorough documentation of user flows and service processes.
A flexible design language
In 2020, our new design language nicknamed “Dieter” was launched, which was based on four core design principles: Clarity, Purpose, Aesthetics and Motion. Aimed at reducing visual clutter, letting the information speak in the current usage context, and providing the user with relevant information on the go, these principles found their way not only in visual design guidelines and the decision-making process for new feature flows, but also copywriting and the tone of voice in which our apps communicated with our users.
Along with this design language came a stable design system foundation including guidelines, style and component libraries, as well as a streamlined assets production. As a result, the product quality improved significantly; UI assets and copywriting became more consistent, and user flow processes leaner.
Internally, communication between engineering, product management and design improved drastically. We were able to launch up to a dozen new app instances for different providers in little time thanks to versatile and reusable customization guidelines.
Links
© 2024 Christian Behrens