1BW Hero2.png

App Design: One Bus Away

One Bus Away (2017)

App design, brand redesign

 
 

Overview

 

Team

Maxwell Crabill
Ksenia Ivanova
Clare Ortblad
Phillip Carpenter

Contributions

UX Design
Creative Direction
User Research
Microinteractions
Marks and Symbols

 

Guiding Question

What makes the OneBusAway experience so notoriously user-unfriendly, and how might we change that?

Goals

To diagnose the painpoints of a utility-focused app, and redesign it from the ground up, with people in mind.

Summary

OneBusAway is notoriously user unfriendly. We surveyed users to profile the average experience. We discovered that the app is perceived as overwhelming and frightening to new users. People are disoriented by the app's tendency to display large amounts of data at once, usually in a non-visual, text and number-based fashion.

In our redesign, I pushed to hover all UX elements over an ever-present map to keep the user from getting lost. We made the visual scheme subtle, calming, and representative of the app's PNW roots. We implemented a new trip finding feature, and swanky microinteractions to dial up the feeling of responsiveness and improve user confidence.

 
 

Pain Points and Principals

Fear and loathing in Seattle

Our team spoke with OneBusAway's developers and polled anonymous OneBusAway commuters to figure out just where the app fell short. The app's core shortcoming? Fear.

  • OneBusAway was too cluttered with information, and displayed that information through a bombardment of numbers and text.
  • OneBusAway's flow was both too broad AND too deep, causing users to become disoriented within the app.
  • OneBusAway had no way of orienting and guiding new users, or helping them find bus routes.

Goals and Guidance

OneBusAway's ultimate role should be to provide commuters with a sense of reliability in the midst of a notoriously unreliable public transit system. When we began our redesign, I helped devise a set of principals based around this identity to guide us. These principals responded directly to the app's pain points, while seeking to preserve what was already working with the service.

Features and Contributions

Map-based Navigation

  • I identified the map screen as an important visual and navigational anchor, and pushed to have it serve as the center of our redesign.
  • In-person user testing with early InVision prototypes confirmed its importance. Users felt disoriented and confused whenever the map disappeared.
  • I pushed to have the map consistently visible, always resting behind other UI elements so the user would never feel lost when exploring the app's many features.
  • This lead to the adoption of our floating task bar, and the use of slide-up drawers as our main organizational scheme.
  • I opted to make the "show route on map" feature a more prominent option when looking at stops and routes, so commuters could learn routes quickly and confidently with an easy visual aid.
 

Information Organization

  • I helped implement options to filter the information displayed on the map screen. Filter options include stop types, favorite stops, and an expandable circle which would determine the on-screen area in which the app would load and display information.
  • The "favorites" function of the app was obscure and under-utilized. We gave it a new, prominent spot in the center of the task bar. The option to add routes and stops to your favorites also appears more prominently as you browse stop information.
  • The search function now covers destinations and cross-streets in addition to route and stop numbers. Searching for a destination or cross street will give commuters the option to see nearby stops and the routes that service them.
PortSnip.JPG
 

Visual redesign

  • I refined the look and feel of our navigational icons and app logo.
  • To reduce commuter intimidation, we went for a calming color scheme and a visual style featuring rounded corners and personality-filled shapes.
  • It was important to strike a balance between business and play, both to avoid intimidating the user, and to not misrepresent an app which was fundamentally rooted in information and practicality. 
 

Microinteractions

  • Examples of individual flows and interactions I designed throughout the project for bus stop filtering, route details, and stop information.
Details.jpg