Menu Close
The Chocolate Box

The Chocolate Box

Creative Direction, UI & UX

The Brief

To re-design The Chocolate Box eCommerce website, keeping the heritage and craft feel, improving conversion whilst catering for all devices, using the Oscar eCommerce platform Tangent have developed in-house.

The Chocolate Box - iPad view

Style Tiles

After the kick-off meeting with the client, rather than doing moodboards for this project, I decided to use Style Tiles. These enabled me to create a visual language for the website quickly. I provided the client with two variations including a range of different colour palettes, typefaces and buttons to choose from. This proved highly effective as it gave visual direction quickly without too many revisions.

The Chocolate Box - Style Tiles

Final Artwork

Developed in early 2013, the project wasn’t mobile first however the FED team implemented mobile support at a later stage. The client was also given complete control over layouts, content and design via Oscar’s 'Fancypages' feature which utilises a drag-and-drop interface.

The Chocolate Box - Multiple Devices The Chocolate Box - Homepage Design The Chocolate Box - Category Page Design The Chocolate Box - Product Page Design

Web Styleguide

Along with the final design of key pages, I also provided the FED team with a web styleguide with various elements, states and patterns for reference, influenced by Brad Frost's Atomic design methodology. There is scope for things to change slightly in the build stage (to improve static deliverables) and I like to work closely with the FEDs to achieve this.

The Chocolate Box - Web Styleguide for FEDs

A/B Testing

I also implemented A/B testing for the Chocolate Box for various pages including high-selling product pages, and throughout the checkout process at various times of the year. This proved useful to see the variations in conversion rates.

The Chocolate Box - A/B testing


During the Christmas of 2013, The Chocolate Box saw a double-digit increase in sales on their website. Giving the client full control over the layout and design via Oscar’s feature ‘Fancypages’ has had its challenges but ultimately they are extremely satisfied. This solution has given them flexibility and they can manage their creative in-house.

Visit the Site