UX/UI design of a mobile app from scratch for a transportation agency to display the real-time bus schedule to the bus riders.
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.
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?
My role in this project is to design a mobile app from scratch for the agency to display the real time bus schedule to the bus riders.
My responsibilities included user research, designing user flows, visual design, prototyping, user testing, incorporating user feedback into design iterations, and quality assurance.
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.
The design process is not linear. It went back and forth during iteration.
I started my work with user research. I took two ways of research to collect data from the users, User Survey and User Interview.
1. Many people are taking the bus before they got a car, and many of them are students.
2. The app should provide accurate and real-time information to the user to help them better.
3. Over 80% of the regular bus riders who take the bus would need a navigation service to find the bus to take
4. A map in the app will be helpful.
I also looked into my competitors, such as Google Maps, which many of the survey participants used, Citymapper, the MTA grand prize winner for transportation app design, and Transit Stop, which covers the public transportation information of the Chicago area for buses and trains.
I compared them and looked into details of how they resolve the users' pain points. The competitive analysis gave me an insight into the industry and how I can improve. I decided to incorporate the Find a Route service into the app beyond the business requirement because it's standard in competitors and essential for riders.
With the survey and interview results, I created a Persona to represent the typical user of the app. Michael is a student who often takes buses and has a habit of checking the bus schedule through the website. He is looking for a better alternative to check the bus schedule.
"I hope the bus won't fail me this time."
Micheal is a college student in Chicago. He doesn't have a car, so he always takes a bus for transportation. He always checks the bus schedule before taking the bus through the local transportation authority's website.
Goals and Needs:
· Find a route and the right bus to take.
· Check the bus schedule.
· Estimate the time needed to get to the bus stop.
· Current way of checking bus schedule doesn’t work well with him
· Some times he miss the bus and have to wait more than he expected.
I created a user journey map and an empathy map to illustrate Michael's mental model further and reveal Michael's values.
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 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.
To make the process less abstract and more visual, I created a user flow.
I created a site map to structure the pages.
Before pushing pixels, I had a few sketches to find the best solution.
Then, I use Figma to transfer the sketches into Low-Fidelity Wireframes.
Here is an example of how the main feature page iterate 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 solves this issue, but the problem of the lower tap button looks more prominent. The locate me, and home page seems not very necessary for this app.
The third version makes the change accordingly.
With the wireframe settled. I created a mood board and style tile to present my font selection and color palette. The standard bus color in the US inspires the primary yellow. The complimentary purple makes the contrast accessible to users. I also created a logo for the app.
I conducted three user interview to test if the app work as it should be. During the user tests, I introduced the users to the project's background and gave them tasks to complete.
Here are some feedback 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, I iterate the prototype.
Here are the major changes during the iteration:
1. Redesigned the icons and visual layout.
2. Combined and restructured the searching for bus lines and finding a route.
3. Added the logo to the landing screen.
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.