Fairway

Reimagining the information experience for WA State Ferries
Overview

Fairway is a redesign of the experience of taking the Washington State Ferries. Although the ferry system itself is robust, riders often find it confusing and frustrating to find the information they need throughout their trip. With Fairway, we envision a streamlined website and mobile application that provides riders with relevant information from the moment they begin planning until they complete their return trip.

A 5-week project, the focus was on improving key moments in the customer journey and providing a clear value proposition for the product.

Context
  • Masters project
  • Information experience design
  • Web/ mobile app
Timeline
  • Apr - Jun 2021
    5 weeks
Deliverables
  • Personas
  • Journey map
  • Experience prototype
  • Video prototype
  • High fidelity screens
Team
  • Nathaniel Gray
  • Maisie Howard
  • Sara Vasquez
My Role
UX Designer

Our team contributed jointly to strategy, research, concept development, and video and experience prototypes.
My key individual contributions:

Design Challenge

Taking the ferry is not as easy as it should be

Washington State Ferries is one of the most extensive ferry systems in the nation, providing access to beautiful coastal islands along the Pacific Northwest. However, for infrequent riders, it is not easy to navigate their existing website or mobile app to find the necessary travel information. During the trip, it can be confusing knowing where to go, when to get off, and when to come back for the return ferry, making the trip more stressful than it needs to be.

What's wrong with the current process?

Access to information

An outdated, complicated website makes it difficult to find information.

Ticketing/ reservations

Ticketing/ reservations are separated into two confusing processes.

Lack of real-time updates

Riders don't have sufficient updates before/ during rides and return trips.

How might we deliver relevant information to ferry riders when they need it throughout the ferry journey?

Design solution

Fairway give riders the right information at the right time

We designed Fairway as an integrated service with existing WA State Ferry resources to make ferry rides a stress-free experience from start to finish.

A step-by-step guide to trip planning

A revamped website and wizard-style guide leads riders through all they need to plan their journey, reserve a spot, and buy tickets. The wizard is a straightforward path to relevant information without wading through the existing ferry website. It allows you to buy tickets and reserve a spot on the ferry without going to two external websites like you currently need to.
 

Fairway's mobile app provides dynamic features to manage your journey.

View, manage, and follow your trips

You can access upcoming trips, e-tickets, and follow your trip for live updates on delays and schedule changes. This provides more information than is currently available or is difficult to find on existing resources.

Receive smart notifications on the day of the trip

Fairway can send detailed notifications on the day of your trip, letting you know when it is time to leave for the ferry terminal, when the ferry is arriving/ departing, and when to return to your vehicle once you are on board.

Explore your destination

Fairway recommends activities and points of interest at your destination.

Managing return trips is easy

Not ready to go home? Fairway makes it easy to manage upcoming reservations for your return trip. Based on your location, it reminds you when it is time to return to the ferry terminal, and lets you reschedule your return trip if you want to stay longer.

Design Process

Research

Challenges with the existing rider journey

While our team all had personal anecdotes of frustrating ferry experiences, we knew we needed concrete research to inform our design. To identify the major pain points in the rider journey, we:

  • Analyzed existing WA State Ferries resources (website/ mobile app)
  • Took a ferry trip to try it ourselves and map out the experience in detail
  • Interviewed riders on the ferry about their experience and biggest frustrations

Existing resources are poorly designed and difficult to navigate

Information on the official website is incredibly dense and poorly structured, making it difficult to find what you need to know. To reserve a spot on the ferry or buy a ticket, you are directed to two different external websites. WSDOT has a mobile application, but key buttons simply link you back to their website.

Information on the website is overwhelming (left). The mobile app is not designed for ferry passengers, and it shows (right).

Click to enlarge.

Travel logistics can be stressful without information

New riders don't know what to do at the terminal and aboard

At the ferry terminal, it is difficult to know what to do and where to go. When it is busy, you often wait without knowing if you will make it onto the current sailing.

The same goes when you are on board - it is easy to miss announcements about when to return to your car.

Making your return ferry can be needlessly stressful

Depending on the island, the process and price for the return ferry can differ. Not knowing what to do, how much it costs, or when you have to go back to the ferry terminal can put a real damper on your trip.

Customer Journey Map

Pinpointing key scenarios to design for

