Overview

One Regional Card for All is the Seattle Puget Sound region's highly accessible, cashless public transit card. While the ORCA card itself is easy to use, the website is just the opposite. The site is full of unorganized and hidden information. Additionally, while its users are primarily on the go, none of it translates into mobile as it is unresponsive.

one regional card for all

The Challenge

Creating a mobile-first design for ORCA's on the go user base and prioritizing information based on user needs. The current site is unresponsive, has tons of inaccessible information, and does not support card management.

My Role

Research

Affinity Mapping

IA & Wireframing

UI &  Prototyping

Tools

Figma

XD

Miro

Notion

The Team

Naomi Lichtner

Patrick Northey

Luis Zuezeta

Context

Redesign

Concept

Group Project

Timeline

10 Days

orca-current-homepage.png

Current

ORCA

Homepage

CURRENT

"ADD VALUE" PAGE

(UNREGISTERED)

orca-current-addvalue.png

Understanding The ORCA Card

No one on my team was from Seattle and collectively we had very little knowledge of how the system works. We all began by researching what the card provides, how it works, where it's used, who uses it, and why other businesses such as Clipper Card and HOP may have an advantage.

How it Works?

E-purse

  • Pre-paid, reloadable value on your ORCA card

  • Deducts the correct fare amount each time its used

Regional pass

  • Unlimited rides in one calendar month

  • Load the pass with the amount of your usual fare

Autoload

  • Reloads when there is insufficient value to pay the fare

  • The first tap of the month will load the set amount

Add value

  • Loading the card with credits or passes

Where it works?

Everett Transit

Kitsap Transit 

Pierce Transit

Sound Transit

Seattle Streetcar

Who Uses It?

To find out more about users, Patrick and Naomi interviewed people in their network who live in Seattle and use the ORCA card. As a team, we synthesized the information in an affinity map and went on to collaborate with Patrick and Luis, who created our persona.

Sandy and her senior mother want to take the ferry

to visit her sister on Whidbey Island using ORCA cards.

Needs

  • Purchase an adult ORCA card online

  • Purchase a discounted Senior ORCA card online

  • Reload her card on the go from her phone

  • Quickly and easily manage her card online

Pain Points

  • It is unclear where to purchase a card

  • She can't use her phone to reload when she's on the go because the text is too small

  • She's not sure how to get discount information for her senior mother

Sandy,

the teacher

sandy.png
comp.png

Why...

The Clipper Card and HOP Fastpass are San Fransisco transit card companies. As I was looking at the sites for comparison, I noticed both of their websites are mobile forward, approachable, and easy to navigate. 

Clipper and Hop guide users on their website with clear language, strong call-to-actions, imagery, and card organized pages.

Designing Mobile

As we moved on from the research phase of our process, Naomi and I used those insights to create a sitemap. We organized the navigation and added a quick reload option for mobile users that are on the go. In addition, we added a page with information about discount cards as most users interviewed did not know where to find the information currently.

Once the flows and sitemaps were completed, Naomi, Patrick, and I ideated the screens into low-fidelity wireframes. We each created multiple screens and met up over zoom to discuss. As a team, we decided on the elements of the sketches that worked and came up with cohesive wireframes. My wireframe contributions

included the parts of the home screen, the global navigation menu, and the quick reload screen.

ORCA Mobile Hompage 5.png

my homepage

lo-fi wireframe

ORCA Mobile Hompage 5.png
side menu.png

global navigation menu

Working out CHeck balance & reload

Reload Page 1.png
Reload Page 2.png
Reload Page 3.png

Mobile UI & Continuity

The group got started on creating all of the screens necessary for our testing prototype, and we were on a roll as we all collaborated in Figma together. Once I had completed all of the screens, I started on the UI, creating continuity throughout all mobile screen states. 

Naomi and Patrick created many forms using our components, and I was able to go in and refine alignments, fonts, spacing, colors, and add in images where needed. This also gave me the chance to jump in and problem solve with my teammates when they hit any roadblocks. 

my homepage

lo-fi wireframe

orcahome.png

global navigation

orcahome.png
orcamenu.png

CHeck balance & reload

balandreload.png

A few of Naomi & Patrick's screens

team.png

Testing The Design and Defining Next Steps

Patrick led the prototyping as I helped connect screens and create interactions and Patrick set up our Useberry test (a prototyping plugin on Figma) so we can get some quantitative data for our new design.

  • users were able to complete all 3 tasks within 3 minutes (1/5 couldn’t finish final task due to prototyping error)

  • first navigated to the “reload” page when asked to set up the autoload feature on their existing card.

4/5 

5/5 

  • took multiple taps  before finding the hamburger menu

  • Autoload task has the highest average of clicks

4/5 

   & 

Future Sprint Ideas

  • Increase font pixels for accessibility and rework pages and spacing in accordance

  • Work with ORCA card office to write more informational pages so users feel confident about the functions of their card 

  • Talk to developers about the possibility of creating a virtual ORCA card for your Apple