Making sure transit users get from A to B with an
effective and simple solution
View Solution
Role
UX / UI Designer, User Researcher
Tools
Figma, Zoom, Google Forms
Timeline
4 weeks

Background

A midwestern transit system had a problem.

Ann Arbor’s transit system, TheRide, is used by thousands of people every day. To best serve its customers, TheRide recently decided to expand its bus fleet. While this provided more routes and stops across the city, it also caused mass confusion. Bus riders have become especially confused at one stop, Washington and State, where there are now seven bus lines running through one intersection.

I had to figure out how to solve it.

I was given three business requirements to address the problems at Washington & State:

• Ensure that any rider can tell when their bus is arriving

• Ensure that users know how much time they have to get to their bus stop

• Allow users to view any bus's future arrival times

The scope of this project was limited.

Being an educational project, there was no actual budget or client. I had four weeks to conduct research, define the problem and solution spaces, and create a solution through a high-fidelity prototype.

Solution

Anni is an iOS app prototype that allows users to

• see important information about their bus like arrival time, schedule, and more
• see how much time they have to get to their stop
• save favorite places, stops, and more
View Prototype
Discover
Research Plan
Competitive Analysis
User Survey
User Interviews
Personas
Empathy Map
Customer Journey Map
User Stories
Research Plan
Will this product help people?
• Understand peoples' bus riding habits
• Identify pain points users face when using transit systems and existing apps

How might people use this product?
• Identify how people currently use transit apps
• Identify when a bus rider would want to use an app like this
• Narrow down feature options

How do competing apps address the problem?
• Understand users' relationships to existing transit apps
• Understand how competitors are addressing this problem within the app space
Competitive Analysis
I conducted a competitive analysis to gain a better understanding of what transit apps are already on the market, and to gather some inspiration. I conducted a SWOT analysis for Citymapper and Moovit, and determined that Citymapper’s strengths lie in its UI, while Moovit’s strengths lie in its usability. This analysis showed me that I should create an app that is visually pleasing while also providing useful information in a clear way.
User Survey
I used Google Surveys to create a survey that would help me gather more information about potential users of a transit app. This data would back up design decisions later on. The main takeaways were:

• Riders were much more casual than I expected
• Top priority for users is accessing ETA’s
• Ticketing and personalization are also important to users

The survey and a full analysis of the results can be seen here
User Interviews
The main takeaways from the interviews were the following

• Interviews reinforced that ETA's were a top priority
• Personalization is key
• Helped me decide on including a favoriting feature over a ticketing feature

The full interview script and notes can be seen here

Users want personalized settings.

"I love when something works for my benefit."
– Elias, rides the bus on weekends

Bus lines themselves aren't the issue.

"I'm more inconsistent than the bus is."
– Em, used to ride the bus

They sometimes rely on multiple apps to do one job.

"There is no app that does everything you need it to."
– Aaron, used to ride the bus daily,
and "hates all transit apps equally"
Personas
Personas were created to summarize all the user research data. The main difference between the two personas is their riding habits. Gen is more informed from one of my interviewees who used to ride the bus every day to and from work. Riding the bus more often means that Gen is affected by missed connections and inaccurate information more often.
User Stories
I then crafted user stories based on the interview and survey results. These stories acted as the next step in translating research directly into solutions. These stories were based on this prompt:

[Callum is a bus rider] and wants to [use a tool] so he can [achieve his goal].

This activity allowed me to explore various solutions, and helped weed out some unnecessary flows and features.

