Horizon Wood

Earlier this year we met Horizon Wood, a family owned and operated saw mill operating out of Kersey, Pennsylvania. We teamed up with Horizon to revitalize their aging online inventory system with an emphasis on three user stories —

1) As a buyer, I want to sort product by data relevant to my needs, so that I can quickly and confidently decide and request a quote.

To better understand the improvements we made, let’s take a look at the legacy website. To find product, buyers were burdened with sifting through dozens of tables, on multiple pages. [Fig.1]

Figure one, screenshot of legacy site

Using Drupal’s Search API Solr Search module, we introduced a faceted search system to the new site. This is just a fancy way to say that buyers can narrow their search results by applying multiple filters. [Fig.2]

Figure 2, animation of facets

In addition, we improved the decision-making process by including imagery as part of the product teaser. Users can see one image by default, and another on hover. [Fig.3]

Animation of hover effect on product teaser

Should the user prefer a more left-brained browsing experience, we've also provided a teaser list view, and a toggle to switch between the two. [Fig.3.1]

Animation of list/grid view toggle

With a focus on conversion, we redesigned the product page itself. The old design was small, dark, and provided the user no clear action to take. [Fig.4]

Old product page design

Our new design includes a large image gallery, product details in a digestible layout, and a prominent button calling users to Request a Quote. [Fig.5]

New product page design

To take it a step futher, when a user inquires from a product page, that product's set number is pre-filled in the subsequent contact form. This is in place to prevent confusion and/or communication errors between buyer and seller. Horizon's phone number and email address are also provided as alternative ways to get in touch. [Fig.6]

Image of contact form highlight set number

2) As a seller, I want automatic updates to my online inventory, so that I can increase efficiency and reduce human error.

Horizon Wood offers hundreds of products — sets of wood. And each set has up to 16 boards, any one of which could sell right now, and their inventory would need to be updated. Horizon successfully manages these updates with a Microsoft SQL database.

Unfortunately, that database did not automatically sync with the old website. Any changes to inventory were made in two places, the database, and the website. Not only was this a meaningful time committment but also prone to inaccuracies.

The new Horizon Wood online inventory alleviates these pain points. Every few minutes, our Drupal backend automatically syncs with Horizon's Microsoft SQL database, and updates the website accordingly. This sycronization is up-to-the-minute, accurate, and requires zero content management from the client.

3) As a brand, I want consistency across media, so that my customers feel they know and trust me.

Originally, Horizon Wood was two websites — a brochure site about the saw mill, horizonwood.com, and inventory site, horizonevolutions.com. While the brochure site had been recently updated, the inventory site remained archaic, and the two looked nothing alike. [Fig.7] and [Fig.8], respectively. 

Screenshot of udpated Horizon Wood brocure site

Screenshot of legacy Horizon Evolutions website

At a glance, you wouldn't have known these sites belonged to the same brand. Even the logos were different.

With the new inventory site we sought to unify the look and feel of both experiences under the Horizon Wood brand. By borrowing typography, color, and design details from the brochure website, we were able to create one, unified identity with which customers can consistently identify. [Fig.9]

Full page screenshot of new inventory design

Over and above...

In addition to committing ourselves to these three user stories, we worked towards other goals for the build. The site is built on Drupal 8, the CMS' latest release. The design is fully responsive — usable on large monitors, small mobile devices, and all screen sizes in between. [Fig.10]

Responsive screenshots

We've also built a password-protected inventory page for wholesale buyers, and will be adding the ability for users to search by ranges of data via the faceted Solr search.

Finally, we're working with our "Swisster" company, Amazee Metrics, to optimize the new site for search engines. 

Look for these updates in the near future, and more from Horizon Wood and Amazee Labs Austin.

September 12, 2016
Tags
3 Comments

Get our Newsletter

 
 

Comments

Great stuff!

I'd love to understand what challenges you faced using Search API Solr and Facets. More juicy technical details I guess ;-)

By Nick_vh
2 years ago

Thanks for the note, Nick. We're currently implementing similar functionality on two other sites and plan to write more about those juicy technical details you speak of. We'll let you know when we do. Thanks again!

By Andrew
2 years ago

Excellent job on the site responsiveness. May I ask, what theme did you use?
And for the search, what motivated you to use Solr instead of the (simpler) Database Server from the Search API?

By Jean-Pierre
2 years ago
What is Amazee Labs?