Redesign of the BVG App Fahrinfo
In the context of a UX/UI bootcamp assignment, the challenge was to redesign a well-known mobile app, focusing on a minimum of 3 screens prioritising quality over quantity.
Additional instruction were:
- Choose a well-known mobile app, either for iOS or Android.
- Do not conduct any UX research.
- Begin the redesign process by reproducing existing screens.
- Redesign the app’s look and feel at the designer’s discretion.
- Perform heuristic evaluations with tests.
- Reevaluate frequently and experiment with new ideas.
- Ensure the product’s user interface design aligns with the brand’s identity.
BVG Fahrinfo App
The BVG Fahrinfo App aims to be multifunctional and build too navigate Berlin’s public transportation system. Users can input destinations, access real-time travel information, purchase tickets, and save frequently visited locations. The app accepts various payment methods and offers a range of ticket options. Integration with multiple transportation modes and current updates it states to make it a comprehensive tool for urban travel in Berlin.
The Challenge
Goals and Challenges Identified
I chose to redesign the BVG Fahrinfo because I disliked its user interface and usability already for a long time. The app faces many challenges, including complex navigation, outdated design elements, and inconsistent information presentation.
The interface looks grey and is visually uninviting, failing to reflect the brand’s image communicated through various campaigns on other channels. The BVG has a rather strong brand identity, which is almost non-existent in the app.
The above issues often led to frustration when I was useing the app, probbably decreasing app engagement among other users.
Now was the time to prove that improvements were possible. Therefore, I aimed to address these issues and create a user-friendly interface that fosters usage and positive interactions with the app.
Goals
- Provide an overall friendlier interface that encourages app usage and hopefully the experience of using public transport while also integrating the strong and recognisable branding of BVG.
- Reduce the information clutter, prioritise, eliminate, hide, and create an information hierarchy.
- Increase usability by creating simple user flows.
- Test and evaluate the interface according to the 10 heuristic principles of Jacob Nielsen from 1994.
The Redesign
A Closer Look at BVG’s Design Consistency
The icons used in the app are often misleading or even worse, used inconsistently. Some of the icons seem outdated and do not align with up-to-date design trends or BVG Corporate Design.
Navigating Complexity in User Interfaces
Another issue with the app is the overwhelming number of functions and information. It attempts to provide information without a clear hierarchy, resulting in user flows that are often unintuitive or difficult to predict. It is almost impossible to identify the more important functions from the less important ones. The interface uses rather small fonts and icons, which makes it also hard to read.
Struggling with App Navigation and Functionality
Consequently, it took me almost forever to navigate through the app’s different screens and functions. In the past, I primarily used the search, connection, and payment functions, causing many interface details to go unnoticed. Moreover, many of the app’s features failed to function and displayed error messages.
A Clash with Core Brand Values
One might wonder why a public transport company in the year 2024 is unable to provide a proper app when one of their core brand values seems to be the user experience.
The Result
Once I identified the overall functionality and appearance of the app, I began redesigning and creating a prototype for testers to navigate.
The prototype incorporated several improvements to the user interface and to the navigation concept. I also focused on integrating BVG’s overall brand identity to enhance brand recognition.
I’ll let the result speak for itself.
Prototype Testing
Uncovering User Insights and Navigation Preferences
As soon as I started testing my prototype, I was surprised in many ways. First of all, some of my assumptions regarding the user flow and functions of the interface were confirmed very quickly. None of my testers could make real sense of the “Abfahrten in der Nähe” function and thought it was redundant. They liked the idea of having the “Search Connection” function as prominent as it was, as well as having the navigation options Home, Trip, Tickets, and Profile on first sight for direct access.
Unforeseen Discoveries and Adapted Strategies
Little did I realize until I made a surprising discovery. During discussions with testers, it became evident that many were not aware to the existence of the ‘BVG Fahrinfo’ app, opting instead for different BVG applications. Surprisingly, my assumption of a singular app of BVG for such task was shattered. It dawned on me that BVG operated not one, but a total of four to six distinct apps. This revelation reshaped my approach entirely.
While the initial scope of my investigation didn’t include research on alternative BVG apps, this unexpected discovery compelled me to delve deeper into the ecosystem.
It seems that there are many other apps besides BVG, such as S-Bahn, etc. I found a total of six different apps in 5 minutes, all offering more or less the same or similar functions, sometimes better, sometimes worse. However, none of them provided a seamless app usage experience, in my opinion.
Fortunately, one of the more promising options, “BVG Mova,” had a very similar interface to what I had already developed for the “BVG Fahrinfo” app.
Conclusion and Learnings
When investigating on the other apps of BVG it became very quick evident they were faceing similar problems. All of them appeared to be very different in usage and look and feel, never really following a clear design direction.
