NaviBus
A public transportation app that simplifies public bus transportation. Locate, track, and view local bus routes in real time with ease.
Project Overview
Role: UX Designer & UX Researcher
Duration: 5 weeks (2021)
Deliverables: Style Guide, Wireframes, High-fidelity Mockups, Clickable Prototypes
Tools: Figma, Adobe Photoshop
NaviBus, a user-friendly mobile app, is designed to limit the frustration and headache around public bus usage, currently facing users in a mid-sized, metropolitan area. With real-time tracking and easy-to-understand information on bus lines, routes, and schedules, NaviBus enhances the user experience, helping them quickly locate and track their bus to accomplish their goals.
Redesign
This project was initially undertaken early in my UX design career as an educational learning experience. While adhering to the extensive user research and feedback originally obtained, I recently chose to redesign this project to bring a much-needed modernized revamp to the overall visuals and flow within the app. The redesign also served as a testament to my growth as a UX designer, showcasing my evolving thought processes and design skills that I’ve been able to further develop over the course of my first few years in the profession.
Below you can view and compare the original design to the updated version, as well as walk through my entire design process for this project, including changes made within the recent redesign.
Problem
Recent expansions to a mid-sized, metropolitan bus system has led to multiple bus routes passing through the same stops, causing confusion among local riders.
There were three major needs identified that were critical to address in order to successfully design a positive experience:
Ensure a rider can tell when a bus will arrive at any bus stop.
Ensure a rider can tell how much time they have before a bus arrives at their stop.
Allow riders the ability to view future arrival times for any bus line at any stop.
Solution
Through extensive user research, valuable insights were gained into user preferences, pain points, and prior experiences with public bus systems. Armed with this knowledge, the goal was to design an experience that targeted and limited the identified user frustrations. The app features a GPS system to pinpoint user and bus locations, comprehensive search functionality for all routes and bus lines, real-time tracking with future arrival times, as well as added information for rider preference and comfort.
Stage 01: Research & Discovery
Competitive Analysis
I initially focused in on 3 similar apps. While all 3 are excellent options, they all provided opportunities for improvement that could enhance the users’ experience. Citymapper and Transit highlighted the need for a more inclusive experience without hiding useful features and information behind a paywall. Meanwhile, Transit and Moovit revealed the difficulty users can face in obtaining accurate information and dealing with overwhelming amounts of displayed information.
Despite potential limitations outside of design, it was crucial to acknowledge the significance of real-time tracking, timely updates for bus arrival times and delays, and presenting essential information in a clean and uncluttered manner without unnecessary screen elements being shown.
Citymapper
Strengths
Friendly design (logo)
Easy navigation
Clear contrast
Profile personalization
Voice assist availability
Weaknesses
No landscape view
Paywall for specific features
Transit
Strengths
Good design structure
Easy navigation
Clear contrast
Real-time user updates and alerts
Weaknesses
Paywall for specific features
A lot of information may be confusing for some users
Moovit
Strengths
Easy navigation
Friendly design
Profile personalization
Weaknesses
No landscape view
Inaccurate information
User Survey & Findings
To empathize with and better understand user perspectives, I sought feedback on their experiences with public bus systems and transportation apps. Specifically, I explored their views on bus scheduling and the potential for error, the impact of inaccurate information and unexpected delays on their daily tasks and meetings, and their previous experiences with transportation apps, including both positive and negative aspects that stood out to them.
I engaged with several participants to delve deeper into their thoughts and feedback which greatly informed my decisions throughout the entire design process.
User Persona
The main audience was identified as young, working professionals residing in metropolitan areas who did not possess any personal means of transportation. These individuals came to heavily rely on the public bus system, which unfortunately proves to be unreliable at times.
Given the time constraints of this learning project, the target audience and persona were not exclusively crafted based on the research findings. However, they were heavily influenced by the demographic information obtained during the research phase. It became evident that a seamless experience, free from additional difficulties and confusion, would rely on users' familiarity with mobile apps and intuitive navigation.
Stage 02: Information Architecture
MVP User Stories
After conducting research and considering the initial needs expressed, three user stories were identified to form the MVP. Furthermore, additional user stories were carefully crafted and are outlined below.
As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.
As a bus rider, I want to know the next bus arriving at the Washington & State bus stop, so that I don’t rush to the bus stop if it is not my bus.
As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.
Additional User Stories
As a user I want to be able to view a bus’ location in real time.
As a user I want the ability to search for my desired destination and have the best route show up.
As a user I want to be able to see the closest bus stops relative to my current location.
As a user I want to be able to view my route and the estimated time of my journey in real time.
As a user I want the ability to be able to see traffic updates, if there are any, for my current route.
As a user I want to have an interactive map to be able to be able to see the general area around my location.
User Flow
During the original design phase, the primary challenge was to create a streamlined flow for users to find the most suitable bus option without the need for excessive clicks or additional screens for information. I faced difficulties in visually presenting this information in a coherent manner, without introducing confusion. However, upon revisiting the project for the redesign, I successfully developed a more intuitive and linear layout that optimizes screen space, ensuring important and helpful information is visible to the user without overwhelming them or requiring the opening of additional screens.
Wireframing
Looking at the initial design sketches and wireframes, it became evident that there was significant room for improvement. The home page lacked a typical bottom navigation, resulting in unnecessary components occupying a large portion of the screen. Moreover, the screens dedicated to bus routes, bus stops, and individual bus information were minimal and required users to click into additional screens to access crucial information. While functional, it was apparent that these aspects could be enhanced and presented in a more effective manner.
Usability Testing
Usability testing was conducted with several individuals, both in-person and over the phone, to gather valuable feedback. The tasks assigned during testing were specifically designed to address the main problems and user stories identified within the MVP.
Tasks
Find the future bus arrival times for the L line traveling from Washington and State to Auditorium.
How would you find the next available bus from Washington and State to Auditorium?
How soon will the next bus be arriving at Washington and State traveling on the A Line to the College St. bus stop?
How would you search for a specific bus line or by location?
Feedback & Iterations
The feedback received focused on enhancing the app's usability and flow efficiency. In response, several minor adjustments were made, including the addition of a "Favorite" feature for users to easily access preferred trips. Moreover, a search bar was introduced on the screen to provide users with a clear and efficient way to initiate searches for their desired destinations. This feature supplemented the existing search option by local bus stops, offering users more flexibility and convenience.
Stage 03: Visual Design
Brand Development
The color palette was initially conceived to alleviate frustrations associated with using public transportation. Purple was selected for its uplifting and peaceful qualities, along with its connection to the calming effects of blue. Additionally, secondary bright colors were incorporated to enhance vibrancy and appeal to the youthful target audience.
Upon revisiting the color palette, my perspective evolved. Initially, I aimed to align the design with characteristics such as modernity, simplicity, calmness, efficiency, directness, familiarity, reliability, and youthfulness. However, I refined this list to focus on the following five key aspects:
Modern: The app's design should feel contemporary and visually appealing to users.
Minimal: Maintaining a visually minimal design and color choice prevents overstimulation and distractions, ensuring users' attention is on the crucial information presented.
Efficient: The design must address the users' primary needs and provide a simple and straightforward user experience.
Familiar: The app should incorporate familiar elements to prevent users from feeling overwhelmed by a completely new experience, offering a potential solution to an already confusing and frustrating situation.
Reliable: Users must be able to trust the app to provide accurate and reliable information to make informed decisions confidently.
To align directly with the refined characteristics, I opted for a vibrant shade of blue as the primary color, complemented by various shades as secondary colors. Blue was chosen for its calming effect and its association with trust and dependability, key attributes for users seeking reliable information. Sticking to shades of blue maintained a simpler and less chaotic palette. I also introduced brighter shades of yellow, red, and green to highlight specific on-screen information, convey meaning, and evoke a sense of familiarity often found in transportation-related apps.
The logo, intentionally designed to be simple, effectively communicates its meaning to users. It combines a recognizable destination and navigation icon with a bus, clearly representing NaviBus.
Style Guide
Original Style Guide
Redesigned Style Guide
Stage 04: Prototyping
Original
Redesign
Final Prototype
The final protoype showcasing the updated redesign can be viewed below.
Final Thoughts & Takeaways
One crucial skill that stood out to me throughout this project was the ability to create designs and experiences that are simple and clear. It is essential to recognize, especially early on in your career, that the best design is not always the most creative or colorful one. Instead, the best design is the one that prioritizes what the user needs to see and understand, ultimately making their experience easier regardless of how out-of-the-box the design may be.
In certain cases, less color and creativity can actually enhance a design, especially for an app like this where users are seeking specific information and often require quick answers. While there will be opportunities throughout your career to explore bold colors and innovative ideas, starting with a simpler and more straightforward approach is crucial. Always remember to focus on providing solutions to users' needs and problems before anything else.
