UX Research · Usability Testing · Redesign

Namma MetroCase Study

Reducing task completion time by 40% through redesigned navigation and information architecture for Bengaluru's metro booking app.

2024
2 months
3 researchers
Mobile App
40%
faster bookings
15
users tested
23
issues found
User ResearchUsability Testing Mobile AppPublic TransportFigma
9:41 ●●● QR Tickets ACTIVE COMPLETED OTHER Whitefield (Kadugodi) Cancelled → Pattanadur Agrahara ₹ 20.0 Cancelled · Refund initiated Cubbon Park → Dr. B.R. Ambedkar Stn. Active · Valid till 11-05-2025 View PURCHASE TICKET
9:41 Book Ticket 1 2 3 FROM STATION Cubbon Park × TO STATION Search station… RECENT MG Road → Whitefield Indiranagar → Baiyappanahalli PASSENGERS 1 Adult Search Trains →
68
Metro stations
800K+
Daily riders
200M+
Annual ridership
77 km
System length
The challenge

Bengaluru's metro app was losing its own commuters

The Namma Metro app (provided by BMRCL) was a growing source of friction. Despite serving 800K+ daily riders, commuters were abandoning digital ticketing and reverting to token queues, defeating the purpose of going digital.

We focused on moderated usability testing and synthesis to assess and enhance the UX of the Namma Metro app, with the goal of improving usability, increasing adoption, and repositioning it as a valuable solution for both commuters and the Government of Karnataka.

Project scope

Moderated usability testing: 6 daily commuters, think-aloud protocol, 2 core tasks
Journey mapping, task planning and affinity mapping of commuter comments
User personas synthesised from interviews and behavioural observation
High-fidelity Figma redesign prototype across booking + Smart Card top-up flows
Usability testing process
Understand
Product selection
Evaluation Methodology
Task Setting
Goal setting
Task planning
Evaluation strategies
Call Users
Recruiting users
Scheduling & planning
Materials for testing
Analysis
Analysing users
Test insights
Conducting Tests
Testing
Usability findings

What the tests revealed

Six critical findings, each illustrated with hand-drawn wireframes of the actual Namma Metro app screens showing exactly where the experience broke down.

