BusyBus is a mobile transit app for the busy bus rider. Know when your bus is arriving and never be late again.
UX Design, Visual Design, Branding & Identity, HTML5/CSS3
User Surveys, Competitive Analysis, User Stories, Branding & Identity, Sketches, High-Fi Mockups, User Testing, Coded Prototype
Sketch, Figma, Adobe Photoshop, InVision, Google Forms
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.
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.
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.
Getting to know the user.
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.
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.
Understanding the Competition.
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.
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.
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.
User stories help to define the priorities of the user in order to understand the MVP features of the app.
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.
Branding & Identity
High Fi Mockups
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.
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.