UX CASE STUDY 02 : CREATING AN E-COMMERCE WEBSITE
IRONHACK UX/UI BOOTCAMP — PROJECT 2
THE CHALLENGE
The objective was to design a mid-fi desktop website for a local commerce in order to help our client to improve his online presence and to be more competitive in the actual market.
For this, our UX team (Cécile Lesueur, Charles Martin and me) have decided to help Aurore Delafoy, a ceramic artist who creates some special hand-made ceramics. Her boutique is called Fée de la terre.
Let’s discover Fée de la terre and how we’ve imagined helping her!
MEETING THE CLIENT
Our client: Aurore Delafoy, ceramist and owner of Fée de la Terre
Aurore Delafoy is a French ceramist who has been creating ceramics objects since 2017. She started to sell products in 2020. She has an atelier-boutique called Fée de la Terre.
She has a special universe related to the feminine sacred. She creates littles statues with a spiritual meaning. But she also makes other ceramic and useful objects, like dishes or cups.
The stakeholder interview
We have interviewed Aurore and we have obtained the following insights:
The business:
Our client wants to have a website because she has realized that some customers don’t like to buy her products by using social networking. They prefer to purchase through an e-commerce website.
Aurore sells today only by Instagram or facebook. She would like to have an e-commerce website to satisfy her clients, to gain visibility and to increase her sales.
The customers:
Aurore has three types of customers:
- Professionals in psychology and alternative therapies
- People interested in sacred feminine
- People interested in hand-made ceramic objects
The site:
Aurore would like her new website to:
- Show her work, her philosophy and activities
- Show her products and collections (spiritual, tableware and limited/personalized)
- Provide the customer all the necessary information to purchase a product
- Guarantee a safe and reliable purchase
MEETING THE CUSTOMERS
Research
In order to compile the existing knowledge about our subject, we used CDS matrix and secondary research. Based on the obtained data, we conducted an interview to learn more about:
- What are the principal customers’ needs
- What do they expect when buying a hand-made ceramic product
- What is important to them and what do they like
- What are their main problems or what are they missing when buying online
Defining patterns
To be able to identify patterns from our interviews, we used the Affinity Diagram.
It allowed us to classify our answers by subjects. In addition, we applied colors to see clearly what are the positive and negative answers.
This is very useful to define our persona and our problem statement.
The Affinity Diagram allowed us to identify these main patterns:
About the designer:
- Before buying a product, customers like to know the designer’s universe: what are his motivations, ideas, values, how he works…
- Customers like to see pictures about the designer and his atelier. They like to have the feeling of meeting him.
- Customers would like to be able to contact the designer.
About the products:
- Customers like to know if the products they buy are in line with their values. They care about the material’s origins and the mode of production.
- They want to be able to easily find products and the different collections when they are looking for it.
- They like to know what are the latest or limited creations of the designer.
- They don’t want to miss basic information: price, size, color…
- They like to see clearly the object and a picture of the object in a context is a bonus.
About the purchase:
- Customers want the purchase to be easy and safe.
- They want clear information about the price, shipping costs and delivery time.
With all this information, we are able to create our persona: Laetitia.
Problem Statement
We can also define our customer main need:
Ethical and sensitive ceramic customers need to be sure their expectations of product quality are met, because they want to offer a meaningful object to a close person.
GENERATING SOLUTIONS
How may we help the customer?: Hypothesis Statement
We believe giving customers all the information about the product, the artist and how to contact him will achieve a qualitative experience of buying. We will know we are right/wrong knowing customers’ comments after buying.
Ideating: brainstorming tools
By using brainstorming tools like HMW and Good and Bad ideas, we start to ideate some answers to our Hypothesis Statement.
Our conclusion is that we have to achieve the following objectives with our e-commerce website:
SHAPING OUR IDEAS: INFORMATION ARCHITECTURE
Once we have defined our objectives, it’s time to materialize it. Before defining prototypes we are doing the Sitemap and the User Flow. We are using these tools to organize all the information we obtained so far.
The Sitemap
The Sitemap allows us to organize, structure and label the information. It’s the skeleton of our future website.
The User Flow
We use the User Flow to represent the path the user takes to complete one of the main tasks he’ll perform on our site.
With the User Flow we introduce the notion of Interaction Design. It allows us to anticipate the users’ needs when interacting with our design. As the Sitemap, it also helps us to sketch the first wireframes of our site.
PROTOTYPING AND TESTING
Based on the Sitemap and the User Flow, we created our lo-fi and mid-fi wireframes in figma.
Usability Testing
But before validating them, we conducted and Usability Test. The goal was to test our wireframes giving our customers a task to accomplish by interacting with our prototypes: the purchase of a Big Mama stuatue.
We didn’t give our customers any indication and ask them to tell us:
- How they feel by performing the task
- If they feel lost or locked at any time
- If there were missing or confusing information
- What do they think that could be improved
Some of the main friction points we detected by conducting our Usability Test:
Home page content:
Customers would like to have more information about the designer on the home page. They want to know quickly if they are interested in this artist and her products or not. For that, a little text about the artist and her universe is very useful.
Terminology:
Customers found some technical terms a little confusing. We used the term “utilitaire” for tableware articles. We exchanged “utilitaire” by “vaiselle”, which is a more familiar term.
Visibility:
Customers like to have good visibility about where they are in their search process. For that, we have added a breadcrumb.
Missing information:
Before going to the next step, customers would like to have advanced key information about products.
Prototypes
We can see here a video of our modified mid-fi prototype and the navigation relative to a product’s purchase flow:
NEXT STEPS
Once we have defined our mid-fi prototype, we’ll continue working by following the Design Thinking process. That is to say: ideating, defining and testing in a cyclical way until finding the most adapted solution for our users.
LEARNINGS
During this exercise, I’ve learned some useful tools of Information Architecture, like the Sitemap and the User Flow. It was very useful to organize and structure our prototypes.
I’ve also realized the importance of Usability Testing to observe the interaction between the user and our prototypes. This is a very powerful tool that allows us to detect the pain points of our mid-fi prototypes before starting to work on hi-fi prototypes. It’s a good way to save time, efforts and expenses.
About prototyping, I’ve learned to animate a prototype by using Figma. This was essential to be able to conduct our Usability Test.
And last, but not least, we’ve realized the importance of research when questions about our persona needed to be specified. A second survey may have given us the answer to our questions.
Thanks for reading!
