×
Jeff Ragland's Logo

JEFF RAGLAND

UX designer & seasoned vet from Texas

Case Study - BusyBus

About the Project

Featured Project - BusyBus

A mobile app focused on using public transportation in a major city.

The major problem needing to be solved was identifying the next arriving bus and how much time a rider had to get there. Riders were complaining most about the Washington & State bus stop.

My Roles

UX Research, Visual Design, Prototyping

Discovery & Research

User Survey Results

Chart - Do you ride the bus? Chart - How often do you ride the bus? Chart - Do you use a transportation app? Chart - What are your challenges using a bus? Chart - What are you top 3 desired features in a transportation app? Chart - Demographics of survey participants
Button to return to the top of the current page.

Discovery & Research

Competitive Analysis

Screenshot - DC Metro & Bus app

DC Metro & Bus

4.6 / 5 stars
Leverages the “Metro” name
Popular D.C. area transportation app

Requires network access
Screens are text heavy
Website is virtually useless
App use is not instantly intuitive
Free version has ads

Visually robust
Integrate social media with app
Integrated in WMATA marketing

Standalone apps with data available
Users from other cities using competitive apps
Electronic passes available on other
transportation apps

Screenshot - Citymapper app

Citymapper

Intuitive, feature-rich screens
Multiple options for transportation modes
Detailed info such as current location, time to nearest stop, routes, destinations
Elegant Apple Watch integration
4.4 / 5 stars

Loading speed not as fast as others
Focus is more on European market

Tourist destinations worldwide
Rich screen design built around maps
Highly acclaimed app - unique marketing opportunity

80% of sites load faster
Local commuters using other transportation apps

BusyBus can take advantage of identified weaknesses and by providing a well integrated app that allows for offline access and includes an Apple Watch version.

Information Architecture

User Stories

Commuter and Visitor Cartoons

Three tries to get user stories focused on problem and eliminate scope creep. Extra features weren’t properly prioritized initially. Third version more focused on creating MVP. Additional features for trip planning, saving favorites, or buying tickets pushed into lower priorities.

Information Architecture

Sketches

Version 1

Lots of nice to have options not necessary in an MVP

First Version of BusyBus Sketches

Version 2

Still unnecessary features and not focused on Washington & State bus stop

Second Version of BusyBus Sketches

Version 3

More focused on problem bus stop but still includes additional info and layout is tight

Third Version of BusyBus Sketches

Information Architecture

Flows

Screen flows

Information Architecture

Usability Testing

TASK 1

Find buses near their current location

TASK 2

Find details about a specific bus

TASK 3

Find details about a specific bus stop

Users and Tasks image
Text Callouts from Users

Visual Design

Progression

Visual Progression - version 1

Version 1

Problem solution is last in the visual hierarchy
Unnecessary features for an MPV
Arriving bus info lost in hierarchy
Color use not effective

Visual Progression - version 2

Version 2

Next arriving bus info now first in visual hierarchy
Bus info now full width
Unnecessary features removed
Bus info list spacing is to tight

Visual Progression - version 3

Version 3

Next arriving bus info now first in visual hierarchy
More spacing for bus info list
Added directional heading to bus info list
Added refresh icon


Prototype / Testing

Coded version

Screen Shot of Coded App

Challenges

HTML

<div> tags
<ul> , <li> tags

CSS

Box Model
SF Pro / Font element
Background image elements
position: sticky element

Other

Code-Bloat
Parent/Child relationship
GitHub – publish as web page