Riccardo Biasibetti

Go back home

Companion – Live Navigation for the BVG Fahrinfo App

The BVG is Berlin's leading transport company, serving more than 1.2 million commuters each year.

Research UX UI

Project Overview

Commuting on public transport can be stressful and complicated. Public transport commuters often face unplanned disruptions, such as delays and cancellations, and have to juggle multiple transit apps or newsletters to get real-time routing information.

The Solution

The live navigation feature in the BVG FahrInfo App serves as a companion for public transport commuters, offering real-time updates on unplanned disruptions and ensuring peace of mind while traveling from A to B.

Client

BVG - FahrInfo App

My role

User research, concept validation, customer feedback documentation, wireframing, visual design and prototyping

Tools

Sketch, InVision, Userlytics, ProtoPie, PhraseApp, Miro

Platform

iOS | Android App

Timeline

2019 - 2021

The Process

Primary and secondary research, and feature benchmarking

Onsite and remote user testing session to validate UX concepts

Identified user pain points, redefined personas, and mapped opportunities for product development based on research analysis

Iterated existing concepts based on research analysis, reworked the UX flow, and adapted prototypes accordingly

Identified product iterations based on user research analysis and proposed adjustments to roadmap priorities

Tested new concepts, UX flows, and prototypes in line with future roadmap priorities

Moderated team offsites to co-create solutions for existing user pain points and explore potential future topics

New design

The new design aimed to restructure the information from the previous implementation. As commonly seen in other mapping and public transport applications, a card (bottom sheet) displays the route with all stops on the bottom half of the screen. While this visualization effectively provides a complete end-to-end overview, it falls short in offering specific details about the user's current step or next action.

Old concept 👇

To enhance the user’s live navigation experience, the information card (bottom sheet) was divided into two sections: current and upcoming steps. Each section features its own visual container, with current steps displayed at the top and upcoming steps, which include detailed descriptions, at the bottom. This design creates 'cascading guidance' as information transitions between the containers.

Usability testing

To test our cascading guidance concept, we created a series of prototypes that were evaluated in both remote moderated and unmoderated sessions. For the unmoderated sessions, we utilized Userlytics, a tool that provided valuable insights into user expectations and pain points.

In the context of our new design concept, it was essential to gain a better understanding of the following:

How users perceive the new information architecture of the live navigation bottom sheet
How users locate relevant information regarding their public transport commute
How users respond to the new design of map components
How users perceive our new design language

Remote unmoderated testing

To streamline user testing efforts, we established a process that enables designers to conduct their own user research sessions. By utilizingUserlytics, designers can manage approximately 95% of the testing process, which includes:

Defining test objectives
Gathering potential questions related to user flow or key screens
Creating the first draft of test scripts/tasks

With the assistance of our UX Research team, designers can ensure the script is free of biased questions and align on the screener and participant demographics. To validate the script, designers conduct 1 to 2 dry run sessions and make adjustments as needed, ensuring the test script is clear and understandable.

During the test, users interact with a prototype created in InVision or ProtoPie. The script directs users to specific screens within the prototype flow to follow up on particular topics or questions. Once the test is completed, designers review all sessions and analyze the insights gathered.

Here are some of the comments gathered from our testing sessions:

"…and it like tells you every step if people are a bit insecure…”

"I would use it every-time if I have to go to a new place…"

UX flows

A single view with multiple states: when the user taps the 'Navigation' button in the FahrInfo App's route details view, the live navigation feature is launched. For first-time users, a contextual onboarding process is initiated, followed by a primary view with various subviews.

Depending on the user's location, the live navigation feature displays contextual information accordingly.

Conclusion

Working on this project reinforced the importance of testing our implementation. When I joined Mobimeo, my team conducted weekly or biweekly field trips—depending on our workload and release schedule—to test the latest version of our staging app. During these outings, we evaluated our live navigation feature using both overground and underground public transport routes. This practice helped ensure that our implementation covered all potential use cases users might encounter while using the live navigation feature.

I’d also like to give a big shout-out to the former designers who worked on the live navigation feature. ❤️