Midwest Metro
In a midwest metropolitan area, bus riders are struggling to catch the bus on time with the addition of new bus lines at given stops. I was tasked to approach this problem by creating an app that would allow users to determine when buses were approaching and which bus would be arriving at their appropriate stop.
Role UX/UI Designer
Toolset Figma
Timeline September 2020
Deliverables
User Personas/Journey map
User Stories/Flows
Wireframes
Low and High Fidelity Mockups
Mobile Prototype
Discovery and Research
User surveys
To understand who to design for, I started with a user survey. I surveyed 23 people to gain a better understanding of what they found valuable in navigation apps, and to get a better understanding of the reason they missed their bus in the first place. Every user responded noting that two features were of high importance: (1) map of route to destination and (2) estimated travel time prediction preview. All users also indicated that they missed their bus at some point because the bus arrived at a different time than was indicated on the schedule.
From our survey, it was clear that one of the biggest user pain points was the lack of communication of accurate bus times, and updates to route delays or cancellations should be clearly communicated.
Competitive Analysis
At the onset of this design project, I reviewed other apps to understand what they did well and what they did poorly. This gave me an opportunity to review how to incorporate these learnings into my app.
City Mapper
Pro: The searching functionality is easy, especially in the map search for bus stops.
Con: It isn’t clear what the walking distance would be before selecting a bus route.
Google Maps
Pro: Users feel confident choosing which bus route to take as the recommended rout clearly shows proximity and timing
Con: There is a lack of additional bus times if you decide to leave a few minutes later, but intend on taking the same route.
Behaviors:
• Checks the bus schedule on her app prior to leaving the house
• When meeting with friends, she uses the bus app to inform her friends of her ETA
• Uses the bus route map to determine if there are other locations where she can hop off the bus on her route for errands
Needs/Goals:
• Needs an easy way to check if the bus schedule has updated for delayed buses
• Needs to see the mapped out route based on location
User Persona
I designed with Rebecca in mind.
Rebecca is a single, 30-something living in a metropolitan area. Rebecca only rides the bus a couple times each year, but she is within 10 minutes of a bus line.
Steps to reach transportation goal:
• Since the schedule is often inaccurate, she spends time waiting at the bus stop unnecessarily
• She always checks the bus schedule once she is at the stop as well to ensure that the bus is coming at the expected time
• She boards the right bus based on the signs that indicate the right bus to take
Information Architecture
User Stories and Flows
I focused on the following user stories, and chose to prioritize the first 3 stories since that aligned with the client’s original ask and also mapped back to the users greatest pain points.
(High Priority) As a user, I want to know when the bus is arriving so that I can give myself enough time to get to the bus stop.
(High Priority) As a user, I want to know which route would be the best option for me, so I can get to my destination on time.
(High Priority) As a user, I want to know the estimated time of arrival so I can keep others updated about my traveling time
(Low Priority) As a user, I want to know if there are other forms of transportation I can take if I miss my bus.
Low Fidelity Wireframes
Home Page
Suggested Routes
Interactive Bus Stop
The sketching and design process really helped me think about how the users would be using the app, whether they would have their full attention while checking bus times, or in the midst of running out of the house. In both cases, I wanted to design properly for our users.
Brand Development
Color Palette
Blue communicates trust, security and stability, and that is something I want the users to feel when using the app.
Typography
I chose to use Nunito for our app. Nunito is a balanced sans serif font that is easy to read and conveys the balance to the users. The user can feel that the app is more trusted because of the clean, easy to read font.
Logo Design
I explored different logo options but ultimately landed on one that had an organic and approachable feel for the user. Since users would be everyone using the bus in the midwest metro area, the feeling should be inclusive for all users.
High-Fidelity Prototype
Usability Testing and Final Design
With a high fidelity prototype on hand, I needed to test it out against users to ensure that the process was frictionless, and that users were able to accomplish their goals through the app. I tested across 2 users by asking them to perform the task of looking up a bus times. There were two main points of feedback received from the tests:
Next arrival time needed to be more clear compared to ETA and
location indicator needed to be more obvious
These notes were included in the final prototype.
Final Thoughts
I learned a lot through this design process, especially in designing with the main focus on usability as the audience would include everyone in the Midwest Metro area riding the bus. It was important to me that the color choices were accessible, and users were able to identify where they were on the map before they started reviewing bus schedules. In future iterations, I would also like to consider additional navigational methods if the next bus does not arrive in a reasonable amount of time.