Hotel Chocolat New Website

Hotel Chocolat’s New Website:

Hotel Chocolat's New Website
Hotel Chocolat New Website
Hotel Chocolat New Website
Hotel Chocolat New Website

THE TASK

The new Hotel Chocolat website re-platforming project kicked off back in 2015. They are well reknowned for their innovation through all aspects of their business, and that definitely carried through and into this project! I was tasked with the website redesign in accordance with the new platform requirements from DemandWare and worked alongside the appointed project managers and system integrators to ensure the new website carried through all the functionality of their previous, non-responsive, site to the new, very powerful and adaptive e-commerce platform.

For those of you who may not know or fully appreciate the scale of Hotel Chocolat’s operations, I can assure you this was quite a task considering the complexity of their business model. Besides luxury, British manufactured chocolates, Hotel Chocolat are also armed with an actual Hotel in Saint Lucia among their very own Cocoa Estate, Restaurants, Cafes, a subscription model known as the Tasting Club, plus they also host ‘Chocolate Tasting Adventures’ and corporate events in various locations around the UK.

So I like to compare Hotel Chocolat to companies more like Virgin who offer a variety of product types… In Virgin’s case, their products include Subscriptions, Banking and Music through to Travel. However, the main difference is that companies like Virgin, have various websites that cater to each of these different areas of the business… one cannot book a Virgin flight and subscribe to a Virgin broadband package on the same website.

One of the main goals of the Hotel Chocolat re-platforming project, and what made it so difficult, was the scope to bring all their product offerings under one roof. One checkout flow, one account management area… one website to cater for all. Tasting Club members no longer have to login to a separate website to manage their subscriptions. The user can book a Tasting Experience, book a table at one of their restaurants, Subscribe to the Tasting Club, build a Customised Gift Hamper and order a box of tasty chocolates all in one sitting and most importantly on the same website.

MY INVOLVEMENT

I was tasked with designing how this new adaptive website was going to look and of course adhere to the Hotel Chocolat creative guidelines. Not really knowing or understanding the full scope of what was in store for me at the time as their previous re-platform in 2012 was outsourced and managed externally.

DemandWare does not currently support a ‘responsive‘ framework… it rather incorporates an ‘adaptive‘ approach… meaning that the website reacts to four specified viewport breakpoints.

In our case we chose a mobile viewport at 320px, a tablet viewport at 768px, a laptop viewport at 960px and a desktop viewport at 1280px. What that meant for me, was every single page’s wire-frame had to be designed across the four of our chosen breakpoints… and then annotated to ensure the developers understood the functionality and UX behind the aesthetics of what we were handing over, while also highlighting any differences across these four viewports! If you want to see what that looks like, below are 3 examples showing the ‘Global Header’, ‘Category Browse’ and ‘Shopping Bag’ wireframes and annotations…

… This is just 3 of around 50 annotation documents I produced to explain the wire-frames I had designed. The ‘Product Detail Page’ annotation document alone is a 70 pager! That was me… I designed the new, adaptive hotelchocolat.com!