Case Study: Willis WooCommerce Website

Client Background

About the client

Willis is a North American distributor of building materials, with a focus on countertops and sinks. Acting as a sales and marketing team for their various product lines, they market mainly to other businesses, including architects and designers, kitchen and bath installers, as well as fabricators of custom products.

Distributors of the complete range of Corian® residential and commercial products
Operates 5 warehouses throughout North America
Material engineering services for custom fabrications and collaborations
Dealer network of 800+ stores

Visit Website

Where We Started

The challenge

The previous Willis website was organized only by products. While this made the website easy to navigate for those familiar with their product line, it left the majority of new visitors confused as to where to start. This alienated new visitors and limited the ability of the original site to effectively convert visitors into customers.

A visual design that has not been updated or refreshed in over 7 years
Ineffective calls to action that were not helping with lead generation
A non-intuitive interface for customers to order sample colours
A search feature that was not returning relevant results
A disappointing user experience on mobile devices
The inability to make simple content changes in-house
Non-compliance with current accessibility rules and regulations

How We Collaborated

Design process

This website design project coincided with a full brand redesign for Willis, including logos, signage, stationary, and other marketing materials. The old black and maroon colour scheme made way for a more vibrant collection of blues. This also allowed us to be creative with selecting highly contrasting accent colours, which are necessary for bringing attention to calls to action.

The concept of triangles was pulled from the new branding and used subtly throughout the website design, including resource overlays, footer graphics, and bullet points.

Heavy use of imagery was employed in this project, as a significant portion of their client base are designers. With thousands of high-quality images to select from, this project highlights the benefits of custom photography.

1. Original website

The original Willis website had a very dark undertone to it, and provided a bit of a challenge from a navigation standpoint.

2. Design brief

After numerous discussions with the Willis team, we created a document that captured their design preferences for this project.

3. Wireframe

A lot of information needed to be organized on the Home page, and out wireframes were useful in capturing these essential design elements.

4. Final design

Due to proper planning and preparation, the initial design concept was approved, only needing some very minor colour adjustments.

The Results

Our solution

Content re-architecture

With the previous website being organized by products, it made it difficult to find information, unless visitors were already familiar with the company’s line of products.

A major goal of this project was to segment the website based on the target audiences. By segmenting the website’s content Willis is now better able to speak to needs of each of the three target audiences: commercial builders, interior designers, and custom product fabricators.

A flexible approach

Rather than creating multiple different templates for each different type of page, for this project we developed a single template that is extremely flexible. Website administrators can chose from any of the 15 different content “panels” to add content to any page:

Single and multi-column text panels
Half text / half image panel
In-page tabs
Banners with support for animated video backgrounds
Client testimonial panel
Photo gallery and image sliders
Expandable FAQ sections
and much more …

With a drag and drop interface, everything on the page can be easily moved around, allowing for an unlimited possibility when it comes to page layouts.

Color samples

A unique challenge to this project was to make it easier for visitors to be able to order colour samples. To accomplish this, we integrated the popular WooCommerce plugin. While the back-end was just what the client needed for organizing the colour sample information, the front end was heavily customized.

Given the sheer number of colour samples available, all colours were organized by hue. As well, an easy to use filtering system allows users to narrow down the specific sample that is ideal for their project.

Since all of the samples are free, all references to pricing had to be removed, and the checkout process needed to function without processing any payments.

For simplicity, we adopted the approach of not requiring user logins, as that would simply create a barrier to finalizing their order. However, for convenience, through the use of cookies, visitors making a subsequent order on the same browser will have all their contact and shipping details automatically filled out for them.