E-MetroBus Web App

Context

The goal was to design a mobile web app that provides information about the electrification of Berlin's bus network, accessible via a QR code inside the buses. The target group was the passengers of the new electrified bus line 200.

Objectives

• Develop a landing page and a mobile web app that provide information on BVG bus line 200
• Make the web app easy to use and reduce unnecessary steps
• Educate users on CO2 savings, enabling them to understand the environmental impact of their trip compared to a traditional bus
• Make the user interested in knowing more about energy consumption in transportation and the electrification project

Challenge

The primary challenge was to engage users and increase their interest in the electrification of buses while they were using the app inside the bus. A standard website displaying raw information about the project risks getting users bored and confused, especially since absolute numbers on CO2 savings and pollution reduction can be difficult to interpret. The task was to create an intuitive mobile web app that simplified the user experience by minimizing unnecessary steps and presenting information in a compelling and interactive way. By contextualizing environmental benefits, the app aimed to help users understand the impact of their trips compared to traditional buses.

Design Concepts and Solutions

To effectively engage users with the electrification project, a key design decision was to present real-time data on CO2 savings and other relevant environmental metrics related to their current trip. To achieve this, users were asked to input their route details, i.e. start and end stations, which allowed the app to calculate personalized statistics. These figures were contextualized with relatable examples, such as comparing the savings to other modes of transportation, to help users grasp the environmental impact in a meaningful way.

The user interface for selecting stations was designed to be intuitive and user-friendly, mirroring the familiar style of the BVG line station interface found on their website. Consistent with this, the app’s color scheme and overall style were inspired by the BVG brand to provide a cohesive and recognizable experience.

To further engage users and enhance their knowledge of the electrification project, gamification techniques were incorporated into the app. Users were introduced to a quiz feature upon completing the initial trip data entry. This interactive component included four categories of questions designed to educate users about energy consumption and the bus network electrification process. Users earned points for each correct answer, progressing through various questions and categories. At the end of the quiz, users had the possibility to share their results on social media, encouraging further engagement and awareness.

While the app was focusing on providing essential information in an enjoyable and interactive manner, it was also respecting the principle of progressive disclosure. Users were free to navigate the app as they choose, accessing detailed information through traditional pages if they prefered so. This approach ensured that while the app was fun and engaging, it remained informative and easy to navigate, prioritizing critical information and improving user experience without overwhelming them.