hero hero

BusyBus

BusyBus is a visual design & frontend project that the local city transit system is working on for all commuters in a town near you.

  • Roles

  • UX Designer

  • UX Researcher

  • Visual Designer

  • Frontend Developer

Summary

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.

Problem

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.

Solution

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.

The Discovery & Strategy Phase

User Surveys

Understanding our Target Market

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:

  • The types of public transportation users take;
  • How riders navigate their way through public transportation;
  • Frustrations or confusions with public transportation;
  • To find out what riders need to get to their destination without getting lost;
  • What future solutions they would like to see to get from point A to B

This survey was completed with 21 respondents. Here are some key results:

100%

Have taken some form of public transportation

76%

Have gotten lost using public transportation at some point

81%

Checks their phone/app when they realize they are lost

73%

suggest having clearer signage throughout Public Transportation
If we were to make an app, what improvements would riders like to see? Riders suggested:
  • • Real time tracking
  • • Incorporating AR in the map or on a layover
  • • A better way to go offline (due to no service underground)
  • • Include photos of signs and a stop, or clearer landmarks as a point of reference so you know where you are
Competitive Analysis

Looking at the current competition

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!

Google Maps
Google Maps

“Navigate your world faster and easier with Google Maps”.

Strengths
Google is a widely known company, and Google Maps looks clean with clearly defined streets, highways, establishments with map details: Transit, Traffic, Biking

Weakness
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

Opportunities
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.

Threats
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.

Citymapper
Citymapper

A “visual discovery engine for finding ideas like recipes, home and style inspiration, and more.”

Strengths
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.

Weaknesses
Does not show driving GPS and navigation, and is not offered in all citiies.

Opportunities
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.

Threats
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.

Information Architecture Phase

User Stories

Stories for every user

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:

  • As a returning user, I want to figure out which bus to take
  • As a returning user, I want to find out what time the next bus arrives
  • As a returning user, I want to know how much time I have to get to the bus stop
Sketching

A three screen sketch prototype approach

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

Usability Testing

User Testing on Maze

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:

Take me to my destination in the least amount of time.

Based on the results, the user tests’ time varied between 9.8 seconds to 52.53 seconds, and I found:

  • • 25 % of the users were able to go through the app efficiently without any misclicks
  • • 50% of the users selected a bus on the first try to go to the last screen
  • • 75% of users selected the “search” toolbar eventually to get to the next screen
  • • 50% of users were able to select a bus to get to the last screen

After analyzing these tests, it helped me understand what worked and what doesn’t work.
  • • Navigating on screen #1:

    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.

  • • Screen #2:

    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.

  • • Based on this feedback, I chose the most important screen (screen 2) and made some revisions.

Prototype

The BusyBus Sketch Prototype

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.

BusyBus Sketch

The Visual Design Phase

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).


Frontend Development

Final Design

The Finishing Touches

After finishing the high fidelity mockup, I learned how to use the terminal, Git, GitHub, HTML, and CSS to translate my visual design in Figma to a working prototype.



View on Github

The Evolution of BusyBus

Click photo to view larger

When implementing the frontend HTML & CSS, we were provided with the correct bus numbers, names of the bus routes, direction the buses are going in, frequency, and even outages. I removed the “BUS” above the bus number to remove redundancies, left aligned the bus number, but kept its color purple. For out of service buses, I highlighted them in red and changed their duration to 0 minutes to alert riders.

What I learned the most from this BusyBus case study was visual heiarchy, frontend HTML & CSS, and learning how to keep your designs simple. For coding, I learned how to create objects within CSS, and how much alignment is important. On my frontend development, I do have a hover over state, but since this is a mobile app, users will not enjoy this feature.

If I had more time, I would continue building these additional screens and code them.

Back to Top