WSF Ferry Riders App Prototype
Coursera Interaction Design Capstone 2017
Overview
WSF Ferry Riders is an easy way to make vehicle reservations and get more information for riding ferries in Washington State.
Opportunity
Many riders are unfamiliar with booking vehicle reservations for the ferries. This design addresses needs of new riders and improves upon the existing mobile experience for regular passengers.
My Role
I planned and conducted research, design, prototyping, and testing for a mobile prototype in InVision. The project duration was ten weeks.
Research
I conducted social observations over four weeks at the tail end of the travel season to the San Juan Islands. During the travel season and major holidays the San Juan Island ferries are often fully booked. Common user groups appear to include young backpackers, international travelers, retirees, and island residents:
Backpackers — Rushing to buy tickets in the pedestrian waiting area.
International Travelers — Having trouble hearing instructions over the loudspeakers.
Retirees — Curious to know more about the scenery and what to do while visiting the islands.
Island Residents — Quietly working a jigsaw puzzle, reading a book, or napping.
At a Glance
How do riders understand essential information at a glance and where did frustrations happen in thier journey? I observed 12 significant breakdowns for riders which concern ambiguity, information display, signposting, and accessibility. For example:
Recognition of Current Arrival or Departure: Current departures are sometimes ambiguous and ferry boats are not readily visible through the passenger waiting area windows.
⦁ 1st time riders are not used to the standard procedure and expectations and the reservation system is not always easy to understand.
⦁ Riders frequently ask which island corresponds to the destination and departure times.
Information display and signposting: A paper schedule and route map displayed outside of the terminal is easily overlooked. The same information is not displayed inside the passenger waiting area where riders wait to hear instructions.
⦁ Passengers sometimes do not know where to embark or disembark.
⦁ While on the ferry travelers are curious to identify islands and to know their arrival time.
⦁ On routes with multiple stops, ferry travelers are not always sure which stop is their stop.
Accessibility and concerns for non-native speakers: The passenger cabin has scattered details signposted for riders inside. Not all cues to stairwells, elevators, and layout have pictographic signifiers.
⦁ Passengers are not always sure how to get to the passenger cabin from the car deck.
⦁ Passengers are often confused about exactly where they’ve parked.
Needfinding
After observing behaviors and breakdowns I could identify common needs of the rider groups. I organized these needs into themes and looked at sources of inspiration where similar problems may have already been solved. These fit into 5 essential moments for the riders: planning ahead, arrival, boarding, mid-journey, and disembarking.
Emergent Themes:
Time — Commutes, Schedules, Reservations, Notifications
Process — Instruction, Expectation, Preparation, Safety
Travel — Destination, Attraction, Point-of-Interest, Story
Sources of Inspiration
Google Maps:
This has a familiar way of visualizing traffic for commutes. How could this familiarity translate to displaying ferry wait times for car commuters?
Waze:
This app shows points‐of‐interest during a route which are relevant to traffic issues. User controlled POI’s continuously update for everyone on the app.
Mobile Schedules:
The paper schedule in use with the ferries is decades old. I’m curious to see if riders would find info easier with a format more similar to existing apps.
Ticket Systems:
Ferries have limited space for cars and reservations. How can the app best display essential info in the booking process and confirm a reservation?
Other areas of inspiration:
Push Notifications, Illustrated Safety Manuals, Tourist Maps, Historical Signage.
Storyboarding and Rapid Prototyping
I sketched out scenarios in which new riders do not have all the information they need.
(1) Riders who are booking a reservation or waiting at the terminal
(2) Riders who are mid-journey and confused about which island they are arriving to.
This process was useful for thinking through touch points in the rider journey.
I created a skeleton of the basic user flow with relationship to rider’s needs and how it might manifest as a system of information.
Iteration and Testing
I began with a paper prototype in a first round of testing. This was a simple twelve screen task flow with in-person users. I organized usability issues by severity with Jakob Nielson’s 10 Huerstics.
I discovered that riders wanted the ability to make changes on reservations and needed information on the expected travel time for each route. Riders also wanted the ability to make round-trip bookings and pay for tickets at the same time that reservations are made. Informational details were very important for riders. The test participants looked for both flexibility and the ability to make informed decisions.
I built out low-fidelity wireframes based on participant feedback from the paper prototype and then performed a second round of tests. Again I found testers asking for specific informational details they would need in order to feel confident in making a reservation. They reiterated the need for clear recognition of what to do, clear signposting, and details they considered essential to know in order to have a worry-free journey.
Riders want to feel informed:
⦁ Knowing the departure point for thier destination
⦁ Expected length of the ferry ride and available departure times
⦁ Where and when to arrive
Riders want to feel in touch:
⦁ Confirmation of reservation details, a confirmation number, and ability to make changes
⦁ Setting a reminder in thier calendar or schedule
Progressing to Higher Fidelity
I updated the wireframes then performed a third round of in-person tests followed by a fourth round of remote tests on usertesting.com. I gave test participants more specific tasks in the scenario of planning a trip to Orcas Island and booking a reservation. I noted questions, concerns, and behaviors while guided by five strategic questions:
1. Do the participants understand the overall function and purpose?
2. Do the participants easily learn, easily use and agree with the navigation?
3. Can the user’s complete all tasks with 100% confidence?
4. Which elements or interactions create clarity or delight? Which ones do not? Why?
5. Does the design allow participants to carry out all tasks crucial to their needs? If not, what are those functions and how can they be integrated?
Next Steps:
Remote testing revealed more usability shortcomings however it revealed how users find the most important information. An advanced user, a novice user, and a non-native speaker were able to complete the tasks but commented that they didn’t have a clear introduction to the riding experience. I learned that introduction to context, relevance, and purpose are very important to users who start with zero prior experience.
The UI was most navigable where users encountered familiar conventions, for example clicking confirm before moving to the next step, but they still needed help to “get on board” with the system and what it does. Functions which were not yet implemented like account, schedule, contact, more information, were all concerns of these users which they attempted to use.
Riders want to have a seamless experience. They want to feel informed and they want to feel in touch. They want to be able to make changes and get the right information to plan their trip. Next steps for this design will be another stage of iteration and testing to design an on-boarding for new riders.
Invision Prototype:
YouTube walk-through:
Behance: