Words / Photos / Designs

BusyBus | Studio

BusyBus Case Study

Desktop - new image.png
BusyBus Final.png

BusyBus

BusyBus is a mobile transit app for the busy bus rider. Know when your bus is arriving and never be late again.

Desktop - new image.png

Design Specifications

Design Role:

UX Design, Visual Design, Branding & Identity, HTML5/CSS3

Deliverables:

User Surveys, Competitive Analysis, User Stories, Branding & Identity, Sketches, High-Fi Mockups, User Testing, Coded Prototype

Tools Used:

Sketch, Figma, Adobe Photoshop, InVision, Google Forms

Desktop - new image.png

The Problem

Transit officials in one city identified a problem. Due to expansion, numerous bus routes have been recently added and many of those routes stop at the same bus stop. Riders want to know what the next arriving bus is and how much time they have to get to the bus stop. Simply rushing to the stop when you see a bus coming no longer works because it might not be the bus the rider is expecting. Riders are currently complaining the most about the bus stop at Washington and State, which has seven bus lines serving the stop.

Desktop - new image.png

The Solution

The solution is an app that provides real-time data on when a user’s bus is arriving, and an interactive map where users can see their bus arriving. The app provides clear information that users need to know, including the bus number, direction, destination, and time. An iOS timetable allows users to see clearly when their bus is arriving, which buses are being rerouted, and which are out of service. Users can elect to receive push notifications to alert them of when they need to leave their current location.

Desktop - new image.png
Green.png

The Design Process

From user research to final prototype and all the steps in between, the following walks through each step of the design process for BusyBus.

Desktop - new image.png

Getting to know the user.

The Survey

I surveyed transit users in February 2019. My goals were to understand what frustrations transit users were experiencing, what types of apps they were currently using, and what gaps they were seeing in their current apps that would help them to have a better experience.

 

The Results

33% of users indicated that they have chosen not to take the bus because it is unreliable.

50% of individuals currently track their local bus schedule using a transit app (such as Google Maps, Transit, Moovit, CityMapper, or other).

43% of individuals who use transit apps indicated that the information is not consistently accurate.

 

The Key Takeaway

Transit users need an accurate transit app that shows exactly when their bus is arriving using real-time data and a clear timetable. View the survey.

Desktop - new image.png

Understanding the Competition.

Google Maps

Strengths: Google Maps has high name recognition and a long history of success (nearly 2 million app downloads). It is infused with other popular navigation systems, including Uber and Lyft. The interface is simple and easy to use, and the app enjoys wide usage - it is available anywhere in the U.S. and hundreds of international cities.

Weaknesses: The app cannot alert you of your stop when you’re offline, and does not offer a comprehensive bus schedule.

Could serve as a leader in innovation.

Opportunities: With the most name recognition and so many users, there is room for leadership in innovation. Additionally, as the most ubiquitous and well-known of the apps, has a built-in engaged audience

Threats: Because of its ubiquity, some users may experience “Google exhaustion” and seek out another option. Other start-ups and newcomers have more precise data.

 

Citymapper

Strengths: Citymapper is innovative and forward-thinking, offering users robust information to provide the best experience. It utilizes a combination of tools to generate the most accurate real-time transit information, and offers its users a personalized experience.

Weaknesses: The app is not yet widely used, its niche focus and brand may exclude older users, and the “Transit Map” only shows subway lines, not bus routes.

Forward-thinking with momentum.

Opportunities: The company is youthful and of-the-moment, has the opportunity to draw Millenials and Gen-Zers away from Google. They are forward-thinking and has the momentum for continued innovation.

Threats: Google continues to be the most well-known in the mapping space.

 
Desktop - new image.png

Summary of Opportunity

There is an opportunity for a competitor in this space to better serve bus riders by easily showing real-time data of upcoming buses in a location without the user needing to put in a destination, show a complete map of the bus routes and information on which bus to take to get to their destination, show real-time information on bus rerouting or detouring, and offer users a comprehensive schedule to view that shows all stops and times for a single bus route.

Desktop - new image.png

User Stories

User stories help to define the priorities of the user in order to understand the MVP features of the app.

 
Busy Bus User Stories
 
Desktop - new image.png

Sketches

Initial sketching helps to work out the issues of the design prior to creating a high-fidelity mockup. This sketch was improved upon in the final design following user testing.

 
prototype3.jpg
 
Desktop - new image.png

Branding & Identity

Logo

BB Green Logo.png
BB Green Logo Copy.png
BB Black Logo Copy.png

Color Palette

 
BB Color Palette.png
 
Desktop - new image.png

High Fi Mockups

BusyBus Transit Screen Version 1

BusyBus Transit Screen Version 1

BusyBus Transit Screen Version 2 - Removed second search bar, changed hierarchy of search. Rounded icons.

BusyBus Transit Screen Version 2 - Removed second search bar, changed hierarchy of search. Rounded icons.

BusyBus Transit Screen Version 3 - Updated table to provide information users need, created hierarchy of current buses running, those rerouting, and those out of service.

BusyBus Transit Screen Version 3 - Updated table to provide information users need, created hierarchy of current buses running, those rerouting, and those out of service.

Desktop - new image.png

User Testing

User testing brought out the flaws of the original design. The original function of the two search bars was to allow the user to have the ability to input their current location as well as the location of their bus stop, but this proved confusing and unnecessary for users. By the second design, I incorporated only one search option, which auto-populates a user’s closest bus stop based on their GPS location. This could be changed simply by typing in a different bus stop. The table at the bottom remained the same, but rounded squares provided a softer, more playful feel.

The final design kept much of the second, but updated the table to include much more information relevant to users, including the stop location, the direction the bus is traveling, and the time of its arrival. Rerouted and Out of service buses were highlighted to ensure they were made visible to the user.

Desktop - new image.png

Final Prototype

BusyBusScreens.NewUser.png
BusyBusScreensv3.png
BusyBusScreensv3screen3.png
BusyBusScreens v3 screen 4.png
Desktop - new image.png

Conclusion

The critical thing to get right with BusyBus was the MVP. What exact features were needed to provide a solution to the issues faced by riders in this city? There are plenty of transit apps that provide the user with extras: full transit maps of their city, directional routes, walking and biking maps, routes to increase calorie burning, etc. It was tempting to add extra features into this app that would make it more in line with its competitors. However, before it could do anything else, BusyBus had to respond to the central problems: A user needs to know 1) when their bus is arriving, 2) how much time they have to get to their stop, and 3) how to know which bus is theirs. Building the user stories was especially important to visualize what was needed and what was lower priority for a second or third version of the app.

In its final form, BusyBus answers the questions of transit users by providing simple functioning, easy readability, and real-time information. To see a slide deck of the full case study, click here. To view the coded prototype, click here.

 
 
CityScape Copy.png