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.
Our team contributed jointly to strategy, research, concept development, and video and experience prototypes.
My key individual contributions:
Click to enlarge.
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.
An outdated, complicated website makes it difficult to find information.
Ticketing/ reservations are separated into two confusing processes.
Riders don't have sufficient updates before/ during rides and return trips.
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 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.
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.
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.
Fairway recommends activities and points of interest at your destination.
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.
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:
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.
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.
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.
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:
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.
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.
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.
Our key user flows defined the products we built in Figma.
Click to enlarge.
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.
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.
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.
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.
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.
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.
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.
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.