One Bus Away

Audience

Seattle Commuters

Team

Maxwell Crabill, Ksenia Ivanova, Clare Ortblad, Phillip Carpenter

Contributions

UX Design
User Research
User Testing
Microinteractions
Marks and Symbols

Fall 2017

Preventing users from getting lost in Seattle's most popular navigation app.

We had the privilege of creating a ground-up redesign of the free, open-source, Seattle-born metro app OneBusAway, working alongside its original creators.

While beloved by many, OneBusAway was also the subject of much ire from its users, thanks to its overwhelming user interface and its notorious "sink or swim" approach to navigating its unintuitive interface.

Our team conducted research to pinpoint the specifics of the app's problems and the grievances of its users, and overhauled the app in our quest to rememdy them.

How might we create a more relaxing and intuitive experience for new OneBusAway users?

Research

01
—

Formative Research

OneBusAway's 2017 iOS Design

Transit App's 2017 iOS Design

CityMapper's 2017 iOS Design

—
‍

We surveyed over fifty commuters about their experiences with the OneBusAway app, and any experiences with its competitors, via facebook.

—
‍

We audited OneBusAway and its competitors, including Transit and Citymapper, and mapped existing user flows to understand preexisting design solutions in our problem area.

—
‍

We ran user tests of the current incarnation of the app to observe pain points.

—
‍

We ran card sorting activities with potential users.

02
—

Discoveries

—
‍

OneBusAway's signature method of frustrating its users was information overload. The app had a nasty habit of displaying floods of data & symbols with little hierarchy to distinguish it all, to the point of slowing itself down and crashing at times.

—
‍

OneBusAway's flow was both far too broad and far too deep.

—
‍

Many expected the app to tell them how to get places, or to give them any help understanding the metro system. Users could become frustrated and self-effacing when failing to figure it all out themselves.

—
‍

Once again, frustration and self-blame was the result of a UX failure.

03
—

Principles

Cool Head

Calm and center the commuter. Navigating Seattle is stressful enough. Use blues and teals. Soften corners and straighten edges. Blue-tinted reds bring gentle focus to points of action.

Clear Mind

Reduce informational clutter. Show data only when it's needed. Display information visually and spacially whenever possible.

One Touch Away

Prevent the commuter from feeling lost. The map screen is the definitive homescreen. Hover UI elements above it as cards, and seldom completely obscure it, so the user can always quickly return.

Responsive

Make sure the user feels confident and in control. Implement responsive microinteractions and clear descriptions. Keep some redundant functions, such as drag-to-refresh, if they're a source of comfort and security for users.

Development

04
—

Iteration and User Testing

An image of a prototype of a bus navigation app

An image of a prototype bus navigation app in a blue and green color palette

An image of a prototype navigation app in blue and green

An image of a prototype bus navigation app with a solid green navigation bar at the bottom

A photograph of two designers running a usability test with a test subject, who is using their phone to access a prototype.

An over-the-shoulder image of a test subject exploring a prototype app

—
‍

We iterated the design several times.

—
‍

We conducted several in-person user tests, using Sketch and InVision, to inform our prototypes.

Final Decisions

05
—

Art Direction

Color
We chose Blue and Seafoam to dominate the app's palette. We cooled our red to a calmer shade of tiger lily, and used it sparingly to indicate points of interest.

Shape
Rectangular shapes evoked stability and reliability, with rounded corners to keep things friendly.

Icons
I created OneBusAway's icon set for our redesign. It was important to maintain the spirit of the original, detailed icons, while creating a cohesive look which matched the balanced work/play language of our redesign.

06
—

UI Principles

We developed the UI with a set of principles in mind:

Keep the map (and thus, homescreen) visible at all times.
Create a reliable navigation bar to pair with the homescreen, and visibly hover it above the map to reinforce the map as the user's ever-present "ground."
Prioritize visual information over numerical or symbolic information at all times.

Map-Based

The city map became a persistent, full-screen backdrop. This would prevent users from ever feeling "far from home" as they delve deeper into the app's screens.

Navigation Bar

We floated the nav bar above the map, when previously it had been anchored to the screen. This was to make Seattle itself feel like the user's home base, and OneBusAway's UI just a friendly navigation tool overlayed atop the city.

Prioritizing Visual Over Numerical Information

If the answer to a user's question can be displayed on the map, the option to do so will be displayed before the option to do so via a list of information. After all, the map is our home.

07
—

Features & Flow
‍‍

New Feature: Route Planning

An often requested feature, now realized for the first time. OneBusAway helps you plan the most efficient bus routes to your intended destination.

New Feature: Stop Filters

Control the types of stops OneBusAway attempts to load, and the distance from the point of interest it will load said stops.

Endnotes

08
—

Lessons Learned

The Same Page

Users would use OneBusAway with an inaccurate idea of the app's capabilities, being set up for failure from the start. When they weren't able to plan routes, search stops by region, or scan bus routes via map, they would become frustrated and give up.

UX Design is Emotional Design

Ultimately, if the user feels successful when using the app, we've done a good job. Feeling is everything, and aesthetic touches like colors and microinteractions proved valuable when designing for a desired emotional outcome.

Information is Double Edged

Confusion was the outcome we tried hardest to avoid, and so it was best to cut down on numbers and colors, and to deepen app flow. It doesn't always matter if the desired information isn't on the first page, so long as the user knows how to find their desired information quickly and intuitively.