"How do I..."
I noticed I was getting lots of questions any time I posted photos of ferry travel to social media. I wondered how people unfamiliar with this method of travel accessed information.
The Client
Personal Project
My Role
Concept
Design/UI
Research & Testing
Branding
Design/UI
Research & Testing
Branding
The Team
Me
The Problem
Ridership on the WA State Ferry System was down by 3%. Residents of Seattle have trouble accessing logistical and inspiring information about the Washington State Ferries system. The language, routes, terminals, and timing can be intimidating details that prevent users from including this option in their regional travel plans.
Hypothesis
By consolidating the route information that's already available and offering suggestions to inspire users, I believe Seattle residents will feel better equipped to travel regionally via the Washington State Ferries.
Goals
• Now: A tool/feature/solution that allows clear, easy access to ferry information for travelers.
• 6-12 months: Additional research and features; bring in additional collaborators to see if this may be a viable project to pursue actually building.
• 1-2 years down the road: How could this be monetized? Ads, content partnerships?
LEARN
User Interviews
I interviewed 6 potential users, individually. I gathered their thoughts and perceptions of ferry travel in the Puget Sound, and learned about their previous experience with ferry travel.
Some were brand new to Seattle from out of state, others had been here for several years, several were longtime residents. All had been on a ferry before and navigated the experience either as a walk on, or drive-on passenger.
The Competition
A Comparative Analysis of features showed me that word of mouth and personal web searches offered the most features for content discovery and access to information.
Ferry Friend is a mobile app that uses current sailing times and traffic cameras pulled from the WA State Ferries.
• It lacks information about what to do once you arrive
• Does not include terminal information, parking, or ADA details
• Allows users to save favorite routes; presumably most users are regular riders
Click to Enlarge Image
The Seattle Times shares several regular columns and occasional features that inspire new ideas for regional travel.
They typically include specific suggestions and links to more information (ie. How to bicycle from Edmunds to Kingston.)
Click to Enlarge Image
The Washington State Ferries website includes an abundance of information. It's dense even when viewed on a desktop.
Click to Enlarge Image
The WA State Ferries site is not responsive or easy to navigate on a mobile device.
Click to Enlarge Image
Questions
• How might we serve Seattle residents, island commuters, and tourists?
• How might we create a mobile experience for the most users?
• How might we offer riders a sense of predictability and certainty?• How might we offer information about destinations and ideas of what to explore/see/do?
• How might we collaborate with local chambers of commerce and local businesses?
Assumptions
• Average users need a mobile view of the WA State Ferries website
• Users would use a mobile tool to better plan for trips, timing, and logistics like parking
• Tools like Waze could be utilized to better-integrate traffic predictions
Decide
I chose to create a mobile-first site for Seattle residents, island commuters, and tourists to navigate with ease.
By taking a mobile-first approach, rather than deconstructing the current content of the WS Ferries Website, we allow the the government website to remain intact with all of the details, while allowing The Ferry Project site to serve riders/users through just the details they need to travel now/soon.
Personas
Jill
24, originally from the Bay Area
By Day: product manager at a tech company
By Night: small-venue concert goer
By Night: small-venue concert goer
Residence: new to Seattle, lives in South Lake Union; owns a car; may or may not stay in Seattle long-term, wants to explore as much as possible while she's here
Loves: long drives, quirky Airbnbs; and attending weekend artist retreats.
Hates: FOMO
Sam
28, has lived all over the Pacific Northwest
By Day: software developer
Residential Status: lived all over the Northwest, new to Seattle; lives in Ballard; occasionally borrows his roommate's car on the weekends
Loves: planning backpacking trips and discovering new places to eat/drink
Hates: The lines of cars at Kingston on a Sunday afternoon
By Day: software developer
Residential Status: lived all over the Northwest, new to Seattle; lives in Ballard; occasionally borrows his roommate's car on the weekends
Loves: planning backpacking trips and discovering new places to eat/drink
Hates: The lines of cars at Kingston on a Sunday afternoon
Priorities
After learning more about the problem, my users, and the competition—I created a list of possible features... To prioritize and clarify how everything fit together I sketched out a site map and color-coded the priority levels I assigned.
MVP: Now
Green in the diagram.
Focus on the features that allow users to easily search for sailing times, save favorite routes, and view the details of terminals and specific vessels.
Later
Gray in the diagram.
Consider incorporating features that offer discovery of activity suggestions and location-specific information that could be connected to business or chamber of commerce partnerships in the future.
Click to Enlarge Image
BUILD
Sketching
• Organizing information
• Stacking content types, information architecture
• How much detail may be needed?
Low-Fi Testing
I used the online tool Whimsical for digital sketches, and then created a clickable mock-up in InVision for testing. Without real content, the testing felt hypothetical and I watched the 4 users I observed try to "pretend" more than genuinely explore to find information.
Visual Design
I focused on a clean, utilitarian design.
Green is a color commonly associated with ferry travel—the vessels are painted green and white.
The visual design goal was to inspire trust and independence through clarity. From there, I could reinforce that with accurate information and smooth interactions.
Click to Enlarge Image
TESTING
High Fidelity Testing
I used Adobe XD to create a web-based clickable prototype for testing, with real content
I tested with 6 users and directed them with these tasks:
• Log in and use the app to tell me three sailing times for Kingston this Saturday morning.
• What's the last ferry you could take to get back to Seattle from Vashon Island on Tuesday evening?
• Use the app to figure out if there's an ADA-accessible restroom on the car deck on the ferry to Orcas Island.
• Use the app to figure out if you'll be able to enjoy a happy hour drink on the ferry before you arrive in Bremerton.
Findings
What worked...
• Users commented on the clear appearance
• Said "the green pops"
• Said it felt familiar
What didn't work...
• Arrows were used inconsistently and didn't do what users expected
• Expected to see more features, like where to park or how to get there
• Wanted to skip sign-in (feels app-based vs. like a website of information)• Paused when reading "When are you traveling?"
• Sailing times set in bold/not bold were confusing, "What does bold mean?"
• Can't click on the sailing time buttons for more information
My take-aways...
• Create consistency in position and function with the arrows
• Add parking and terminal information, link to directions
• Simplify language throughout navigation
• Don't follow the WA State Ferries website design system for the bold/not bold sailing times (this was a carry over from their printed materials to their website; it does not translate well to this interaction)
REVISE
Next time...
How might we better-predict wait times for vehicles?
Data from Waze? Crowd-sourcing? Location/line predictions?
Data from Waze? Crowd-sourcing? Location/line predictions?
How might we partner with local businesses and chambers of commerce?
How might we partner with the WA State Ferries?
Do they have any strategic goals we could partner with them to achieve?
Do they have any strategic goals we could partner with them to achieve?
How might we decrease the environmental impacts of idle traffic?
What I learned
Being the designer and the decider can be tricky, especially on a personal project. Talking to users helped clarify my goals, the problem, the users. I was able to hone the direction of the project and focus on my MVP.
With a sense of patience, I reminded myself I can continue exploring additional features, or bring in other designers and developers at a later date. I don't need to solve everything today.
