Researching and designing a mobile application for Namma Metro - Bengaluru's Metro Transit System, enabling commuters to access live and up-to date information about the metro transit system.
UX Research: User Interviews, User Personas, User Journey Maps, Task Analysis, Competitive Audits
UX Design: User Flow Map, Lo-fi Wireframes, Mid-Fidelity Mockups, User Testing, Hi-Fi Prototype
Duration: 4 months, Dec 2021 - Apr 22
Tools: Pen+Paper, Miro, Figma
Public Infrastructure
In Bengaluru, where the metro is extensively used, ensuring commuters can easily access trip information becomes crucial. Currently, this convenience is lacking due to the absence of an official, functional mobile application with relevant details.
Despite the presence of an unofficial app, it contains outdated data and improvements are needed in its functionality, accessibility, and intuitiveness. Commuters find themselves juggling multiple applications, websites, and maps to plan their metro trips, resulting in a tedious process that impacts their overall travel experience. Addressing these common concerns, our research-informed mobile app provides an intuitive and functional solution, allowing commuters to enjoy a stress-free metro journey.
Commuting via Namma Metro is a significant aspect of life in Bengaluru. With two metro lines covering over 45 kilometers and serving 40 stations, approximately 4.15 million people rely on it daily. Given the substantial daily usage, providing commuters with essential transit information for journey planning is crucial. Despite advancements on the official Namma Metro website, the absence of a functional mobile application is notable. The objective was to create a prototype for the Namma Metro mobile app, offering commuters a seamless way to plan their journeys on their phones without any hassle.
Design a prototype for a mobile application that enhances access to information about Namma Metro, offering commuters a centralized platform to manage various aspects of their trip:
- Check live train timings and plan their journey accordingly.
- View Metro Smartcard details, including account balance, validity, and recent trips.
- Access information about tourist attractions around metro stations.
- Calculate ticket prices by inputting journey details.
Commuters use public transit for a range of tasks, from daily commutes to occasional or infrequent travel, making their travel patterns diverse. Categorizing commuters into smaller groups based on the frequency of their metro usage allows us to better address their concerns. Through interviews and research, commuters are classified into the following categories: Daily Commuters, Occasional Commuters, and Tourists.
User personas were created based on the concerns and pain points identified during user interviews. Three personas were developed to represent commuters from the aforementioned categories: Daily Commuters, Occasional Commuters, and Tourists.
Selecting a User Persona from the categories mentioned above, and developing a user journey map to gather deeper insight into the pain points, concerns, and potential features that may have been overlooked in previous processes. The graph below illustrates the various emotions users experience while planning, commuting, and completing their trip on the metro.
User Journey Map of the User Persona - Sam
Task analysis aids in comprehending how a user executes a series of tasks to achieve their desired goal. The provided example enhances understanding of the various tasks and sub-tasks a commuter engages in to accomplish their objectives.
Flow Chart showing the tasks commuter performs
Examining and analyzing the user flows, functions, and features present in competitive apps enables the design and development of a more efficient and intuitive mobile application. The flowchart illustrates the primary navigation tab categories and additional options available for commuters to accomplish their tasks.
Information Architecture of the competitive application
Below are the screen captures that show the working of the competitive app.
Screencaptures of the competitive application's features
By compiling data from the research methods mentioned, a concise user flow chart was developed. Categories were derived from various tasks that a commuter may wish to perform to accomplish their goals. The finalized categories, incorporated into the developed app, include Home/Search, Metro Map, Nearby Attractions, Recent Trips, and Settings.
Information Architecture of the proposed application
The provided flowchart outlines the user flow within the app, encompassing main route finding, ticket price calculation, and access to the official metro route map, along with additional features users may engage with. Creating flowcharts aids in refining essential features for the development of higher-fidelity prototypes. It also helps uncover potential issues that might be overlooked, ensuring the final product is free from impediments to its efficiency and functionality.
Flow Chart of the various tabs on the application
When users open the mobile application, they will be choosing between Log-in, Sign-up, and Skip Sign-up options. Depending on their choice, the next screen is going to be a sign-up screen or the home/search screen where they can input their locations.
The 5 tab options available on the navigation bar are:
• Home - The first screen that pops up after the on process, this is where users can input their locations and find details about their boarding metro station, destination metro station, metro route, and the metro line that the commuters have to board.
• Map - The screen where the Official Metro map is available. This map shows the metro line details and metro station details.
• Attractions - This provides information about the metro stations and their nearby attractions
• Recent Trips - Details about the metro smartcard, balance available, the validity of the cad, and recent trips taken are available in this section.
• Settings - Section where users can go to change their account details such as username, password, smartcard details, notification settings and to find more information about metro travel regulations.
Images outlining the sub-categories of each of the tabs
The wireframes presented here are derived from insights gathered during research. They played a crucial role in shaping a comprehensive app that empowers users to track live train locations, schedule and plan their journeys, check the balance and validity of their smartcards, and calculate ticket prices—all within the app. Following a series of pen-and-paper wireframes, the finalized versions were adjusted to address user concerns and pain points before being developed into low-fidelity digital wireframes.
Lo-fi wireframes for the five tabs
Design System of the application's UI
Compiling data from research and low-fidelity wireframes, we progressed to mid-fidelity wireframes. This phase involved addressing identified issues and culminated in the design of an app aimed at enhancing the overall experience for commuters using Namma Metro.
Mid-fidelity wireframes and the user flow