I built a detailed journey map on Miro - a quick and easy method to visualize the entire rider experience and the lowest moments that we needed to change:

  • Planning the trip - making it easier to find the information needed, purchase tickets, and reserve a spot
  • Getting to the terminal - circumventing the stress of making it to the ferry on the day of the trip
  • Waiting to get on - eliminating stress about making it onto the current sailing
  • The return trip - providing information for and managing the return trip at the end of the day
Personas

For travellers who like to plan and have a sense of control over their journey

Knowing the moments in the customer journey we wanted to design for, we created two personas to clarify who our primary stakeholders are, and understand their goals, motivations, and frustrations. One of the key characteristics for our personas were that they were unfamiliar with riding the ferries - designing for those with the largest informational need was more pressing than those who take the ferries often.

Lean Canvas

The American Airlines experience, for ferries.

After ideating multiple ideas to address the pain points, we decided to combine a few of them into the Fairway concept. Addressing the entire rider journey required us to design both digital products and changes in service implementation. We used a lean canvas model to think about  delivery of our design from an operational and business perspective.

Our high-level concept and value? We wanted to make the ferry experience as familiar and seamless as most airline experiences are now. Taking the ferry shouldn't feel more confusing than taking a flight.

Experience Prototype

Fast and dirty walkthrough with role playing and low fidelity prototypes

We determined that we needed both a website and a mobile application: the website is often the first place riders look for information, and a mobile application would provide advanced features for trip management that were difficult to support through other means. After defining the user flows for both, we created low fidelity prototypes on Figma for usability testing.

I co-led design of an experience walkthrough, taking participants through the whole rider journey using our digital and paper prototypes and role playing. The experience prototype tested the helpfulness of rider notifications, provided basic usability feedback, and revealed additional frustrations with the new rider journey. It was a low budget way to refine our design without taking another ferry trip.

We used low-fidelity methods such as paper notifications to prototype the entire Fairway experience from start to finish.

Click to enlarge and learn more.

Iterations

Refining each stage of the journey

Usability testing and the experience walkthrough gave us actionable feedback on our designs. Below are some of our iterations at each stage of the designed journey.

Planning the trip

A major improvement was to guide the users through the ticketing and reservation system more clearly.

Following the current ferry website, we originally presented riders with a choice between buying a ticket or making a reservation. This was very confusing to users who did not understand the distinction between the two, or the advantage of buying a ticket in advance.

After testing, we decided to integrate the ticket buying and reservation flow into one centralized system. Making a reservation would automatically ask you if you wanted to purchase a ticket immediately, and vice versa. Buying a ticket in advance would reserve a spot and fast track your entry.

Getting to the terminal and making it onto the ferry

One of the most stressful parts of riding the ferry is not knowing whether or not you will make it on if you don't have a reservation. We iterated on how to provide the most useful ferry capacity updates to riders - from a predictive model with recommended travel times to a simple statistic of remaining capacity.

We presented capacity as % filled, but riders found it had little context and meaning. They felt skeptical about recommended travel times.

We decided to simplify capacity information by providing raw numbers, based on feedback that it is more straightforward.

Delivery of notifications and updates

Originally we only designed SMS notifications, but found that it could not provide the features that riders wanted.

SMS notifications (top) were very basic and designed for those who do not want to download the mobile app. An alerts page on the mobile app displayed important notifications for all subscribed routes (bottom).

Riders found notifications much more useful when they could associate them with specific ferry trips and follow trips to receive updates along their route.

Watch Fairway throughout the ferry journey. *Note: some screens shown are from an earlier prototype that was later refined.

Next Steps

Digging into backstage interactions

As much as I believe in our design process, our design would likely continue to change if we had access to more information about why the existing system works the way it does. Are there legitimate business and operational constraints that keep things the way they are? What are the barriers to streamlining the process and how have they already tried to surmount them? I think it is important to dig into these backstage interactions and business factors to set up metrics for evaluating our design and increase the likelihood of success in deployment.

Lessons

Reflections

Use quick and dirty methods to focus on key needs and interactions.

Given our short timeline and lack of resources, we had to resort to low-budget and scrappy ways of testing our designs. While this might not entirely replicate the ferry experience, it allowed us to rapidly iterate, get to a stage where we can test the product more thoroughly, and deliver on time/ budget.

Collaboration between design, business, and operational teams lead to a more sustainable, viable solution.

Using the lean canvas model and mapping out backstage interactions of the ferry staff highlighted the importance of design beyond digital products. I found myself wishing we had the opportunity to collaborate with business and operational staff to create a sustainable, realistic solution.