The brief

As a new business, the website was the essential tool to launch their brand, bottle and company in what has become a highly competitive market. The site had to reflect their stunning bottle design and to convey that the roots of the business originate from Chichester.

The work

Due to the modest budget of being a launching brand, we decided to design and build a custom template for Shopify rather than building the site through D3R’s custom e-commerce CMS. This gave us more time to concentrate on the site's UX and aesthetic whilst using Shopify's already established checkout process.

The bottle design is beautiful and it was important to feature it at the front and centre of the site. I incorporated the bottle design throughout the rest of the page layout using Jarrold’s brand colours, textures and subtle pattern flourishes. The rest of the design is strongly led by styled typography and overlapping images, as well as content blocks giving each page a premium and editorial feel.

The result

Jarrold's launched their business through their new website in March 2018 and their gin has been well received by the industry. The product has featured in luxury bars, artisan festivals, and retail departments, and sales continue to be driven through the site and social media.

Each page of the site pushes sales by frequent calls to action which are interspersed amongst product learning material, information about the distillery and related cocktail recipes for each individual gin. I also built in many subtle load in effects and animated hover states which brings the site to life. The client was extremely happy with the results.

The site is incredibly user friendly, cool and crisp, and we have received numerous comments not only on the look but also the functionality


Jarrold's | Desktop, Home
Jarrold's | Desktop, Basket
Jarrold's | Desktop, Cocktail
Jarrold's | Desktop, London Dry Gin
Jarrold's | Desktop, Our Still
Jarrold's | Desktop, Cocktails
Jarrold's | Desktop, Product details page
Jarrold's | Desktop, Product listing page
Jarrold's | Desktop, Our story

Site map

Despite being a small site it was necessary to establish the site map before progress was made with the wireframes and prototypes.

Cocktail Library

A later addition to the site was the Cocktails section where bespoke cocktails and photography were created using Jarrold's products. Not only is this a great resource for consumers, it is also a method for pushing sales of each individual gin as it allows the client to edit and add new cocktail recipes that compliment their products.

Mobile Designs

Jarrold's | Mobile, Home
Jarrold's | Mobile, London Dry Gin
Jarrold's | Mobile, Our Story
Jarrold's | Mobile, Cocktail
Jarrold's | Mobile, Cocktails
Jarrold's | Mobile, Product Listing page

Product retouching

Due to the budget restraints of being a young company the product photography that I was supplied with was not up to studio quality. As such, and in order to show off the bottle design, I colour adjusted and retouched the bottle photography which ensured that the bottle range was uniform.

before After
London Dry Gin
Sloe Gin
Rhubarb Gin
Visit project