.png)
.png)
Designing a bus app for a transit agency in a midsize metropolitan area in the Midwest to improve users' public transportation experiences.
One of the most challenging aspects of using public transit is keeping track of time and ensuring that we are on the correct bus. We can solve these two problems in this app by monitoring bus routes and notifying users of which bus and when it will arrive at a particular station.
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)
Over the course of two weeks, I followed the HCD procedure. We investigated how shoppers may want to recreate shopping experiences based on their tastes using the User Centered Design process. We brainstormed and planned several solutions using user testing as our guide. We then put our ideas to the test in usability tests and used the results to create a high-fidelity interactive prototype.
.png)
We used the results of 25 surveys as well as interviews with some users to learn about their needs and pain points, and the following are the results!
75% surveyed that they are under 35
76.5% are Female
23.5% Male
65% are students
69% Think bus timetables are unreliable
.png)
.png)
The next move was to build a user persona to represent my future Map It App audience.
.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
They need to get to their destination as soon as possible.
Less hours wasted waiting at stops and a more consistent schedule
Get notify with any update on their trip
Keeping track of routes and bus numbers is a must.
Access to a search engine is easy.
.png)
It was time to take my user stories and sketches and come up with some ideas after we had a clearer understanding of my users and marketspace. The user stories assisted me in prioritizing the key features of the Map IT app.
.png)
Based on user flow I design first digital wireframes to test
In order to establish the MAP IT visual identity, I thought about what this activity is all about. I discovered that an app is used by more than one person; it is something that people rely on to get around their lives, whether they are going to work or visiting a friend; time is important to all, and We appreciate that. We based the App's colors and graphic design on a picture I placed on the moodboard that represents a simple bus that most of us have ridden at least once in our lives.
The goal behind the typography was to be clean, friendly and easy to read. Each of these typefaces, in my opinion, represent those qualities while still allowing users to use the app as quickly as they want.
.png)
.png)
We chose these colors after playing with more than ten different color palettes. They had to be vibrant and engaging while still maintaining a calm and empowering atmosphere that would entice users to return again and again. The colors were chosen to express trust and power.
The success of the App is the source of inspiration for the logo. I wanted to make something clear that give users a sense of what the app is about just by a glance. To me, circles are a form of motion that hug the world map and bus symbol, to make it clear that this is an app that helps users to locate destinations and schedule their routes.
.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
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 pallet 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
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)
We iterated on the concept and upgraded the prototype based on the main findings we synthesized by conducting affinity diagrams.
View PrototypeAll pages now have a back button.
Adding a pause to the welcome screen to avoid an unnecessary click.
To improve accessibility, the back button was moved from the bottom to the top of the page.
After the last screen, a loop to the search page is formed.
Get in touch and say hello!
If you'd like to get in touch, just fill out the form below.
.png)
.png)
.png)