Hédonist: Introducing the French Lifestyle
A UI Design Case Study
This project was a website design for a French lifestyle brand known as Hédonist. It took place over the course of a 3-week sprint in order to produce a prototype as a minimum viable product for the client.
Hédonist is a Toronto based retail store focused on promoting the art of French living in an international space. Savoir-faire and the traditional French craftsmanship are two of the main gifts that they want to share to Toronto.
“No red, no blue, no baguettes.”
Is one of the first things our client said to us when we asked about the design and where I began my design thinking and process.
I’ll repeat that as our client also did multiple times:
“No red, no blue, no baguettes.”
Probably the phrase that stuck in my mind the most after speaking with our client. The biggest thing he wanted us to get across with website design was a way to make it look and feel French, without being cliché.
In comes the inception sheet, a tool used to develop a mood and visual language. Now many people can just go ahead and come up with a random style, but that’s not the way we do things here. The whole purpose of this sheet it to put a WHY at the centre of design.
Without knowing why we are designing, what are we even doing?
Really zeroing in on the reason our client wants this site and what he wants for his company will open the doors to the best possible designs we can create for them. Focusing on the why helps us to more easy structure a mood and visual language.
Expressing the duality of modern and traditional French culture, creating an experience that breaks clichés and promotes the art of French living internationally.
With this “why” at its centre. The visuals language followed naturally. FRENCH kept in bold, the most important word for the entire design, other highlights include, modern and traditional, in contrast but having to be portrayed in tandem made for an interesting process later on. Effortless and audacious, in my mind another contrasting pair, a theme set for the design.
With a product and lifestyle focus to the brand, I also used words like, personal, immersive, and friendly. Each to drive the idea that someone could really get to know the brand through their portrayal online and not just an in-store experience. The site itself also had to be fine, focused, and clean, pushing me towards a more editorial look.
Two sides to every coin.
Making it French, but not too cliché was probably the biggest challenge but another challenge was portraying two sides of the brand. One the one hand we wanted elegance and quality of the products to speak for themselves, on the other we wanted a fun and very artistic side, showcasing the friendliness and joy of the brand. We wanted modern and traditional. My job was to display the two sides in perfect unison.
My mood boards following that mentality were as follows:
All About Accent: Focusing on showcasing quality through vibrant colour. Always having one accent colour in the image to make it pop. The use of lines and neutral to get across that effortless French aesthetic. I tried to use red and blues in a way that was not cliché, but in the end our client still though this one was too stereotypically French.
Easy and Effortless: Focusing on the more rustic and cultural side of the French lifestyle. Coffee and patios to showcase a classy but effortless mentality. Our client really enjoyed the images with people, portrayed a little more artistically and joyfully, but this was still too stereotypically French for them.
Quiet Quality: Focusing on the elegance that is the French style. A lot darker, but still vivid colours, which resonated more with our client. Lots of texture and patters as well as stoics models to drive the focus onto the product rather than the model, letting the quality speak for itself. Third from the left on the top half, an image of a woman enjoying lunch on a balcony to maintain that element of French lifestyle. The favourite of our client, but I was told it was lacking some emotion, it went to heavy on elegance and stoicism.
So with 3 rejected mood boards, it was back to the drawing board. It was not that they were entirely wrong, but none was the perfect mood that our client wanted.
I decided to take the best things of the last two (the first one was too far from the client’s vision) and combine them into a final mood board.
I have to thank my UX designer and partner in the project,
(check out her UX side of the case study here) for helping me solve the puzzle that was the perfect mood board, even contributing a set of images for the final one. Here is:Delightful Duality
The mood board really focuses on portraying the duality each element. Each colour used has one of the opposite side of the board to contract it. Each image has an opposite in mood. We maintain the joy and artistic feel in the top half with vibrant images featuring people and the bottom half has the darker, more elegant, and stoic side.
“There are two sides to every coin.”
Really getting across that one does not exist with the other, each element is both contrasting but complimentary. The French savoir-vivre is alive in this mood board, showcasing that a French lifestyle encompasses a spectrum. I can consider this one a success as I finally got an incredulous “Wow! This is perfect!” from out client. It was probably the most difficult mood board I have had to design and the end result came out all the better for it.
French Life-STYLE
From mood boards it was a straight dive into creating a style for Hédonist.
Supplied by some of the best Mid-Fidelity wireframes I’ve ever received. It was time to style the screens to really make the products, their high quality, and most importantly the French lifestyle shine.
As a reminder, here are the biggest things I wanted to get across with the design:
French, but not cliché
Duality
Product focused
Colours
I think the best way I managed to accomplished this was through the colour system I developed. I decided on the use of 4 colours. At first they seem like too much, having too much colour can have them conflicting and we have the same problem our mood board seeks to avoid. However, each colour serves it purpose.
The Primary: A dark, saturated, colour to be used throughout the site, specifically where we want the logo to stand out and also to draw attention to call to actions and buttons. In this case the dark teal you will see.
The Secondaries: A warm, a cool, and a neutral colour. All complimenting each other and the primary. These are the ones that really hit those 3 points above. I used a pastel pink/peach for the warm, a light blue for the cool, and a soft beige for the neutral.
By using 3 colours we can pay homage to the 3 colours of the French flag, also with 1 warm, 1 cool, and 1 neutral colour.
We also hit the duality aspect by having both the warm and cool tones, not having one outshine the other, the neutral in place to show the middle ground between the other two.
Each of these colour are used as solid backdrop for the products, interchanged depending on which is best suited or most complimentary for that product, that in in order to make the product the focus of attention.
Here I show the colour style system and two different variations on the 4-colour palette. On the left is the primary one, and on the right is an example of how a fall palette would look. The colour system works with changing fashion in mind and opens up the design to be adjusted for different seasons or collections.
Typography
Where we used many colours, I only chose to pair 2 typefaces. Pistilli and Futura PT. Pairing these the duality again comes through.
- The Pistilli, a more traditional script, used to emphasize certain words and add to the elegant French feel.
- The Futura PT, a more modern and clean look. Also keeping the information very legible without getting in the way of the product images.
I really wanted to drive home those 3 points, because doing so accomplishes the WHY of doing it, which to repeat is:
Expressing the duality of modern and traditional French culture, creating an experience that breaks clichés and promotes the art of French living internationally
Here is the style guide that reiterates the above and shows the colours used as well as some additional elements.
Here are some of the final screens. Even at a glance you can really see how the product is the centre of attention. Showing the quality without having to be in store, through large and vibrant images. The text is low-key and though it is very descriptive to further emphasize quality, it manages to stay out of the spotlight of the product while still providing support.
Prototype
Lastly you can view a short run through of the prototype in the video below and you can also go through the prototype here!
Lessons Learned
Nothing is ever perfect.
As always, it’s important to learn from your mistakes to improve your next project.
One thing I noticed after the fact was that a lot of the French feel was coming from the copy instead of the images, and although I am very satisfied with the colour system developed, I would have liked to work with other elements to further emphasize the French look and feel at first glance. Making the FRENCH really apparent when you first see the site.
This was done in 3-week and my client, my partner, and I consider it a success.
Until next time!
Hey! If you’d like to get in touch, message me at sebmendez.id@gmail.com.
You can also find me on LinkedIn or check out my photos on @sebscapes.
