When Hermès announced on their Facebook Page ‘Come closer…Closer still…’ with an image showing a character and scarfs from a key hole – we expected yet another online experience but certainly not an e-commerce site with a beautiful storytelling illustration and animated characters.
The website is a beautiful collection of silk scarves and accessories portrayed in a storytelling format and the site design naturally leads the user through ‘La Maison’. The UX is pretty simple to navigate in a one-pager format taking you through different rooms showcasing the collection. The e-commerce function is enabled for France, Europe, US, Japan, Australia and Canada, except China.
Upon loading, the site welcomes you with a pop-up message giving a brief overview on what the user can find here – making them aware that the silk scarves can be found by size, colour, material or theme. Of course the borders of the pop-up are ‘orange’ in color…oh so Hermès!! Love it!
The website loads with the top view of ‘La Maison’ showing the signature ‘Orange Box’ in the background with a team welcoming the visitors. There are various subtle animations in the background giving an aesthetic appeal to ‘La Maison’ and these characters/illustrations have been quite common in many Hermès interactive microsites in the past as well. ‘La Maison’ shows different rooms showcasing the collection, each room telling its own story.
Several rooms showcase the Silk collection classified as ‘Silk Bandanas’, ‘Maxi-Twilly’, ‘Silk Knots’ and also theme wise in form of ‘Graphic & Abstract’, ‘Animal World & Wildlife’ and ‘Cocoa Color’.
At the bottom of each scarf, its size is displayed and upon clicking the window expands into an e-commerce window, where the user can select their color and either purchase it or add it to their wish list. There is also a brief history behind the design of the scarf and a recommendation of related patterns below it. As the user is engaged and already exploring the scarf, there are questions and decision making processes going on in the background. Hermès clearly recognizes this and provides some ‘Service’ options that address the usual questions or thoughts the viewer may be having. These include, sharing their contact details and timings to inquire about the product, delivery and shipping options, short tip on preserving this item so the user knows what after sales efforts this purchase involves and lastly providing details on gifting this item. For both traditional and digital savvy users, there are options to ‘share’ and ‘print’ the item detail page as well.
Of course any Hermès communication without the horse will be incomplete. To give a subtle touch of the brand roots there are two rooms dedicated to the Equestrian collection as ‘Horse & Equestrian’ and ‘History & Mythology’ showing a special collection of scarves with the horse in design and the famous historical design pieces respectively.
I like how these specials scarfs are given their own space and identity signifying how important these pieces are to Hermès. It only helps to communicate this but also allows design and UX wise to simplify and allow users to navigate and ‘discover’ this content, which may have otherwise been missed had it not been classified under its own meaning.
‘Silk Knots’ and ‘Tie Break’ Apps
There are two rooms for their recent apps as well on ‘Silk Knots’ and ‘Tie Break’. I love how their respective detailed pages showcase the welcome video and tease users to download the app with an animated teaser and visuals from the app – without destroying the overall site design and look & feel. The button designs and color patterns for the Apple and Google Play stores are selected in sync with the overall page design showing how much attention is given to details. I love when designers and clients pay attention to such details. Secretly I am hoping that a black button was never presented and looking at the overall site design I am sure the designer got it right in the first place! 😉
Color Cocoa Collection
There is yet another special teaser playing with the sensory side of the user. A special collection of scarves for the ‘Chocolate Lovers’ inviting them to indulge their ‘silk tooth’ – yet another clever way to get the users attention to a collection that may have otherwise got unnoticed in the huge Maison.
Additional Functionalities and ‘La Chambre Des Garcons’
On the top left a navigation bar is hidden that provides users additional option like search, filtering the items via size, color, materials, themes and even price. There is also a section for men ‘La Chambre Des Garçons’ showing a selection of silk scarves and ties.
There are also additional link outs to the corporate site and the Hermès Editeur site (An online gallery of editions of ‘works of art’ on silk).
So why this website?
The question why Hermès would move away from their main site and create this site is pretty obvious. They want to appeal to the younger generation who may not be so well versed with the history of the brand. Surely many won’t be able to afford these items, but this is to educate and inspire them to be the future customers of Hermès, learn about the brand and see the huge collection they have to offer.
It is a great example of using storytelling and expressing their brand to a younger audience while giving their current audience and promising prospects an opportunity to buy these items online.
Also the current Hermès website owing to its design and structure could not do this job of clearly showcasing the collection of more than 400+ scarves in such an exciting and user friendly way.
View this beautiful online experience here http://usa.hermes.com/la-maison-des-carres.html
The online campaign is also supported by a beautiful short film showing imagining how ‘La Maison’ comes to life