Midwest Metro Transit

Go to Figma FileGo To Prototype


Midwest Metro Transit Mobile Application
This project was created during a 3 week design sprint and is based off of a fictional city creating a mobile app for their bus system. They wanted the app designed based off their busiest bus stop, Washington & State.

My roles

User Research:
Competitive Analysis, Survey, User Interviews, and Usability Testing
UX Design:
User Stories and Flows, Site maps, Sketching, and Wireframing
UI Design:
Low and High Fidelity Mockups, Prototyping, Visual Design, Logo Development


List of problems to be solved with the mobile app. When will the bus arrive? How much time do I have to walk to the bus stop? When are the future arrivals? I use this stop oftne, Am I at the correct bus stop?


Midwest Metro transit app features a personalized onboarding experience with a minimal design that prioritizes ease of use during high light and low light user situations.

User Research

Competitive Analysis

I did a SWOT analysis of Google Maps, City Mapper, and Transit Stop.

Survey results

I conducted a survey through Google Forms to learn about the demographics and issues that arise for users of a city transit system. I was interested in delayed arrivals to destinations and how often individual users ride the bus. My survey received 23 respondents.

The following results provided us with valuable insights into the needs of our users and helped guide us in a new direction for adding a few features into the mobile application.
How many days a week do our users ride the bus?
Pie chart results
50% of our users are riding the bus between 4-7 days a week.
How long do our users commute?
pie chart results
54% of our users are riding the bus between 40-90 minutes during their commute.
Why do users miss their bus?
bar graph results
68% percent of our users have trouble finding their bus stop if they are new to the area. 53% of users are unable to find their bus on time because they are on the wrong side of the street.

User Centered Pain Points

Pain Point 1: Commute Times
These findings determined that our user base was primarily people that ride the bus nearly everyday during long commutes and that these users would be interested in the accuracy of bus arrival times, how much time they have to walk,.
Pain Point 2: Searching for Frequently Used Locations
Our target users rides the bus nearly everyday, it would be helpful to be able to save home, work locations, and frequently used bus stops.
Pain Point 3: Is this the correct bus stop?
Users that ride the bus less often or in new locations often had issues determining whether or not they were at the correct bus stop and would likely appreciate having a feature that would help them to confirm the correct location.

User Interview

Due to time constraints, I was only able to conduct one user interview.
Key Take Away:
My interviewee uses the Google Maps Streetview to see the buildings behind the stop to confirm the correct location. I decided to include a photo function within the application to provide users this feature.


Young blonde woman in a suit
“I need reliable arrival times to optimize my commute.”
•Rides the bus 4-6 days a week
•Primarily for work and recreation
•She lives 7 minutes away from the stop
•Total commute is 40 to 60 minutes
•To get to destination on time
•Early or late buses
Being unsure of if she is at the correct bust stop

•Arriving on time at the stop, if she misses her bus her commute will be 15 to 20 minutes longer

Needs & Goals
Occupation: Mechanical Engineer
Age: 27
Gender: Female
Relationship Status: Single
Able Bodied

Empathy Map

empathy map deliverable

UX Design process

User Stories and Flows

As a bus rider, I need to know if I am at the correct bus stop
As a bus ride, I need to know when the bus is coming.
As a frequent bus rider, I need to see a list of future arrivals at my frequently used bus stops.

Site Map

site map of the mobile app


sketches for wireframing


The wireframes that I created were based off my sketches. As I built up the wireframes, I added and updated my site map.
low fidelity wire frame low fidelity wireframelow fidelity wireframelow fidelity wireframe

UI Design process


Palette Development
I wanted to focus on accessibility for the color blind community so I avoided using primary red and green despite many transit apps using these colors.
Color Palette choice
Lighting while commuting can be an issue for users since sunlight creates glare on their screens and drains their battery faster. For this reason I was focused on maintaining high contrast with my palette. This palette scrored very well on www.webaim.org.
Colorblindness Simulation
color palette usability results for users with color blindness
The above image is a simulated experience created with a Figma Plugin that demonstrates what the chosen palette might look like for users with different types of color blindness.
Typography choices chart
Exo 2 and Chivo are both web friendly fonts that are easy to read.
Logo Design
I chose the name Midwest Metro for the transit app and I was inspired by the 1960’s Volkwagen Bus logo. I did a divergent thinking sketching session and then moved into Adobe Illustrator to develop the logo. These are a few of the logos that I created
Logo Development examples

Mockups version 1

Version 1
These mockups are my first attempt at the app.  Version 2 is below and reviews goals accomplished.
version one high fidelity mockupsversion one high fidelity mockupsversion one high fidelity mockupsversion one high fidelity mockupsversion one high fidelity mockupsversion one high fidelity mockups

Outcomes and results

Usability Testing Results

Usability testing was condusted on version 1 of the Midwest Metro Transit App.
Finding 1:
Add search options directly onto the homepage.
Finding 2:
Add an onboarding experience that demonstrates how to use the photo function.

Final Design Mockups

I iterated on this design based off of the usability results and my improved design skills.

version 2 high fidelity mockups Problems 4 I use this stop often
Adding this feature was based off the user survey results since more than 50% of users are taking the bus at least 4 days a week.

Goals Achieved
The favorites page can be used to add specific bus stops or buses to quickly research potential future arrivals without needing to search a specific address. These stops and addresses can be edited and removed.
Goals Achieved
Problem 3 When are the future arrivals?Problems 4 I use this stop often
version 2 high fidelity mockups
Searching and Planning Trips
Included a way for users to search for future arrivals with a specific address, bus stop, or bus name.
version 2 high fidelity mockups version 2 high fidelity mockups Problems 1, when will the bus arrive?
Goals Achieved
Problem 3 When are the future arrivals?
Trips Directions
Once a a bus route trip is chosen, walking directions are loaded for the user with a countdown timer which estimates how long they have to walk to the bus before the bus arrives.
Problem 2 How much time do I have to walk to the stop?version 2 high fidelity mockups
Goals Achieved
Location Confirmation
On the walking directions, the user is prompted to confirm when they have arrived at the bus stop. If the user is unsure if they have arrived they can check. This overlay will show them a picture of the landmarks behind their stop.
Problem 5. Am I are the correct stop?version 2 high fidelity mockups
Goals Achieved

Lessons Learned

This was my very first project during my certificate program with Thinkful. I learned a lot during the process since Figma and UX/UI design were very new to me. While going back to iterate this project and recreate the case study, I realized that I have grown substantially as a designer. I have been struggling with imposter syndrome and devoting time to improve this project has helped me realize that I am capable of taking on anything. I am excited to continue to grow in this career. That is the most important lesson.