.png)
.png)
This project focused on designing a bus transit app for a midsize metropolitan area in the Midwest. The goal was to improve the public transportation experience by helping users plan routes, track buses in real time, and navigate their commutes more efficiently. Through research, design, and user testing, we created a solution that makes getting around the city faster, more reliable, and less stressful, especially for riders who depend on public transit daily.
One of the biggest challenges for public transit users is uncertainty, not knowing exactly when the next bus will arrive or whether they’re waiting at the right stop. This lack of real-time information creates stress, missed connections, and wasted time ,especially for commuters relying on tight schedules. Our goal was to solve these two core problems by designing an app that allows users to: Track bus routes in real time.
Empathy Map
User Personas
User Flows
Wireframes
Mood Board
Usability Testing
Clickable Prototypes
1. Refer to a particular bus number. Display the bus number, as well as the route and destination, on the app.
2. Give an exact arrival time for the same bus. Shows the next bus arrival or departure time for a specific bus.
3. Alert users when their buses arrive. Allow users to be notified when it is time to board their bus and ensure that they board the correct bus.
.png)
Designing for public transit isn’t just about screens — it’s about solving real-world problems like missed buses, crowded stops, and unpredictable arrival times. So for this project, I took a practical and iterative approach focused on solving the day-to-day struggles of commuters.
Instead of starting with wireframes, I first mapped out real transit scenarios:
What happens when someone’s running late?
How does a tourist know which bus to take?
What if there’s a delay or detour?
From there, I created a lightweight prototype to simulate the most critical user flows: selecting a route, checking arrival times, and receiving bus alerts. I conducted targeted usability testing with riders who use public transportation regularly, and their feedback shaped every major design decision. This wasn’t just about building an app, it was about designing trust and clarity into an everyday experience that users depend on.
.png)
To truly understand our users and their challenges, we conducted 25 surveys and followed up with in, depth interviews with several transit riders. This helped us uncover their key needs, frustrations, and expectations. We used the results of 25 surveys as well as interviews with some users to learn about their needs and pain points!
75% of respondents are under 35, highlighting a predominantly young user base.
76.5% identify as female, with 23.5% male participants.
65% are students, indicating a large portion rely on transit for daily commuting to school.
69% feel bus timetables are unreliable, underscoring the need for real-time, trustworthy transit information.
.png)
.png)
To better understand and design for the future users of the Map It App, I created a detailed user persona. This persona embodies the key traits, goals, and frustrations of the audience we aim to serve, helping to keep the design focused on real people’s needs.
.png)
Kayla
Office Manager| Age: 32 | San Diego
Motivation
Kayla is a dedicated mother who is constantly striving to improve herself. She excels at her work and enjoys preparing meals for her family. She plays with her son for at least an hour a day. Her shopping day is every Friday morning.
Pain Points
- Expensive ride-sharing;
- Unpredictable schedule;
- Expensive ride-sharing;
- Congestion during peak hours
Tiffany
College Student |Age: 26 | San Diego
Motivation
Tiffany is a focused, creative, and punctual person. She aims to be punctual in her classes and involved in her internship. She can't wait to get to work every day after college, even though it's 30 minutes away and she can't afford a taxi every day.
Pain Points
- Unreliable schedule
- Expensive ride share
- Rush-hour traffic
- Waiting too long between buses
From user interviews, several clear pain points emerged that the Map It app needed to address:
1.Speed and Efficiency: Users want to reach their destinations as quickly as possible, minimizing wasted time.
2.Reliable Schedules: Long waits at bus stops and inconsistent timetables cause frustration and uncertainty.
3.Timely Notifications: Riders need real-time updates about delays, changes, or arrivals to plan their trips confidently.
4.Easy Navigation: Keeping track of routes and bus numbers must be simple and intuitive.
5.Accessible Search: A powerful, easy-to-use search feature is essential to quickly find buses and routes without hassle.
.png)
With a deep understanding of user needs and competitor insights, I moved on to brainstorming and sketching initial design ideas for the Map It app. I started with rough sketches to visualize key screens, from selecting a bus route, checking arrival times, to receiving notifications. These early drawings helped me explore different layouts and interaction flows without getting caught up in details. By sketching multiple options, I was able to quickly iterate and identify the most intuitive ways to present essential information, ensuring users could easily find the routes they needed and stay updated in real time. These sketches formed the foundation for developing wireframes and prototypes.
.png)
After defining the user flow, I translated the ideas into digital wireframes to visualize the app’s layout and interactions more concretely. The wireframes focus on clarity and simplicity, ensuring that key information — such as current location, bus routes, and arrival times, is easy to find at a glance. They also emphasize intuitive navigation, guiding users step-by-step from entering their destination to tracking their bus in real time. Through iterative testing and refinement, these wireframes served as the blueprint for the app’s user interface, laying the foundation for a seamless and stress-free transit experience.
To create a compelling visual identity for Map It, I first reflected on the essence of the app. This isn’t just a navigation tool, it’s something that thousands of people rely on daily to move through their lives, whether heading to work, visiting friends, or exploring the city. Recognizing that time is precious to all users, I aimed for a design that feels dependable, straightforward, and familiar. The color palette and graphics were inspired by a simple, iconic image of a bus , one that most of us have ridden at least once. This familiar symbol grounds the app in everyday experience, while the colors reflect clarity and calm, helping users feel confident and at ease as they navigate their routes.
The goal behind the typography was to create a design that feels clean, friendly, and highly readable. Each typeface I chose embodies these qualities, ensuring users can absorb information quickly and easily while navigating the app. The fonts balance clarity with approachability, helping the app feel welcoming without sacrificing speed or efficiency, perfect for users who want quick, effortless access to transit information.
.png)
.png)
After experimenting with over ten different palettes, we carefully selected colors that strike the perfect balance between vibrancy and calmness. The palette is designed to be engaging and inviting, encouraging users to return regularly, while also conveying a sense of trust and empowerment. These colors help make the app feel reliable and confident — essential qualities for a tool people depend on daily to navigate their city.
The success of the app served as the inspiration behind the logo design. I wanted to create a symbol that instantly communicates the app’s purpose, helping users navigate destinations and schedule their routes, with just a glance. The logo features circles that represent motion and flow, embracing both a world map and a bus icon. This visual metaphor conveys continuous movement and connectivity, reinforcing the idea of a transit app that guides users smoothly through their journeys.
.png)
For usability testing I asked 5 people to go through the App and do different tasks:
1.Enter a destination and find the best route
2.Enter the bus number and find the bus details
RESULTS
Users love the color pallete and logo
They feel frustrated to find the back button on different pages
They thought clicking on welcome page to move forward is unnecessary
They suggest that make the app a loop so after finishing one route it goes back to search page
He thought color green is too light and doe not have the best contrast and frustrated reaching the back button on bottom of screen
.png)
She really likes the logo and color. She asked for back button on each screen and suggest to make a loop after last screen.
It’s easy to navigate
Spell checking
It’s better to move the logo to top of the page on last screen
Second shopping bag feature is confusing
To validate the design, I conducted usability testing with five participants who performed key tasks:
1.Entering a destination and finding the best route
2.Entering a bus number to view detailed bus information
What we learned:
Users loved the color palette and logo, feeling that the app looked friendly and trustworthy.
Many found it frustrating to locate the back button on different pages, causing navigation confusion.
Several testers felt that clicking through the welcome page to proceed was unnecessary, preferring a quicker entry into the app.
A strong suggestion was made to create a looped experience, where after completing one route, the app automatically returns to the search page, streamlining repeat use.
These insights will guide our next iteration, focusing on improving navigation and streamlining the user flow for a smoother experience.
He thought color green is too light and doe not have the best contrast and frustrated reaching the back button on bottom of screen
She really likes the logo and color. She asked for back button on each screen and suggest to make a loop after last screen.
It’s easy to navigate
Spell checking
It’s better to move the logo to top of the page on last screen
Second shopping bag feature is confusing
.png)
After gathering insights from usability testing, I organized the feedback using affinity diagrams to identify common themes and prioritize key improvements. This structured analysis guided a focused iteration of the prototype — refining navigation, simplifying flows, and addressing pain points users encountered. By incorporating these changes, the app became more intuitive and efficient, bringing us closer to delivering a seamless transit experience that truly meets user needs.
View PrototypeAdded a back button on every page to improve navigation consistency.
Introduced a pause on the welcome screen, reducing unnecessary clicks for faster access.
Moved the back button from the bottom to the top of the page to improve accessibility and align with common user expectations.
Created a loop from the last screen back to the search page, streamlining repeated route searches and improving flow.
Get in touch and say hello!
If you'd like to get in touch, just fill out the form below.
.png)
.png)
.png)