Hermès Style Guide

AKQA Amsterdam hired me to create an easy-to-understand guide to help all hermès web editors to work with the new global site.

Context of the project

Hermès was going to release its new global site very soon. Being an international luxury brand with presence all over the world means hundreds of people working on the same site. It was mandatory to make an extremely easy to understand guide to avoid disinformation or lack of coherence between so many teams.

It’s always challenging to write and design a style guide for a well stablished brand. Specially if it’s part of the luxury business.

The Challenge

How to simplify hundreds of jira tickets and technical documentation of a not-finished-yet site with e-commerce pages, blog, editorial and more than thirty language versions in just a twenty pages pdf? All this keeping the aesthetics of one of the most iconic fashion brands? 

Solving the puzzle

The first obvious thing to do was  research. I expend one week studying the site and the CMS. I dive into all the technical documentation and I created many blog post and content pages with dummy content to understand how it worked.

Once I understood the functionality of the site I studied the aesthetics. Which are the brand colours, the typography, the layouts and the grids used  in the site. I studied which type of layout goes with each type of content testing and testing again the CMS.

When I fully understood the structure and functionality of the site I created a very clear index, grouping widgets per type of pages and pages per type of content. 

The work process

Once the structure was clear all I had to do was to fill up the blanks. I started creating super simple wireframes of every type of widget within the site / per device view. When i got a clear overview of all the smaller structures I created spreadsheets explaining the characteristic of these different widgets.

Team Work

I had a very easy going communication with the AKQA Amsterdam developers during all the time I was working on this project.  Without them it would be almost impossible to understand the technical documentation properly. And since they build the site they where the ones who really had the information about how it works. My role was, sort of, a developer-human translator

Work approach

My philosophy during this job was to “try to explain as many things as possible with illustrations and icons instead of words” to make it more universal and easy to understand , regardless of which is the cultural background of the user.

Results and conclussions

The work was done on time and the client was happy with the result. The constrains of having to work remotely with the client  didn’t interfere with the communication flow (Hermès HQ is based in Paris) and the experience to work with such a talented people from a multi awarded agency was great.