The full list and details can be seen here
Define
User Flows
Sitemap
Wireframe Sketches
Lo-Fi Wireframes
Lo-Fi Prototype
Usability Testing, Round 1
User Flows
I then created user flows to begin putting user stories into the context of an app. After a few iterations, I made this general user flow:
Sitemap
Wireframe Sketches
Once a user flow and sitemap were established, I created some wireframe sketches. These helped me transition quickly from flows and maps to screens.
Lo-Fi Wireframes
After sketching, I used Figma to create low-fidelity wireframes. These would serve as the skeleton of the app’s UI. I also began playing with some visual design ideas in these early iterations.
Lo-Fi Prototype
From the initial wireframes, I put together a lo-fi prototype using Figma. This is where I began thinking more critically about how to apply the user flows I made.
Usability Testing, Round 1
I conducted some guerrilla tests to determine how well my first prototype was functioning. Overall, the testers were confused. This was mostly due to the test itself rather than the product. Most of the participants were confused about some missing functionality that they expected to see. Based on the feedback, it was clear that the most important changes to make were to improve overall functionality and to

• make ETA information more immediately visible
• add more visual graphics to improve clarity
• add or change page titles to improve clarity and usability
Develop
Branding Inspiration
Mood Board
Colors, Typography, and Logo Development
Hi-Fi Wireframes
Usability Testing, Round 2
MVP Prototype
Branding Inspiration
After testing, I began the visual design phase of the project by defining some brand characteristics. I wanted the app to feel

• Clean
• Open
• Friendly
• Delightful
• Easy to use
I looked to sites like Dribbble for visual design and branding inspiration
Mood Board
I wanted to make sure I would be reflecting the brand characteristics through colors and styling. These images clearly don't have much to do with public transit – rather, they embody the mood I wanted to portray.
Colors, Typography, and Logo Development
I went through several rounds of testing using WebAIM for these colors, to ensure that the contrast was up to accessibility standards. The primary blue color (Ocean Blue) was actually much lighter initially, but to make sure it would stand out enough over a white background, it ended up being this darker blue.

After colors were picked, I chose some fonts. Sans serif fonts were chosen to maintain a clean look and to maximize legibility.

I decided to create logos that featured the name more prominently, since this would theoretically be a new app. After some iteration, I decided on a final logo.
Hi-Fi Wireframes
Once colors, typography, a name, and a logo were chosen, it was time to apply all of these stylings to my prototype. Once I updated styles and made changes based on usability testing, I refined the prototype and created some high-fidelity mockups.
Usability Testing, Round 2
I conducted another round of user testing. These tests were a bit more formal than the first round. There was still some confusion due to the testing environment, but overall these tests were much more productive and provided more valuable feedback. Participants and my mentor made some suggestions for changes, mostly having to do with accessibility and usability:

• increase clickable area for certain icons
• increase size of search bar
• make sure back button location is consistent

A full test script, notes, and analysis can be seen here
MVP Prototype
After applying these new changes, I finalized the prototype. While it still is limited in functionality due to the scope of the project, this iteration aims to provide a more usable experience for transit users.

No more worrying

From anywhere in the app, you can quickly and easily see when your next bus is coming.

Scheduling, solved

Get a detailed breakdown of an entire day's schedule for any bus line.

Making it personal

Users told me they wanted personalization. I added a Favorites feature, so you can save all your favorite places, stops, and more.
View Prototype
Conclusions
Next Steps
Outcomes & Results
Next Steps
The next steps for this project will be to make any other changes I was suggested to make based on the grader feedback, and to continue refining this case study. One suggestion I will focus on is to add a more direct way for users to see exactly how much time they have to reach a bus stop. This will reduce the cognitive load for users and improve their experience.
Outcomes & Results
The solution I’ve provided met all of the business requirements. I achieved the goal of creating a simple, easy-to-use prototype. I also responded to the needs of users by adding a Favorites feature, which allows quick and easy access to the places that are most important to them.

The biggest lesson I learned through this process was to always follow what the user needs, not what I want or need. The users always know best, and making a project successful depends directly on how well you listen to users.

I also learned that accessibility always comes first, and to not let artistic decisions get in the way of making something accessible. This helped teach me another lesson that I should never get too attached to any one design. I should always be willing to pivot and change course throughout a project, because feedback and research can sometimes be surprising.
Back To Top