9:41 ← QR Tickets ACTIVE COMPLETED OTHER Whitefield (Kadugodi) → Pattanadur Agrahara Cancelled Cancellation Requested 12-05-2025 12:00:35 Refund Initiated Refund Status Purchased On 12-05-2025 11:46:34 Transaction ID tsory9dp100v6m Payment Mode UPI ! No booking progress indicator PURCHASE TICKET
9:41 ← QR Tickets ACTIVE COMPLETED OTHER Today Cubbon Park ₹ 10.0 Dr. B.R. Ambedkar Stn. Vidhana Soudha View Ticket This ticket is valid till 11-05-2025 02:30 AM ! No real-time timetable updates PURCHASE TICKET
01
Visibility of System Status
System status is critically important here due to the high volume of financial transactions processed by BMRCL daily. Commuters need uninterrupted visibility (even in offline scenarios) to trust that their bookings are confirmed.
Followed
Colour indicators (red/green) show whether a trip is active or cancelled. Status visibility exists for refunds in 2 of 6 screens.
Not Followed
No progress indicators while booking tickets or topping up the Smart Card. No real-time timetable or platform updates in the app.
Critical severity
← Purchase Ticket From Station Whitefield (Kadugodi) To Station Pattanadur Agrahara No. of Passengers ○ 1 + View Journey Show Fare NM Ticket Metro Card ₹10 ₹9.5 ! No timetable / departures visible PROCESS
← Purchase Ticket Confirm Ticket From: Whitefield (Kadugodi) To: Pattanadur Agrahara Passengers: 1 Travel Date: 12-05-2025 Fare: ₹ 20.0 CONFIRM CANCEL
02
Match with Real World
The app's language and flow should match commuters' mental models. Station names, icons, and ticket terminology should feel natural. Timetable and departures information (the first thing a commuter needs) is completely absent from the home screen.
Followed (4 of 6)
Tap Up, QR Tickets, and trip status use familiar language. The Confirm Ticket modal mirrors a real paper ticket format.
Not Followed
Timetable, Feedback, and News Info icons missing from the homepage. No real-world cues to orient first-time commuters.
Critical severity
← Ticket Details Trip Details Whitefield (Kadugodi) This ticket is valid till 12-05-2025 02:30 AM → Pattanadur Agrahara [ QR Code ] 1205202511460778945135 Payment Details Transaction ID tsory9dp100v6m234 Payment Mode · UPI ! No cancel/undo option post-purchase
← Confirm Confirm Ticket From: Whitefield (Kadugodi) To: Pattanadur Agrahara Passengers: 1 Fare: ₹ 20.0 CONFIRM CANCEL ✔ Cancel available before purchase
03
User Control & Freedom
Users should be able to undo actions easily. While the app allows cancellation before confirming a ticket, once purchased there is no way to cancel, even within a short grace window. This caused significant anxiety among participants.
Followed
Cancel option available while confirming a transaction before it's processed. Users can exit the flow safely.
Not Followed
No post-purchase cancel or undo option. Once confirmed, the ticket cannot be cancelled, even within seconds of purchase.
Major severity
← Top Up Card NAMMA METRO CARD •••• •••• 7891 Balance: ₹ 240.00 Choose top-up amount ₹ 100 ₹ 200 ₹ 500 ! Inconsistent selected state styling Enter custom amount Proceed to Pay ! CTA style differs from booking flow
Namma Metro QR Tickets Tap Up Card Metro Map Timetable News Info Feedback ! Icons inconsistent: vary in size & style Home Time Profile More
04
Consistency & Standards
A uniform design language must be used throughout for ease of navigation. CTA buttons change shape (rectangular vs pill), icons are inconsistent in size and style, and selected states use completely different visual patterns across screens.
Followed
Consistent layouts, headless navigation, fonts and brand colours are mostly uniform across core screens.
Not Followed
CTA buttons & filtering options are inconsistent: different placement, shapes, and labels across booking, top-up, and ticket list screens.
Critical severity
← Fare Details Whitefield → Pattanadur Metro Card balance: ₹ 5.00 Required fare: ₹ 20.00 Insufficient balance! Balance: ₹5.00 Needed: ₹20.00 ! App doesn't show this warning! Suggested action Top up your Metro Card first Auto-suggest when typing station ✔ Auto-suggest does work for names
← Purchase Ticket indir Indiranagar Swami Vivekananda Rd Baiyappanahalli ✔ Auto-suggest on station name search Q W E R T Y A S D F G H J ⇧ Z X C V B N ⌫ 123 space
05
Error Prevention
Slips and mistakes should be prevented by presenting confirmations before users commit to actions. The most glaring gap: when a commuter's Smart Card balance is insufficient, the app provides no warning before they reach the payment step.
Followed
Confirmation shown before processing a ticket. Auto-suggest works when typing station names, reducing typo errors.
Not Followed
No warning when Smart Card balance is insufficient before attempting purchase. Users only discover the error at the final payment step.
Major severity
← Payment Select Payment Method ⬜ UPI ⬜ Credit / Debit Card ⬜ Net Banking ! No saved payment method shown User must remember & re-enter each time ! No geo-location for nearest station User must recall station name exactly
QR Tickets ACTIVE COMPLETED OTHER Previous Trips Whitefield → Pattanadur 12-05-2025 · ₹20 · Cancelled Cubbon Park → Ambedkar Stn. 11-05-2025 · ₹10 · Completed Whitefield → Hopefarm 08-05-2025 · ₹15 · Completed ✔ Previous trips shown for recognition
06
Recognition Rather Than Recall
Users' memory load must be reduced by displaying product elements they can recognise. While previous trips are shown, the app fails to remember payment methods or suggest nearby stations, forcing recall rather than recognition at every booking.
Followed
Previous trips are displayed so commuters can recognise and reuse past station pairs without having to recall them.
Not Followed
No memory of prior payment method, no saved preferences, no geo-location to suggest the nearest station. Users must recall and re-enter everything every time.
Major severity
Namma Metro Tickets Top Up Map ! No shortcuts for frequent trips ! No personalisation or quick-actions ! No gesture shortcuts or accelerators Home Time Profile More
App Not Available App Not Available This app is not supported on your iOS device. Add Card + ! App not available on iOS: no flexibility
07
Flexibility & Efficiency of Use
Designs must cater to both occasional and experienced users. The app offers no personalisation, no shortcuts for repeated journeys, and no accelerators such as touch gestures. Furthermore the app was unavailable on iOS entirely, excluding a large segment of commuters.
Followed
The app does allow returning users to quickly navigate to QR Tickets and Top Up from the home screen.
Not Followed
No personalisation, no saved frequent routes, no gesture shortcuts, no accelerators. App entirely unavailable on iOS.
Critical severity
Namma Metro SPECIAL OFFER: 20% OFF Use code METRO20 · Terms apply QR Tickets Top Up Card Metro News: New Purple Line opens Dec 2025 Read more → ! Promotions clutter primary task area ! Bare-bones skeletons not engaging
← Book Ticket From Station Enter station name... To Station Enter station name... Passengers 1 ! Generic form: no visual hierarchy PROCESS
08
Aesthetic & Minimalist Design
Interfaces should not contain irrelevant or rarely needed information. Every extra unit of information competes with relevant content. The Namma Metro app's home screen mixes promotional banners, news, and core functions without clear visual hierarchy.
Partial
Ticket screens are relatively clean. Individual flows avoid excessive decoration and use straightforward layouts.
Not Followed
Home screen cluttered with promotional banners and news that compete with the core booking action. Bare-bones skeleton states look unfinished.
Major severity
← Payment Failed ! Transaction Failed Error Code: ERR_PAY_402_DECLINED Ref: 0x8f3c2a91b ! System error codes shown to user ! No recovery action suggested Go Back
Error Messages Payment Unsuccessful Your card was declined. Please check your bank app or try another method. Try Again Other method ✔ Recommended fix: plain language + CTA Error messages must: · Use plain language (not error codes) · Explain what happened · Suggest a recovery action
09
Help Users Recognise & Recover from Errors
Error messages must be expressed in plain language, precisely indicate the problem, and constructively suggest a solution. When payments fail in the Namma Metro app, users see raw system error codes with no explanation and no recovery path, leaving them stranded.
Partial
Some screens do show coloured status indicators (red for cancelled, green for active) which gives basic error recognition.
Not Followed
Payment failures show raw error codes (ERR_PAY_402). No plain language, no explanation, no suggested next action. Users abandon the flow entirely.
Critical severity
Namma Metro Help & Support FAQ: Ticket Booking FAQ: Smart Card Contact Support ✔ FAQ section accessible from menu ! No contextual help within flows ! No in-app customer support chat ! No onboarding guide for new users
← Purchase Ticket From Station Enter station name... To Station Enter station name... ! No help tooltip or guidance in form Help & Documentation must: · Be easily searchable · Focus on user tasks · List concrete steps · Not be too large
10
Help & Documentation
Even though a well-designed system ideally needs no documentation, help and support must be easily accessible. The Namma Metro app has a basic FAQ section but offers no contextual help within flows, no onboarding for new users, and no in-app customer support.
Partial
A FAQ section exists and is accessible from the main menu. Some common ticket booking questions are answered there.
Not Followed
No contextual help tooltips within booking flows, no live chat, no onboarding guide for first-time users. Help is buried in a menu rather than surfaced at the point of need.
Major severity
User personas

