I was fortunate to work on the design and development of a website redesign for Boston Whaler, a manufacturer of luxury boats. On behalf of the E3 team, I led the design and UX of the project.
Background & Purpose:
The main goals of the site redesign were to create a fully-responsive site, modernize the Boston Whaler web presence and create an enviable user experience for both consumers and dealers.
The main purpose of the site, is to provide technical information and lifestyle inspiration around Boston Whaler boats for both potential buyers and current owners. The site also serves as sales tool for dealers, allowing them price out models, share model pages and reference technical information.
These were some of the problems identified with the old website that we strove to solve:
- Website was not responsive or mobile friendly
- Important information was not easy to find (specific boat models, dealer locator)
- There were multiple websites - one main site with current model information, one site for old manuals and resources and another separate site with lifestyle blog content
- The boat builder was difficult to use
- There were limited ways to feature social, images and video content
- It wasn’t clear on most pages, what the main actionable task a user should or could take
- Navigation - both the main nav and sub menus created usability challenges.
Key Design Elements:
- Navigation: Starting with the main nav that is present throughout the site, we strove to make it easier to use by simplifying the information architecture, clearly calling out “Locate a Dealer” and creating a mega menu that focused on getting the user to a specific model as quickly as possible. There was also intentionality behind the sub-navigation throughout the model and interior pages – we chose a horizontal orientation so that the focus was on the content and we could utilize the full width of the browser, creating a more immersive experience.
- Design Systems: We built the site in a modular fashion, creating systems around different types of content (photos. videos, technical specs) to aid in creating a consistent experience throughout the site. This included font treatments, photography (guidelines around graphics), call to actions, and layout options. Each solution we arrived at had to accommodate outliers, be reusable, easy to use and be a responsive solution that would work across various screen sizes.
- Boat Builder: The goal with the new version of the builder, was to make it more visual, and easier to use – for both consumers and dealers. We wanted to help consumers dream, giving them the ability to change hull color, see three different angles of the boat and see visual updates as the user added various add-ons. We also didn’t want to overwhelm users with too much information, while still providing options to access all available options.
- 404 Error Page: We wanted to have some fun with this page, but still connect it to the brand in a meaningful way. The line “You’re in unchartered waters.” was the initial inspiration, and from there we built out an old map, that featured lands and seas, named after BW models. From a functionality/UX standpoint, we added a search bar to help users find the content they are looking for.
- Video Integration: One of the problems we wanted to address, was how to better incorporate some of the beautiful videos that BW had produced. We also knew from experience, that incorporating video would help user engagement, and time on pages.
Bartholomew Fish – Art Director
Tim Morse – Digital Strategist