UX/UI Design
Bus Tracker
Bus Tracker is a mobile app designed to help a transportation agency relay its bus schedule to their customers.
Role
Research
Interaction Design
Visual Design
Problem
The company has recently added more bus routes to their stations. The additional buses cause confusion among riders because they are rushing to the stations only to catch the wrong bus. The transportation company wants to build an app that show riders the expected bus schedule of each bus. Riders are currently complaining the most about the bus stop at Washington and State, which is served by seven bus lines.
Target Users
Target users are the bus riders who take the bus at the Washington and State stop.
Business Requirements
Any rider can tell when each of the buses arrives at the Washington & State bus stop.
All riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Research Methodology
My research strategy is to evaluate the competitors and use their strengths and weaknesses as a base model of my app. Then I did surveys and conducted user interviews to further expand on the needs of the app.
Competitive Analysis
User Surveys
Key Findings
Most riders use the bus 4-5 times a week.
Most bus riders are employed, they most likely are in a rush every morning.
Majority of riders feel having an app prevents them from rushing out the door.
Showing what time a bus arrives is more important than how much time before the bus arrives. (opportunity to highlight the time a bus arrives in terms of visual hierarchy vs how much time left)
User Interviews
In what ways will a bus schedule app impact your morning commute?
“An app would allow me to relax in the morning and take it slow knowing that I can pinpoint exactly when my bus will be at my station.”
How many times do you take the bus in a week?
“5 times”
Which is more important, showing what time a bus arrives or showing how much time until a bus arrives? And why?
“Showing how much time until a bus arrives because I can immediately tell how much time I have instead of calculating how much time.”
Are there any specific functions you want on a bus schedule app?
“I would like to see an alert that tells when how much time until my bus is at my station.”
What time do you normally take the bus everyday and how often do you catch your bus?
“I normally take the bus every weekday at 7:30 and I miss my bus about once or twice every week.”
Takeaways
A bus app improves a riders mental health by relieving the guesswork from the bus schedule
Showing how much a time until a bus arrives should have a higher hierarchy than when a bus arrives because the user doesn’t have to do any calculating
An alert function could eliminate the need for users to constantly check the app for bus times
User Persona
User Flows
Project Brief
Client wants their riders to know…
What specific bus is arriving
When that bus is arriving
How much time they have to get to the bus stop
High-priority user stories
As a bus rider, I want to know when my bus is arriving at the Washington and State bus stop, so I can calculate how much time I have to reach the bus stop.
As a bus rider, I want to know the next bus arriving at the Washing and State bus stop, so that I don’t rush to the bus stop if it is not my bus
As a bus rider, I want the ability to view future arrival times for any of the 7 bus lines (serving Washington and State), so that I know when my bus arrives.
Site Map
Testing Prototype
Tasks
Check arrival times for Bus 1
Check future arrival times for Bus 1
Go to home screen from Bus 1 Arrival Time screen
Check bus queue arrival times for Washing and State bus line from Future Arrival Time screen
Observations
Users checked for arrival times for bus 1 effectively, using both the drop down menu and the bus times on the home page
Some users struggled to get to the future arrival time screen, this screen was not accessible from the home page
Home page was easy to find from any screen
Users attempt to click on the boxes that show future arrival times because the previous screens were clickable. Need to change visual for those boxes.
Typography & Logo
High Fidelity Prototype 1.0
Usability Test
Scenario
You are meeting your friend in the mall and are running late. You need to take the bus that is 5 blocks away. You take out the bus app from the city.
Tasks
Use the app to check when bus 1 will arrive
Use the app to check how much time before bus 1 arrives
Use the app to check future arrival times for bus 1
Observations
Checking when bus 1 arrives is easy and intuitive
Check how much time before bus 1 arrives was a simple task
Checking future arrival times was straightforward
The containers for the the buses were not apparently clickable for some
Measuring Success
Each tasks was completed in under 1 minute
There were 0 errors in the tasks performed
Opportunity To Improve Accessibility
Put an indicator to show that the containers are interactive
Helps certain people with accessibility issues like new smartphone users and older people who aren’t adept with technology
What I Learned From This Project
User research plays an important role in an apps core functionality
Even a project as simple as relaying bus times can take extensive research to get right
User testing and reiterating prototype have small but impactful incremental gains