Overview
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.
Visit WebsiteThe
challenge
The previous Willis website was organized by product. While this made the website easy to navigate for those familiar with their product line, it left the majority of new customers confused as to where to start.
Some of the limitations of the original website included:
- 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
The
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
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.
