Hermès – La Maison Des Carrés

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.

HermesLaMaisonDesCarres

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.

Website welcome

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!

Hermes_Welcome_PopUp

Homepage

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.

Hermes_LaMaisonDesCarres_Homepage

Silk Rooms

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’.

Hermes_Silk_Rooms

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.

Item_Detail_Page

Equestrian Rooms

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.

Hermes_Horse_Design

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! 😉

Silk_Knots_AppPage

TieBreak_AppPage

Color Cocoa Collection

CocoaColorTeaser

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.

CocoaColor_Page

 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.

Hermes_SideBar

Hermes_LaMaisonDesGarcons

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

Hermès – Apps and Orange Boxes Observatory

Hermès is certainly having a great year. Following up from my last post on ‘Je Suis Un Cheval‘ and ‘Saddle Personaliser‘ here are the other initiatives by Hermès that certainly top the luxury fashion brand digital campaigns list.

The Break App

The App is best described by the brand on their YouTube channel as

A random dose of Hermès
The handy app to help you take a break from the harsh realities of office, airport or public transport…or even a dull date.
Pull the tie and let the game begin!

Each time the user opens the app there is a new surprise content in form of short films, games, tie pattern videos, funny stories, new collection info and even tutorials/tips on how to tie a tie. The fun part is that the user has to pull on the signature orange tie to reveal a new piece of content.

Silk Knots App

The Silk Knots App shows the latest collection of scarves and step-by-step guide on they can be worn in so many interesting ways, as we see in the video preview.

Besides the apps that focus on their signature collections, Hermès also launched an interactive version of their bi-annual magazine on tablets Le Monde d’Hermès.

Users interact with each piece of content and create an origami bestiary out of a selection of images and share these with their friends. The call-to-action drives readers directly to the store locator with the message saying ‘ Where can I find Le Monde d’Hermès?

After all this great work, there is finally some fun content on the Orange Boxes, the DNA of the Hermès packaging and corporate brand identity. I really like how Hermès tries to imagine what the Orange Boxes are actually up to. A series of short films show different shapes and sizes of Hermès boxes doing funny things representing a wild creature…I mean we see animation revealing animal-like behaviour in a fun way. The series of videos have been released on their Facebook page and on a playlist on the YouTube Channel. So far there are 6 videos, may be more to come.

To sum up, the color orange became a part of the Hermès packaging since the World War II post era, when there was shortage of paper supplies and orange colored bags were mostly more easily available and till today the color remains and the orange boxes have evolved over the years and look as luxurious as their products.

Hopefully there is an app coming on the ‘Orange Boxes’. Oooo! I have ideas….but won’t give it away here 😉

Hermès #JeSuisUnCheval

Non, ce n’est pas une blague!

Hermès has surprised us with this video of artists acting like a horse. A majority of bloggers don’t really agree with it and don’t understand why this film is being promoted.

I feel it is a really good way of getting involved in social media and showing a film that unifies ‘art’ and ‘their relationship with the horse’ – giving people something to talk about that is completely ‘on brand’.

Even before the film for social channels, Hermès made their ‘Equestrian’ section on the website more prominent and interesting for the online shoppers by adding a customizer for the saddles.

SaddleCustomizer

Shoppers can customize their saddle, learn about their chosen saddle and even schedule a visit with the specialists to see if it actually fits and meets their needs.

Shopper experience

The steps to complete your custom saddle are apt to not lose the shoppers interest and also value their precious time. There are enough customizers online which try to hard to up-sell and cross promote other products, rather an giving the shopper a quality experience on a product that they are actually showing interest in.

 Step 1 – Choose your discipline and Step 2 – Description

The shoppers can chose what sport they are involved in, which reflects the models available. After selecting the model, the description instantly appears sharing the product details.

ChooseSaddle

Description

Step 3 – Options

Shoppers can select the colors and sizes and their preferred design details. Options

Clicking on ‘Validate’ completes the customization process and gives an option to ‘Try the custom saddle with the certified Hermès specialists’

Validation

 Trial with the specialist

Here too the steps to schedule an appointment are to-the-point asking shoppers the information necessary for this task and not open up a survey-like-form, binding them to share even more information and taking advantage of their needs i.e. you give us this xyz information, if you want a specialist. A lot of luxury brands go down that route and become greedy for too much information.

Specialist

The personaliser was launched earlier this year and the Equestrian collection features a range of interesting products not just for the riders but even your horse. Spoil yourself here 😉

And to end this post with the main story, here’s how Hermès celebrates their relationship with the horse in their recent eNewsletter. Love it!

The World of Hermes

 

Hermès Défilé Autumn-Winter 2014 campaign

Refreshing! A pure luxury!

We rarely come across ‘Fashion’ brand websites that do not require you to click at least 5-6 times to get to the final destination page. And getting more in exchange of doing less and getting it in just 1-2 clicks online today is certainly a luxury. Hermès made an effort to identify and reflect the ‘less is more’ and ‘online user behavior insights’ in their recent ‘Défilé’ Autumn-Winter 2014 collection microsite.

Screen Shot 2014-03-10 at 18.04.05

The landing page loads with a video starting in the background and showing a thin designer strip which upon hovering over shows a thumbnail of the outfit worn by the next model. You can click on it and skip the other episodes and watch the cat-walk you like. This is the simple and basic part.

What is best about this is if you notice the ‘Instagram’ icon on the top right. It shows a stream of Instagram images – displaying the time it was taken and the number of likes it received. Clicking on the image will open the ‘Instagram’ account in a new window and does not take open it in the same window. Many brands ignore these small details that can greatly enhance a desired user experience.

Hermes Defile

The site is available in obviously two languages – English and French and also shares Call-to-action to visit the main Hermès.com website and also share the experience online via Facebook, Twitter and Google+. The Social Share copies and images are also optimized relating to the content shown on the website.

HermesSocialShare

Many brands ignore these tiny details which are in fact the online face of the brand when they get out of their own platform and enter the ‘Social Playground’. It is always refreshing and nice to see for a huge digital marketing fan like me that there are Marketing and UX teams out there who think through and take the pains to get all these details right. Least I can do is take out time to appreciate such work and share the experience and appreciation.

While we are at it, check out their Tumblr and Pinterest pages as well for inspiration. Tumblr page header animation shows even a highly regarded luxury brand like Hermès can have some fun in a subtle way.

Hermes_Tumblr_Pinterest