BIT SIZE CASE STUDY
Metro travel, redesigned
All you need metro app from first interaction to last exit. Covering navigation, ticketing, real-time schedules, and AR station wayfinding.
TYPE
Mobile App Design
PLATFORM
iOS & Android
Scope
Research & Design
TIMELINE
6 Weeks
01
Introduction
Metro systems carry millions of people daily yet the software supporting them is fragmented. Riders use Google Maps for routes, a separate transit app for schedules, a payment app for tickets, and nothing at all for station orientation. Metroute was designed to close that gap — one thoughtful product covering the journey from planning at home to reaching the right exit.
HIGH LEVEL OVERVIEW OF THE PLATFORM
01
Problem
Metro systems are built for volume, not for the person navigating them for the first time. The fragmented app ecosystem turns a 20-minute commute into a coordination problem — with 78% of surveyed users relying on 4 or more apps per journey.
USER JOURNEY
Route planning, line selection, ticket purchase, interchange logic
Stop counting, connection timing, crowding, transfer platform
Exit identification, neighbourhood orientation, last-mile connection
core pain points
Map interpretation
Complex route maps overwhelm infrequent users and tourists.
Decision overload at junctions
Multiple platform choices with no contextual guidance.
Station tracking
Users lose count of stops and miss their destination.
Payment fragmentation
Inconsistent payment support creates friction at entry gates.
Exit confusion
Wrong exits force costly backtracks after leaving the train.
Crowding uncertainty
No visibility into peak-hour car-level occupancy before boarding.
02
Approach
Survey-based research across three user archetypes — daily workers, occasional riders, and tourists — supplemented by contextual observation across 4 metro stations during peak and off-peak hours.
RESEARCH
ONLINE RESEARCH
200+ respondents, 3 cities
Field observation
4 stations, peak + off-peak
Competitive audit
8 transit apps evaluated
USER TESTING
12 participants on prototype
USER FINDINGS & SURVEY DATA
78% used more than 3 apps per metro journey
34% had spent more than 10 mins finding the right platform
61% users waited at the queue to get tickets
91% expressed interest in a unified metro companion app
03
Designs
We explored three primary approaches to in-station navigation before settling on a layered model. Each was evaluated against the 6 pain points and tested with users in real metro environments.
INFORMATION ARCHITECTURE
HAND DRAWN WIREFRAMING
Diverged into several possible interaction models, tested different layout structures
05
Final Designs
Step by step design decision from inherited screen to the new screen.
BREAKING DOWN THE CONTENT
1
The script is divided into distinct scenes, each clearly marked with its corresponding timestamp.
2
The new seek bar also divides the entire timeline into scenes, matching the division on the content side... making navigation easier.
adding structure
3
The scene functionality bar displays detailed information such as duration and word count. A play icon allows users to preview individual scenes, offering more precise control over video navigation
4
Voiceover and media assets are now embedded directly within each fragment, allowing instant access without the need to open the full scene properties
enhanced navigation
5
A new scene panel was introduced, significantly improving the efficiency of navigating between scenes.
scene level regeneration
6
Whenever the user makes an edit to a scene or fragment, a regeneration icon appears next to the scene functionality bar, indicating that changes have been made and the scene can be regenerated.
background regeneration
7
The scene blocks itself while getting regenerated in the background
You can see the status of the scene change as its details collapse.
The end
Yashvardhan Bhardwaj
Senior User Experience Designer
Designed with ❤️, Logic, and AI.
Copyright ©2026. All rights reserved.