Orca.
Responsive Redesign
Concept project, Public Transit Company in Seattle, WA
Orca
Project.
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.
Team
Doe S and Olivia P
My Focus
Usability Testing
Tools
Figma, Keynote, Draw.io, Miro
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 users 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 web page 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 and 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
The 5 interviewees were a mix of people who use Orca transit systems and people who use other public transit systems, so we asked questions on general transportation and on the Orca experience. We wanted to learn how often they use public transportation, what their best and worst experiences are, why they travel, when they purchase tickets, how they buy tickets, and how often they update their daily or monthly passes.
4/5 People use Orca Transit Systems
1/5 People use different Transit Systems
Public Transit Interview Insights
During interviews, people also mentioned positive and negative points about their travel experiences.
+ Notes
+ Buying ticket passes for a day trip online and using their phone for updated messages on their trip.
+ Changing languages on the homepage to make it accessible for people who are visiting from out of the area.
+ Having a list of all of the areas that the transit line serves in an easy-to-read location.
- Notes
- Missing stops and having to take time to change routes because of travel naps and distractions.
- Updating travel funds through work and not easily in the know of how to update a transit card outside of the office.
+ Searching for maps and routes for other transit destinations that are new or less frequently visited.
Affinity Map, User Insights
After the interviews, the team completed a group affinity map and we clarified insights on user travel responses. Some key points ⇨
~ 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.
~ 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.
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 log in to an account.
Initial SUS Scores and Site Feedback
Interviewees moved through the task of creating an account on desktop or adding travel funds to an existing account on mobile. The 5 people who 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 1 minute and 57 seconds on desktop and 54 seconds on mobile to complete tasks. Their average SUS score of 26.4 points out of a 100 point scale shows a “poor” impression and is classified as “not acceptable” on the usability scale.
Task 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.”
Points to Solve
~ 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
Task times + initial SUS scores were recorded
“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 her transit card
Receive an alert for card balances
Frustrations
The time it takes to add money to her 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
Find information on the different transit options
Create a new account
Frustrations
How difficult it is to navigate the Orca website
Rob is a new user who is entering the Orca website for the first time and wants to be able to see Orca’s travel routes. He intends to set up a new account, order an Orca card, and add money to his account.
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 the steps he takes to add money to his account.
Desktop device is used most often for new users.
Design.
Design Studio
Account Portal
Sign-Up
Homepage
Sketches & Discussion for Responsive Screens
To brainstorm sketches for desktop and mobile designs, Liv, Doe, and I met and ideated on the Orca card autoload process, account sign-up location, and the homepage layout . 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 pages, sequence of screens, and visually clear and understandable content were prioritized over a new visual design. During initial usability testing, people mentioned they did not mind the colors of the site as much as their difficulty in utilizing the site. Function over visual aesthetic was the primary focus.
Design Patterns
Buttons for mobile and desktop are saved and they are sized so people are able to easily see and press them. Sections for “My Card Details” and “My Orca Card Balance” are adjusted for different screens. Dropdown arrows minimize information on mobile so people can see and interact with account buttons.
Usability Test Part 2.
Usability Feedback & Design Changes
Tasks were completed 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. 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.
5 People completed usability testing for P.2
Improved SUS Scores and Task Times
“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 from Before + After Usability Testing.
The homepage, onboarding process, account portal, autoload process and visual style were all changed to reflect the feedback we received from usability testing. Some key changes were with the dropdown arrows, checkout, and account portal.
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.
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.
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 “Add/change value option” to show an association of buttons to changes in the account portal.
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 close to “Manage My Card.” She is able to check her spending history to know 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 lands on his account portal and has access to card and transaction details.
Desktop Design Highlights:
~ The “Create an Account” link on the homepage is easily located.
~ Forms autofill previously inputted information.
~ Orca card visuals show the status of a user’s card.
~ Billing information is visually and hierarchically credible.
~ The account portal makes use of the entire desktop screen.
Usability Test Results from Part 1 + Part 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 on teamwork and responsive design, it was important to collaborate to produce a design that met Orca and user goals in 2 weeks. After the project, I explored other design variations, because I wanted to see how updated visuals would blend with the improved structure that we 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 users’ 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.