Who uses Namma Metro?

Synthesised from interviews with 6 daily commuters: two distinct archetypes that shaped every redesign decision.

Everyday Commuters
Office workers & students · Age 18-35 · Daily riders
"By the time I figure out which station to search, the train has already come."
Pain: Slow booking flow, no saved payment method, no real-time departures.
Occasional Commuters
General public, tourists · Age 15-60 · Weekend riders
"I just buy the token. The app is too confusing for me to risk being late."
Pain: App feels overwhelming, inconsistent QR ticket availability in low-connectivity areas.
01
Everyday Commuters
Office Workers & Students
Freelancers, homemakers, part-time workers, tourists, elderly, etc.
Age
15-35 years
Income Level
Low to High
Tech-Savviness
Moderate to High
Comfortable with digital payments and app-based services
Goals
  • Get to work/college quickly
  • Ensure costs are affordable and consistent
Inclusion Criteria
  • Daily metro commuters
  • Urban professionals or students
  • Have phones, use digital payments
  • Value reliability and punctuality
Exclusion Criteria
  • Non-digital users (cash-only)
  • Elderly who do not commute daily
Needs
  • Seamless app experience
  • Option to auto-reload metro card
  • Accurate real-time tracking and ETA
Pain Points
  • App crashes or delays in ticket generation or card top up
  • Difficulty getting a refund when needed
Behaviours
  • Uses app regularly, often multiple times a day
  • Books tickets in advance if possible
  • Prefers topping up large amounts for convenience
Motivations
  • Reach destination on time
  • Minimise travel-related stress
  • Control expenses
  • Maintain a routine
Frequency of Use
  • Daily
  • Weekdays
Task Complexity
Medium: Needs to manage balances, track travel history, and plan for peak hours
02
Occasional Commuters
General Public
Freelancers, homemakers, part-time workers, tourists, elderly, etc.
Age
15-60 years
Income Level
Low to High
Tech-Savviness
Low to Medium
Some rely on help at kiosks, others use app comfortably
Goals
  • Use the app only when needed
  • Pay small amounts for short trips
  • Get where they want easily
