Haigh's Chocolates

Haigh's Chocolates is one of Australia's most prestigious Chocolate brands. Our team had the privilege of designing their first e-commerce offering by way of a responsive online store. We had 4 weeks to produce a responsive website design that focused on engaging product imagery and ease of purchase for impulse buyers. It would prove to be a challenging project, but an extremely rewarding one. This would be my 6th major responsive project at Deloitte Digital and so I was assigned to the project as UX lead to oversee its end-to-end design in only 4 weeks.

UX Lead
Deloitte Digital
Haigh's Chocolates
2013

Requirements gathering
Wireframing
Prototyping
Competitive review
IA Design
Flow Diagramming
E-commerce platform evaluation
Functional specification writing
Client presentations
Workshop facilitation

chocchoc

A SWEET CHALLENGE

This was a tough project. We only had 4 weeks to complete and deliver the full creatives for the entire e-commerce store. Haigh's Chocolates had a strong vision for the site, but limited experience with web as a channel. At the outset of the project the e-commerce platform was still undecided making it difficult difficult to know what would ultimately be technically feasible. Haigh's Chocolates was keen for the site to serve as a key source of information about the company as well as a platform to sell chocolate. We had to maintain this balance whilst also ensuring we optimised the purchase experience for all devices.

Haighs-elements-imachero3Haighs-elements-imachero3
Haighs-elements-divide-fixedHaighs-elements-divide-fixed

DESIGN PROCESS KICKS OFF

Thankfully a brief research effort had been undertaken prior to my joining the project, I had the opportunity to sit down with the researcher and get a walk through of the findings. I had some proto-personas to work from and a list of some of the users' wants and concerns about buying chocolate online.

I spent 1-2 days evaluating trends in the e-commerce and boutique chocolate space. First I looked at what competitor boutique chocolate makers were doing online, but to be honest the digital maturity of the entire industry was low. I never like to limit myself to evaluating just within the client's industry, so I broadened my search to look at great e-commerce sites regardless of what they sold. Lastly I focused on responsive web design looking at sites that were doing responsive really well, and then went on to focus specifically at the handful of e-commerce sites who were doing responsive well.

I stuck the interesting screenshots I found all over the war room and then put post-it notes with insights, things I liked, where something could meet a business requirement. This helped foster discussion with directors and other leads when they came in the war room to have a look around. I encouraged them to put up their own post-it notes with what they liked as well.

compreviewcompreview

At this point I had an understanding of the customer, the requirements and had some good inspiration from my research so it was now onto sketches and some information architecture design. I hit the whiteboards for a brain download and used the post-it notes from the market review to tag up interesting ideas.

The IA for this project was relatively straightforward. As an e-commerce solution the product catalogue would be flat, with the ability to group products under different categorical views. E.g. boxed chocolates, or gluten free chocolates. Haigh's has a long-standing approach to categorising their chocolates, it was one of those instances where you knew that the client had a great framework to build upon because of their deep expertise in their industry.

I created the IA on a poster board using post-it notes because we had planned some upcoming workshops with the clients and I intended to walk them through all of the sketches and designs so far. This method works well because it allows for quick shifting of IA elements on the fly during discussions to explore different arrangements and structures.

Haighs-elements-white-duoHaighs-elements-white-duo
Haighs-elements-posterHaighs-elements-poster
Haighs-elements-divide-2Haighs-elements-divide-2

HOME PAGE

The homepage was a challenging design. The client wanted a large amount of information modules present, whereas we were pushing to bring the product/shop content to the homepage to entice would-be buyers. In addition, the client needed to style the homepage based on the current seasonal campaign, so we had to build out a number of easily customisable modules for both product and campaign showcasing.

Haighs-homescreenHaighs-homescreen

PRODUCT LISTING PAGE

Our initial research suggested chocolate purchasing behaviour was an impulse action - people liked to browse easily and then purchase when something caught their eye. I recommended an infinite scrolling listing page, with minimal sticky navigation on the left hand side. The front end developers implemented a clever lazy-loading animation to the product images to ensure the page load felt smooth as you scrolled down the page.

PRODUCT PAGE

The product page was quite challenging, but obviously the most fun to design. We knew from the start that the chocolate would sell itself, not the description. Haigh's has a strong brand history and its chocolate quality is well known nationally. A professional food photographer was brought in to create the product imagery, based on our recommendation that the chocolate appear to be sitting on the page. We wanted a seamless looking product page, foreground and background blending together, not something that looks like stock jpegs on a page.

I looked to declutter the page, pushing additional product information down the page, and only including additional content deemed critical to the user from the initial research, e.g. do Haigh's use refrigerated shipping?

Haighs-elements-prod-fullscreenHaighs-elements-prod-fullscreen

CHECKOUT EXPERIENCE

If chocolates are an impulse buy, then the checkout had to be frictionless. Forms had to be logical, duplicitous fields and unneccesary steps had to be removed. I opted for an accordion style checkout flow where each key piece of information required was segmented into it's own compartment. This reduced the number of things the user had to concentrate on at any one step. 

The checkout flow was accomodated by a fixed floating panel which provided a summary of the information input by the user at each step, so as they progressed they could be assured the information was being captured accurately by the checkout. 

Where possible we used design elements that would influence and persuade the user. For instance we used a padlock icon and a grey metalic background on the credit card form as this has been reported to increase user confidence in the security of the form they are putting their credit card details into. 

Haighs-elements-checkout-fullscreenHaighs-elements-checkout-fullscreen