Image showing the the different tabs of the mobile application.

Namma Metro

PERSONAL PROJECT UX RESEARCH UX DESIGN

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.

Overview

Role

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

Project DEtails

Duration: 4 months, Dec 2021 - Apr 22
Tools: Pen+Paper, Miro, Figma

Project Industry

Public Infrastructure

Introduction

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.

Problem

How might we improve commuters' experience of accessing information related to Namma Metro?

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.

Solution

Redesign suggestions to enhance commuters' travel experience

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.

Research

Navigating the problem space

User Group Analysis

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 Group categories
User Group categories
User Personas and User Journey Map

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.

User Persona of Samantha
User Persona of Sam
User Persona of Sameer
User Personas of the Three Commuter Groups

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

User Journey Map of the User Persona - Sam

Task Analysis

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

Flow Chart showing the tasks commuter performs

Competitive Audit

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

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

Screencaptures of the competitive application's features

Ideation

Data Analysis and Iterative Designing

Information Architecture

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

Information Architecture of the proposed application

Site Map

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

Flow Chart of the various tabs on the application

On-boarding and Navigation Tabs

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

Images outlining the sub-categories of each of the tabs

Low-fidelity Wire frames

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.

digital lo-fi wireframes for the six screens

Lo-fi wireframes for the five tabs

Ideation

Design

design system elements constituting the app's Ui design

Design System of the application's UI

Mid-fidelity Wire frames

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.

chart showing MID-FIDELITY wireframes and the interactions between the tabs

Mid-fidelity wireframes and the user flow

Design

Feature Suggestions

Final Interactive Prototype

Click on the image below to access the interactive prototype made on Figma.

Screen capture of the app on-boarding page.
Image showing user flow screens for Onboarding the proposed Namma Metro appHome/search and search results screen of the appScreen capture of the interactive map on the appHi-fi prototypes of features such as nearby attractions, recent trips, and settings