ViaBus
UX/UI Case Study
11/2023 - 12/2023
The Challenge
The city has expanded its bus routes, leading to seven different bus lines now stopping at the Washington and State stop. Riders have expressed frustration about the lack of clear and easily accessible information regarding upcoming buses and arrival times at this bus stop.
The Solution
Worked with a midsized Midwestern metropolis transit system to develop a user-friendly interface, enabling riders to effortlessly determine the arrival times of buses at the Washington and State bus stop. This solution ensures that every rider can easily ascertain when each bus reaches the Washington & State bus stop, understand the amount of time they have to arrive at the bus stop before their needed bus arrives, and select from one of seven bus lines to view a list of upcoming arrival times for that line at the Washington & State bus stop
Deliverables
Survey
Competitive Analysis
Personas
User Stories
User Flows
Wireframes
Visual Design
User Testing
Clickable Prototype
Role
UX Research
Information Architecture
UI Design
Usability Testing
Tools
Figma
Google Forms
Zoom
Notion
Adobe Color
Audience
Individuals 18+ years old with a mobile device.
01
Discover
Competitive analysis
I conducted a SWOT analysis of popular transit applications including Google Maps, CityMapper, and Moovit. The purpose of this analysis was to explore the current competitive environment, focusing on pinpointing internal strengths and weaknesses, as well as external opportunities and threats, to improve my bus app
Strengths
Robust navigation applications that offer a wide range of transit options to help individuals reach their destinations using various transportation methods.
Weaknesses
High cognitive load of information poses a challenge for bus riders seeking simple bus schedules. Additionally, apps display ads on the screen, which can be more disruptive for users.
Opportunities
-
Simplifying the user interface of bus schedules
-
Offering ad-free version bus app
Threats
Competition from new apps that might bring innovative features
​
Survey
34 respondents
13 male | 21 female
The majority of survey participants were daily riders aged between 18 to 44, using the bus for commuting to work, school, and social events.
73% of respondents experienced confusion when trying to catch the right bus, especially when multiple bus lines served the same stop.
70% of riders reported having to wait longer than expected for the bus at least twice a month due to unclear information about its arrival time
84% of bus riders rely on mobile bus applications for information about bus arrival times
60% express frustration with the cognitive overload and advertisements that obstruct their ability to find a simple bus schedule
Interview
Contact was made with survey respondents who provided their email addresses for follow-up interviews. To ensure diversity among participants, two interviewees were selected based on distinct backgrounds: the first, a college student with a varied schedule, and the second, a white-collar worker with a regular 9 am to 5 pm work schedule
Key Findings
Primary Goals of Bus Riding:
Riders use buses to save money, avoid parking hassles, and contribute to environmental sustainability.
Reliance on Bus Arrival Information:
Riders heavily depend on bus apps to know when their bus will arrive. Accuracy and timeliness are crucial for their daily commute.
Complexity and Lack of Details:
Some bus apps are too confusing and lack specific information about bus stops. Users struggle to navigate them effectively.
Personas
To gain a deeper insight into the target audience, two user personas were developed based on the data and feedback gathered from user surveys and interviews. These personas represent distinct segments of the potential user base, highlighting their specific characteristics, needs, and preferences. This strategic approach is intended to enhance the effectiveness of my product's development and its alignment with user expectations. expectations.
02
Define
User Stories
User stories were generated during the discovery phase and from business requirements, revealing that bus riders are primarily interested in essential bus information. This includes identifying approaching buses at their bus stop, knowing the estimated arrival time, and understanding the expected travel time to reach their bus stop
User Flow
To outline the user stories, a user flow has been created that avoids the need for users to sign in and eliminates unnecessary features. The objective is to streamline the process, providing information on arriving buses, their timings, and directions at the Washington and State stop with minimal screens and steps
Sketches
Considering user stories and user flow, simple and user-friendly sketches have been crafted to illustrate the ease of finding a bus stop and checking upcoming bus details, including timings and directions, all within a main single screen.
​
The focus is on ensuring the app's ease of use. Whether users opt to share their location or not, accessing the necessary information is made quick and straightforward. The design, intentionally kept simple and user-friendly, ensures a hassle-free experience for all. The layout is intuitive, enabling users to swiftly grasp and utilize the app's features.
Wireframes
After initially sketching my wireframes, I've transformed them into digital versions, drawing from the original sketches, user stories, and requirements. These wireframes present a detailed visual representation, clarifying how the final product will look and function. They feature specific layout and design elements, such as the placement of the keyboard at the bottom of the screen and the navigation buttons
03
Develop
ViaBus
The chosen name 'ViaBus' prioritizes brevity, simplicity, and memorability, ensuring users easily understand the app's purpose. The term 'via' suggests routes or paths, aligning well with the app's transportation focus, and the universal understanding of 'via' and 'bus' enhances global appeal and searchability.
Logo
The app's icon features a blue bus with a yellow circle on top, designed for quick recognition on mobile devices. The universally familiar bus icon ensures easy brand identification. The intentional contrast between blue and yellow conveys trust and adds a lively touch, making the logo stand out.
Color Palette
Because the app is designed with inspiration from Chicago, the color scheme features blue and red, reflecting the hues of the city's flag. To establish a friendly and balanced aesthetic, yellow is thoughtfully incorporated. Red, in particular, is used to accentuate crucial components strategically. Finally, a light grey background provides a neutral canvas, harmoniously complementing the blue, red, and yellow tones.
Chicago's flag
Typography
With a focus on accessibility in reading, a single font "Roboto" in black tone has been selected for readability, simplicity, and minimal distraction. The use of the WCAG contrast checker guarantees visibility on blue, red, and yellow backgrounds, maintaining a minimum font size of 16pts.
04
Deliver
Visual Design
In order to provide users with an authentic preview of the app's aesthetics during the testing phase, I've integrated my color and typography scheme into the wireframes. This was done using Figma, providing a realistic and interactive preview of how the app will look and feel. This approach not only enhances the visual appeal of the wireframes but also allows users to experience the app's design elements, like color combinations and font choices, in a way that closely mirrors the final product
Mockups Version 1
Usability Testing
For the user testing phase, I arranged face-to-face sessions with three different individuals, presenting each with the same test scenario. My aim was to observe how each person navigated the app, focusing on their natural reactions and overall ease of use. By having each tester go through the same scenario, I could directly compare their experiences, highlighting any common issues or valuable insights. This method was crucial for gathering honest, practical feedback, helping to refine the app into a more user-friendly and intuitive tool for my target audience.
Testing Scenarios:
​
​
Find buses approaching the Washington and State stops.
​
Find the timetable for bus line 4 arriving at Washington and State.
​
Find directions from the current location to the Washington and State stop.
Testing Process:
​
Three user tests were conducted: one in person. All users participated in the bus survey.
Results:
All users successfully completed the tasks.
Testing Insights
User 1 expressed a desire to have the option to go back and enable location after initially choosing not to allow it.
User 2 suggested displaying future bus times in both AM and PM instead of estimated times, eliminating the need for mental calculations.
User 3 found the "Upcoming Departures" title confusing, mistaking it for a button due to its blue background and square frame.
Mockups Version 2
Based on the feedback from usability tests, I've implemented several enhancements to the app:
​
-
GPS Icon: I've introduced a GPS icon that's visible throughout the app. A blue icon signifies active GPS, while a red icon with a question mark indicates GPS is off. Users can click the red icon to activate location mode.
-
Bus Arrival Time Format: The bus arrival times are now displayed in AM/PM format instead of just minutes. This approach simplifies readability and avoids mental time conversions.
-
Upcoming Departures Title: I've made the "Upcoming Departures" title bold for better visibility and removed its background color to minimize confusion.
-
New Screens for Non-GPS Functionality: I have created five new screens specifically designed for bus stop and route searches that function without the need for GPS. This update recognizes that screens with and without GPS capabilities might display slightly different results, thus offering more flexible options for all users.
​
In the final design, there are a total of 14 screens, effectively fulfilling the app's goal of offering a user-friendly interface. These screens allow riders to conveniently identify approaching buses and their arrival times, estimate how much time they have to reach the stop, and select a specific bus line to view its upcoming arrival times at the Washington and State bus stop.
​
​
Splash Screen
Request Permissions
Nearby Stops
Bus Stop Search
Search Results
Bus Stop Search
(No GPS)
Search Results
(No GPS)
Approaching Buses
Approaching Buses
(No GPS)
Bus Timetable
Starting Directions to Bus Stop
Directions to Bus Stop
Starting Directions to Bus Stop (No GPS)
Directions to Bus Stop (No GPS)
Final Takeaways
This entire experience served as a profound learning journey. It deepened my understanding of the design process, particularly the significance of conducting surveys and creating user personas to define my user base. Throughout, I consistently referred back to the initial brief to ensure the proposed solutions remained in line.
Next Step
I will begin developing the map interaction and core functions for ViaBus, followed by more extensive usability testing
