BusyBus is a visual design & frontend project that the local city transit system is working on for all commuters in a town near you.
Click on the design deliverables below to jump to specified section on this case study.
Discovery & Strategy Phase
When a local city starts to expand its public transportation bus routes, many times there are growing pains. For this expansion, our local city is running into a few problems and would like them resolved by creating an application. Our role is to create BusyBus, a project that the local city transit system is working on for all commuters in a town near you.
Numerous bus routes have been added and many of those routes stop at the same bus stop. Riders are currently complaining the about the bus stop at Washington & State, which have 7 bus lines serving the stop.
The goal is to work with the local city to create an interface application that easily helps riders know what the next arriving bus is, and how much time they have to get to the bus stop. We created BusyBus, an application to help riders know what the next arriving bus is and how much time they have to get to the bus stop.
I conducted a survey on a new proposed app, called BusyBus, and over a 48 hour time span with a total of 21 respondents. Of the people who were surveyed, 100% of the respondents have taken some form of public transportation. I needed to learn:
This survey was completed with 21 respondents. Here are some key results:
I ran a competitive analysis so that we understand the current transporatiton applicaitons in major metroplolitan areas. With a huge variety of applications that are currently out there, how could we make BusyBus stand out?
I did research on two different applications, one that 71% of my respondents prefer using: Google Maps, and then another application I was not familiar with but wanted to learn more about: Citymapper.
From this competitive analysis, I learned to create an application with a blend of both, focused on the local public transit bus system’s real time data and with great navigation. If possible, add in Augmented Reality!
“Navigate your world faster and easier with Google Maps”.
Google is a widely known company, and Google Maps looks clean with clearly defined streets, highways, establishments with map details: Transit, Traffic, Biking
Walking directions can be tough when Wifi or cell phone data is low.
When figuring out where to travel to, the mode of travel is a swipe left or right - sometimes it’s hard to realize what mode of travel you’re on (car or train) until you look at the directions
Brand: Google is one of the top, if not top widely known brand around the world and Google Maps is offered in 220 different countries so it’s helpful for travelers going from city to city and alleviates the pain of having to go from a different application system.
When using an iPhone, Apple Maps comes with it, so Google Maps is not dominant. App can be more proficient with subway and public transportation.
A “visual discovery engine for finding ideas like recipes, home and style inspiration, and more.”
You can select your mode of navigation through a toolbar - Maps, Bus, Muni, Bart, Lines, Rail, Bike, Scooter, Moped and more. Includes detailed public transportation info like timetables of a specific bus route, times you need to be at the bus stop, how crowded your bus is, and if there are any seats for you.
Does not show driving GPS and navigation, and is not offered in all citiies.
Brand: An all-in-one app for most types of transportation to help simplify all of the public transportation apps.
Has integration and partnership with many different external companies that help you get to your destination. If you take a specific mode of transportation, lets say a scooter, it shows all of the different scooters around and integrated with different companies, such as Skip, Lime, Scoot, & Bird.
Only offered in major cities. For a city that is not offered yet, another app can quickly enter to their city and dominate that area.
Creating user storeis helped me create and prioritize tasks that must be accounted for in the application. Some of the user stories that helped make a Minimum Viable Prototype for the local public transportation app are:
I created this three screen prototype of BusyBus, a project that the local city transit system is working on for all commuters in a town near you. I needed to create an app that helped riders know when the next arriving bus is and how much time they have to get to the bus stop.
My thoughts to create these sketches are going to be described going from Screen #1 to Screen #3, which is from Left to Right. This is my BusyBus Three Screen Sketch Prototype that I created based off my User Survey, Competitive Analysis, and User Stories.
• The first - map view that includes where you’d like to go
• the second is a list of the bus stops that stop at the nearest bus stop Washington & State
• third is a step-by-step direction on how to get to your destination
I needed to test these screens to see if they were working as intended. In order to do so, I uploaded sketches to Marvel, and imported them to Maze. Then, ran 4 tests to see if users would understand where to navigate. With their screenshots below, heatmaps are shown where the user tapped and wanted to go. I asked users to:
Based on the results, the user tests’ time varied between 9.8 seconds to 52.53 seconds, and I found:
75% users seemed to go directly to the search bar, but the remaining user selected the icons underneath. I found that these icons underneath the search bar might not have been useful for this task.
Since the rider’s task was to the bus route that was the quickest, they did not need to re-enter their search. I wasn’t sure whether to remove the two search bars on the top, but decided to leave them there.
Picking out one of the screens that best resolves the issues, I chose this one so riders could easily view all of the buses that were arriving at that bus stop, and select which bus to take next.
• My thought process is to show a list of all the 7 buses showing up at Washington & State.
• At the top shows two navigational fields to view, adjust, or re-input your start and end destination.
• When looking at the list of buses, for each bus, from left to right, will display the bus number, how long the bus ride will take
• The bus route
• And how many minutes until the next upcoming bus(es) are arriving.
Throughout the visual design of BusyBus, I knew I wanted to keep the BusyBus app clean, simple, and light.
From the paper sketch prototype, I used Figma to create a visual design and high fidelity mockups based off my sketch, shown in the middle. I created the BusyBus and the next arriving bus icon, and used the iOS location icon for the rest. After adding the icons in, the screen looked too repetitive, and literally, busy.
For the next high fidelity mockup and final design:
• I removed the bus icon, and enlarged the bus number (I was bummed I wasn’t going to use my handmade bus icon)
• Removed the top navigational piece as it was not needed (initially from doing my competitive analysis, I thought doing a navigational piece was a great add on, but from the client, it was not). So I removed it to not introduce scope creep
• Removed the next arriving bus icon
• The large blocks of numbers on the left hand side were too close together, so the minutes got moved to the right while the bus number remained
• The right hand alignment was hard to read for the buses, so it moved to the middle and was left aligned
After a few iterations, the final visual design of the the app is a light gray, and I added a pop of color for the bus numbers in purple. The bus information is in SF Pro Display and arrival time in SF Pro text, and are in different sizes, weights, and colors to show visual heiarchy.
The final high fidelity mockup now helps riders know what the next arriving bus is by displaying the bus number (on the left), how much time they have to get to the next bus stop by including its frequency (in the middle), and how long the bus ride will take (on the right).