Usabilityu heuristics and redesigning an app — Deutsche Bahn navigator
I guess most of us already questioned the functionality of an app we constantly use. I won't say I'm a heavy user of Deutsche Bahn's app, but since I live in Germany is the one I need to use, either for purchase or for the journey itself. There is plenty of functionalities, from checking nearby public transport to following your journey inside the app, station by station.
But one thing always bothered me: the ammount of information and text on screen. In a world where UX is the norm I refuse to think that is a choice for usability rather than a choice. Either way, putting my own judgments aside, during a new project on my UX design bootcamp I had to choose an app to run an heuristic evaluation, and then propose a redesign.
Usability Heuristics
Heuristics in UX/UI design are general principles that guide designers as they create user-friendly interfaces. There are 10 principles to be evaluated and graded by severity, from 0 to 4. They are:
- Visibility of system status
- Match between system & the real world
- User control & freedom
- Consistency & navigation clarity
- Error prevention
- Recognition rather than recall
- Flexibility & efficiency of use
- Aesthetic & minimalist design
- Help users recognise, diagnose & recover from errors
- Help and documentation
My evaluation of the DB Navigator app, by these 10 principles, lead me to the map bellow, where each principle was identified in the app and is shown rated. When put in the this radar chart, you can easily notice where the problems are. The more circular the radar is, the more balanced the app or website is. When it is spiked or irregular you have inconsistencies to work on.
From the 3 most severe cases I chose some screenshots to work with. They were the homepage, the calendar for date selection and the journey information from when you are searching for something and want to know more about it, then leading to buying the ticket.
Competitors
To search for good practices and a sense of normality in this field, I was focused on checkin the competition in order to have a competitive analysis. I chose to look into Omio, since it offers to book DB journeys and also follow the journey on its app, and NS International, the dutch train company, that also allows to buy journeys from Deutsche Bahn, probably for being a neighbouring country and having a lot of transit from one country to another.
Omio is a booking platform, where you can compare prices and ways of travel between the destination chosen. It's very popular in Europe because of the principle but also because it haves a nice design and navigation. Its friendly, intuitive and easy on the eyes.
NS analysis was interesting, being also a national train company it was less formal and harsh as the DB navigator app, with a more friendly interface and better navigation, choosing to add more steps in the process in order to simplify the fields shown at the homepage.
Brand
I'm not gonna recreate any aspect of Deutsche Bahn's brand, its has a strong identity and elements, it works and it's strong. But the issue here is how is applied and branded on the app. In order to apply a different concept on the redesigned I want to propose, I needed to define some things in order to continue, specially with attributes I was relating to DB and what mood the app should transmit.
Get Andre Humeres’s stories in your inbox
Join Medium for free to get updates from this writer.
I explored a bit of their corporate site, the brand portal and of course the DB Navigator app, and relating with the existing identity I chose 5 brand attributes, some clear company goals, others more aspirational: honest, modern, reliable, clean, sustainable.
After constructing a mood board, mainly with photos of train travels (a lot of them from DB itself), I started to highlight aspects that not only related with the attributes chosen, but with the joy of train traveling… the modernity of speed trains and new stations, the soft light from nature going through a train window or a windowed station, the steel, the confort of the chairs. Train traveling is mostly looking through those big windows, seeing the landscape. And my epiphany was, never I before saw the DB logo as a train window.
So I wanted to translate that into the UI. The corporate color of the company, but in different shades for hierarchy applocation when needed. The secondary colors being the ICE (the speed trains) color, a dark blue representing their seats, a lighter blue representing the glass, and a dark green representing the landscape outside. For accent colors, the sky and the sunset. And added to that the chosen system colors and neutrals.
Since I don't have access to their typeface (Deutsche Bahn have an original institutional type family) I chose something that would work well in the digital interface, and also used the same space from their font, not changing too much of the visual wheight. Elements with rounded edges, representing the same edges from the ICE trains. In that way bringing the speed and modernity of their poster product into this.
Redesign
My proposal was a more cozy experience, just like traveling should be. Better navigation, cleaner visuals, more constancy in UI elements, change of CTAs to represent a seamless buying experience and avoiding to create confusion of actions.
Brand wise not much changed, I added secondary colors, pictures, and the logo (wich was ansent from the original version). It's just a way to apply the same brand to transmit different feelings. In the usability aspect a lot has changed. Specially avoiding cognitive load with too much text information per screen, choosing to hide some parts and reveal if the user wants it, or in later stages of the process.
- Simplified main page
- Image to connect the user to the experience of traveling and of the values of the brand
- Warm colors instead of severity of the previous version
- Create more steps than so much info in one screen
- Small changes on the calendar page to create a more familiar navigation
- Include button at botton and visible, rather in top
- leave it more clear that this is a window over the main page
- Start with simplified view leaving options to open tabs for more detailed information
- Change CTA to “Buy tickets”
- journey search information visible at top
During this process I often thought "maybe this loos like this for a reason", and may be right, maybe user research transformed this app to look like this based on cultural preferences or needs from the german user. But since in this exercise I didn't had any access to previous data from Deutsche Bahn, i had to work with my own data. And this is where it got me. Could be too personal, but I would connect more with Deutsche Bahn in an emotional level than before. Just saying.
