On The Go

Project Overview

One of the first projects I worked on during my time in bootcamp is designing a user-friendly bus app. Several new bus routes have recently been added to a middle-sized metropolitan city area, most of which stop at Washington and State. Since then, the city’s transportation agency has developed a way to determine how far each bus is from a bus stop. However, they did not have a way to deliver that information to the public. So, as a designer, I was tasked to design a mobile app that would display the city’s bus schedules.

Problem

Riders have complained most about the Washington and State bus stop which serves 7 buses. People did not know when the next bus will arrive which made it hard for them to plan when to leave their house. Since the Washington and State bus stop serves several buses, riders also did not know which bus was arriving next.

Solution

To solve the problems addressed, I designed an app that shows when each bus arrives at every bus stop. It also lets riders select any one of the 7 bus lines that run through Washington and State to see the future arrival times.

Competitive Analysis

I began this project by comparing and analyzing three of the most used transportation apps: Moovit, CityMapper, and Transit. There were similar consistencies amongst these apps that made them successful:

A live counter for bus arrival
A full schedule with estimated time arrivals

Moovit

Transit

City Mapper

However, I felt that Moovit could be more user-friendly if it had clearer information hierarchy and a map on the home screen for convenience. Knowing what makes these apps stand out can help guide me in designing features that first time users would easily understand.

User Survey

I wanted to know how often riders took the bus and whether or not they have used an app to get around the city before. So I sent a user survey to 20 people, focusing on those who live in a metropolitan area. Then I selected a few individuals to have a one-on-one interview with to further learn their insight on bus apps they have used.

User Survey Highlights

*results based on 20 participants

PErsona

Based on the survey results and my one-on-one interviews, here is what I gathered about the target user who rides the bus to get around in a metropolitan city.

Empathy Map

To further build on the persona I created, I put myself into the perspective of what a rider would think and feel when looking for the bus schedule. I mapped out the pain points so we can see what to expect from a target user.

User Stories & User Flows

From there, I created 5 user stories that align with building the MVP:

As a rider, I want to look up the bus schedule at Washington and State
As a rider, I want to know if my bus is going to be on time
As a rider, I want to know the next bus that is arriving at Washington and State
As a rider, I want to know future arrival times for my bus
As a rider, I want to get directions to the Washington and State stop

User Flow

The MVP was going to an app that displays bus schedules that run through Washington and State. So I created a user flow, combining the pathways of each user story, to visualize how the app will function.

Sketches

Now that I had the research done, the next step of this project was to create a set of wireframes. I started out by sketching a couple screens to see which layout may be best, keeping in mind that the design should be user friendly, convenient, and easy to look at. I wanted users to be able to navigate the app easily without having to learn how to use the app as a first-time user.

Branding

I do not have much experience with logo designing, but I had the creative freedom to come up with something nice for a bus app. I ended up sitting on a cute, simple bus design for the logo and using the friendly color orange to make it pop. I felt that orange was approachable and accenting it with yellow and green would draw in sensations of optimism and travel. Naming the app “On The Go” was based on the idea that the city probably has a lot of commuters who are always busy and living a fast-paced life. To keep the simplicity of the app, I made Roboto the font of choice since it is legible for a mobile screen and does not scream chaos.

User Testing

To find out whether or not the prototype I designed was user-friendly, I conducted a user test with volunteers to observe users complete 3 tasks:

Find out when the next Bus 4 is arriving at Washington and State
Find out how much time you have to make it to Washington and State
If it takes you 5 minutes to get ready, which Bus 4 arrival time will you make in time?

While I sat with each user, I took note of where each user tapped on the screen and what their thought process was to get to the end goal. I discovered that users seemed to first tap on the bus stop icon on the map screen, assuming it would lead them to the bus schedule for that stop. However, it was not tappable in the prototype, which unfortunately was inconvenient to the user. I also had the users verbalize what they felt were obstacles when navigating through the app. One feedback I received was to add an on-time/delay symbol so users can visually see which buses are late. The same person also suggested seeing close-by bus stops on the homepage so that accessing the bus schedule takes less taps. After thanking my volunteers for their input, I reorganized what I had to adjust before finalizing the project.

So... there were a few hiccups in my design:

1) Map was not interactive. Users tried to tap on the bus stop icons on the map screen but it was not interactive which forced them to figure out alternative ways to get to the bus schedule. I had not realized this factor while building the prototype.

2) Bus times may not be accurate. Since city transit times are not always reliable, the bus app must be able to depict whether a bus is late or not. There was no indication of this so I added a symbol to eliminate this issue.

3) Homepage could be improved. The first thing people expected to see on the home screen was some personalized bus arrival times. However, since the home screen did not showcase schedule information for nearby transit, it took more taps than needed to get to the desired screen. So I filled the negative space on the home screen to personalize the app to the user based on their current location.

Final Prototype

View Prototype

Conclusion

As a new designer in the field, being tasked to design this bus app was a great experience into wireframing and prototyping. The biggest lesson I learned from this project was that prototyping errors are easy to make. It helps to have a different set of eyes since there are always improvements to be made and gathering insight from others brings out different possibilities of approach to the same conclusion.

Want to work together?