Diving Into The ORCA Card
The goal of this project was to propose and iterate mobile-first responsive design for a website that was not currently mobile-responsive. Our client for this concept project was Seattle’s ORCA card.
Mobile prototype of redesign
Desktop image of redesign
Project Overview
Length of time
2 week design sprint
Our team
3 person design team
My role: UX designer
Tools
Figma
Google Suite (survey, docs, sheets, slides)
Pen/paper
Zoom
What’s the problem?
One Regional Card for All (ORCA)’s website is inconvenient and unclear, which makes it difficult for users to check and load their ORCA card balance while on the go. This causes their customers to become frustrated and impatient instead of having an easy and enjoyable user experience.
Laying the groundwork
This project was as much about the group dynamic at it was design work itself. Team members shared their expectations of one another and timelines for completing tasks. Our team demonstrated the ability to focus on the goals and tasks at had to present the first iteration of our prototype.
The foundation
Some research conducted:
Desk Analysis
C&C Analysis
Heuristics Analysis
Survey
Hypothesis:
Redesigning the structure of the website would make it easier to navigate and would encourage more riders to consider using the website rather than the physical kiosk locations or other retail stores.
Research findings
C&C Analysis
Since I wasn’t familiar with Seattle’s transit system, it was helpful to start with the C&C Analysis. I focused primarily on reviewing competitor’s website and mobile offerings to buy transit fare. I drew inspiration from an existing system that functioned well, had online options and positive user reviews.
User Survey
We conducted a survey to identify if anyone was using public transportation. COVID interrupoted the world, but we found that people were using transportation for commuting purposes. We also wanted to know more about users’ methods for buying fares. We found users generally prefer to buy fare online. Seattle locals said they especially struggled with Seattle’s ORCA site.
“I hate the amount of effort that goes into paying for a ticket”
A member of my team had several close contacts living in Seattle who were willing to participate in follow up interviews. They had strong feelings about using the current website to buy ORCA card fare.
Users reported they were frustrated by the site, usually left the site to buy cards from a kiosk or would generally be able to figure out the site, but didn’t enjoy the process.
Site Map
Based on data from research and from a proposed site map (pictured below), we each sketched ideas for how we imagined the framework of the mobile site to look.
-
What did we think?
Initially we had many ideas for what we wanted to accomplish. We wanted to group the categories so they were easy to access. We imagined a portal for managing business accounts, buying ORCA cards and using them for all transit, creating an account, calculating fare, trip mapping, finding locations and electronic card scanning from a mobile device.
-
What really happened?
We realized that we didn’t have much time and we didn’t have the resources to make all of our dreams come true. Instead we streamlined the process and decided on key features our target user would want tand need in order to create our minimum viable product.
We decided to improve the global navigation and recategorized the headers. We wanted to make it easier for users to find necessary information and more easily accomplish their goals. We also improved the check out flow and created options for users to quickly add fare to an existing card.
The process/wireframing
We used Figma to create our designs. We wanted to incorporate ORCA’s branding throughout our design. We were careful to keep designs simple and minimal so we would still have accurate results during usability testing. The flow in the image below shows a simplified version of my idea for buying a new card.
Design and iterate
Design part one
My task for this part of the project was to design the check out flow. This flow did not test well during initial usability tests. Users were confused by the labels and were not sure what to do. What I thought was a helpful prompt was not. It was unclear that the drop down was for a type of card.
Design part two
I made small changes to the design. I changed the header to “buy new card” and the drop down to “choose type”. I theorized that by changing the labels and navigation, users wouldn’t have to guess at what was being presented on the page. I would need to further test this with users to know if this helped.
“There’s no ‘I’ in team”
Group work can be challenging yet rewarding. We completed our project in the given timeline. We were able to put in the effort to create a visually appealing design. This was in large part to ongoing communication, accountability and reliability from the very beginning.