UsBus

A transit app for people and the planet.

 
social-feed-monochrome 2.jpg
 

Role

User research

Content strategy

UX writing

UI design

Usability testing

Scope

User research

Hi-fi prototype

Branding

Usability testing

Timeline

3-week design sprint

Tools

Figma

Notion

Zoom

Google Surveys

 

* This was a project I conducted through Thinkful’s UX/UI Immersion Program.

Overview

The Problem Statement

 

Expansions have added new bus lines to stops in a mid-sized midwestern city, causing riders to get confused about which bus line is arriving and when. The city has developed a way to know how far away each bus is from a stop, but they aren't sure how to share that information with riders.

 

Discovery—Get to know the users

Competitive Landscape

 

There are many transit and wayfinding apps. I closely examined how the best 2 apps on the market flow, what they have in common, and what makes them different from each other.

Competitors provided models and patterns that ultimately informed the creation of our final product.

Citymapper

Available in 25 cities. Save work, home, and other favorite locations. Integrated with 'micro-mobility brands' like CitiBike, Lyft (cars and scooters), Bird, etc 🚴‍♀️. Positioned as 'healthy'—gives you a calorie count for walking and biking. They also have mascots for cities called 'greenies', but that seems to be the only mention of sustainability ♻️.

 

Transit

Available in 125 cities. You can link your Uber and Lyft accounts. Ability to adjust settings to show accessibility info ♿️. The app only gives you the option to save work as a favorite 👎. Doesn't show bus stops near you.

 

The Survey

 

I surveyed 22 people on their public transit usage and habits.

The survey and interview results informed my design and helped me decide what type of digital product to create.

Screen Shot 2021-01-29 at 2.09.04 PM.png

Key findings:

 
Most participants (54.5%) only take 1 mode of transportation every day, so having train, bus, rideshare, bike, walk, micro-transportation and ridesharing options all in one app is overwhelming and unnecessary.

Most participants (54.5%) only take 1 mode of transportation every day, so having train, bus, rideshare, bike, walk, micro-transportation and ridesharing options all in one app is overwhelming and unnecessary.

The low environmental impact of public transit was an unexpectedly important motivator for utilizing the system. Most participants (63.6%) said it is one reason why they take it. Positioning the use of the app as an environmentally positive action c…

The low environmental impact of public transit was an unexpectedly important motivator for utilizing the system. Most participants (63.6%) said it is one reason why they take it. Positioning the use of the app as an environmentally positive action could boost adoption.

 
An overwhelming majority (85%) of participants said that the number of minutes until their bus arrives is the most important information they want to know when they are in a rush.

An overwhelming majority (85%) of participants said that the number of minutes until their bus arrives is the most important information they want to know when they are in a rush.

Most participants currently rely on Google Maps (59%) and are neutrally satisfied with their experience. This would suggest Google Maps is a relevant mental model for this demographic/segment.

Most participants currently rely on Google Maps (59%) and are neutrally satisfied with their experience. This would suggest Google Maps is a relevant mental model for this demographic/segment.

The Interviews

 

I conducted 2 user interviews with survey participants that agreed to a follow-up interview.

Key findings:

 

1. Public transit has a reputation to overcome—which is being seen as not dependable and inaccessible. A rebrand and relaunch with a digital presence could shift public perspective to a positive feeling about taking public transit and as a contribution to the sustainability of the local community.

 

2. Arrival time is most important to these users; this will inform the prominence of this info in the UI.

 

3. Users identify the bus # to confirm it is the one they want to board—if this current method fails, there needs to be a safety net built in the app to ensure users board the right bus.

Literature Review

 

When compared to single-occupancy vehicles, public transportation produces 95% less carbon dioxide, 92% fewer volatile organic compounds, 45% less carbon dioxide, and 48% less nitrogen oxide.

I wanted to make this public transportation app so intuitive that it is more attractive to people than using single-occupancy vehicles. I think that behavioral design can help people make better decisions for the environment while still fulfilling their primary need—getting where they need to go.

 

The Primary Persona

 

My primary persona has pain points and goals that reflect demographically similar users I observed in my surveys and interviews.

UsBus Persona.png
 

Journey Mapping

 
 
 

Define—Information Architecture

User Stories

 

I prioritized user stories, which helped me stay within scope.

UsBus user stories 1
UsBus user stories 2
 

Sketches

 

I sketched out the new feed, profile, and search feature.

On-boarding sketches

On-boarding sketches

Search sketches

Search sketches

Nearby sketches

Nearby sketches

Menu sketches

Menu sketches

 

User Flows

 

I mapped the flow a user would take through the app to make sure the universal design principle of simple and intuitive use was met before I started building. Here is an overview of my user flow—each purple oval represents the launch of separate feature or user goal.

User flow overview

User flow overview

On-boarding flow

Menu flow

Search flow

Nearby flow

 

App Map

 

The app map I created helped me lay out exactly what content should go where.

 
App Map 2.0 - UsBus.png
 
 

Develop—Wireframes, Brand + Testing

Accessibility

 

Accessibility was top of mind—I applied universal design principles, like simple and intuitive use, and size and space for approach and use. I approached information hierarchy with a critical eye and made sure the most important information was discoverable.

Matching users’ current mental models of Google maps and other transit apps guided my design decisions.

Wireframes

 

My first iteration of wireframes were drastically different than my final design. This version has 3 tabs: directions, stations, and lines.

On-boarding wireframes - V1

On-boarding wireframes - V1

Directions - V1

Directions - V1

Stations - V1

Stations - V1

Lines - V1

Lines - V1

 
 

During rapid testing, it proved more intuitive to have one landing page with all of these capabilities in one.

On-boarding wire-flow

 

Search wire-flow

 

Nearby wire-flow

 

Menu wire-flow

 

The Brand

 

Accurate, clean, friendly. The idea behind this app's branding and positioning is community forward, efficiency-focused and transparent about its impact.

Accurate, clean, friendly.png
 

The app leverages the localization of the project to connect with users' emotions associated with place and home.

UsBus Style Tile.png
 

Acumin is functional and clear for everyday display use. Druk Wide adds a strong typographic hierarchy for the logotype and headings. Romana for subheadings adds a necessary contrast to the ultramodern san serif fonts. The combination of a san serif, slab serif, and serif font create a balanced appearance on the screen.

Usability Testing

 

I conducted 2 moderated usability tests.

Tasks

 

1. Create an account.

2. Search a location and get directions.

3. Add a favorite location from the menu.

 

4. Find emissions stats.

5. Identify what buses are arriving nearby.

 
 

Users liked the sustainability aspect but felt like they were already taking the most environmentally friendly mode of transit they could. They didn’t like being asked to offset emissions for the already-low impact travel.

To remedy this in future iterations of development, I could track savings instead of spent carbon.

 

Deliver—The Prototype