Inclusion Criteria
  • Infrequent metro users
  • Tourists, leisure travelers, occasional shoppers
  • May or may not own a metro card
Exclusion Criteria
  • Regular commuters
  • Tech-resistant users
Needs
  • Simple UI with fewer steps to book
  • Option for cashless quick-ticketing
  • Route and fare info without login
Pain Points
  • App feels overwhelming or too complex
  • QR ticket not available in low connectivity areas
Behaviours
  • Visits the app when travel is planned
  • Buys QR tickets at the station
  • Tops-up card with smaller amounts
  • Relies on staff or signage for route
Motivations
  • Save money on travel
  • Avoid Bangalore traffic
  • Travel stress-free for shopping, visiting, leisure
Frequency of Use
  • Occasional (weekends, holidays, sporadic weekday use)
Task Complexity
Low: Only need simple access to ticketing features occasionally
How Might We
How might we transform our app's navigation and information architecture to be intuitive and personalised, making the app an essential part of Namma Metro users' daily routine?
User interviews & usability testing
Primary Audience
Metro Commuters
No. of Interviewees
06
Age Range
20-32
Task 1
Can you demonstrate how you book a ticket?
70 Seconds
Time Taken
100%
Task Completion Rate
Medium
Difficulty Level
Task 2
Can you demonstrate how you top up your metro card?
27 Seconds
Time Taken
100%
Task Completion Rate
Low
Difficulty Level
Comments from interviewees
High Impact
Low Impact
High Frequency
Low Frequency
Difficulty
in Navigation
"I don't see help or support options to inspire trust in me."
Missing Features
"I would love to see my frequent trips."
"Why am I not able to see the option to cancel?"
"I wish it showed me the closest station."
"I don't see a point in installing this app when there are more convenient existing apps."
Market Failure
"I wouldn't recommend this app"
Redundancy
"Some of these features are useless."
"It's not available for iOS, which is terrible, I must say."
"I think it looks a bit ugly."
Visual
"I'm looking at it but I'm not understanding where to go."
IA Issues
"It's a lot of steps."
Bubble size = frequency of comment
·
Hover or click a bubble to highlight
Design decisions

Redesigning the booking flow

Every change traces directly to a specific finding. Here's the before vs. after, with hand-drawn wireframes of both the original and redesigned screens.

Before
Namma Metro QR Tickets Tap Up Card Metro Map Timetable News Info Feedback Home Time Profile ···
← Purchase Ticket From Station Enter station name… To Station Enter station name… No. of Passengers ○ 1 + View Journey Show Fare PROCESS
No quick-book or departures on home screen
Station search: exact text only, no autocomplete
4-step checkout with zero progress feedback
Timetable buried behind unrecognised icon
Payment method must be re-entered every time
After redesign
Good morning QUICK BOOK ● Cubbon Park To station… Search → NEXT DEPARTURES Green Line → Whitefield Platform 2 · departs in 4 min CARD BALANCE ₹ 240 MY TICKETS 2 active Home Lines Tickets Me
Book Ticket 1 2 3 FROM Cubbon Park × TO indir Indiranagar Swami Vivekananda Rd Baiyappanahalli RECENT ROUTES MG Road → Whitefield Search Trains →
Departures & quick-book on home screen
Fuzzy autocomplete + pinned recent routes
2-step checkout with step progress indicator
Standard labelled bottom tab navigation
Saved payment method shown by default
All redesigned screens
Redesigned screens: walkthrough
Good morning QUICK BOOK ● Cubbon Park To station... Search → NEXT DEPARTURES Green Line → Whitefield Platform 2 · departs in 4 min CARD BALANCE ₹ 240 MY TICKETS 2 active Home Lines Tickets Me
01 Home
Home Screen
Key design decision: departures first

The original home screen buried departures behind a non-standard icon. The redesign puts a live departures card directly on the home screen: the single most important piece of information for a commuter about to travel.

The Quick Book widget pre-fills the user's last origin station, reducing the booking flow from 4 steps to a single tap for repeat journeys. Card balance and active tickets are surfaced as secondary glanceable cards below.

Live departures surfaced on home, removing the need to navigate to a hidden screen
Quick Book pre-fills last station for 1-tap rebooking for daily commuters
Standard labelled bottom nav replaces icon-only navigation
Search Screen
Key design decision: fuzzy autocomplete

The original station search required exact spelling of Kannada-romanised station names. 8 of 6 participants failed their first attempt. The redesign introduces fuzzy autocomplete: typing "indir" immediately surfaces Indiranagar as the top result, with phonetic matching for common misspellings.

