Summary
An Illinois metropolitan transportation agency needed help with the numerous bus routes that have been added. My job was to create an app that will provide the rider with information on both the bus stops and buses.
The task was to create a mobile application operated by a city transit system that serves thousands of commuters. This app would help riders distinguish between 7 different bus lines, and allow riders to see if they had enough time to catch their bus, as well as establish how much time they had to get to the stop they need, to catch the bus they required.
Solution
Problem
Due to recent expansions to the city’s transit system, more bus lines are running out of the same bus stop than before. Riders need access to up-to-date information about routes and arrivals. Transit officials identified the stop at Washington & State, which now services seven bus lines.
This project was given to me by Thinkful's UX/UI Design program and was my introduction to applying User-centered Design and the Double Diamond Process to a problem.
Tools
Figma
Notion
Zoom
Google Meets
My Role
UX Research
UI Design
Brand Development
Timeline
Overall: 6 weeks
Research: 2 weeks
Design/Testing: 4 weeks
The Double Diamond Process
Discovery
Competitor Analysis
I analyzed Google Maps, the most downloaded app in the market, to identify areas of opportunity for my app to improve. Google Maps is a widely used and comprehensive mapping service with various features that make it an ideal tool for conducting competitor analysis.
S
W
O
T
Google Maps has a simple and easy-to-use interface that allows users to easily find and navigate bus routes, stops, and schedules.
Google Maps may not cover all bus routes or stops in certain areas, which can make it difficult for users to find the information they need.
Google Maps could partner with bus companies to provide more accurate and up-to-date information on bus routes and schedules, as well as to provide targeted advertising to potential customers.
Google Maps collects a significant amount of data on user behavior and location, which could lead to privacy concerns or legal challenges
Privacy Concerns:
Partnership with Bus Companies:
Limited Coverage:
User-Friendly Interface:
User Survey
I conducted a few User Surveys and created a questionnaire to establish some of the key demographics for the target market at hand. There were some interesting insights to the research and I found that most seemed to struggle with the same issues as stated in the beginning.
The participants I was looking for had to be 18 years of age or older, and have taken/currently ride the bus.
I had about 31 respondents who were between 25-29 years old, students, and their main reason for taking the bus was that they did not have a car.
An essential feature all respondents mentioned that would be useful to them was finding out how much time they have to get to their bus stop before their specific bus arrives.
User Interview
I conducted 3 virtual interviews with males that were roughly between 25-29 years of age. I learned that they would like to know how far the walk would be from their location to their bus stop and also other pain points such as not being notified of delays which would result in them waiting sometimes up to an hour.
Persona
Out the development process. The user stories helped me understand the needs and goals of potential users, while the personas allowed me to create a more personalized experience for different types of users. The empathy maps helped me understand the emotions and pain points of users, which allowed me to create solutions that would resonate with them on a deeper level. Usability testing was crucial in validating and refining the app, as it allowed me to observe how users interacted with it and identify areas that needed improvement. Overall, the combination of these techniques gave me a comprehensive understanding of the user experience and helped me create a more effective and user-friendly app.
Empathy Map
User Story
As a user, I want to...
Select my bus out of seven bus lines and see its future arrival time at the Washington & State bus stop
Tell how much time I have to get to the Washington & State bus stop before the bus I need arrives.
Be able to tell when each bus arrives at the Washington & State bus stop.
The Double Diamond Process
Define
User Flow
Before I began sketching my user flow, I wanted to create something that met the business requirements but would also make it simple, easy, and quick for Matt to find without having to go through multiple windows.
Site Map
Lo-Fi Wireframes
This is the initial sketch of my wireframe. There were a few things I changed but I kept the overall layout of it. I only kept relevant information for the user in order to avoid any type of confusion at any point. My low-fi wireframe really focuses on the interactive map. On the map, the user will be able to see what buses are closest to them once their location is enabled and which buses are approaching their stop. From there they will also be able to select their bus.
Utilizing the Site map and user flows I was able to create wireframes and a basic clickable prototype. The high-fidelity mockup was made from this, however, it was iterated many times
The Double Diamond Process
Design
Branding
When naming a product or service, it is important to consider the brand image you want to convey and the target audience you are trying to reach. In the case of the bus application, I wanted to choose a name that was easy to remember, easy to spell, and relevant to the function of the application.
BUStop is a clever play on words that combines the words "bus" and "stop" into a single word. This name is likely to be memorable and easy to spell, and it clearly communicates the function of the app to users. It also has a fun and playful vibe that may appeal to younger audiences.
From the point of view of branding, I preferred to use blue color while designing the application. Blue is often associated with trust and reliability, which can be important qualities in transportation. This is why many transportation companies, such as airlines and shipping companies, use blue in their branding.
I preferred to use Rubik and Open Sans as typefaces. Rubik and Open Sans are both popular typefaces used in graphic design, branding, and web design. Rubik has a modern, geometric look with rounded corners and distinctive letterforms. Open Sans has a clean and modern look with a neutral and versatile appearance.
High-Fidelity Prototype
This page gives you 2 options to start your trip
On this page, you enter your current address and the last destination
On this page, you can select the upcoming buses and activate the notification
You can see 7 newly added bus lines on this page
The Double Diamond Process
Delivery
Usability testing is an essential part of the product development process because it helps ensure that a product is user-friendly and meets the needs of its intended audience. Usability testing is a critical step in creating a product that is user-centric, intuitive, and effective. By identifying and addressing usability issues, product developers can create a product that is more likely to meet the needs of its users and be successful in the market.
I went ahead and did 4 usability tests with 2 males and 2 females that are students. This was such an insightful step in getting even more feedback to better my app!
What I found in 3 out of 4 of my testing sessions was that the use of color on the bus selection page was sometimes too difficult, while all four felt the app was easy to use. But the biggest suggestion was that I had to add a "Home" button, because when the user wanted to end their journey, they had to click the "back" arrow one by one to go back to the main page.
Conclusion
I gained so much more knowledge on how to navigate through Figma, for a first-timer, I learned more about the double diamond design process and how to implement it, and finally my respect for all the people in the field! I never thought creating an app takes so much time, patience, and research.
