Cover-01.jpg

BVG

The introduction of mobile apps for rail networks across the world have made travel much easier, but that does not mean purchasing a ticket in the app is simple. The challenge is to redesign the workflow of BVG (Berliner Verkehrsbetriebe) app and their current touch interface on a proprietary screen in a metro station.

 
 
 

Re-connect Berlin in a Berliner way

 
 
BVG Material-01.jpg
 

The goal of this project is to redesign the workflow of BVG (Berliner Verkehrsbetriebe) app and their current touch interface on a proprietary screen in a metro station.

Project Info
2-week Sprint
User Experience
BVG

Skills
User Research
Information Architecture
User Experience


Berliner Verkehrsbetriebe

The introduction of mobile apps for rail networks across the world have made travel much easier, but that does not mean purchasing a ticket in the app is simple. The challenge is to redesign the workflow of BVG (Berliner Verkehrsbetriebe) app and their current touch interface on a proprietary screen in a metro station.
Disclaimer: I am not in any way affiliated with BVG, just an avid BVG user that want to find a better design solution.


The Problem

Don't get me wrong, the current BVG app is pretty powerful, it has a lot of function. However, it lacks the intuitiveness, the small details where it all matters. There is a lack of sense of accessibility and for new users, the app seems rather intimidating & complicated. It is an app for Berliner after all, this app feels like trapped in history ages ago.

To prove my point, I did a research and compare the BVG app with its competitor. The clear winner here is HSL app from Helsinki with their gorgeous well-designed app. I have experienced using their app myself on my trip to Finland, and it is really well thought of.

 
 

Going further through the research, I created a persona to represent Berliners. What do a Berliner needs and what is their goals? This data will be useful to improve the user experience for Berliners.

 
BVG Material-04.jpg
 

I drafted a storyboard to picture the action being played through the app. When does the user use the app and why?

 
BVG Material-05.jpg
BVG Material-07.jpg
 

Then I decided to list down possible new features that can be implemented in the new app. I organize the features in a prioritization grid to see which features have the best impact-to-expectations ratio.

 
DB-04.jpg
 

The next step is to redesign the interface. I started with pencil & paper, develop several paper prototypes before moving on to high fidelity wireframe.

 
DB-07.jpg
 

Let’s start with the solutions

Bring back the iconic yellow

BVG iconic yellow is nowhere to be seen inside the app. That is why I decided to reincorporate the iconic BVG yellow to the app colour palate. The home screen now is simpler and have a feature that shows active tickets.

 
BVG Material-10.jpg
 

Yellow Menu

The menu is redesigned to incorporate the BVG brand colour and arranged by importance. The menu bar at the bottom is also included to help the user easily access important features of the app.

 
DB-10.jpg
 

Better location options

The location search now includes more options such as hotels, shopping malls or streets to improve user connectivity.

 
DB-16.jpg
 

Smarter Connection Results

The connection results are now easier to understand with the icons and more connection options just in a glance. Similar group of connections are grouped into one tab and shown with departure times instead.

 
BVG Material-13.jpg
BVG Material-14.jpg
 

Simple ticketing options

BVG is well known for their complex ticketing options. I rearranged the ticketing options to more easily understandable categories based on how many usages and types.

 
BVG Material-15.jpg
 

Design for Accessibility

The touch screen panel is redesigned to have a bigger touch surface buttons for the user who has problems with touching smaller surface areas. The ticket groups are also rearranged to create a sense of “easy-to-understand” for the user.

 
BVG Material-19.jpg
 

App Flow

The new BVG App flow, more user-friendly and easy to access the app core functions.

 
BVG Material-09.jpg
 

Conclusion

Due to time constraints, the research is limited to a smaller user audience and a small amount of data. More extensive research and additional prototype testing need to be conducted in order to refine the design solutions. Thank you for reading through this case study. If you have any feedback, I’d like to hear from you.