ORCA:
TRANSIT SYSTEM REDESIGN
ECOSYSTEM DESIGN + INTERCONNECTED PRODUCT UX/UI
THE ASK:
The PNW regional transit system was looking to create a best-in-class digital experience across their web, mobile app, and fare management devices.
With seven regional transit partners, multiple methods of travel, and differing fares, the digital ecosystem felt complex to navigate and out of date for riders
in the region.
Participation
Design Direction
UX/UI Design
Client
ORCA Transit
Year
2022
THE CHALLENGE:
The comprehensive program focused on the website redesign first. Realizing that a modern and intuitive user experience would be key to creating a best-in-class website, ORCA partnered with Smashing Ideas, who brought a wholistic approach through human centered design.
Focusing the design on defined user groups such as commuters, out of town visitors, and riders with all ranges of abilities; the effort would lay the groundwork not only for the website, but for the broader design program efforts that followed.
PHASE ONE
Rider & Business Websites
Desktop & Mobile
PHASE TWO
IOS & Android Apps
Connected Services & Digital Touchpoints
THE PROCESS:
PHASE ONE
WEBSITE WORKSTREAM
Heuristic review of base solution
User experience design, including:
Fare management
Purchasing & managing fare products across multiple agencies (bus, ferry, light rail, etc.)
Managing multiple transit cards
Purchasing products on behalf of other customers
Business side management of cards issued to employees
Visual & Interaction design, Web Style guide
Accessibility design and ADA compliance
User experience testing
UX RESEARCH - WEBSITE
During the initial phase of the project our design team reviewed the client's requirements against the base solution that they purchased to determine where there were gaps. We then provided recommendations about how to fill those gaps so that the client's customer would have the best user experience.
The audit included a review of the business management portion of the website where we found that the white label solution they wanted didn't accommodate the complexity that was needed by ORCA.
Our recommendations led to a bespoke website redesign to reflect the complexity needed.
UI STYLE GUIDE - WEBSITE
The style guide was created to reflect the client's updated brand colors as it was applied to the ORCA website redesign with an eye towards meeting accessibility standards. In addition, components like buttons, menus, and form styles were created to ensure consistency throughout the site.
SITEMAPPING - WEBSITE
Due to the highly complex requirements needed for businesses to manage their transit cards, we went through multiple iterations with our stakeholders to determine business rules and to refine the requirements. This needed to be done for both the Business & Customer facing areas of the product.
Creating a sitemap for the customer account helped our team of designers facilitate conversations with the ORCA stakeholders to arrive at an early understanding of content that was needed and the hierarchy of the pages within the site.
Business Account Sitemap
Customer Account Sitemap
Website Usability Testing: Insights Report
As we crafted the UI, we tested the prototypes with ORCA customers in both formal & informal settings. Below is an example from a formal test where we asked users to perform some of the most common tasks that a typical user would encounter on the site.
THE PROCESS (con’t):
PHASE TWO
MOBILE APP DESIGN & DEVELOPMENT WORKSTREAM
•User experience design
•Visual & Interaction design
•Accessibility design and ADA compliance
•User experience testing
•Development for IOS and Android Platforms
•Middleware Development
•UAT & QA
•Accessibility QA
UI STYLE GUIDE - MOBILE
We leveraged the design kit created for the website but needed to adapt to native iOS and Android controls.
The component library enabled the design and development teams to stay in sync and have a single source of truth.
UX RESEARCH - MOBILE
We utilized a variety of primary research methods to understand audience needs and iteratively test hypotheses and assumptions to minimize risk. We used the results to inform strategy and refine the direction of the solution:
SITEMAPPING - MOBILE
Although it was important to have a similar structure to the website, there were certain features that were only available on the app (virtual payment). We also did not want to overwhelm the user in the app setting, so some functionality was removed from the app for ease of use.
MOBILE APP UX Documentation + Accessibility GUide
MOBILE APP Testing: Usability, Accessibilty & QA
After usability testing and app updates, we were ready to test the app with blind users to understand how screen readers (VoiceOver and TalkBack) worked on their devices.
Expert Review: Before we initiated the test, we performed an expert review of the app using the assistive technology tools native to iOS and Android devices. Our goal was to fix as many usability and accessibility issues prior to our recruited testers using the app. Our development team then made the recommended fixes and we proceeded to the testing phase.
Testing with Users: We recruited users that relied on a range of assistive technology on iOS and Android. After 2 days of remote testing, we were able to synthesize the data, group the findings by severity level, and make clear recommendations about how to improve the app.
THE RESULTS:
From an early assessment & strategy engagement, we built something fantastic for ORCA; a full end-to-end ecosystem of digital experiences that ensured everyone who relied on public transit was able to get a card, use it, and maintain it’s balance regardless of language, location, or limitation.
Website Final Designs
From a clunky whitelabel solution to a modular, well-thought-out architecture that makes building new functionality fast, reliable, and straightforward, we started with a robust, modular architecture designed for desktop and compatible for mobile. Except where platform specificity is needed, app elements are implemented according to a common architecture and data model enabling the business logic elements of the mobile platforms to be directly compared, ensuring consistency of behavior, and preventing "reinventing the wheel" across platforms. The modular structure and well-defined architecture enabled new features to be integrated with reduced engineering effort and with less risk of disrupting existing functionality or design consistency.
MOBILE APP SCREEN DESIGNS
CONNECTED SERVICES & DEVICES
We also partnered with ORCA to design for and support all of their connected payment, vending, and customer service systems for complete unity and alignment under one brand experience.
