Hatton Marine

Project Description

Service and Sales Website for Marine Engine and Generator Company

Hatton Marine specializes in keeping marine vessels powered up through both sales and repair of boat engines and generators. In operation since 1999, the Hatton team strives to offer peerless customer service and is among the top distributors of diesel engines and parts in the Pacific Northwest. They offer engine customization services and do all their work in-house to ensure the highest quality standards are met.

Project Objectives

Hatton Marine’s old web presence wasn’t taking them anywhere fast. The Hatton team was receiving most of their new clientele from word-of-mouth references. While this is an excellent indicator of the quality of their work, they wanted their website to help them reach a wider audience.

In addition to highlighting both the products they sell and services they offer, they also wanted to use their website as an online marketing tool for staff recruitment efforts.

Website Design and Development Successes

To help the Hatton Marine website be a standout in the industry, we included a number of bold design elements in each of our homepage and subpage compositions. Stark, sans-serif typography sets the tone across the site; the main body text is a deep charcoal which contrasts nicely with the white and branded yellow used for masthead area heading text. The logo’s blue is also used around the site for accent text and geometric graphical elements.

The catalog was perhaps the largest piece of the Hatton puzzle and required significant simplification when we took on this project. We worked with the Hatton team to streamline this area of the site, providing them with a catalog architecture that’s easy to explore and lends itself to eye-catching design. This piece was particularly critical as the Hatton team would like to one day transform this catalog into a full-fledged eCommerce website.

The Products overview page is clean and basic and leads off to three primary categories. One level down, the category overview pages, provide a sidebar of sophisticated filtering options to ease the user journey and make it easy to isolate desired products with just a few clicks. Finally, the product detail pages are likewise characterized by bold lines and leave space for the Hatton team to share as much relevant data as they’d like about each product; each product detail page features a “Request a Quote” button so users can contact the Hatton team with ease.

The Services pages are equally impactful, featuring a similar modern, grid-style layout and detail pages that can adapt to content blocks of all sizes. The detail pages also feature the primary calls to action as high-contrast buttons that sit just below the fold.

Throughout the website we employed subtle but attractive hover effects and animations, and we also designed and built out an About page template that can be used for additional information-based pages to support Hatton’s main objectives. They’ve already built out an “Employment” page that can be quickly modified to share information about job openings and inquiries. In a similar vein, by putting Hatton’s website on FusionCMS, our preferred content management system, we made it easy for the Hatton team to build out and link to any number of custom contact forms.