Re-connect Berlin in a Berliner way
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.
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.
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.
I drafted a storyboard to picture the action being played through the app. When does the user use the app and why?
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.
The next step is to redesign the interface. I started with pencil & paper, develop several paper prototypes before moving on to high fidelity wireframe.
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.
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.
Better location options
The location search now includes more options such as hotels, shopping malls or streets to improve user connectivity.
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.
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.
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.
The new BVG App flow, more user-friendly and easy to access the app core functions.
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.