Les Maisons Rouges: E-Commerce Website Redesign — UX Design Study Case
In this project, we were helping a winery improve its online presence to be more competitive in the market during the current situation, the pandemic, by making them a responsive website for both desktop and phone.
The stakeholder
The lockdown was a problem for everyone, but every problem raises the opportunity to make things better, and that is what happened with our client.
Les Maisons Rouges are a vineyard located in the Vallée de la Loire in France, they make organic wines labelled AB and Biodyvin since 2007.
Adrien, winemaker, and owner of Les Maisons Rouges, has found a website to be a great opportunity to reach people during lockdowns but it wasn’t the best website nor that friendly so it was our mission to redesign it.
“The more we pay attention to the plant, the more it gives back to us in the wine.” — Adrien
We did an interview with Adrien, it wasn’t easy for me because it was in French hehe, Adrien is so passionate about his wines and treats customers like family and it is all about the taste and mystery for him.
“Our wines are complex, you can’t impose tastes. It’s like a painting, everyone interprets in his own way” — Adrien
We then downloaded the data of the interview using an affinity diagram to see what to focus on and have a better view of Adrien’s vision and brand perspective.
Research
As e-commerces should be well adapted to the industry, we did some market research and competitive analysis to deepen our understanding of the situation, we chose 4 companies other than our client (Belliviere, Domaine de la Roche Bleue, Vins face b, Avenue des vins) and we conducted feature analysis and branding analysis.
Feature analysis
By feature analysis, we could focus more on what was required to be added as a new feature in our redesign.
Branding analysis
As for branding analysis, it helped us to have a deeper understanding of the brand and the competitors by identifying how they differ in the proposition. Also to evaluate who the customers are, what they’re looking for, what the competitors are doing, and how the brand is meeting the customers’ needs.
And after we understood our brand’s position and analysed the competition, we had to tear the old website down and be the design critics for a bit….
Heuristic evaluation
Information architecture
Before diving into the user interface, we needed to define the information architecture and how to approach the website.
It was really interesting because our stakeholder had something in mind and their approach is all about the story so we put emphasis on that section and made it more clear.
Also, their products after that with some on the homepage and emphasis on the labels they hold dear.
We also had to wait for the Usability Tests to make a decision, and the wine enthusiasts we approached said they liked the new features.
Sitemap
As you can see below we did the original sitemap to understand the website more and how to shift things around and focus on things.
Then we did a new sitemap, we tried to make it simple and have fluid easy navigation, redistributed some elements, removed redundancy, and added some features.
User-flow
We then focused our efforts on the purchasing process, so as you see below we did a user-flow for the purchasing process.
Medium-fidelity prototype
Medium-fidelity wireframes
And the time came to sketch and iterate until we got these wireframes, we came out with these and made this prototype to put to the test and iterate.
Usability test
The medium-fidelity prototype we did has aided us to do the testing, 5 to be specific, we used Zoom as a tool for testing, whiling giving them context, scenarios, and tasks to accomplish, our main task was to purchase a couple of bottles of the evening.
User Interface design
Brand attributes and mood board
We had three brand attributes for Les Maisons Rogues: Alive, Welcoming, and Demanding. And as you can see, we tried to emphasise these attributes.
Style tile
High-fidelity prototype
Mobile website
The last part of our design process was to transition from mid-fi to high-fidelity and create this prototype, keeping in mind the feedback we got from the usability tests and the difference between the two phases while adding the visuals, animations and colours.
Here you can see the original website for reference.
Desktop website
Responsiveness
Adopting a Mobile-First approach, we started designing the mobile version before the desktop website, as it’s easier to expand a design than to make it smaller.
From mobile to desktop, the hamburger menu turns into a horizontal header, and most elements become horizontal instead of vertical.
Sadly we were tight on time, so we designed, iterated, and tested for the mobile website but not the desktop but we followed with desktop high fidelity wireframes, that we will work more on with the stakeholder and furthermore iterate.
Outcomes and lessons
This was such an interesting project, especially hard for me because the stakeholder was French but tried to adapt and overcame and it was a great pleasure to work with such an organised team Anaïs Jardin, Morgane Favchtein and Yanis Azze.
The prototype was presented to the stakeholder, he loved it and already started making it come to life, this is such an honour and makes me want to iterate more and more to make it even better.
The most important lesson I learnt was how important usability testing is, and how we would keep arguing about our assumptions on how the better thing would be then the tests would confirm some, deny some or even prove us all wrong haha, it was a fun project.
Thank you so much for reading this far. You rock!
All feedback is welcome, negative and positive, all towards doing a better user experience.
All the love in the world! xo
