BusyBus
The concept of public transit trackers offers up a wealth of opportunities to work with imperfect data that is incredibly important to the users of a given app or service.
For this project I was tasked with creating a mobile app called BusyBus, an application operated by the local city transit system that serves thousands of commuters in a large city.
The 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.
UX Research : Competitive Analysis
With these challenges in mind, I first wanted to study the design strategies and approaches of current transit apps. This led me to perform a competitive analysis report of two potential competitors — CityMapper and Transit — in order to assess each apps’ strengths and weaknesses. I also identified potential threats to each app’s viability and outlined potential market opportunities for the BusyBus app to focus on.
UX Research: User Survey
After researching potential competitors, I wanted to focus in on collecting data of the attitudes of current and potential transit app users.
To achieve this, I built out a user survey using Google Forms and surveyed 22 participants that ranged across both transit and transit app users.
From this survey I was able to observe three primary features based on the data of user needs:
1. Nearest bus stop location
2. Real-time updates of bus arrival
3. Notification(s) of delays
A detailed analysis of this survey can be found here.
UX Research: User Stories
Lastly, I wrote user stories ranking a variety of tasks that the BusyBus app should take into account for returning users. I wanted to be sure that I could accurately rank the tasks based on all of the data that I had collected from my research.
I also wanted to be sure that a hierarchy of needs was established in order to proceed into the visual design phase of the project. Having this asset for reference would be crucial for designing the precise product that would satisfy the needs of the user.
Building a mockup
Using guidance provided from my user research, I first designed a wireframe of the different screens. I used the iOS Human Interface Guidelines to be certain that the user would not be visually overwhelmed with both information and layout.
Starting out with the wireframe was very important for determining the layout and spacing of the different screens because it allowed me to focus on how the information was organized rather than what it would look like in its final form.
Designing the Mockup
Using guidance provided from my UX Research and wireframe, I designed a high fidelity mockup of the BusyBus bus stop display screen.
I wanted to be certain that the user would be able to effortlessly navigate the interface so they could quickly find the stop they were looking for.
Special attention was placed on adhering to the iOS Human Interface Guidelines in order to develop color scheme.
Finding the right route
For the “Choose Busline” and “Line Number” screens, it was very important that the user would be able to quickly differentiate between the various line options in order to confidently choose the bus/line that they would need.
Based on the user research, easily identifying the desired line was more important than identifying the closest line. With this information, I arranged each line numerically and color coded the different line numbers.
I also included a proximity status feature next to each line in order for the user to gather a complete realtime snapshot of the different bus/line’s location relative to the user’s stop.
Lastly, I wanted users to be able to clearly identify any bus that was within 5 minutes of arriving at the desired bus stop. This led me to color coding all timing less than or equal to 5 minutes with the color red to suggest immediacy and urgency to the user so they could more easily make an informed decision.
Building the prototype
Creating a clickable prototype was crucial for gaining key behavioral insights about user interaction with the product.
For this project I used Figma to coordinate and connect the appropriate fields together in order to begin usability testing.
I wanted to be sure to create as realistic an experience as possible for usability testing. This meant creating (and testing) appropriate screen transition effects for each gesture or touch that the user would be performing.
Usability Testing
Once the prototype was constructed, the mockup was then tested for usability by 33 participants with various levels of experience and comfortability using tech.
Participants were prompted to complete tasks, which would test the navigability of the app and uncover any design flaws. After 3 rounds of user testing and an overall iterative process that lasted 2 weeks, the final product for the project was complete.