PROBLEM
PROBLEM
PROBLEM
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.
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.
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.
USABILITY TESTING
USABILITY TESTING
USABILITY TESTING
Three regular users joined remote sessions featuring a pre-test interview, think-aloud task-based testing, and a final feedback discussion. I observed their interactions while note-taking on facial expressions and friction points, yielding insights that shaped the following key findings.
Three regular users joined remote sessions featuring a pre-test interview, think-aloud task-based testing, and a final feedback discussion. I observed their interactions while note-taking on facial expressions and friction points, yielding insights that shaped the following key findings.
Three regular users joined remote sessions featuring a pre-test interview, think-aloud task-based testing, and a final feedback discussion. I observed their interactions while note-taking on facial expressions and friction points, yielding insights that shaped the following key findings.
In-app Navigation
In-app Navigation
In-app Navigation
The absence of a consistent back button and reliance on a hidden hamburger menu disrupted task flow.
The absence of a consistent back button and reliance on a hidden hamburger menu disrupted task flow.
The absence of a consistent back button and reliance on a hidden hamburger menu disrupted task flow.
Trip Planning
Trip Planning
Trip Planning
Users struggled with understanding route options, and they felt the information was overloaded and poorly organized.
Users struggled with understanding route options, and they felt the information was overloaded and poorly organized.
Users struggled with understanding route options, and they felt the information was overloaded and poorly organized.
Information Overload
Information Overload
Information Overload
Dense text and a poor information hierarchy confused users, reducing the speed and efficiency of completing tasks.
Dense text and a poor information hierarchy confused users, reducing the speed and efficiency of completing tasks.
Dense text and a poor information hierarchy confused users, reducing the speed and efficiency of completing tasks.
Feature Discoverability
Feature Discoverability
Feature Discoverability
Users had difficulty finding or understanding several app features, such as route favorites and clickable details within trip options.
Users had difficulty finding or understanding several app features, such as route favorites and clickable details within trip options.
Users had difficulty finding or understanding several app features, such as route favorites and clickable details within trip options.
MISSION
MISSION
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.
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.
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.
HAMBURGER MENU TO BOTTOM NAVBAR
HAMBURGER MENU TO BOTTOM NAVBAR
HAMBURGER MENU TO BOTTOM NAVBAR
The original hamburger menu hid key functions behind multiple tabs and a cluttered, text-heavy sidebar, causing poor discoverability and cognitive overload. By replacing it with a modern bottom navigation bar, which organizes core features into four clearly labeled tabs with intuitive icons, the redesign makes every function immediately visible and simplifies navigation.
The original hamburger menu hid key functions behind multiple tabs and a cluttered, text-heavy sidebar, causing poor discoverability and cognitive overload. By replacing it with a modern bottom navigation bar, which organizes core features into four clearly labeled tabs with intuitive icons, the redesign makes every function immediately visible and simplifies navigation.
The original hamburger menu hid key functions behind multiple tabs and a cluttered, text-heavy sidebar, causing poor discoverability and cognitive overload. By replacing it with a modern bottom navigation bar, which organizes core features into four clearly labeled tabs with intuitive icons, the redesign makes every function immediately visible and simplifies navigation.
CLEANER BUS TIMES TESTING
CLEANER BUS TIMES TESTING
CLEANER BUS TIMES
CLEANER BUS TIMES TESTING
Participants found the original interface text heavy and chaotic, with the trip planning feature awkwardly placed and lacking visual cues, making it hard to distinguish buses or grasp key information at a glance. The redesigned Live Tracking tab uses dynamic color coded cards that prioritize information hierarchy and clearly present essential route data.
Participants found the original interface text heavy and chaotic, with the trip planning feature awkwardly placed and lacking visual cues, making it hard to distinguish buses or grasp key information at a glance. The redesigned Live Tracking tab uses dynamic color coded cards that prioritize information hierarchy and clearly present essential route data.
Participants found the original interface text heavy and chaotic, with the trip planning feature awkwardly placed and lacking visual cues, making it hard to distinguish buses or grasp key information at a glance. The redesigned Live Tracking tab uses dynamic color coded cards that prioritize information hierarchy and clearly present essential route data.
IMPROVED LIVE BUS LOCATION
IMPROVED LIVE BUS LOCATION
IMPROVED LIVE BUS LOCATION
The original map view displayed live bus locations clearly, but the bottom drawer listing service disruptions and upcoming bus times was cluttered and used the same generic colors for every route. The redesign cleans up this information with a streamlined layout that matches each bus’s color, adds a search bar at the top, and introduces a refresh button for real-time updates, while moving service disruption alerts into a pop-up to reduce clutter.
The original map view displayed live bus locations clearly, but the bottom drawer listing service disruptions and upcoming bus times was cluttered and used the same generic colors for every route. The redesign cleans up this information with a streamlined layout that matches each bus’s color, adds a search bar at the top, and introduces a refresh button for real-time updates, while moving service disruption alerts into a pop-up to reduce clutter.
The original map view displayed live bus locations clearly, but the bottom drawer listing service disruptions and upcoming bus times was cluttered and used the same generic colors for every route. The redesign cleans up this information with a streamlined layout that matches each bus’s color, adds a search bar at the top, and introduces a refresh button for real-time updates, while moving service disruption alerts into a pop-up to reduce clutter.
REVAMPED UPDATES TAB
REVAMPED UPDATES TAB
REVAMPED UPDATES TAB
Updates from CityBus were too hidden in the hamburger menu, while the prominent filter and subscribe buttons broke UX conventions and the text felt heavy and cluttered. The new Updates tab uses lighter cards with a clean “Read More” link and adds a search function for quick access. Filters are now a dropdown and the subscribe option appears as a link at the bottom, aligning with standard UX practices.
Updates from CityBus were too hidden in the hamburger menu, while the prominent filter and subscribe buttons broke UX conventions and the text felt heavy and cluttered. The new Updates tab uses lighter cards with a clean “Read More” link and adds a search function for quick access. Filters are now a dropdown and the subscribe option appears as a link at the bottom, aligning with standard UX practices.
Updates from CityBus were too hidden in the hamburger menu, while the prominent filter and subscribe buttons broke UX conventions and the text felt heavy and cluttered. The new Updates tab uses lighter cards with a clean “Read More” link and adds a search function for quick access. Filters are now a dropdown and the subscribe option appears as a link at the bottom, aligning with standard UX practices.
FINAL TESTING
FINAL TESTING
FINAL TESTING
Three different regular users took part in the final usability sessions. To ensure consistency, we employed the same components, task scenarios, and think-aloud protocol used in the initial evaluation.
Three different regular users took part in the final usability sessions. To ensure consistency, we employed the same components, task scenarios, and think-aloud protocol used in the initial evaluation.
Three different regular users took part in the final usability sessions. To ensure consistency, we employed the same components, task scenarios, and think-aloud protocol used in the initial evaluation.
In-app Navigation
In-app Navigation
In-app Navigation
The new bottom navigation bar and consistent back button led to smoother task flows with minimal frustration.
The new bottom navigation bar and consistent back button led to smoother task flows with minimal frustration.
The new bottom navigation bar and consistent back button led to smoother task flows with minimal frustration.
Trip Planning
Trip Planning
Trip Planning
The streamlined design led to clarity of route options and the intuitive breakdown of journey steps.
The streamlined design led to clarity of route options and the intuitive breakdown of journey steps.
The streamlined design led to clarity of route options and the intuitive breakdown of journey steps.
Information Overload
Information Overload
Information Overload
Enhanced visual hierarchy, along with improved data presentation, contributed to a significantly reduced cognitive load.
Enhanced visual hierarchy, along with improved data presentation, contributed to a significantly reduced cognitive load.
Enhanced visual hierarchy, along with improved data presentation, contributed to a significantly reduced cognitive load.
Feature Discoverability
Feature Discoverability
Feature Discoverability
Clear labels and intuitive icons improved awareness of previously hidden features like real-time updates.
Clear labels and intuitive icons improved awareness of previously hidden features like real-time updates.
Clear labels and intuitive icons improved awareness of previously hidden features like real-time updates.