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]
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]
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]
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]
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]
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]
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]
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.
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]
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]
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.