Mockup image of a public transit app designed in Figma

Summary

Riding the bus can be difficult and frustrating when bus times are inaccurate. If you’ve ever used a public bus, you know that there are often delays, which the signage at the bus stop does not account for.

Transit Finder is a mobile application I created that could be used to serve thousands of commuters so they can see accurate bus arrival times and know how long they have to arrive at their bus stop.

Role

UX Design
User Research
User Interviews
Information-
Architecture
Sketching
Prototyping
Usability Testing

Deliverables

Interview Questions
Competitive Analysis
User Stories
User Flows
Personas
Empathy Maps
Journey Maps
Site Map
Wireframes
Mockups
Prototype

Tools

Figma
Google Forms
Google Docs
Contrast Checker

Problem

Transit officials realized that the recently increased number of bus routes was causing trouble and confusion for riders.

Bus riders need to know when the next bus will arrive at their bus stop, and how much time they have to get to the bus stop.

Audience

Users of this product are people who ride the bus. 

Most users are using the bus to commute to work or attend social activities. I also found that many people use the bus to run errands or get food.

Scope

Based on the client needs, I focused on three main features:  

1. Ensure that any rider can tell when each of the buses arrives.

2. Ensure that all riders can tell how much time they have to get to the bus stop before the bus that they need arrives at that stop.

3. Allow riders to select one of seven bus lines to see a list of future arrival times at the bus stop. 


While some users may have desired more features, I was forced to keep this project within the scope for my client by not adding too many pages or features to the app. My aim was to create a simple design to accomplish the client’s goal. 

From start to finish, the project lasted about three and a half weeks. 

Solution

Transit Finder is a prototype for an app that allows people to see when buses will arrive, how much time they have to get to the bus stop before the bus arrives, and see which bus is next as well as the future arrival times.

Mockup image of a public transit app designed in Figma

Process

Discovery and Research

I started the project by taking time to understand client and stakeholder expectations and goals. This is when we defined the main features of the app, which I previously laid out.

I then moved on to research. I started the research phase by doing a competitive analysis, identifying the strengths and weaknesses of existing transit apps in the market.

Image of competing transit apps

Many of the strengths included easy route searching, well-designed maps, ease of access to alternate routes, continuous updates, and the ability to save your favorite locations. 

The weaknesses were that many of the apps provided too much information and too many options. It often felt overwhelming and required too much mental processing.

Some opportunities were that they could choose better colors and simpler layouts, and create consistency.

Threats include market saturation and the potential for competitors to copy features.

I then did user surveys, attempting to better understand what users experience when using the transit system and transit apps. Surveys were important cause they would allow me to gather important data about users. My goal was to identify the positive and negative aspects of the user experience.

I concluded the research phase by conducting interviews with some of the people from the surveys. By interviewing users I was able to better understand their experiences, goals, needs, and frustrations.  

Based on my research, I created user personas, pulling inspiration from various aspects of the users I interviewed and surveyed. These personas helped me to keep in mind the type of person I was designing for.  For example, I created the persona for Liam based on the data and information from my research.

For example, I found that many people I surveyed and interviewed don’t have a car and don’t want to pay for ride-hailing services. I found they often use the bus for social activities. These are both reflected by Liam’s persona. All of Liam’s habits were influenced by things that users said, including wearing headphones while on the bus and cross-referencing multiple apps.

Persona Image for a bus app Case Study

Bio

Liam M is an outgoing guy who likes to spend time with his friends, travel, and experience new things within his city. He especially loves trying new restaurants with his friends. He’s been a project manager for the last three and a half years at a medical software company in Seattle, WA. Liam is charming and likable and extremely social. He likes to stay active as much as possible by spending time outside, playing sports, hiking, or riding his bike.

Motivations

Liam uses the bus because he doesn’t own a car and ride-hailing services are too expensive. He mostly rides the bus to get to work or attend social activities, like meeting his friends for soccer or going somewhere with his friends. During his ride, he normally puts on his headphones and listens to music or a podcast. While Liam is extremely familiar with his route to work, he often finds that when trying to go new places it is useful to double-check his route by cross-referencing multiple apps, as well as viewing the signs at the bus stop.

Goals

Find accurate information regarding bus arrival times
Be notified of the new arrival time if there are delays

Frustrations

Bus delays
Bus not coming
Wrong bus times posted on apps

With my persona in mind, I then created an empathy map and a journey map. These maps helped me to further empathize with the user experience and helped me to think more clearly about the app I was designing.