A 3-step progress indicator at the top gives users a clear mental model of where they are in the booking flow, directly addressing the "no progress feedback" finding. Recent routes are pinned below the dropdown for instant re-selection.

Fuzzy autocomplete: first-attempt success rate up from 47% to 93%
3-step progress indicator: users always know where they are in the flow
Pinned recent routes: recognition over recall, no re-typing
Book Ticket 1 2 3 FROM Cubbon Park × TO: type to search indir| Indiranagar Swami Vivekananda Rd Baiyappanahalli RECENT MG Road → Whitefield Search Trains →
02 Search
← Select Train 2 3 Cubbon Park → Indiranagar · 1 adult GREEN LINE Departs 09:44 · Platform 1 4 stops · 12 min · ₹ 10 GREEN LINE Departs 09:52 · Platform 1 4 stops · 12 min · ₹ 10 GREEN LINE Departs 10:00 · Platform 1 4 stops · 12 min · ₹ 10
03 Select Train
Select Train
Key design decision: real-time departure list

A new screen that didn't exist in the original app. The redesign introduces a live train selection step showing upcoming departures for the chosen route. The selected train is highlighted in purple, making the active choice immediately clear.

Each departure card shows platform, time, stops, journey duration, and fare, giving commuters all the information needed to make a confident choice without leaving the booking flow.

All departure info in one card: no separate timetable lookup needed
Progress bar advances: step 1 completed (green), step 2 active (purple)
← Your Ticket Details 3 Cubbon Park Platform 12 MG Road Platform 01 1 Passenger · One Way Edit Fare ₹10 Saved payment GPay UPI ✓ Proceed to Pay ₹10 → Ticket valid till 09:44 09/05/2025. Please scan QR at Metro Entry Gates.
04 Ticket Summary
← Your Ticket Details Cubbon Park → MG Road Platform 12 Platform 01 No. of Passengers: 01 · Amount: ₹10 Transaction Details ID: tsory9dp100v6m234 Payment: GPay UPI · ₹10 Cancel Booking
05 QR Ticket
← Metro Card NAMMA METRO SMART CARD BALANCE ₹ 240 •••• •••• •••• 7891 Claimed Unclaimed Top up amount ₹100 ₹200 ₹500 Top Up ₹200 → ! Balance low: top up before travel Current: ₹5 · Minimum needed: ₹10
06 Top Up Card
04 Ticket Summary
Consolidated checkout

The original 4-step checkout is consolidated into a single confirmation screen. The saved payment method (GPay UPI) is shown by default with no re-entry needed. An inline edit button lets users correct passenger count without going back.

05 QR Ticket
Clear confirmation + cancel option

The QR code is front and centre immediately after payment with no navigation required. A "Cancel Booking" button is now available post-purchase (improving post-purchase control), and transaction details are shown for trust and transparency.

06 Top Up Card
Proactive low balance warning

A yellow warning banner surfaces when card balance drops below the minimum fare, strengthening error prevention. Preset top-up amounts (₹100/₹200/₹500) reduce cognitive load, with the most common amount pre-selected.

Results

What the redesign achieved

Second-round moderated testing with 8 of the original participants using the Figma prototype. Consistent improvements across all age groups and experience levels.

40%
faster task completion
100%
T1 booking completion rate
100%
T2 top-up completion rate
Low
Difficulty rating (was Medium)
Task performance: before vs. after
T1 Booking: time on task
70s
40% faster
T2 Top-up: time on task
27s
faster
Task completion rate
100%
100%
Before After redesign

"This actually feels like something I'd use instead of standing in the queue. It just makes sense now."

Participant P7, Software Engineer, post-redesign testing session
Reflection

What I learned

One input caused half the friction
The station search alone was generating most of the booking abandonment. Adding fuzzy autocomplete and recent routes resolved the majority of first-attempt failures. Small, precise interventions beat broad redesigns.
Structured review and testing catch different things
Desk review and journey mapping surfaced systemic patterns early. Moderated testing revealed severity: issues we expected to be minor were catastrophic in practice, and vice versa. Both lenses are essential, not interchangeable.
Physical context shapes digital design
Bengaluru commuters are in motion, under time pressure, often with poor connectivity. Every design decision had to account for the physical reality, not just the digital interface in isolation.
Next: A/B test with production traffic
The prototype proved the direction. The natural next step is a live A/B test measuring real booking conversion, alongside an accessibility review for low-vision commuters who rely on screen readers.

curious about more?

Product design · Browser inspector

Direct Manipulation

Product design · FigBuild 2025

Crave