New York Regional Ferries Website

New York Regional Ferries Website

A responsive website to consolidate regional ferry services

Role

Research UX Design UI Design

Tools

Figma, Notion, Photoshop, Illustrator, Screen Studio, Jitter

Timeline

100 Hours

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 with prices

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

curating experiences

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 with prices

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

curating experiences

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 with prices

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

curating experiences

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.

  • 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.

C. Challenge

  • Can we create a single website to unify all the ferry lines?

  • Can we create a single website to unify all the ferry lines?

01. 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.

01. 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.

We want to know how users discover, plan trips, and buy tickets to understand how to improve the experience.

We want to know how users discover, plan trips, and buy tickets to understand how to improve the experience.

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.

02. 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.


02. 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 Ferry is Unreliable

Users tend toward leisure use and do not consider this a serious transit option. For them, the landings are inconvenient or the lines not plentiful enough.

Realtime Visualization is Useful

Waiting is a huge painpoint for users of all forms of transit. Maps, realtime locations, capacity, countdown clocks are useful.

Painpoint: Ticketing

The convenience of a “tap & go” with a smartphone is ideal for a lot of people. There is a reluctance to onboard for infrequent users.

Pain Point: Getting to the Boat

The impracticality of the ferry locations is a painpoint. The lack of integration with other transit systems physically and digitally is also a problem.

Timetables Are Frustrating

Timetables and departure times are the most important thing to know. However, traditional timetables can be difficult to read.

Visualizing Realtime Information: Waiting & Weather are Painpoints

Weather was cited as a major painpoint in the use of the ferry.

Painpoint: Boarding

Sometimes users approach the ferry as it arrives and need to board rapidly. This can be an especially chaotic situation.

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

Users tend toward leisure use and do not consider this a serious transit option. For them, the landings are inconvenient or the lines not plentiful enough.

Timetables Are Frustrating

Timetables and departure times are the most important thing to know. However, traditional timetables can be difficult to read.

Realtime Visualization is Useful

Waiting is a huge painpoint for users of all forms of transit. Maps, realtime locations, capacity, countdown clocks are useful.

Visualizing Realtime Information: Waiting & Weather are Painpoints

Weather was cited as a major painpoint in the use of the ferry.

Painpoint: Ticketing

The convenience of a “tap & go” with a smartphone is ideal for a lot of people. There is a reluctance to onboard for infrequent users.

Painpoint: Boarding

Sometimes users approach the ferry as it arrives and need to board rapidly. This can be an especially chaotic situation.

Pain Point: Getting to the Boat

The impracticality of the ferry locations is a painpoint. The lack of integration with other transit systems physically and digitally is also a problem.

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:

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:

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:

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:

03. Develop

  • After framing the rquestions we developed an initial pass at structuring the website

  • 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.


03. Develop

  • After framing the rquestions we developed an initial pass at structuring the website

  • 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 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

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.

04. 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.

04. 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

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.

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.