Empathy map for bus app case study
User journey user map for bus app case study

With my research phase complete, I assembled my main findings for my client.

Main findings:

Information Architecture

I then began defining the functions of the app by writing user stories. I separated them by priority to make sure I would focus on the most important ones.

I chose to focus on the high-priority user stories because they were most aligned with my client’s requirements and my research supported the need to focus on them.  

My high priority user stories included:

As Liam, I want to check when the bus will arrive so I get to the bus stop in time.
As Liam, I want to check which bus is arriving so I can get on the correct bus.
As Liam, I want to view future arrival times so I know when my bus will arrive in the future.

From there I moved to user flows, that way I could define exactly how users will flow through the product to complete their intended goals. In this way, I was able to decide exactly what types of pages my app would need, and what wireframe I would need to create. I also used the user flows to share my ideas with the stakeholders.

User flows for bus app case study

I then began exploring my ideas for the wireframes by sketching out pages of the app. I experimented with a few different ideas before deciding on the one I liked best.

Wireframe sketches for a public transit app

The sketches were then used to create digital wireframes.

Wireframes for a public transit app

I quickly realized I was trying to include too many features in my wireframes, and began simplifying the design.

Wireframes for a public transit app

During this process, it was important that I consider the fact that many navigation and transportation apps already exist on the market. I needed to make sure that my design is consistent with what users have experienced on other apps so as not to confuse them. I did this through search functions, back buttons, and symbols, among other things. 

I also used visibility to make sure users know which elements and features are available to them. By including my search feature on the home page, as well as nearby stations, users are able to easily see what options they have to find their buses and stations.

With my wireframes complete, I created a lo-fi prototype and allowed users to test the app so I could gain valuable feedback on my design. 

The app functioned as intended and users were able to accomplish their goals. Testing allowed me to validate my ideas and to be sure I was creating a practical and concise MVP to deliver to my client. 

I then went on to develop the visual aspects of the app, including the layout, branding, typography, color palette, logo, and name.  

I selected a sans serif font for legibility. It’s minimal, modern, and clear. 

I then defined my color palette. Blue was selected as the main color for its association with trustworthiness.

Color palette and font for a public transit app case study

The logo was created by first sketching ideas, then building a vector in Figma.

Logo for a public transit app case study

With my branding defined, I incorporated it into my app and used it to build a high-fidelity prototype.

I used the new prototype to conduct usability testing. I had users attempt to accomplish given tasks to be sure they could complete these tasks without issues or confusion. The goal of their tasks was to identify when the bus would arrive, and how long until the bus arrives.

I discovered:

100% of users were able to accomplish the given tasks. 

Some users stated they wished the map was more clearly labeled and showed which station they were looking at.

Fixing this was an easy way to increase the usability of the app for users that prefer to select their station by looking at a map.

I iterated my design to reflect the feedback I received. I updated the map feature and fixed the issue by simply adding the bus stop name to bus stop locations on the map.

Adjustments made to a public transit app for a case study

Outcome

I achieved the goal of designing an app that would help users know when their bus is arriving.

100% of users were able to identify the information they needed by using the app.

Final Thoughts

Conclusion

I had lots of fun designing this app. This project allowed me to develop my research skills and to learn to focus on the features that are within the scope of the project so I can deliver a functioning MVP by the deadline.

I also learned a lot from this project. 

I learned that less is more. Too much information on a bus app is distracting and not helpful, and this fact translates to other apps as well. Users don’t want to have to spend much time searching for the information they want to find. As a designer, I should be anticipating needs, which leads me to my second lesson. 

Anticipate the needs of your users. A seamless experience can be created by knowing what your users want from your app. Working on this app allowed me to take this fact to heart and really understand what it means. This is one of the many reasons research is so important. The better you can define your user’s desires and frustrations through research, the easier it will be for you to foresee those frustrations and solve them. 

Scope creep is real. I’m sure anybody who has worked on an ongoing project has found this to be true.  I discovered how important it is to remind yourself of what features you need to focus on, so you don’t start adding too much and exceeding the scope of the project. I found it helpful to reference the user stories and read the brief from my client every day before sitting down to design.

While there are aspects of this design that I’d like to see improved over time and further developed, I’m am proud of this project for the discoveries I made along the way and for how I was able to apply my research to inform my design decisions.

iPhone Mockups for a public transit app case study

Connect with me!

Projects
About
Contact
Resume