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
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.
IA & Wireframing
UI & Prototyping
"ADD VALUE" PAGE
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?
Pre-paid, reloadable value on your ORCA card
Deducts the correct fare amount each time its used
Unlimited rides in one calendar month
Load the pass with the amount of your usual fare
Reloads when there is insufficient value to pay the fare
The first tap of the month will load the set amount
Loading the card with credits or passes
Where it works?
Who Uses It?
Users of the ORCA card are Seattle residents and visitors of all ages, including seniors, youth, people with disabilities, or low-income - all of whom receive discounts.
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.
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
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
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.
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.
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.
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.
took multiple taps before finding the hamburger menu
Autoload task has the highest average of clicks
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