Delhi Metro App | UX Redesign
Table of Contents
Project Brief
A redesign of the Delhi Metro app to prioritize speed, ease of access, and reduction of user steps during high-traffic times when efficiency is critical. The aim is to minimize clicks, focus on core functionalities, and streamline the user journey so that essential information is readily accessible in a busy or hurried environment.
Problem
Delhi Metro riders particularly during peak hours, face challenges using the app due to overcrowding, limited network access, and the need for quick actions.
- The original app design required multiple steps for commonly used functions like route planning, fare estimation, and locating the nearest station, leading to user frustration in crowded conditions.
Crafted Solution
A streamlined redesign of the app with the following core principles:
- Fewer Clicks for Core Tasks: Reducing the steps to access essential information such as routes, fares, and station locations.
- Prioritized User Flow: Ensuring that commonly used functions are immediately accessible from the home screen.
- Intuitive, Single-Screen Interface: Key actions can be performed on a single screen without deep navigation.
- Optimized for Offline Use: Ensuring that essential information is available even with intermittent network connectivity.
Timeline
The Students App for iOS streamlines academic management with features like course tracking, assignment reminders, and a personalized calendar, empowering learners to stay organized and engaged.
Project Goals
The primary goals of this project are to:
- Minimize User Effort: Achieve core tasks within a maximum of three clicks.
- Boost Usability During Rush Hours: Simplify interactions for users in crowded or low-attention situations.
- Provide Core Features First: Make essential features like route planning, fare estimates, and station information immediately visible.
- Enable Offline Functionality: Maintain usability even with weak or no internet connection.
Research
Understand user frustrations and pain points specific to high-traffic times when quick, effortless navigation is paramount.
Methods:
- Surveys: Conducted with 50 daily Delhi Metro commuters to gauge common app usage patterns, peak-hour pain points, and desired features.
- Interviews: In-depth discussions with 15 frequent riders to get insights into specific features they use, challenges faced, and expectations for the app during rush hours.
Key Findings:
- Overwhelming Menus: Users found the existing menus too cluttered and challenging to navigate under rushed conditions.
- Essential Features Buried: Key functionalities like route maps and fare estimates were not immediately accessible.
- Offline Accessibility: Network connectivity in the metro is inconsistent, limiting access to real-time data.
- UI Overload: Users wanted a simplified design, especially during high-stress times when they needed information quickly.
User Personas
Based on research, I developed three key personas to guide the design:
Each persona helped guide design decisions, with user needs reflecting simplicity, clarity, and minimal setup.
User Research
The research uncovered common pain points in existing finance apps:
- Overcomplicated Interfaces: Users felt overwhelmed by the number of features.
- Lack of Personalization: Many apps didn’t adapt to unique spending habits.
- Poor Insights: Users needed clear, easy-to-digest visualizations of their spending patterns.
This guided the decision to keep the app interface minimal and focus on key metrics that help users take actionable steps toward financial health.
Brainstorming & Ideation
Key ideas generated during brainstorming sessions:
- Main Feature Tabs on the Home Screen: Route planner, nearest station locator, and fare estimator as primary tabs.
- Simplified Search with Auto-Suggestions: Quick-access search bar with station suggestions.
- One-Click Route Planning: Immediate route options displayed after selecting source and destination stations.
Sitemap
Key ideas generated during brainstorming sessions:
Sketches & Wireframes
After generating a multitude of ideas, we moved to the sketching phase, creating low-fidelity wireframes to visualize the layout and functionality of the app. These sketches allowed us to explore different design concepts rapidly and test various user flows.
- Low-Fidelity Wireframes: Quick sketches focusing on arranging high-priority features on the home screen for instant access. Ensured each action could be completed with minimal clicks.
- High-Fidelity Wireframes: Created refined wireframes in Figma, showcasing a one-tap navigation for common tasks and a search bar optimized for auto-completion.
Digital Wireframes
Feedback from initial prototypes led to these major iterations:
Based on feedback from usability testing, I made the following adjustments:
- Combined Search & Route Functionality: Integrated route planning into the main search function to avoid extra steps.
- Optimized Icons for Quick Recognition: Redesigned icons for route, fares, and stations to make them immediately recognizable.
- Added ‘Last Route’ Quick Access: A shortcut to re-access the last searched route to save time for regular commuters.
Final Design
The redesigned Delhi Metro app offers a highly accessible and responsive interface tailored for high-traffic conditions. Core screens include:
The redesigned Delhi Metro app offers a highly accessible and responsive interface tailored for high-traffic conditions. Core screens include:
- Home Screen: Features main tabs for route, fare, and station information with large, easy-to-press buttons.
- Search & Route Planner: Unified search function that suggests routes, stations, and calculates fare estimates in one screen.
- Offline Mode: Key maps and saved route information available without network connectivity.
Style Guide
To ensure consistency across the app, we developed a comprehensive style guide that outlined design principles, color palettes, typography, and UI elements.
Colors
A well-defined color palette enhances brand identity, ensuring visual appeal and accessibility while guiding user interactions throughout the app.
Typography
Selected typography prioritizes readability and hierarchy, creating a seamless flow of information and ensuring that users can easily navigate the content.
User Testing
Objective: Ensure the app’s redesigned interface achieves the goal of fewer clicks and faster access to key functions.
Methodology:
- Participants: 20 frequent metro users.
- Key Metrics: Number of clicks to access route planner, time taken to complete a search, and user satisfaction.
Results:
- 80% Faster Access: Users accessed the route planner in under 3 clicks.
- 95% Positive Feedback: High satisfaction with ease of use and offline functionality.
- Feedback Implementations: Minor tweaks to button placement and labeling for added clarity
Conclusion
The redesigned Delhi Metro app provides a streamlined experience optimized for peak-hour commuters. It enables users to access essential information quickly, with minimal steps, and provides offline functionality to accommodate network issues.
Scope of Improvement
- Real-Time Train Updates: Adding real-time train arrival and departure information for enhanced planning.
- Personalized Suggestions: AI-driven feature to suggest alternate routes during peak hours or disruptions.
- Live Crowdedness Alerts: Indicator showing crowdedness levels at specific stations or on certain routes.
What Could have been better
- Expanded User Testing: Additional testing with a broader demographic, including non-frequent riders, could provide insights for a more universally accessible app.
- Enhanced Offline Capabilities: Further development for caching routes and map data to support even longer offline use.
Feedback
Your insights matter! Share your thoughts or feedback on this case study to help me improve and grow as a designer.