OVERVIEW
Timeline
3-week design sprint
Team
Polly Lee - UX Design mentor
Summary
BusTrak is a simple app that helps bus riders navigate their journey on public transportation. The goal of the project is to make it easy for riders to know when their bus arrives, when they need to get to the bus stop, and when other buses will arrive at their stop.
My Roles and Responsibilities
UX Designer, Researcher, Product Strategy, Visual Designer
​
Deliverables
User Research, User Personas, User Stories, User Flows, Wireframes,
Usability Testing, Hi-Fidelity Prototypes
​
Tools
Google Forms, Figma
​
Team
Individual Project
​
Timeline
4-week education project, narrow scope, no budget constraints
​
Problem
Transit officials for a Midwest Metropolitan area have identified a problem that they want to solve. With expansions in the city and additional bus routes, bus riders started to complain about the Washington and State bus stop that's serving 7 bus lines.
To advocate for the bus riders and solve the bus riders frustrations with the additional bus routes, I needed to address these 3 main points of the bus riders. Bus riders simply wanted to know:
​
-
When will their bus arrive?
-
How much time do I have to get to the bus stop?
-
What are the arrival times of the other buses to their bus stop?
​
PROCESS
Discovery and Research
Research Plan
To gain a better understanding of the bus riders needs and their pain points using public transportation, I used Google Forms to create a survey that I conducted with 20 people who ride the bus. I wanted to understand the experiences that bus riders have when they are planning their journey on the bus and what sources do they use.
Key Findings
-
57% ride the bus 2 times per week.
-
67% use the bus to look up bus routes and times.
-
62% use Google Maps
-
57% rate their experience with a bus app as Average.
For this 4-week individual education project, I conducted research, defined the problem, and created an interactive prototype using the Double Diamond Design process.
To understand what transit apps are on the market. I performed a SWOT analysis on 2 bus apps Moovit and Citymapper. Through the analysis of the research I decided to create an app that was simple, minimal, and easy to use.
Persona
I created personas to summarize the user research and to help me design an app for the different users of public transportation.
SWOT Analysis
INFORMATION ARCHITECTURE
User Stories
BRAND DEVELOPMENT
To better understand what a user needs to accomplish their task, I created user stories based on the business requirements, interviews, and surveys. By creating the user stories I was able to clearly define what features I needed to add to the app that would be feasible and within the scope of the project.
User Flow
In an effort to understand the objectives of the bus riders, I created a user flow based on the possible user stories which helped me to visualize how a bus rider would navigate through the app to reach their goal.
Sitemap
I created a sitemap to represent the structure of the screens that would focus on what the users see. The sitemap helped me to stay organized as I decided on the number of screens that would be needed to show all the stages in a users' interaction with the app. I decided I only needed a few screens to meet the business requirements.
Sketching
Digital Wireframe
After sketching, I used Figma to create a low-fidelity wireframe that would serve as the skeleton for the app's interface. I conducted my own beta testing to make sure the prototype was working as I had intended before I allowed the testing participants to engage with the app.
Once the user flows and the sitemap was established, I sketched out wireframes using pen and paper to represent the ideas that I had based on the user stories. I did 2 iterations of the wireframes based on the comments that I received from my UX Design mentor.
Usability Testing
I conducted user testing with 2 participants in-person for 20 minutes. The participants were given a task-based scenario using the high-fidelity prototype. Feedback gained from the users showed the problem areas in each screen and what I needed to improve upon.
Next Steps
Based on what I learned during the user interviews and testing, I propose the following next steps in future iterations of this project.
-
Add a voice feature for the arrival times and do a A/B split testing on the new feature.
-
Add a feature for live updates to arrival times and delays.
-
Add a mobile alarm to notify the user when their bus is 10-15 minutes away from their bus stop.
BRAND DEVELOPMENT
Brand Characteristics
After beta testing, I began the visual design phase of the project by defining the brand characteristics. Based on the competitive analysis, I designed an app that was simple, minimal, reliable, and trustworthy. I tested the colors using the WebAIM to ensure the colors met the accessibility standards.
Moodboard
PROTOTYPE
Hi-Fidelity Prototype
After applying the changes from the feedback, I finalized the high-fidelity prototype in Figma. While the features and the function on the app is limited due to the scope of the project. The final iterations on this app meet the intended goal of the app and addresses the business requirements.
FINAL THOUGHTS
Conclusion
If I had more time and resources to further develop this app, I would dive deeper into the research from the bus riders to find out what specific features of a bus app they use the most and how does it help them reach their intended goal using public transportation.
Lesson Learned
-
Embrace my role as a UX Designer and always advocate for the user and deliver engaging, effective, and easy-to-use products that will provide the user with a delightful experience.
-
Be aware of my assumptions and personal bias during usability testing.
-
Remain open and receptive to feedback - don't get too attached to one design.
-
Accessibility is important when designing a product as you want to design a product for everyone and not just a few.