Muhammad Affan
Muhammad Affan
Muhammad Affan
CityBus Redesign
CityBus Redesign
Project Duration
3 months
My Role
UX Researcher | UI Designer
Team Members
Muhammad Affan Ashraf
Project Duration
Project Duration
4 months
4 months
My Role
My Role
UX Researcher | UI Designer
UX Researcher | UI Designer
Team Members
Team Members
Afaq, Muhammad Affan, Mustafa, Sara, Simra
Afaq, Muhammad Affan, Mustafa, Sara, Simra
Context
Context
The CityBus mobile application is a crucial tool for residents of Lafayette and West Lafayette and students at Purdue University, enabling real-time transit information and trip planning. However, users faced major hurdles with the user experience, including but not limited to confusing navigation and inefficient information presentation.
The CityBus mobile application is a crucial tool for residents of Lafayette and West Lafayette and students at Purdue University, enabling real-time transit information and trip planning. However, users faced major hurdles with the user experience, including but not limited to confusing navigation and inefficient information presentation.
Design Cycle
Design Cycle
Task at Hand
Problem Description
Problem Description
Users struggle to use the CityBus due to a cluttered interface, unclear call-to-actions, and an overly text-heavy design that led to navigation errors and frustration. The initial design made it difficult for users to plan trips, access live tracking, and quickly understand service updates.
Our Mission
Our Mission
We aimed to transform the CityBus app by addressing these usability pain points with a user-centered redesign. Our mission was to streamline the interface, improve information hierarchy, and enhance the overall user experience to make public transit more accessible and reliable.
Task at Hand
Initial User Testing
Methodolgy
Methodolgy
Three regular users participated in remote usability sessions. Each session involved a pre-test interview, task-based testing, and a final feedback session. The testing protocol included:
Task Scenarios
Task Scenarios
Task Scenarios
Task Scenarios
Think Aloud
Think Aloud
Think Aloud
Think Aloud
Data Collection
Data Collection
Data Collection
Data Collection
Key Findings
Key Findings
Navigation Challenges
Navigation Challenges
Navigation Challenges
Navigation Challenges
Issues with Trip Planning
Issues with Trip Planning
Issues with Trip Planning
Issues with Trip Planning
Information Overload
Information Overload
Information Overload
Information Overload
Limited Feature Discoverability
Limited Feature Discoverability
Limited Feature Discoverability
Limited Feature Discoverability
Initial User Testing
Design Changes
Design Changes
Transition from Hamburger Menu to Bottom Navigation Bar
Hover over each screen to read more.
❌ Old Screen
Swipe left to see new designs.
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
✅ New Screen
❌ Old Screen
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
✅ New Screen
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
Trip Planning
Trip Planning
❌ Old Screen
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
✅ New Screen
Bus Timings
Bus Timings
❌ Old Screen
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
✅ New Screen
Live Bus Location
Live Bus Location
❌ Old Screen
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
✅ New Screen
Updates
Updates
❌ Old Screen
The hamburger menu was a major usability issue. Multiple tabs led to poor feature discoverability as users often overlooked or struggled to locate key functions. The cluttered, text-heavy sidebar also caused cognitive overload, leaving users uncertain about prioritization and navigation.
The redesigned interface adopts a bottom navigation bar—a more modern and user-friendly solution that ensures high visibility of core features. This shift organizes the app’s functionality into four clearly defined tabs, each equipped with an intuitive label and icon, making navigation simpler and more efficient.
✅ New Screen
Final User Testing
Final User Testing
Methodology
Methodology
Three different regular users participated in the final usability sessions. Each session involved a pre-test interview, task-based testing, and a final feedback session. The testing protocol included: In order to maintain consistency, I used the same task scenarios and think-aloud methodology as the initial user testing.
Three different regular users participated in the final usability sessions. Each session involved a pre-test interview, task-based testing, and a final feedback session. The testing protocol included: In order to maintain consistency, I used the same task scenarios and think-aloud methodology as the initial user testing.
Key Findings
Key Findings
Improved In-App Navigation
Improved In-App Navigation
Improved In-App Navigation
Improved In-App Navigation
New & Improved Trip Planning
New & Improved Trip Planning
New & Improved Trip Planning
New & Improved Trip Planning
Improved Feature Discoverability
Improved Feature Discoverability
Improved Feature Discoverability
Improved Feature Discoverability
Overall Satisfaction
Overall Satisfaction
Overall Satisfaction
Overall Satisfaction
