L'ARTISAN DES MÉLANGES
10 days
Desktop & Mobile
2 Designers
Design thinking
Figma
Creating a full e-commerce website and branding for a Parisian brand.
Brief summary
L'Artisan des Mélanges was established in 2018 by Elodie and Antoine, a dynamic duo passionate about Parisian lifestyle and gastronomy. They started with a small boutique in the heart of Saint-Germain-des-Prés, where their meticulously sourced teas and coffees quickly garnered a loyal following. Recognizing the demand for high-quality Parisian beverages, they launched an marketing landing page in 2021, allowing them to reach a local and global audiences more easily. Their dedication to quality, sustainability, and Parisian tradition has made them a beloved brand among connoisseurs. Their business goals are to grow an engaged, loyal customer base, to expand the product line with exclusive and seasonal offerings, as well as to lead in sustainability within the specialty tea and coffee market.
Problem Scope
As part of my UX/UI bootcamp at Ironhack, my teammate and I have been challenged to grow an engaged and loyal customer base around “L' Artisan des Mélanges” by designing a user-centric e-commerce solution relying on exclusive, quality, and sustainable product offerings within the specialty Teas and Coffees market, coupled with an intuitive navigation structure and categorization, to help users easily find products based on their interests and preferences, as well as to implement a trustworthy checkout process.
Secondary Research
Our secondary research helped to validate our assumptions and to identify the keys factors and the current trends in the specialty Teas and Coffees market.
Market Research
Feature comparison chart
We first identified our key competitors, who's UX could provide informational analysis regarding a successful flow for our target users. Then, we conducted an audit of their checkout flows and e-commerce sites, to compare across competitors’ products. We listed the main features on the vertical axis and our competitors on the horizontal axis and checked for each of them, weither or not their offers this feature.
Market positioning Map
We determined the Sustainability and the Parisian culture degree, as the most revealing axes to determine the market distribution of our competitor’s branding and to identify market gaps. It enabled us to decide upon our ideal strategic market positioning for "l'Artisan des Mélanges".
User Research
To learn more about the needs and pain points of our audience, we performed an user research with Coffees and Teas connoisseurs who have a strong appreciation for Parisian culture.
Our 5 interviews enabled to come out with 3 main insights:
Coffee and tea daily consumers have many frustrations when it comes to meet both their qualitative and ecological standards.
Coffee and tea daily consumers have difficulties to find clear information about product sourcing, ecological certifications, and qualitative information.
Coffee and tea daily consumers would need more guidance to become more familiar with the different means of consumption and types of grinding, the brewing techniques, and the best food pairing.
Meet "Hypercautious Hervé", our primary persona
After analysing all of these information by using an affinity diagram, we have created our primary user persona to guide our design thinking:
Hervé's Journey Map
Based on Hervés' profile, we created his user journey map and identified at each stage what were the main frustrations and the main opportunities, before to ideate on our solution:
Problem Statement
With this in mind, our problem statement was defined as: "Coffees & Teas connoisseurs who have a strong appreciation for Parisian culture need to find a way to feel apart of the Parisian culture and ensure to consume qualitative, tasty and sustainably sourced coffees & teas because they experiment frustrations to combine their passion for coffees & teas with their environmental beliefs on a daily basis."
We brainstormed the possible solutions by doing a Crazy 8s, before to prioritise the must have features using the Moscow method.
MVP Statement
After prioritization, our Minimum Viable Product was defined as: "An e-commerce solution that will support our customers' environmental and ethical beliefs related to Coffees & Tea" consumption while offering the best Parisian touch service, by incorporating the following features:
A variety of speciality products including coffees, teas, brewing kits, and seasonal boxes.
Advanced filters including sourcing note, ecological labels, and quality scores details so our users will easily find the relevant products.
After registrating, a survey allowing our users to fill their Coffees & Tea consumption preferences as well as their type of home equipment, to get personalized recommendations.
An interactive calendar to enable our users to learn more about the brand culture and workshops organized around Coffees & Teas tasting and brewing techniques, as well as to book their participation."
Design decisions
Low fidelity wireframes
Based on our MVP, we sketched our low fidelity wireframes and we conducted 5 in-person concept testing. A number of areas of improvement were identified :
The preferences survey's icons were not intuitive enough
The homepage carrousel layout and its CTA wording needed to be clarified
It was misleading to have both the log in and the register on the same page
Some explanations needed to be incorporated for each text field to increase accessibility
A drop down system to display or to hide product filters was required to make the layout less cluttered
An "add to basket" icon directly from the product cards was missing on the product results page
The seasonal boxes subscription options were not clear enough
The user control dimension needed improvement (ensuring close, return, continue option at each step)
The layout of our drop down menu needed improvement for an enhanced navigation
Site Map
Prior to start design iteration phases, we have built our website "to be" sitemap reflecting our information architecture:
Empirical Iterations
Mid Fidelity wireframes
Based on our concept testing feedbacks, changes were incorporated to our mid-fidelity wireframes, and further testings were done. After having conducted 5 usability testing sessions, additional areas of improvements were unveiled, especially:
To highlight tea and coffee selections through best-sellers and last arrivals separate sections on our homepage
To improve the functionality of our preferences survey, by making both the icon and the text labels clickable, and by allowing to choose several options.
To incoporate some toggles offering user to filter its products according to the seasonal selection or to his answer in the preferences survey
To simplify the operation of our calendar and the registration procedure for our workshops.
Brand attributes
After our mid-fidelity testing, we reflected on our brand attributes and our user interface design.
On the basis of our visual competitor analysis and according to the brand guidelines including a color palette with sophisticated tones such as midnight blue, ivory, and deep burgundy ; a welcoming and imbued with Parisian elegance tone of voice ; and a brand logo made of a stylized Parisian street lamp, a coffee bean, and a steaming cup ; we composed our moodboard and style tiles :
High Fidelity wireframes
The overall functionality was improved in our high fidelity screens, by incorporating an "add to basket" icon directly from product search page, by simplifying our calendar feature, by fixing the homepage interactions, and by clarifying our CTAs.
All UI and buttons formatting were also incorporated, and our screens were enriched with colors and medias to enhance user experience, especially with interactive carrousels on the homepage, autoplaying video on product details pages, as well as micro-interactions.
Desktop prototype
Mobile prototype
Learnings & Next steps
Designing an e-commerce solution for l'Artisan des Mélanges was all at once exciting and challenging, due to the quantity of information available regarding this industry, type of products, and the multi-facetted brand that were implied. Additionally, we had to meet both the stakeholder business goals and our user's needs.
Putting all these aspects in perspective and considering the real interest and positive feedbacks we got from our usability testing sessions, it seems that we managed to come out with a user friendly solution that would actually enhance user's navigation, it's brand culture, and the overall product experience.
However, as we had to prioritize our design decisions in our MVP and according to my own level of requirement, our prototype can still be improved by adding more features in order to meet all Tea and Coffee connoisseurs' frustrations that we identified at each stage of the user journey.
Thank you for reading my case study
If you have any questions, feel free to reach!
CV