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
Current
ORCA
Homepage
CURRENT
"ADD VALUE" PAGE
(UNREGISTERED)
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
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.
my homepage
lo-fi wireframe
global navigation menu
Working out CHeck balance & reload
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
global navigation
CHeck balance & reload
A few of Naomi & Patrick's screens
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