Since the dawn of smartphone applications, users have yearned for optimal navigation to help them get from A to B on a day-to-day basis. One might think these solutions have been overdone or that creating a navigation app is "too easy." However, I believe thinking through this problem is an excellent process for designers new and old.
How can we redefine and improve that which seems to be already perfected?
Thinkful E-Learning tasked me with building this bus navigation app as a part of my intensive immersion bootcamp. This is the first app I have ever developed.
I studied the business requirements and set out to find realistic solutions utilizing human-centered design and the double diamond design process. Over the course of four weeks, I generated user research, ideated and iterated based on use cases, generated wireframes, tested low-fidelity prototypes, and fully branded a high-fidelity prototype based on user feedback.
1. Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
2. Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
3. Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
I was a solo UX/UI designer conducting all research, ideating all solutions, creating all deliverables, and iterating upon all prototypes.
I used Figma and Miro to conduct user research and create deliverables. I also used Figma to generate medium and high-fidelity clickable prototypes.
I generated branding designs with Illustrator and Photoshop.
I conducted user interviews, usability testing, as well as stakeholder communications using Zoom and Slack.
I organized, analyzed and developed my data and deliverables using Notion and Finder.
Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know when the next bus will arrive at each stop. They also want to know how much time they have to get to the bus stop. The specific stop that is most confusing for users is the Washington & State bus stop, which has 7 different bus lines routed through it.
Riders can tell when each of the buses arrives at the Washington & State bus stop by viewing the all possible routes page, the departures page, the live tracking bus GPS function, and real-time count down notifications.
Riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop by using the movement speed suggestions, the bus GPS tracker, the departure times, and the real-time buses away notification feature.
Riders can select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop by simply searching a place or address that routes through that bus stop. They can then select one of the seven routes on the all possible routes page, and view future arrival times for any selected route on the departures page.
People of a diverse age range and background who use public transportation.
Given the circumstances of COVID, John no longer needs to commute to school, as he is attending classes online from home. He still needs to use the bus to run his essential errands. John has been working on finding the best bus routes and routines so that he can reach his required stores while being on the bus for as little time as possible so that he can minimize the risk of exposure to COVID-19 and increase his social distancing practices.
Finding the most efficient routes to area stores
.
Ensuring his needed busses are on schedule.
Locating connection bus routes on the fly.
Busses tend to be arrive either early or late.
His app doesn’t live-track where bus is on route.
It’s difficult to find new connection routes while in-transit.
His app doesn’t update him with new COVID guidelines.
Regardless of the pandemic, Cindy still has a busy life that requires her to commute to work and run daily errands for her job and herself. She has often found herself in situations where she is on a route to run an errand, but her boss calls her and informs her that they need her to add an extra stop to complete a task that was forgotten. Cindy has been trying to figure out the best way to make sure she can still navigate her current route and track when her upcoming stop will arrive while also planning her next trip, or changing to a new stop on the same bus.
Tracking when her upcoming stop will arrive.
Changing her trip details on the fly.
Knowing the location of each bus in real time.
She often has to change her routes during her trips.
Her app doesn’t allow her to edit her trip without starting over.
She has trouble determining which bus is hers at busy stops.
Her app doesn’t inform her of real-time delays or early arrivals.
Discover. Define. Develop. Deliver.
I used the double diamond design process to research and ideate potential solutions which allowed me to conduct iterative prototyping.
Conducted a competitive SWOT analysis to gain qualitative data comparing the Transit and Citymapper bus navigation apps.
TRANSIT
Intuitive, easy-to-read map.
Tracks buses in real time.
Map changes bus information as you move around.
Competitor apps have clearer systems for saving favorite and essential destinations.
CITYMAPPER
Bright, vibrant design.
Saved addresses easily accessible.
Dashboard difficult to interact with (confusing UI).
Competitors can track buses in real time.
Gathered quantitative data by conducting a survey of 22 users of public bus transit systems.
When asked how satisfied users were with their current bus navigation app:
23.8% of users were very satisfied.
61.9% of users were only somewhat satisfied.
14.3% of users were dissatisfied.
When asked how timely users' buses are:
9.5% said their buses were very timely.
85.7% reported their buses being only somewhat timely.
4.8% said their buses are always late.
When asked about users' punctuality when arriving at bus stops:
70% of users said they tend to be early.
5% reported usually being right on time.
25% said they tend to be rushing.
When asked which improvement users would like to see most:
59.1% of users said they want live GPS bus tracking.
18.2% wanted an easier way to find connection routes.
4.5% wanted better walking time estimates to bus stops.
18.2% did not see a need for improvements.
Developed a qualitative empathy map in order to put myself in the users’ shoes and further understand their pain points.
PAIN
Buses are not always on time.
Planning efficient routes is difficult and requires mental math.
Managing walking time is tough; it's hard to know when to walk or run.
GAIN
Giving users improved features based on pain points will increase usability.
A better sense of exactly where the bus is and how long it will take to walk to the bus stop will comfort the user.
Created a user journey map to identify process of the user's path as well as pain points and opportunities.
Searching > Walking > Identifying > Waiting > Boarding > Riding > Adjusting > Finishing
Users navigate these phases in their practical journey of using the public bus system. The users' core intent is to stay focused and simply get from A to B. How might Lucas arrive at his destination while experiencing a minimal amount of stress?
Developed user stories to further define the scope and narrow in on specfic use cases.
1. As a frequent user, I want to see where my bus is located so I can know when it will arrive.
2. As a frequent user, I want to know which bus is mine so I can ensure I'll get on the right one.
3. As a frequent user, I want to know how fast I need to walk to my bus stop so that I can get there before my bus arrives.
4. As a frequent user, I want to add a stop to my trip so that I can run another errand.
I defined the user paths as they flow through the UI itself by generating user flows.
Developed a site map in order to lay out the information architecture clearly for development.
Here, I began digitally designing and iterating within Figma to generate this low-fidelity prototype for testing.
I approached the landing page UI with simplicity in mind while having primary access to the map as well as the search function.
This page allows users to effectively identify the most efficient route and understand which buses will take them to their destination, with most efficient trip coded as priority.
The departures page will help users understand when their chosen line will arrive, and give them details as to when the next buses will arrive.
The route summary page allows for the user to overview their plan before starting the trip and triggering the live-tracking functions.
The trip in progress page shows the user their current location with walking speed recommendations as well as real-time bus location and distance GPS tracking.
The trip details page expands the copy details and reveals the full route summary as well as information about how many buses will arrive before the user's bus at their stop.
In this phase, I developed the visual design to bring out the design's personality to further enhance its functionality and accessibility.
Developed a style tile in order to ideate possible directions for the visual design and typography.
This mood board shows my visual thinking and inspiration as I developed the UI branding. I spent a lot of time considering the Uber and Lyft UIs, and imagined using the app in a futuristic setting. The blue and white color branding took inspiration from SmartWater and science fiction. I imagined myself walking down this hallway, carrying a SmartWater, and using the app. You can also see that I studied competitor's app icons and logos for inspiration.
This flow chart is an example of my thinking process when developing an original app name. Using this process, I was able to ideate the final name, Navibus, within 30 minutes.
I developed this icon and logo based on the culmination of my brand study.
This is the final color palette for the app's high-fidelity design. These colors meet AA and AAA standards with a color contrast checker for accessibility.
I chose to build the app using iOS San Francisco fonts to utilize their familiar mental models and patterning in order to help the user feel immediately comfortable.
This design process culminated in a user-centered, streamlined, and accessible high-fidelity navigation prototype.
I used iOS left-alignment techniques to create a more fluid sense of patterning so that users could easily navigate the UI with their predefined mental models.
In this version, I more clearly identified how the app can be used by users to travel through the Washington & State bus stops by showing all of its seven lines.
The departures page illustrates how a user can view and select either the soonest, or each future bus leaving the Washington & State bus stop.
The route summary page was streamlined and show users their trip details before beginning the trip sequence. Note the similarity of circular and linear shapes within the branded patterning.
The trip in progress page shows important trip details in equal parts copy notifications as well as the visual tracking of the user location on the map in tandem with the bus live-tracking GPS. I changed the "walking time" to "moving time" for accessibility as not everyone can as their form of movement.
The trip details page shows an expanded version of the trip details. The idea behind the two options for view the details with the map is that some users cannot walk and read at the same time, but can view the symbols corresponding with their movements on the map.
The adjust trip setting is accessible via the trip in progress page. This function was an allowed edition beyond the initial scope of the project by my stakeholder. This is because I was able to identify via user research that many users find editing their current trips to be a major pain point. This function allows the users to add and reroute their trips after beginning the trip in progress sequence.
This screen represents the onboarding process. As you saw in the clickable prototype, this function serves as a user's initial interaction with the product when first interacting with the app. It simply allows access to the user's current location for GPS tracking purposes. If the user says no, it routes them to another page explaining the limited features thereafter.
In the settings page, users can toggle the current location services on and off, as well as enable push notifications. It also provides a feature to save preferred addresses. These addresses can be used to allow tracking of bus GPS locations even if the user has not enabled their location services.
I conducted a series of usability testing through Zoom and in person.
These tests aimed to find the successes and problem points of the user flow.
Onboarding: All users responded well to the onboarding process.
Determining the bus route: All users were able to quickly and easily click through the search bar to find the bus route listings. My first user was confused by the fact that the prototype was not yet coded. I explained this to each following user.
Determining departure time: Each user was able to easily locate and report back the bus departure times.
Determining movement speed: Generally it took a bit of searching, essentially the typical amount of time it takes to read the details once the trip has started.
Determining bus distance: There was a varied response. Some users first looked to the map and made deductions based on the GPS bus locations. Others saw the "buses away" feature.
Adjusting trip: As this is a new feature that is attempting to create a new mental model, users needed a bit more prompting to find this function. It would be well served to have its own onboarding tutorial.
Overall, the testing went very well and I received a lot of positive feedback. After putting so much time and work into the user research and iterative design process, this was a rewarding experience. Every user said the process was, "very straight forward." In the future, I would like to test a range of people with different technical abilities.
One user suggested a function be added so that they can click back to the dashboard to access settings from the keyboard screen when searching for a destination. I implemented this suggestion. For future iterations, I would recommend taking a look at the onboarding sequence for the "adjust trip" feature. I would also consider changing the word, "adjust," to "edit," as that is a more familiar adjective to most users. Another consideration is to reword the buttons in the trip sequence pages. These could possibly be more effective if integrated into drawers or overflow functions.
The GPS tracker reinforces visual calculations while moving. Some people are not able to move and read simultaneously.
The minimalist design allows for ease of cognition.
The design colors were ran through a color contrast checker to ensure their accessibility.
The conventional navigation app word, "walking," was changed to "moving" in all instances. This ensures no users who are unable to walk are excluded in the language.
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
Riders can tell when each of the buses arrives at the Washington & State bus stop by viewing the all possible routes page, the departures page, the live tracking bus GPS function, and real-time count down notifications.
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop by using the movement speed suggestions, the bus GPS tracker, the departure times, and the real-time buses away notification feature.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Riders can select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop by simply searching a place or address that routes through that bus stop. They can then select one of the seven routes on the all possible routes page, and view future arrival times for any selected route on the departures page.
This MVP delivers solutions via qualitative and quantitative research and design through the double diamond, user-centered design approach. With user intent and accessibility always at the forefront of every decision, this product performs efficiently and effectively in the hands of those who need it most.
Taking on this design challenge was a thought-provoking exercise, and allowed me to think about digital applications from the perspective of any potential user. This experience showed me that not only am I good at applying empathy to critical thinking — I enjoy it. As my first UX/UI project and case study, I will always look back on Navibus as a formative, and fortuitous, journey.
Thank you for reading my case study based on my bus navigation app project. If you have any questions please feel free to reach out through my contact page or LinkedIn.
Cheers,
Wesley
