UI/UX Case Study

Improving the Public Transportation Experience in Alaska’s Largest City

Background

Anchorage is the largest city in the state with close to 300,000 people within the city borough which makes up 40% of Alaska’s population The Anchorage People Mover bus system is the only bus system in the city. It provides 12,000 rides every weekday, primarily to people without a car who solely rely on public transit. Currently, the bus system has a mobile ticketing app, however, riders must turn to Google Maps or Apple Maps to navigate the complicated bus routes and schedule or use the non-mobile-supported People Mover website navigation.

Project Goal

Understand what riders need to have a good experience while using the Anchorage People Mover bus system and design a product that fits those needs.

Problem

Riders need help navigating bus routes and accessing current bus tracking resources to plan their trips. While ticketing is offered in a digital format, there is no single tool to manage ticketing, route navigation, and trip planning for the Anchorage People Mover bus system.

Solution

Develop a product that allows riders to effectively purchase and manage bus fares, navigate bus routes, and plan trips with live bus tracking information.

Process

This project was completed over a 6-week period. The first 3 weeks were spent conducting user interviews, obtaining survey responses from riders, and analyzing the data. Designing and prototyping of the product were completed in the remaining 3 weeks.

Role

Product Designer
UX Researcher
UX Designer

Team

Just Me

When

2022

Timeline

6 Weeks

Context

Passion Project

User Research

My research consisted of surveying current users of the bus system and interviewing key staff at People Mover. The 18-question survey was created using Google Forms and released on social media and interviews were conducted over the phone. People Mover does not have any direct competitors, however, I did review a few other transportation apps to understand the industry standards.

After data collection was complete, I affinity-mapped the results and developed key findings.

Personas of example bus riders were created using the results of my research and key insights. The quotes were taken from actual responses to my survey.

Key Findings

1.

Bus riders appreciate using a mobile app to purchase and manage bus passes and tickets

2.

Riders would like ticketing, route planning, and active bus tracking integrated into a single, easy-to-access digital tool

3.

Riders would like to be notified of route delays, changes, or cancellations to bus routes

4.

Riders are often confused by the account setup process in the current ticketing app

User Personas

User persona of Atsa, a college student who relies on the bus for all of her transportation needs

Solution

After understanding the needs of the user through my research, I formed the MVP (minimum viable product), core features, and initial thoughts on design.

While sketching out the user flow originally, two decision points were necessary. While wireframing and drafting the initial design, I realized that the home page and the ticketing page could easily be combined. This change aligned better with the MVP and made the user interface simpler.

Starting with low and mid-fidelity wireframes to work out the general design concepts, I eventually brought the frames to high-fidelity and created a prototype.

MVP

This mobile product will allow riders to effectively purchase and manage bus fare, navigate bus routes, and plan trips with live bus tracking information.

Core Features

  • Ticketing through the mobile app
  • Route navigation
  • Live bus tracking information
  • Alerts for delays or changes to bus routes

Site Map

Process of updating the sitemap for the app

User Flow

The process of simplifying the user flow after updating the app structure

Wireframes

Low to high-fidelity wireframing

Style and Branding

Since this was largely a project to improve the usability and function of the user experience, the style and branding remained largely that of the existing brand however I did choose a new font and put a slightly different emphasis on the different colors existing in the brand already.

Logo & Wordmark

The logo remained the same however I did update the wordmark.

People Mover’s logo consists of a blissful blue bus with a red heart where the bus driver would be seen through the windshield.

People Mover's LogoPeople Mover's LogoPeople Mover's Logo
A billboard showing the People Mover logo

Typography

Lexend and arial fonts

Primary Colors

For this project, I maintained the existing colors of the People Mover brand which are blue and red. Blue signifies reliability and the color red a bit of excitement.

CMYK 58, 30, 0, 36
RGB 17, 87, 164
HEX #1157A4
CMYK 0, 73, 73, 5
RGB 242, 56, 56
HEX #F23838

Secondary Colors

Secondary colors are also from the existing brand and are used when necessary for a pop of color such as an alert or to indicate the action was successful.

CMYK 27, 12, 0, 5
RGB 174, 211, 242
HEX #AED3F2
CMYK 13, 6, 0, 3
RGB 214, 232, 248
HEX #D6E8F8
CMYK 49, 23, 0, 45
RGB 15, 82, 140
HEX #0F528C
CMYK 22, 0, 12, 38
RGB 102, 157, 126
HEX #669D7E
CMYK 0, 54, 54, 15
RGB 218, 80, 80
HEX #DA5050
CMYK 5, 3, 0, 1
RGB 238, 245, 252
HEX #EEF5FC

Product Features

How bus riders use the app.
People Mover ticketing and boarding process

Ticketing and Boarding

Ticketing and boarding are conveniently integrated into the same flow starting on the home page and working through the 4 screens to purchase fare and board the bus.

People Mover navigation functions including a map and instructions for route

Navigation

Bus riders can search for their destination and receive step-by-step instructions and a map showing them how to navigate to their destination using the bus system. 

People Mover list of bus routes and map of bus locations

Bus Tracking

To check the status and schedule for a bus, riders can select a route from a table or select a specific stop from the map. Riders can see if a bus is on-time or delayed and get an estimate of when the bus will arrive at a particular stop.