Visual Design

Boston Harbor Islands

The Boston Harbor Islands are a national state park that consists of 34 islands and parks. The non‐profit parent organization, Boston Harbor Now, manages the park and islands.

Role
Lead Designer
Agency
Jackrabbit Design
Website
Boston Harbor Islands →
Boston Harbor Islands Homepage in a Device

Background

Boston Harbor Now wanted to revamp the Boston Harbor Islands website. In particular, they wanted the website to appeal to the general public and tourists. These groups included families, education groups, millennial explorers, and park enthusiasts.

The primary goals of this project was to make visitor information easy to find and create an exciting, but accessible website. This would help the Boston Harbor Islands stand out from their competitors, which includes other recreation, leisure, and education activities. I started straight in the design phase and worked off of wireframes to create high-fidelity concepts. This re‐design led to positive results in the period leading up to the islands' 2019 season‐opening day event.

Boston Harbor Islands Header

Visual Design

The color scheme were drawn from the existing logo. Photography is used throughout the website to help visitors see the sights, set the tone for the islands, and show off some of the sights and activities.

Bird illustrations near the primary headings, topographical map patterns, and monotone imagery in the background are used to add design details to the website and help distinguish certain sections and content from others for emphasis.

Boston Harbor Islands Design System

The client wanted us to deviate from their aging style guide to align the website more with the Boston Harbor Now website. To meet WCAG 2.1 accessibility standards, I pushed the orange a bit darker. I avoided using the black from their logo too much to keep an approachable feel for the website. Defining a design system, from text styles to icon styles, helped keep components consistent and made it easier for me to hand‐off the designs to the developers.

Boston Harbor Islands Event Pages

The Events pages provide a place to feature an event, filter them, and list upcoming happenings. Clicking on a listing leads into a detail page with more information on a specific event.

Boston Harbor Islands About the Parks Pages

The About the Parks page gives an overview of the the park and gives users a glimpse into the different islands and sights.

From there, the user can use the interactive map to click through to learn more about each item.

Boston Harbor Islands Ferry Schedule Page

The Ferry Schedule page is one of the most crucial pages on the site and provides users with an all‐in‐one spot for information like schedules, fares, and departure points.

The anchor links at the top allow users to quickly access information located further down the page.

Accordions were used to collapse schedules that visitors may not need to view and allows users to skim the bold headings to view the relevant schedule.

Photos for each of the departure points provide a visual reference for passengers and are linked to map directions.

Boston Harbor Islands Mobile Screens

Because mobile visitors make up 65% of the website's traffic, it was important for me to design mobile versions of each page template.

This helped developers figure out how to scale the website down to mobile sizes and provide users with a well-designed experience on smaller devices.

Photo of Kids Running on a Bridge into a Fort

Results

The website redesign yielded favorable results when comparing metrics from 2018 and 2019. These numbers were measured over the same number of days in the time leading up to and after Free Ferry Day, the season-opening event for the islands.

There was a 73% increase in users, 104% increase in sessions, 112% increase in page views, and 74% increase in new users. Metrics like bounce rate were less critical because ticket orders were done through a third‐party service, whose data I did not have access to.