Hotel Chocolat

Luxury Chocolate

My Role - Lead user interface designer
four designers reported to me.
Software used - photoshop, illustrator, sketch & Invision
Hotel Chocolat were at the start of a e-commerce relaunch working with an external agency, the senior designer Craig had worked at the brand for a long time and couldn't see the trees through the wood and I was bought on board to take a fresh look at the designs.
the challenge
Hotel Chocolat is an iconic brand with a distinct look and feel about this, the clientele buy in to this look and feel, this is what creates brand loyalty.  
In the research period we were trying to ascertain the demographics of the Hotel Chocolat customer what their shopping habits were.  The age range of the majority of the Hotel Chocolat customer base is late 40's to early 60's, but because of the progression of the brand as designers we knew we had to show the user interface that went across ages and demographics.
Research and questioning
By entering in a dialogue with various departments such as product, merchandising, marketing and leadership it was a grounding way of understanding the needs and breaking down what the deliverables were. 
​​​​​​​The first issue was how to balance the user interface with the brand at large as Hotel Chocolat had become so iconic for the groundbreaking designs.  By looking at the brand at large between me and Craig Dallas (in-house senior designer) we could determine how much the print guidelines could determine the digital guidelines. 
DESIGN THE design library
​​​​​​​When the interactions, colours, buttons and various forms of widgets had been chosen, I then set about creating a fully responsive design library that could be rolled out. 
When the wireframes had been completed and the user interface rolled out, a fully comprehensive ui guideline was handed over to the development agency.
By creating a cohesive design library that worked hand in hand with the off line brand guidelines, we decided to continue with the Didot font but pushed it further with the use of gotham, this created a counter balance for all demographics. 

Taster Club - Responsive

Homepage - Redesign

Hamper User Interface

Hamper User Interface

You may also like

Back to Top