Bus Buzz
UX/UI design of a mobile app from scratch for a transportation agency to display the real-time bus schedule to the bus riders.
Case Study Overview
​
A hypothetical transportation agency in the Midwest wants to update the public transit system by creating an app to share the information with riders. I am the UX/UI designer in this project to create the app from scratch.
My Role: UI/UX Designer
​
Deliverables: Product Strategy, User research, Competitive Analysis, User Journey, User Personas, Storyboard, User Flow, Sketches, Wireframes and Prototype
​
Timeline: 4 Weeks
Problem
The city currently lists the expected bus schedule on their website and posts it at each bus stop, but due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. The city has developed a way to know how far away each bus is from a stop, but How Might We share that information with riders?
Business Requirement
1. Ensure riders can tell when each of the buses arrives at the Washington & State bus stop.
2. Ensure riders can tell how much time they need to arrive at the Washington & State stop to catch the bus they want to take.
3. Allow riders select one of the bus lines to see a list of its future arrival times at Washington & State bus stop.
Design Process
Competitive Analysis
Competitive analysis has done between Google Maps, Citty Mapper and transit Stop. This is the SWOT for Citty Mapper.
User Survey & Interview
Key Findings
-
Many people are taking the bus before they got a car, and many of them are students.
-
A map in the app will be helpful.
-
Over 70% of the regular bus riders who take the bus would need a navigation service to find the bus to take.
-
The app should provide accurate and real-time information to the user to help them better.
User Persona
With the survey and interview results, I created a Persona to represent the typical user of the app. Eli is a student who often takes buses and has a habit of checking the bus schedule through the website. She is looking for a better alternative to check the bus schedule.
Experience Maps
By user journey map and an empathy map Eli's mental model further has illustrated.
User Stories & User Flow
To resolve the business requirement by the client and the users' needs based on the user research, I created several user stories.
And based on the user stories, two major features need to be included in MVP:
1. Check bus schedules at a specific bus stop.
2. Find a bus if you are not sure which bus to take.
And two minor features for easy use:
1. Login as a regular user to save location for convenience.
2. Allow GPS service to find nearby bus lines.
.jpg)
Site Map
Site map was created to structure the pages.
Sketches & Wireframes
Before pushing pixels, sketches have done to find the best solution. Then, in Figma, they all transferred into Low-Fidelity Wireframes.
​
Iteration
Main feature page iterates throughout the process. The first design wants to show more information on a single page to simplify users' steps, but it turns out to be very crowded. The second version makes the change accordingly
​
Branding Work
With the wireframe settled. Mood board and style tile were created to present my font selection and color palette.
.
High Fidelity Prototype
​
.
User Testing
three user conducted interview to test if the app work as it should be.
Here are some feedbacks from the user:
1. Users reflect the location icons displayed on the map when using the Find a Route feature is not clear enough.
2. Some users find it hard to realize the suggested bus line when using the find a route feature.
3. Users feel it's unnecessary to tell them the page is for login. It's better to see the brand information on the first page. With the feedback, the prototype was iterated.
​
​
Refined Prototype
Learnings
This is my very first project. I accomplished from conducting user research to prototyping step by step. I learned how to incorporate user insights in each step. It helped me built a solid foundation of user-centered design.
​