How We Built Dekantā

The world's premier Japanese whisky retailer gets a remix from Harpers

Who is Dekantā?

Dekantā is the world’s largest supplier of rare whisky from Japan. They launched in June 2015 and since then have become a global e-commerce force to be reckoned with.

Due to their expertise in sourcing their products the whisky they offer is often one of a kind only available through their website. Backed up by a fantastic customer service team Dekantā is a perfect example of how to do e-commerce right.

What was the brief?

The client requested that the existing Dekantā website be redesigned and make to look similar to the Mr Porter website. We were also tasked with fixing a lot of issues and bringing the code base up to date after a third party developer had, unfortunately, broken a lot of the original functionality of the website.

In addition to this we were to migrate the company server network to some new dedicated servers that were being built and housed in one of the main US data centers.

How did we do it?

The instructions were very specific on this build so Harpers was limited to how much creativity we could use in this design. We added as much flair as possible, such as quick view functionality for the basket, account and currency changer, while staying within the parameters set by the client.

As we were re-editing the images and deploying new hi-res versions it made sense to use a minimalistic design so that the products really popped and caught the eye of the customer.

The end result

No Place Like Home

The home page is a full screen pure CSS slider we designed to immediately wow the customer and showcase the latest featured bottles.

The slider operates on a five second cycle. It also pauses on hover and shows the navigation arrows for the user to manually switch slides if desired.

The Whisky Shop

We changed the default view of the shop to a list based view and styled it so that the products were displayed in an easy to read format.

The customer was able to switch back to the standard grid format by clicking the relevant icon if needed.

Perfect Product Page

The plain white background allows high resolution images to really sell the product. This page draws the customer to the product image and makes it super simple to click that “buy now” button.

Hovering over the image activates a custom pure CSS magnifier that zooms in on that area of the image for added detail.

Mobile Whisky News

Dekantā is well known for its detailed whisky stories and news articles. It was important to feature this on all devices especially smartphones for that whisky enthusiast on the go.

Simple card like views of each story make this a super easy way for people to catch up on news from the whisky world.

The Nerdy Stuff

Stats

Since our original design and work for Dekantā a third party developer had, unfortunately, attempted to redesign the site and broke much of the functionality we originally created. Much of this build was focused on fixing those mistakes which we won’t bore you with. Here is some of the other stuff we did…

Zen Desk Ticket & Live Chat Integration

As Dekantā was becoming quite popular we took the decision to move its customer service operations to the excellent ZenDesk platform. We also integrated the Zopim live chat client so that staff could converse with customers on site should they need help.

DevOps

We moved the Dekantā database to its own MariaDB SQL container, set up two Nginx web servers to sit in front, Varnish to sit in front of those and HAProxy at the network perimeter to terminate SSL connections and distribute requests amongst the back ends.

Scripts

We stripped out all the plugins that had been added and replaced them with our own lightweight solutions (for example a pure CSS slider rather than a bloated jQuery one). We also optimised the WooCommerce functionality that was slowing the site down and cut back on the number of calls it was needing to make to the WordPress core.

Optimisation

We rewrote the Varnish configuration rules that had been deleted and upgraded the Nginx configuration for server level optimisation. We also re-edited every one of the 2000 product images so that they were losslessly optimised and in a proper proportioned resolution for web viewing.