BusIt App: Real-time Bus Updates

Thinkful School Project, Lead UX/UI Designer

BusIt is a new bus app created for the transportation agency in a midsize metropolitan area in the midwest. It provides public transportation users with real-time information to a network of buses with locations, schedules and updates. 

Overview

The Problem

Public transportation users currently get bus schedules from the transit agency website, which rarely shows accurate expected times. Due to expansion, more bus routes have been added and many of those routes stop at the same bus stop. Riders want to know when the next bus will arrive at each stop and how much time they have to get to the bus stop.

Users: Public transit riders in the metropolitan city.

Project Goals

1. Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.

2. Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.

3. Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.

Process

Double-diamond design process

  • Discover

  • Define

  • Develop

  • Deliver

Discover

The project kicked off with research to better understand the user and competition. I conducted a competitive analysis, user surveys, user interviews and user personas to inform the best strategy to develop a brand new bus app.

  • The competitive analysis provided insight into what common transit apps include and prioritize.

  • The user surveys and interviews helped establish a persona for the new app. In addition to the personas, it also helped identify what is most important to current transit users across different cities.

    • Most important to users: wanting to make it to their destination on time with and accurate updates to their schedules/routes

  • The persona helped to keep in mind the end user and what is most important to them.

Persona

Define

Before creating wireframes and prototyping, I developed a site map and user flow to better understand the problem and how to map out a solution. Since this was also a new app, I had to develop the logotype and style guide as well. I created a mood board to help influence the final design. 

Site Map

User flow

Logo discovery

Style Guide

Through accessibility testing, I discovered the primary blue color was only acceptable when used against a white background. I made sure to take this into account while designing the app further.

Develop

I created wireframes based off the user flow site map. With all the pre-planning it made wireframing very simple. Developing wireframes helped reveal any major issues with initial user flows in the app ahead of prototyping. 

Wireframes

Quick Learnings from user surveys:

  • Condense information so user can get the information they need quicker

  • Make content larger for the user to see easier

I took into account the above callouts from user while moving in to the prototype phase.

Prototype

Discover Again

I revisited the prototype to address the problem that was identified.

  • Problem: users could not see additional bus lines that go to the same bus stops

I was also able to incorporate some of the suggestions from users in the new prototype.

Usability test learnings

Develop Again

After completing the prototype, I conducted two usability tests, which revealed a part of the problem that I had not solved for. Users weren’t able to see what other buses arrived at the Washington & State stop. I was able to go back and tweak the prototype to solve this problem and make it clear what bus lines arrived at each stop.

Before: Upcoming bus times are grouped by the hour. Users expressed confusion with the layout.

After: Users can see a running list of upcoming bus times.

After: users can now see additional bus lines at the various stops. Users are also able to select a different bus line to open up in its own window. See “B4” example.

Before: additional bus lines at various bus stops are not visible

Conclusion

I successfully designed a transit app that can serve the needs of the riders in a metropolitan city and is ready to be fully developed. Through the process I learned the value of usability tests is priceless, because this helped identify a resolution for one of the project goals. 

I was also able to incorporate a common feature found in most transportation apps. In addition to addressing the goals, I was able to add a feature that allows users to search their current location, destination and use local maps on their mobile to access the directions to get them to their final point.