Overview
Roles
-
UX Research
-
Content Strategy
-
UX/UI Design
-
Project Management
Timeline
4 weeks​
Design tools
-
Figma
-
Adobe color
-
Google Forms
-
Google sheest
-
Notion
Audience
​Bus commuters living in a midwestern city
Summary
To meet the needs of their growing city, a transit agency added additional bus lines to their existing bus routes, causing several issues for bus commuters, particularly at the Washington & State bus stop. Therefore, the client requested that I design a mobile bus schedule tracking app to help solve user frustrations.
Business Requirements
Design a mobile app that informs users:
-
When their desired bus will arrive at Washington & State bus stop
-
How long it will take for them to arrive at Washington & State bus stop from their current location
-
The future arrival times of each of the 7 bus lines that pass Washington & State
The Problem
-
How might we design a bus application that empowers users to easily and efficiently view bus schedules at Washington & State bus stop?
-
How might we create a seamless bus-riding experience for users by giving them all the information they need at any point in their journey?
The solution
An app that provides users with up-to-date information about a rider’s bus route in an intuitive way. Offering users peace of mind by giving them all the information they need at any point in their journey.
Design Process
I used the Double Diamond design process when designing my bus app. Making sure to keep the end user in mind at every stage in the process.
Discovery
Research
To get to know our users and understand their frustrations, needs, and wants, I conducted user research. I also want to understand who the competitors are, what they are doing successfully, and the areas where there is room to improve.
Competitor Analysis
I conducted a competitor analysis on Moovit and Transit Stop. I chose these two apps because they appeared to serve a diverse population of users. At a later stage, I decided to perform a competitor analysis on Kakao Maps as well, since further research revealed that several survey and interview participants have used this app before.
User surveys
I created a survey of 20 questions to get a better understanding who the users are and of their experiences when taking the public bus and also ways in which their experience can be improved. There were 43 survey participants who were 18 years or older in age.
42.9%
Of users take the bus 2 to 3 times a week
64.3%
of users take the bus for touring and traveling to new destinations for leisure
85.7%
of have missed the bus before
83.3%
of users miss the bus at least once a month
64.3%
Of users have accidentally taken the incorrect bus
85.7%
of users make us of a bus schedule tracking app
71.4%
of users plan their bus ride before they leave home
User interviews
I conducted an interview with 3 of the original survey participants. Each participant had made use of the public bus and a bus app within the USA and internationally.
Key findings
Pain points with using transit tracking apps in the past
Confusing interface with info overload
Confusion regarding delays and inaccurate arrival and departure times
Confusion regarding which bus to take, when to take it and when to get off the bus
Confusion of how to get to final destination from bus stop
Things that are important to users
Simplicity
Seeing relevant information
Knowing an ETA and the amount of minutes left before arrival
Tracking bus location and user location
Who are we designing for?
To get to know our users and understand their frustrations, needs, and wants, I conducted user research. I also want to understand who the competitors are, what they are doing successfully, and the areas where there is room to improve.
User persona
The user surveys revealed insightful results which allowed me to create a user persona that is representative of the users of our product. This helped me to have a better vision of whom the users of this product are.
Empathy map
I used the data collected from the user surveys and user interviews to create an empathy map to better understand what the user thinks and feels in relation to their bus riding experience.
Journey Map
Next, I used the insights gathered from users thus far to empathize with them and try to understand their experience when taking a bus. This helped me identify more pain points users experience and identify potential solutions.
Define
User stories
Taking into consideration the insights from the research conducted, who the users are, what their pain points are, and what is important to them I summarized their needs into these high priority user stories
-
Beth wants to know when her bus is arriving at the Washington & State bus stop, so she doesn’t miss it.
-
Beth wants to know how long it will take for her to arrive at Washington & State so that she can leave her house on time.
-
Beth wants to know the next bus arriving at the Washington & State bus stop so that she doesn’t rush to the bus stop for the wrong bus.
-
Beth wants the ability to view arrival times for any of the seven bus lines so that she knows when her bus arrives.
-
Beth wants to know at which bus stop to get off the bus so that she does not miss her stop.
Initial user flows
These user stories gave a clear vision of what the bus app should offer to users. I designed an initial user flow to translate user needs into patterns and paths that users would take to accomplish their tasks when using the app.
The initial user flows included onboarding. Users could choose to sign up or log in
The initial user flow also offered users 3 ways to access their required information. Users could search for their final destination, view nearby bus stops or view nearby bus lines.
Wireframe sketches
I worked to apply all the insights gained from the research conducted earlier in the design process to design wireframe sketches.
Digital wireframes - round 1
I turned the wireframe sketches into digital wireframes to visually show how users can access the information that they need in a seamless way. I then made these wireframes into a low-fidelity prototype and presented it to users for initial usability testing. Users provided very important feedback.
Usability testing
I presented the li-fi prototype to users for initial usability testing. Users provided very important feedback. I narrated a scenario to users in which they were required to complete various tasks. This is what they had to say:
“I want to use the app without signing up”
“Live location please”
“I want to know where the bus is going”
“A short cut to the map would be nice”
Additional observations:
-
Users did not use the “Bus lines” icon.
-
Users thought that some labels looked like buttons.
-
The drop-down menu when viewing more on a particular bus was confusing.
Adjusted user flows
In light of the feedback provided by users and went back to the drawing board and adjusted the user flows, removing the onboarding and a shortcut icon that users did not use.
Digital wireframes - round 2
I also took my pen back to paper and designed new wireframe sketches to capture the adjusted vision of the app. I created digital wireframes showing a simplified layout that provides users with more information in fewer clicks.
Design
Branding
Bee Line Bus was designed from scratch for a particular audience of users, and a relatable brand identity had to be created. This mood board represents Bee Line bus, urban, on the go, efficient, simple and friendly, and fun.
Accessibility
Accessibility is an important consideration I design, as we want our products to be accessible to as many users as possible. I used several accessibility tools to test the accessibility of "Bee Line Bus". The contrast of the colors in the app has AA approval and is colorblind-safe.
Delivery
Usability testing
After adding the UI elements to the app, I presented it to users for additional usability testing. Users provided important insight and useful feedback. Below is a screenshot of the same screen in the app before and after usability testing with some direct feedback from users.
Before user feedback:
After user feedback:
What's next for Bee Line Bus?
Robust notifications feature
​
A high priority that came up during user research was that most users take the bus when exploring their city or cities that they are unfamiliar with. “I need to know which bus to take, when to get on and exactly when to get off”
Adding a feature that will intuitively guide users through each stage in their journey.
Safety feature
​
A low-priority feature that came up in user research was the desire for a safety feature. Being able to share live location with trusted others, or an SOS button to notify bus drivers of any safety concerns.
Refections
Overthinking is the great enemy of UX design
To be a good designer, I have to be intentional about overcoming overthinking and perfectionism. Finished is better than perfect. Brainstorm quickly and get all your ideas on paper. Even if they are not perfectly thought out. Make decisions quickly and get them together. Feedback from colleagues, mentors, and users throughout the design process will help you see the things that you cannot. The final design can only come together through multiple stages of iteration.
​
Do thorough user research
Getting the right information and feedback from users is crucial at each stage of the design process. Understanding who your users, are and what they actually want and need will make decisions making at various stages in the process easier.
​
Spend time learning the skills you need to create good designs
Figma is a challenging tool to use, especially for first-time designers. Spending time learning how to use Figma efficiently could have saved a lot of time spent on manually updating and altering UI design elements.