Bus Time

UX/UI design of a mobile app from scratch for a transportation agency to display the real-time bus schedule to the bus riders.

Mobile App

UX/UI Design

Hero image

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.

Problem Statement

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

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.

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

The design process is not linear. It went back and forth during iteration.

design process

User Research

I started my work with user research. I took two ways of research to collect data from the users, User Survey and User Interview.

Key Findings

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.

Competitive Analysis

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.

Citymapper's SWOT Analysis

Competitor- citymapper's SWOT analysis

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.

User Persona

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.

Persona picture

"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.

Frustrations:
·
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.

Michael Wayne
22 · Single

Student

Experience Maps

I created a user journey map and an empathy map to illustrate Michael's mental model further and reveal Michael's values.

User Journey Map

user journey map

Empathy Map

Empathy map

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 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.

User Stories

user stories

To make the process less abstract and more visual, I created a user flow.

User Flow

User flow

I created a site map to structure the pages.

Site Map

site map

Sketches & Wireframes

Before pushing pixels, I had a few sketches to find the best solution.

Sketches

sketch

Then, I use Figma to transfer the sketches into Low-Fidelity Wireframes.

Wireframes

wireframe

Iterations

Here is an example of how the main feature page iterate throughout the process.

wireframe iterations

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.

Branding Work

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.

Style Tile

Style tile

High- fidelity Prototype

High-fidelity prototype version 1

User Testing

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.

Refined Prototype

High-fidelity prototype version 2

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.

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.

Let's work together!

If you are interested in my work or have any comments, please feel free to drop me a line. I'd love to hear from you and am willing to collaborate!

Thank you! Your message has been received!
Oops! Something went wrong while submitting the form.