ice train in frankfurt main station

Deutsche Bahn operates around 5000 ticket vending machines at its stations throughout germany. Despite digital travel booking options, these will continue to play a role in the coming years. The technical framework behind the machines is being renewed and, as part of this, the front end is also being relaunched with accessibility in mind.

Challenge

Building a barrier-free interface without abandoning the existing technical framework

The aim was to create a tested and certified barrier-free frontend, but based on the technical features of the old interface.

From matching old color values to a completely new standardized, component-based workflow

We started with an order for 2 sprints to compare the current status of the vending machine interface with the current status of the Deutsche Bahn CI. This resulted in an almost 2-year collaboration through our consulting services. In an agile working method, a Figma component library was created using variables and their translation into tokens. The aim was to create a standardized component library for development, in which all components contained therein were tested under the guidelines of WCAG. The interface was tested in real user tests at the railroad station in Frankfurt.

Created 2023-2025 at Ray Sono

Fields of activity

l

Creative & Art Direction

l

Digital branding

l

Design system conception & creation

l

Service & product design

My role

I held the role of Design Lead, working closely as a duo with an UX Principal colleague to align conceptual and visual aspects. The focus was on the iterative development of a modular multibrand design system, enabling consistent design solutions across multiple brands. I was responsible for the visual implementation and contributed conceptually, maintaining close collaboration with the large development team throughout the process.

db booking flow – choose destination
db booking flow – choose section in munich
Mercedes me vision 2 – sales experience

DB Ticket machine

Booking flow – DB
db booking flow – choose start and destination
db booking flow – new layout with tabs for far distance or regional travelling
db booking flow – choose connection
db booking flow – select stopps
db booking flow – add travelers
db booking flow – add seats
db booking flow – choose start time
db booking flow – choose date
db booking flow – select validity
db booking flow – connection details
db booking flow – reservation
db booking flow – basket
db booking flow – good bye

All booking flows and the components used in them were checked for accessibility by a team of experts from DB Systel.

DB Ticket machine

Booking flow – Service partner
hvv booking flow – start
hvv booking flow – select ticket
nash booking flow – start
nash booking flow – select ticket
nash booking flow – select ticket option person or group

Some exemplary screens from the processes of service partners such as HVV (Hamburg) and NASH (Kiel).

Showcase