Website Redesign: Washington Ferry Services

The Washington Ferry service offers a beautiful and effective way to access a variety of islands, either on foot or with your vehicle. While these ferries are popular for their affordable travel alternative, the previous Washington Ferry website was not visually appealing and was confusing to navigate. I designed and produced an alternative website, one that will bring to mind the unique experience each island and port has to offer, and provides information on the ferry rides themselves, such as time, ticket cost, and what services they offer.

Objective and Purpose

As a local to the Washington Northwest, I’ve had several opportunities to travel on state ferries, enjoying the adventure and beautiful views. For this project, my primary goal was to design a website that would be visually appealing and deliver clear and important information to those considering using ferries as a mode of transportation. To achieve this, I researched the individual landing locations, what the ferry services offer, existing website layouts, popular locations within the ports, pricing, and styles to use for the graphic images.

Prepwork and Goals

Target audience: Tourists, aged 20-40, those unfamiliar with the islands and ferry services.

Objectives:

Provide important information in a clear, concise manner
Attract attention with digital designs and colorful header
Create a layout that is understandable and easy to navigate

Information provided to viewers:

Times of departure and arrival of individual ferries
Locations to board and exit ferries
Prices of travel, both for walk-on and vehicle passengers
On board passenger services
Suggest popular activities and sites of each location

Visual Aspect and Website Layout:

Graphic designs that showcase popular views and the destination of the selected location
Clear, easy-to-use website layout
Visually appealing design for scrolling
Continuing the visual design of header throughout layout

Process

Through research of each island, I found popular locations to focus on for the header of each page. When designing images for the header, research and experiments were done to find a clear, visually appealing style. For the layout, I observed popular, successful sites and learned aspects that would reflect the focus of travel and visitor attraction, while not overcrowding the page with extensive text.

For the primary visual of each page, header images were designed and created using Adobe Fresco. To reflect the peaceful, calm aspect of the Puget Sound, mellow, often blue-tinted colors were selected. After drafting the header of each page, the original style was replaced. The new style works with both nature views and the buildings depicted.

To organize the pages, align the layout of each, and compare to old drafts to know where to focus and improve on, I was able to use Figma. It kept my drafts organized, had helpful tools when it comes to alignment, and gave me the chance to take a step back and look at the overall design, comparison, and mood of the pages together.

On the homepage, I wanted to focus on ferry information right away. Sharing what the ferry service has to offer, the services on board, and the attractions visitors might experience were depicted in words and images. Afterwards, prices were clearly provided. Sharing relevant information right away and creating easier access for those who already knew where they wanted to go creates a more engaging website. Visitors searching for more information on the ports can easily navigate to those pages, under the location bar.

With the header images complete, I created the layout of each page on Figma. The goal of detailing was to reflect the mood and focus of the header. The smaller images shown throughout the layout, the colors used, and the wider images were a continuation of the original image.

After finalizing the visual aspect, I researched information to narrow down what to share in the text and what photos to use for the “Activities” section. Text was minimized to be easily read, maintaining the attention and focus of the viewer. All images expand upon the information shared.

Personal Takeaway

After completing this redesign, I expanded my skills and gained experience with designing website layouts. While the information provided by a website is important, having a visually appealing and clear layout of each section greatly helps viewers navigate the site. There is a fine balance between how much information to share and what to focus on. In our society of quick, accessible information and shortening of viewers’ attention, it is important to be clear and concise when designing websites.

With the visual details added, I found creative ways to build continuity and connect visuals. Through experiments and viewer surveys, I tested how visually appealing the website I created is. When using Figma, comparing layout drafts became easier. Figma also helped maintain a consistent look while designing the sections on each page to correlate with the others of the website.