Case Study 03
A project by UX/UI designer Luci Cantey
ReadyRider Bus Tracking App
Bus riders were having trouble identifying their specific bus arriving at congested stops/stations, specifically Washington and State St. The city has requested an easy-to-use app that allows riders to see real time, updated arrival times and other pertinent information to ensure they board the correct bus. My mission was to create a midsize, Midwestern city specific bus tracking app that allows users to know when their specific bus will arrive at the stop.
For the purposes of this project, I am using Toledo, Ohio as the represented city.
Roles
UX Research
UX/UI Design
Prototype
User testing
Tools
Paper
Sharpie
Figma
Adobe Illustrator Canva
The Solution
What’s the problem?
Problem
Develop an easy to use, yet highly functional, app that allows users to recognize which bus they want and when it will arrive at a busy stop where up to seven bus lines converge.
How else can we cleanly include more user value into this app?
Audience
The public transport using citizens of Toledo Ohio, They come from all different demographics and levels of technological ability. Most report using public transportation to get to work and school, but also to run errands, get to medical and other appointments, and to a lesser extent, access entertainment and cultural activities around the city.
Goals
Ensure that any rider can tell when each of these buses arrives at the the Washington & State bus stop.
Ensure that 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.
Discovery and Research
First things first, what do users of an app like this want?
When asked what they valued in a bus tracking app, 58.3% of respondents said that they would rank accurate bus arrival time as a 5 out of 5, while 75% said real time traffic updates affecting the bus arrival would score a 4 or higher (out of 5) in importance as a bus tracking app feature.
The 3rd most popular feature was the ability to pay fares within the app, with 58.4% ranking this feature as a 4 or higher.
Consistent with what they wanted from an app, users had complaints about certain features on the currently available apps they had tried.
Two of the top three pain points are the same features users ranked as being most important, with “Accuracy issues” at 33.3% and “Not enough updates” at 44.4%.
Also important to note in the dislikes section, “Too confusing” was as much an issue as accuracy.
Finding out what users didn’t like about the other apps gives me a useful tool when designing my own, I wanted to know what to avoid and what to be cognizant about.
100% of the responses for the question “What might encourage you to use a bus tracking app?” stated that the specificity of the app to their city transit system would play a large part in their interest in using the app, and form some, played a part in why they have not used an app at all.
An additional feature that got positive response is the ability to pay for fares within the app.
Competitive Analysis
What are some of the characteristics people didn't like about the app they had used? How can we surpass competitor app usage? Let’s get rid of some of these pain points.
Personas give realness to the “Average User” I’m designing for.
People of a wide assortment use the bus, but we based the personas on the age groups and themes seen the most among those participating in the survey.
Characteristics covered:
Tania - Early to mid thirties, grad student, lateness is a peeve, so accuracy in planning is important.
Mat - mid to late forties male, business professional, family uses bus for environmental reasons. Work commuter. Needs accuracy to deal with family scheduling.
The following user stories set the priorities for this first phase of ReadyRider.
As a student, I need accurate arrival tracking of my bus, so that I can make sure I get to campus on time for class.
As a hearing impaired commuter, I need to set alerts with haptics/visual cues included, so I can make sure I’ll know if the bus is delayed.
As a work commuter, I need to identify my specific bus at a crowded stop, so I don’t get on the wrong bus during busy morning hours.
As a frequent rider, I want to be able to pay my fare within the app, so I can quickly move through the boarding process.
Information Architecture
User Flow, creating a “Happy Path.”
The User flow helps me determine what the app needs to fully complete a task in an ideal situation, with this particular flow focusing on identifying the bus selected by a search for a desired route. Empathy is the tool I use to get into the mindset of the user, what could they run into in trying to complete a task and how can frustrations be resolved?
Site mapping for clarity
Working out a user flow shows which screens are needed and how they need to connect, which then helps me create the site map.
As with each phase of this processes, I review the site map based on the heuristic checklist, considering the following:
Is this mapping intuitive and familiar to users?
Is it consistent within itself?
Are these pages linked in a way users will expect them to be and in a way that prevents error?
Is this the most efficient way for the user to get the task done? Meaning- they aren't clicking through unnecessary screens or encountering what they don't need to get to what they do need.
Early Wireframes - Covering the Main Bases First
Sketching the layout first let me focus on the importance of placement and hierarchy, without getting distracted by visual design decisions or minute alignment details. I was able to quickly imagine the different options for the important introduction at the top of the page.
The wireframes match up to the user flow and site map, which means they match to user desires and business requirements:
When bus arrives and how much time they have before that
Select one of 7 bus lines to see when it arrives at the Washington and State St stop
Pay in app
Delay and traffic updates
Convenience of saving frequent routes
Adding thoughtful and interesting branding
User feedback, the true test
I’ve been working on this project for a while, I’m too close to see every possible glitch. Testing with users is the best way to find all the issues. Watching them work through the app helps me find instances that need refinement.
(I initially tested the wireframes without much UI, while revising based on user feedback, I also added more branding elements.)
Mission Accomplished?
Did I meet the user and client requirements? There’s always room for reiteration, but I think I’ve got a solid start to the product.
Conclusion
What went well?
In the end, I developed a bus tracking app that allowed users to not only identify their specific bus at a crowded stop, but gave them the ability to receive alerts to delays and traffic issues, pay for their fare within the app, save favorite routes to pull up quickly and get additional information concerning bus
This was a great lesson for me, not only in how to create better user centered design, but also in regards to deepening my understanding into just how many details are important for a successful app. I actually loved users pointing out my mistakes, I know my sense of awareness is increased as a result.
What should come next?
There were some limitations to the scope of this project related to time and resources. User testing pools were constrained to free survey sites on the internet, where one can not always vet participants as much as they would like.
As a next step, I’d like to do more testing with my improved screens, to a larger pool of people, specifically those who regularly use public transit.
Thank you for reading.