Your Commute, Worry Free
Enroute: A Case Study in Public Transit UX Research and Design
Project Overview
The Problem:
To create an application for a midsized midwestern metropolis transit system serving thousands of users. The application must allow users to check the estimated arrival time of any bus line serving any stop, as well as actively monitor approaching buses for their selected stop.
Project Type: High Fidelity Prototype of a mobile application
Project Scope: UX design, brand development
Client: Student Project
Timeline: August-September 2023
My Role: Sole UX researcher and designer
Mentors: Franklyn Espinoza, Natalie Magee
Audience: Adults aged 18-35 who use public buses as a primary form of transportation.
The Solution:
A high fidelity clickable prototype using a live map as the main navigational tool.
Project Development
Business Requirements
Ensure that any rider can tell when each of the buses arrives at 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.
User Research
User Surveys
Surveys were deployed with 24 questions about bus travel, scheduling, and tracking preferences.
Target Audience
75% of respondents were 18-35 years old and living in an urban area
62.5% of respondents were students who use bus travel mainly for travel to and from classes
Users’ Top 3 Priorities:
-Knowing how much time I have before my bus arrives at my stop
-Knowing what bus lines I can access from a particular stop
-Knowing exactly where my bus is in relation to me at any given time
User Interviews
Interviews conducted with users from the target audience allowed me to glean further insight about needs and frustrations surrounding bus travel.
Interview Insights:
-Users find bus schedules either difficult to access or very unreliable and would like a more accurate way to track where their bus is.
-Users expressed the need to decrease the time waiting in the heat at unsheltered stops for buses without risking missing them.
User Pain Points
It can be hard to tell what bus is approaching a stop and when the next line will arrive
Most systems just use a set schedule, which can suffer delays, rather than live tracking
Physical maps are not upkept and often have damage that makes them difficult to read.
Competitive Analysis
Competitive analysis was conducted on three public transit apps to evaluate the market and view existing solutions to problems similar to ours.
-City Mapper, Transit, Google Maps
-All Direct Competitors
-The chart to the right showcases the features that research suggests this app might require, and highlights whether or not each competitor possesses that feature.
Competitor Strengths:
-City Mapper and Transit are carefully curated to show accurate routes and real time delay and closure information
-Utilize a map as the main navigational tool.
Competitor Weaknesses:
-City Mapper lacks reliable back navigation throughout the app
-Transit has many routes locked behind a paywall
Competitor Opportunities:
-Urban areas are continually and rapidly expanding, increasing the need for public transit systems
-Travel has increased since COVID-19 calmed down
Competitor Threats:
-Budget cuts to public transit systems and infrastructure
-Increase in car sales
Low Fidelity Prototype Development
Persona
Riley represents the average user as described by survey results. They are a busy college student with important commutes and deadlines to make, so knowing when their bus is arriving is a main desire of theirs.
User Stories
**High Priority
**High Priority
**High Priority
*Medium Priority
Main User Flow
The main user flow was created to take users from the landing page, through the login or sign up process, and into the main app.
From here, the flow shows how a user can access the map and use its find feature to search for their stop and line, in this case, the Washington and State stop with the Red line.
The end of the user flow also shows how a user might save this particular combination of line and stop to their home page for easy viewing.
Wireframes
Sketches
Digital Wireframes
Low Fidelity Prototype Usability Testing
Scope: To test the overall usability of the main user flow and uncover usability issues and improvement opportunities.
Users: Three users within the target audience age range and location.
Tasks:
-Task 1: Log into the app.
-Task 2: Pull up the live transit system map.
-Task 3: Find the Washington and State Bus Stop
-Task 4: Select the Red line that serves this stop
-Task 5: Save this bus to your home page
Results
The Usability test of the low fidelity prototype showed that the wireframes follow much of the mental map that users have of map based applications and identified a few areas of improvement.
Insights
Users want the ability to select their bus stop by tapping its icon on the map directly.
Users emphasized the importance of making the ‘Find’ button easy to see on the map with color.
Users expressed concern about being able to use the application without needing to log in.
Next Steps
Utilizing the insights from this round of usability testing, the low-fidelity prototype was improved by adding map clickability and adding a page reflecting the ability to view the map and search bus stops without logging into an account. The next steps are to create a design system for the project and develop this foundation into a high fidelity mockup that can be prototyped and further usability tested.
Brand Development
Brand Characteristics
This is an application for a city run transit system, so it needs to invoke trust and authority while still feeling friendly and accessible to citizens and visitors alike.
Maintaining a uniform style and brand throughout the application will allow us to maintain that trust, especially among young people who are accustomed to using high quality applications on an everyday basis. Minimal, clean designs and smart color choices are a must for achieving the goals of the project.
Brand Moodboard
Since the target audience identified by my research was commuting college students and young professionals, the app needed to be modern and relevant, catering to people who use mobile applications everyday while still remaining accessible to people of all levels of tech literacy. Therefore, I chose a clean, modern look with gently curved lines and a geometric sans serif typeface.
Logo Development
Process Sketches
Final Logo
Color Palette
For this project, a blended color palette utilizing red and turquoise was chosen.
Red invokes energy and movement, inspiring people to get up and go to work, school, or even leisure activities on their local transit system.
Turquoise, on the other hand, invokes trust, serenity, and calm. While this may seem like a contradiction to the red in the palette, it balances it, encouraging users to release their anxiety around their commute and trust that they are in good hands with Enroute.
Typography
For this project, a simple single typeface was chosen, that being Poppins. Fonts within this family are utilized depending on the type of copy that is being used in the project.
The use of a single geometric typeface was chosen to convey a simple, organized interface that looks and feels orderly and professional. Utilizing a sans serif typeface in particular was chosen due to its reading accessibility and the more modern mood that it adds to the application.
Style Guide
Combining all of the elements above, this style guide was created for the brand of the application. This allowed me to quickly pull assets and colors over into the project as I worked on the high-fidelity prototype.
High Fidelity Prototype Development
Hi-fi Prototype 1
The first High Fidelity prototype that was created for Enroute included all pages needed to move through the established user flow with added button functionality to allow users to move through that flow in a variety of ways.
Usability tests will focus on that main user flow within two separate scenarios in order to identify pain points within the design.
High Fidelity Prototype Usability Testing
Scope: This usability test focused on subjects moving through the main user flow using two different scenarios. The focus of this test was to identify strengths and weaknesses of the design and gain feedback on the overall flow and ease of use. Subjects were within the target audience range and had mainly used bus systems in the past for school commutes.
Users: Three users within the target audience age range and location.
Scenario 1
You are a college student living and attending school in the middle of a large urban area. You have been taking the city buses to class for a while now, but a new app was just released by the city transit system, and you want to try it out. You use the Red Line, and you catch your bus at the Washington and State stop.
Tasks:
-Task 1: Sign up for an account
-Task 2: Find out when the red line will be arriving at the Washington and State stop
-Task 3: Save this bus for easy access later
-Task 4: Track this approaching bus
Scenario 2
You are visiting a new city for work. You have a meeting to attend, and have been informed that you need to catch the Red Line at the Washington and State stop to make it to the office. You want to leave your hotel not too early and not too late to avoid waiting at the stop too long or having to run to catch your bus. You found an app for this city’s transit system and are hoping it will help.
Tasks:
-Task 1: Access the app as a guest
-Task 2: Find out where you are in relation to the Washington and State bus stop
-Task 3: Find out when the next red line bus is arriving at this stop
-Task 4: Track this approaching bus
Insights
67% of users commented that they wished that they could read the bus stop labels on the map without entering a new screen.
67% of users commented that the term ‘Save to Home’ was confusing.
One user pointed out that there were not external labels on the sign up fields, which was inaccessible to screen readers.
Next Steps
Utilizing the insights from this round of usability testing, the high-fidelity prototype will be iterated on to address the usability issues and accessibility concerns brought up by the users.
Prototype Improvements
Most of the test users gave feedback that seeing what stops were on the map was difficult at a glance, and they wanted a way to see what stop was what before clicking into a separate page. To facilitate this, overlays were created that allow users to tap on a stop on the map and see a pop up telling them what stop this is, what the next bus is and when it is arriving, and allows them to click into that stop’s detail page or exit out of the pop up. This allows them to have a more accurate view of what they are doing and prevents them from being navigated to a page that they do not want to be on.
Improvement 1
Before
After
Most of the users had some confusion around what “Add to Home” meant, and were hesitant about the feature. By discussing this confusion and gaining more feedback, the decision was made to change the verbage over to “Save to My Buses”, which is more descriptive of the function and causes less confusion.
Improvement 2
Before
After
From user feedback, it was discovered that the input fields in the login and sign up screens did not have any external labels, making the intended inputs confusing, as well as making these screens potentially incompatible with screen readers. External labels were added under all input fields to ensure clarity and accessibility.
Improvement 3
Before
After
One user expressed the wish to be able to see all of their saved buses quickly rather than having to swipe through them. To improve upon this aspect of the design, an expandable dropdown was created on the home screen, allowing users to quickly access all of their saved buses.
Improvement 4
Before
After
Accessibility
Contrast and Legibility
All of the combinations of colors used for text over background for the prototype were input and tested for Web accessibility compliance. All color combinations passed with AAA compliance with the exception of normal text on one background, which received a AA rating. This combination is almost exclusively used with bolded text within the prototype.
Navigation and Wayfinding
All of the pages after the onboarding portion of the application contain a navigation bar with a home button, account link, and navigation menu. In addition, all applicable pages have back or close buttons, allowing users to backtrack to where they were and preventing them from getting stuck in a path they do not want.
Error Prevention and States
While there are few areas where a user can permanently change status in the application, in the instance where this is possible, when deleting a saved bus, there is an additional screen prompting the user to confirm the deletion. This is in place to prevent a bus from accidentally being deleted by a wrong tap.
Final Prototype
The final prototype is linked here. This prototype is fully clickable and allows users to follow the main user flow of logging into an account, checking on the status of their bus line and bus stop, as well as track the specific bus they are hoping to catch. In addition, the user can save that specific bus to their home page for ease of use later.
Final Thoughts
Project Successes
This project was successful in meeting the requirements for the MVP as set out by the business requirements and the user stories that were selected for the scope of this particular project. The prototype allows users to travel through the main user flow using a variety of paths that fit different mental models that people have of navigating through a map based application. User testing showed that users were able to read and understand all of the copy within the product with ease, and many of the processes were intuitive. Improvements made based on Usability Testing improved the overall functionality and accessibility of the prototype to what it is now.
Project Blockers
Given the limitations of the prototyping software used, the users are unable to mimic the touch navigation and movement of the maps within the prototype. This is something that engineers would need to add in later, however the screens provided give details on the way the map should look and how each component should be interacted with.
Main Takeaways
This project highlighted the importance of dedicated user testing and iteration. The original prototype, while functional, did not meet all of the users’ needs in relation to their mental maps of how it should function and the features they wanted. By gaining that insight, both small and large issues were able to be identified and resolved, resulting in a much more usable and accessible prototype overall.