Orca.
Responsive Redesign
Concept project, Public Transit Company in Seattle, WA
Orca
Project.
Team
Doe S and Olivia P
My Focus
Usability Testing
Tools
Figma, Keynote, Draw.io, Miro
Who
The company is Orca, a transit company in Washington, that provides public transportation for people in Seattle and specific counties in the surrounding area.
What
We were tasked with creating a responsive design for Orca’s website. We designed for mobile and desktop experiences so web pages could adapt to either device.
Problem and Goal.
Their Problem
Their problem is that the original site looks exactly the same on desktop and mobile, which creates problems for users, such as having to zoom in and out on mobile to be able to see page content. Also, their website does not have the structure to support easy access to information for online visitors or proficient card management for people who use the Orca transit system.
Their Goal
Their goal is for a responsive website to help people use public transit for their commutes so that they can reduce the amount of cars on the road and become more environmentally friendly. Additionally, they want to restructure their website so that people can more easily access and view information online and manage their Orca card through their account.
Site Research.
Our team embarked on a research plan to learn more about Orca by understanding the way current user’s navigate their site on desktop and on mobile.
Positioning ourselves into the traveling mindset of a Seattleite, we assumed during initial review, that many people would be visiting the site to create an account or access their current account. We set that task for ourselves, to move through the site to create a new Orca account and add travel funds for later use.
Visibly Small Screen Size
Visiting the Orca website, it is apparent that the size of the content in relation to the screen is uncommonly small compared to other websites. The margins of white space make it seem like the webpage is zoomed out when it really is the actual size of the page.
Did you Say Orca?
An Orca is not a whale, rather it is a dolphin that looks like a whale. As National Geographic eludes, “Orcas, or killer whales, are the largest of the dolphins and one of the world’s most powerful predators. (Link)
This powerful entity, the focus of the project, is Orca, the transit company rather than the dolphin species.
Unclear Page Titles + Links
Creating a new Orca account and adding travel funds for later use was a difficult task to complete for the team, since there were similar labels for site pages and since page content did not seem to match their navigation titles. It took multiple attempts to locate information on how to add money to an Orca card because of the mismatch of page titles to page content .
User Research from Interviews.
Next, we spoke to people who use Orca cards in Seattle or use public transportation in other locations. We wanted to learn about their travel habits and preferences, such as buying a day-pass or a monthly subscription, their frequency of public transportation, and their opinion of the current Orca site.
Interview Focus
Interviewees were a mix of people who use Orca Transit systems and people who use other public transits systems, so we asked questions on general transportation and on the Orca experience to 5 people. We wanted to learn how often they use public transportation, what are their best and worst experiences traveling, why they travel, when they purchase tickets, how they buy tickets, and how often they update daily or monthly passes.
Public Transit Interview Insights:
~ I use auxiliary apps when using public transportation. Mostly for directions or bus and train times.
~ I want to be accurate with time, see my transaction history, and easily upload money to my transit card, - see my balance.
~ I don't have to upload money on my work card but if I do, I can do it at a kiosk or on the website. The kiosk is usually easier.
~ I use my ORCA card to lower my cost when traveling.
~ I use the ORCA card to commute in Seattle - most people do.
4/5 People use Orca Transit Systems
1/5 People use different Transit Systems
Usability Test Part 1.
To compare the usability of the original site to a new design, we conducted an initial usability test to determine SUS scores and task times on the current Orca site. We also received feedback on what users thought of the site’s visuals and their ability to login to an account.
Initial SUS Scores and Site Feedback
Interviewees moved through the task of creating an account or adding travel funds to an existing account. The 5 people who were interviewed gave feedback that the site was confusing because the pages they tried to access, like “Get a card” and “Orca options” led them to pages with content that they did not expect. It took an average time of 11.11 seconds for people to complete the task.
User Response Feedback:
“A lot of the features on the ORCA website don’t work the way I would expect them to or aren't explained well enough.”
“I don't know what an e-purse is and the site's terminology is confusing.”
“I think this is where I add $ to my Orca card”
“I keep having to zoom in and out to read”
“The colors of the website are fine, but overall it looks dated.”
Problems:
~ How to add $ to an Orca card
~ Large Page Margins
~ Confusing page labels + content
~ Desktop + mobile look the same
~ Forms look old + not secure
5 People completed Usability Testing for P.1
Recorded task times + initial SUS scores
“If I had the option to go somewhere tangibly to buy this ticket, versus online, I would without a question, without a doubt, would not go through their site.”
-ORCA Interviewee N.2
Persona.
We refined the interview data into the perspective of two users. One user, Madison, is a frequent ORCA traveler who wants to set up autoload payments. The other user, Rob, is new to Seattle and needs to create an ORCA account.
Madison
Goals
Add money easily to transit card
Alert for card balances
Frustrations
Time to add money to Orca card
Madison is well accustomed to ORCA travel but needs to be able to set up autoload payments so that she can have her monthly balance match her travel schedule and so that she can save time for other tasks.
Rob
Goals
Needs information on the different transit options
Frustrations
Rob wants to learn how the Seattle transit system and the Orca card works but is having a hard time navigating the website.
Rob is the new user who is entering the ORCA website for the first time and needs to be led through the setup process for a new account. Additionally he needs to be able to add money to his account for the first time.
User Flows Before & After.
Madison Before
User Flow: Add $ to an Orca Card
Madison After
Madison: Original user flow specifies the types of information she wants to immediately view after logging into her account. The new user flow shows a more concise process, incorporated into the new design, which shows her checking her account balance and setting up autoload payments.
Mobile device is used most often for returning users.
Rob Before
Rob After
User Flow: Create an Orca Account
Rob: Initial user flow identifies his thought process in choosing to create an account. The new user flow shows, in more detail, his process of creating an account and steps he takes to add money to his account.
Desktop device is used most often for new users
Design.
Design Studio
Homepage
Sign-Up
Account Portal
Sketches & Discussion for Responsive Screens
To brainstorm sketches for desktop and mobile designs, Liv, Doe, and I met and ideated on landing pages, account sign-ups, and the Orca card autoload process. We focused on new layouts, navigations, and content hierarchy for the design sketches. Some of the questions we asked were “How should we prioritize steps in the account and autoload process?”, and “How will we utilize breakpoints to show content on mobile and desktop?”
Design Palette
The layout of the site and how users navigate through it was prioritized over developing a completely new visual look for ORCA. We chose to stay with the current ORCA color palette and font but applied to content that is visually clear and easy to understand.
Design Patterns
The account portal on mobile and desktop included green and grey buttons to add money and change the account portal view, tabs for managing an Orca card and viewing transaction history, and drop-downs for “My Card Details” and “My Orca Card Balance”.
Usability Test Part 2.
Usability Feedback & Responsive Design Changes
People completed their tasks more quickly on the responsive designs than from the original Orca site on desktop and mobile. interviewees shared their experience of creating an account and autoloading money. People shared that the visibility and accessibility of information improved but layout and task steps could be improved moving forward.
5 People completed usability testing for P.2
Improved scores SUS and 5 second increase
“20x’s more better than the first one. This guy is a lot easier to navigate and I feel like something like this isn’t something you do all the time. As someone who travels frequently, this made it as simple as possible.”
-ORCA Interviewee N.2
Design Improvements.
The homepage, onboarding process, account portal, autoload process and visual style were all changed to reflect the feedback we received. Visibility of buttons, the hierarchy of information when setting up an account, and more confirmation visuals during the checkout process could be enhanced to further simplify and streamline user experiences.
Account Portal : Closer Button Proximity
Users noticed that there was a large space that separated their ability to add money to their account and click on different buttons. So, the green buttons are moved closer to the “change value option” to show an association of buttons to changes in the account portal.
Checkout : New Confirmation Pop-up
During the usability test, users were unsure if their payment went through and some thought the single button confirmation was too quick. A confirmation pop-up is added to show that the payment process was successfully completed.
Dropdown Arrows : Better Signifier
People did not realize that the side direction of the arrows next to the “ORCA Card Balance” and "My ORCA Card Details" would drop down when clicked. The arrow directions are changed to face upward when open and down when closed to better represent this action.
Prototypes for Mobile & Desktop.
Mobile Prototype
Madison logs onto her account to add money to her Orca card. She changes her E-pass and regional pass balance, and is able to view her “Orca Card Balance” and “My Orca Card Details” by clicking on the dropdown arrows. Transaction History is available to view so she knows how much to add to her monthly pass.
Mobile Design highlights:
~ Green buttons create easy access to Orca card management
~ A minimized menu makes better use of space.
~ A customizable profile picture personalizes the account.
~ The Orca logo takes you to the Orca homepage.
~ Text and images are legible and sized for mobile.
Desktop Prototype
Rob locates the create an account option on Orca’s homepage and moves through the process to become an Orca member. He completes contact, billing and shipping, and demographic forms, orders an Orca card, and successfully creates an account. Afterwards, he had access to his Orca account portal.
Desktop Design Highlights:
~ The “Create an Account” link is easily located for new users
~ Forms autofill previously inputted information.
~ Orca card visuals show the status of a user’s card.
~ Billing information is visually and hierarchically credible.
~ Account portal makes use of the entire desktop screen.
Usability Test Results from P.1 + P.2
SUS Scores & Task Times Improve with Iteration
After the usability test, we received SUS scores that showed people found the new site more functional, and they also were able to move through it quicker than the original site. The SUS scores improved by 38.6 points from the original to the new webpage, which means that people did find the new design to be more useful. It also took people less time to complete goals. The time to create an account and go through the process of adding money to an account was able to decrease by an average of 26 seconds on desktop and an average of 15 seconds on mobile showing the new designs were more efficient with users’ faster task times.
5 out of 5 people had improved SUS scores
38.6 point increase = 🥳
Design V3.
Design Focus After Initial 2 Week Goal
With the focus of the project being on teamwork and responsive design, it was important to collaborate to produce a design that met ORCA and user goals at the end of 2 weeks. Later, I explored other design variations, because I wanted to see how updated visuals would blend with the improved structure that was created.
Homepage Design Highlights:
~ Imagery of trees and a road catch users’ interest and show Orca’s connection to transportation and to their environment.
~ A bolder colored blue used on their logo, navigation, slogan, and footer speaks to a more modern look.
~ A navigation at the top of the page shows options to clearly access Orca information.
~ A “Trip Planner” is included for people to immediately access transit routes and locate Orca transit schedules.
~ “Bus”, “Train”, and “Ferry” options identify Orca transit systems.
~ A visual for updates is included and speaks to recent regulations.
~ “Orca Articles” shares recent posts for people to learn more.
Next Steps & Reflection.
Next Steps
One round of iteration was made after receiving feedback on the new design. It would be ideal to see how the user scores compare to the new design that was created at the end of the 2 weeks. From there, visuals, such as color and typography could be enhanced. With a design that works well for users, the aesthetic could be updated to level up their experience.
Reflection
One of my favorite parts about this project was the design studio. Mid-project, the team met and shared different ideas on mobile and desktop designs before wireframing in Figma. We put forth different sketches and defended our designs. Ideas were fleshed out, changed, and coalesced, and the process propelled us into the next stages of the project.