New York Regional Ferries Website
New York Regional Ferries Website
A responsive website to consolidate regional ferry services
New York's ferry usage is on the rise but New Yorkers currently do not have a website to see all of the services available to them.
Role
Research UX Design UI Design
Tools
Figma, Notion, Photoshop, Illustrator, Screen Studio, Jitter
Timeline
100 Hours
Can we create a single website to unify all the ferry lines?
Background
The New York region has a large number of ferries from private tour boats to the public NYC Ferry. Some are free and others expensive and some travel long distances and other just cross the river.
Problem
Currently, a number ferries overlap but serve different audiences and uses but are not integrated on a single platform.
Goals
The goal of designing the New York Regional Ferry website is to unify the routes in one website to search, compare, and highlight all the ferry options.
The NYRF website is a responsive site that serves as a resource for ferry planning by placing importance on:
The NYRF website is a responsive site that serves as a resource for ferry planning by placing importance on:
consolidation of all the lines, landings, and routes in one map
using recognizable transit design patterns and map-based search
integrate ferry transit with other transit to focus on door-to-door transit
increasing confidence the ferry by including realtime scheduling, weather, and delays
focusing on smartphone ticket handoff
providing transparency of options and prices
consolidation of all the lines, landings, and routes in one map
using recognizable transit design patterns and map-based search
integrate ferry transit with other transit to focus on door-to-door transit
increasing confidence the ferry by including realtime scheduling, weather, and delays
focusing on smartphone ticket handoff
providing transparency of options and prices
consolidation of all the lines, landings, and routes in one map
using recognizable transit design patterns and map-based search
integrate ferry transit with other transit to focus on door-to-door transit
increasing confidence the ferry by including realtime scheduling, weather, and delays
focusing on smartphone ticket handoff
providing transparency of options and prices
Discover
We want to know how users plan trips and find and buy tickets so that we can better serve their needs, reduce the friction.
User Interviews
I conducted one-on-one interviews with potential ferry users to understand their needs, behaviors, and pain points (approximately 4-5 interviews lasting 30-45 minutes)
Competitive Assessment
I evaluated existing ferry websites, focusing on usability, design, and features. This will provide insights into industry standards and identify unique differentiators that can be incorporated into the new website.
Discover
We want to know how users plan trips and find and buy tickets so that we can better serve their needs, reduce the friction.
User Interviews
I conducted one-on-one interviews with potential ferry users to understand their needs, behaviors, and pain points (approximately 4-5 interviews lasting 30-45 minutes)
Competitive Assessment
I evaluated existing ferry websites, focusing on usability, design, and features. This will provide insights into industry standards and identify unique differentiators that can be incorporated into the new website.
Read Further
Read Further
Who is out there doing what we want to do already?
We evaluated existing ferry websites to provide insights into industry standards and identify unique differentiators that can be incorporated into the new website.
Who is out there doing what we want to do already?
We evaluated existing ferry websites to provide insights into industry standards and identify unique differentiators that can be incorporated into the new website.
Define
Following the research phase I synthesized the data to determine a number of recurring themes. Afterward, I created prototypical personas to embody the needs.
After, I envisioned how this journey would play out for these personas in a journey map.
framed the problem in Point of View and How Might We exercises.
Define
Following the research phase I synthesized the data to determine a number of recurring themes. Afterward, I created prototypical personas to embody the needs.
After, I envisioned how this journey would play out for these personas in a journey map.
framed the problem in Point of View and How Might We exercises.
The interviews yielded a number of interesting themes. By gathering all of the information patterns started to emerge; we gathered them and categorized them based on the themes and the results were as follows:
The Ferry is Unreliable
Visualizing Realtime Information: Waiting & Weather are Painpoints
Pain Point: Getting to the Boat
Timetables Are Frustrating
Painpoint: Ticketing
Realtime Visualization is Useful
Painpoint: Boarding
The interviews yielded a number of interesting themes. By gathering all of the information patterns started to emerge; we gathered them and categorized them based on the themes and the results were as follows:
The Ferry is Unreliable
Realtime Visualization is Useful
Painpoint: Ticketing
Pain Point: Getting to the Boat
Timetables Are Frustrating
Visualizing Realtime Information: Waiting & Weather are Painpoints
Painpoint: Boarding
The interviews yielded a number of interesting themes. By gathering all of the information patterns started to emerge; we gathered them and categorized them based on the themes and the results were as follows:
The Ferry is Unreliable
Timetables Are Frustrating
Realtime Visualization is Useful
Visualizing Realtime Information: Waiting & Weather are Painpoints
Painpoint: Ticketing
Painpoint: Boarding
Pain Point: Getting to the Boat
Following affinity mapping, we developed POV's (Points of View) based on the themes. We painted a picture of the situation and proceeded to ask the questions and determine the problems we need to solve:
POV
I'd like to explore ways to help leisure users find scenic and tourist experiences
HMW
How might we guide riders to discover new experiences and routes?
THOUGHTS
Users tend toward leisure use and do not consider this a serious form of travel
ACTIONS
Cater the app toward leisure users by emphasizing the experience (what to see, to do)
POV
I’d like like to explore ways to help riders visualize the experience to increase their confidence in the ferry service commute
HMW
How might we help riders visualize important realtime information to help with delays, rushed boarding, and geography?
THOUGHTS
Maps, realtime locations, capacity, countdown clocks, and distances are useful. Waiting is a painpoint for users but countdown clocks can demystify the process
ACTIONS
Leverage realtime information to make it clearer for riders when the boats are coming
POV
I'd like to explore ways to help riders plan the entire door to door experience
HMW
How might we help riders plan the door-to-door experience to encourage users to ride the ferry?
THOUGHTS
The lack of integration with other transit systems and the seemingly missing integration digitally within exisitng plannign websites and apps
ACTIONS
Integrage other forms of transit to create a fluid door-to-door experience
POV
I’d like like to explore ways to visualize the experience to increase confidence in ferry commuting
HMW
How might we help riders plan their routes based on their destination?
THOUGHTS
Visualization will alleviate the anxiety and ambiguity and help in transit planning
ACTIONS
Enact design patterns that other transit websites utilize for familiarity
POV
I’d like like to explore ways to help riders seamlessly plan, buy tickets, travel, and board the ferry
HMW
How might we make the boarding process simple and seamless for riders from the planning stage onward?
THOUGHTS
Sometimes users approach the ferry as it arrives and need to board rapidly. This can be an especially chaotic situation.
ACTIONS
Design a desktop-to-mobile ticket handoff experience that is easy, simple, fluid, and reduces stress while boarding
Following affinity mapping, we developed POV's (Points of View) based on the themes. We painted a picture of the situation and proceeded to ask the questions and determine the problems we need to solve:
POV
I'd like to explore ways to help leisure users find scenic and tourist experiences
HMW
How might we guide riders to discover new experiences and routes?
THOUGHTS
Users tend toward leisure use and do not consider this a serious form of travel
ACTIONS
Cater the app toward leisure users by emphasizing the experience (what to see, to do)
POV
I’d like like to explore ways to visualize the experience to increase confidence in ferry commuting
HMW
How might we help riders plan their routes based on their destination?
THOUGHTS
Visualization will alleviate the anxiety and ambiguity and help in transit planning
ACTIONS
Enact design patterns that other transit websites utilize for familiarity
POV
I’d like like to explore ways to help riders visualize the experience to increase their confidence in the ferry service commute
HMW
How might we help riders visualize important realtime information to help with delays, rushed boarding, and geography?
THOUGHTS
Maps, realtime locations, capacity, countdown clocks, and distances are useful. Waiting is a painpoint for users but countdown clocks can demystify the process
ACTIONS
Leverage realtime information to make it clearer for riders when the boats are coming
POV
I’d like like to explore ways to help riders seamlessly plan, buy tickets, travel, and board the ferry
HMW
How might we make the boarding process simple and seamless for riders from the planning stage onward?
THOUGHTS
Sometimes users approach the ferry as it arrives and need to board rapidly. This can be an especially chaotic situation.
ACTIONS
Design a desktop-to-mobile ticket handoff experience that is easy, simple, fluid, and reduces stress while boarding
POV
I'd like to explore ways to help riders plan the entire door to door experience
HMW
How might we help riders plan the door-to-door experience to encourage users to ride the ferry?
THOUGHTS
The lack of integration with other transit systems and the seemingly missing integration digitally within exisitng plannign websites and apps
ACTIONS
Integrage other forms of transit to create a fluid door-to-door experience
Armed with a number user issues we created archetypal user personas to embody our discoveries. Three types of archetypal users that embody the overarching needs we determined:
Armed with a number user issues we created archetypal user personas to embody our discoveries. Three types of archetypal users that embody the overarching needs we determined:
Develop
After framing the rquestions we developed an initial pass at structuring the website
Develop
After framing the rquestions we developed an initial pass at structuring the website
The sitemap is simply based around four categories the map, routes, landings, and experiences.
The sitemap is simply based around four categories the map, routes, landings, and experiences.
Based on the user personas we created 3 task flows. They are as follows:
Finding a Commuter Ferry, Planning Transit, & Buying a Ticket
Finding a Weekend Destination, Planning Transit, & Buying a Ticket
Finding a Tourist Experience, Planning Transit, & Buying a Ticket
Based on the user personas we created 3 task flows. They are as follows:
Finding a Commuter Ferry, Planning Transit, & Buying a Ticket
Finding a Weekend Destination, Planning Transit, & Buying a Ticket
Finding a Tourist Experience, Planning Transit, & Buying a Ticket
We developed wireframes that correspond with the taskflows. The focus was on gathering all the requirements while solving the user needs.
We developed wireframes that correspond with the taskflows. The focus was on gathering all the requirements while solving the user needs.
Hi Fi wireframes added UI design. Developing the color scheme, fonts, visual hierarchy, and feel of the website. Deeper thought is given to the HMW questions; how do we answer these issues in the website design?
Hi Fi wireframes added UI design. Developing the color scheme, fonts, visual hierarchy, and feel of the website. Deeper thought is given to the HMW questions; how do we answer these issues in the website design?
The brand harkens back to the midcentury transit map and environmental graphic design (the 1972 design by Massimo Vignelli). It seeks to be clean, optimistic, colorful, and ordered and modular.
The brand harkens back to the midcentury transit map and environmental graphic design (the 1972 design by Massimo Vignelli). It seeks to be clean, optimistic, colorful, and ordered and modular.
Deliver
The culmination of the iterations and research is embodied in the Deliver phase. User testing is a testing ground for the ideas proposed and a way to see if we are doing what we actually say we are doing. Also, we can find unanticipated, unrelated basic issues. We can gather the findings and package it in this final iteration.
Deliver
The culmination of the iterations and research is embodied in the Deliver phase. User testing is a testing ground for the ideas proposed and a way to see if we are doing what we actually say we are doing. Also, we can find unanticipated, unrelated basic issues. We can gather the findings and package it in this final iteration.
User testing for the led to a large number of improvements in the design.
The home menu was revised to display by default making sorting by category much more obvious.
The homepage was improved by listing out all 3 categories of lines, experiences, and landings.
The search experience was widened to include all of the following as well to include door to door directions.
Bbasic navigation tools such as back arrows and closing buttons for the interface were added.
User testing for the led to a large number of improvements in the design.
The home menu was revised to display by default making sorting by category much more obvious.
The homepage was improved by listing out all 3 categories of lines, experiences, and landings.
The search experience was widened to include all of the following as well to include door to door directions.
Bbasic navigation tools such as back arrows and closing buttons for the interface were added.
Read Further
- To embed a Youtube video, add the URL to the properties panel.
- To embed a Youtube video, add the URL to the properties panel.
At first, all of the information about routes, landings, and experiences was collected on the homepage with the search. Unfortunately, this was an overwhelming amount of information.
The revision pass was an opportunity to pull back the website and edit it to be more simple with separate categories. The brand is tighter, cleaner, and closer to the original vision as a result - prioritizing the door-to-door search as the main activity and simplifying the site.
In the future, I could envision opportunities to re-envision the curated experiences. It could be a user-generated feature to open up the app to the community input.