Local business website

Redesign of e-commerce website to bring niche perfumery closer to the public

What I worked on

— User interviews

— User definition

— Competitor Analysis

— Interactions

— Prototyping

— Design System

— User Testing

Role

UX - UI Designer

The project was a collaboration with Les Topettes , Barcelona

Field: Local business, Website

Timing: 9 days — Oct. 2022

Team: 3 people

Overview

Les Topettes is a small high quality boutique selling author perfumes, soaps, candles and self-care products located in the centre of Barcelona. They are focus on young people, utilize environmentally friendly and raw material.

— Our goal

Provide a personalized treatment to each customer to give them deep knowledge of high quality brands and help the less knowledgable discover new perfumes.

Understanding the problem

Les Topettes offers top quality customized perfumes to sophisticated individuals in their online shop, but customers miss the treatment they receive in the physical shop, causing lack of trust in the site.

How might we retrieve trust in our customers, so they get to enjoy the perfumes and feel unique?

Research

Business and competitive insights

We started studying our competitors, this will help us to better understand our customers and their needs. We began with the scenario given on the challenge, following the next steps:

What do you look for when buying a perfume?

The qualitative research aims to understand what are the problems of users buying high perfumery.

Our user research consisted of 6 interviews to people that buy exclusive perfumes and a vendor in an exclusive perfume store, one interview to Oriol (one of the two stakeholders) and 88 reviews found on internet.

“The owner knew exactly what I would like after asking me very simple discovery questions.”

— From Google reviews

“Most of the time they go for a familiar scent they have known because they have tried in the shop or have bought the product before”

— From Stakeholders´s interview

“When I wear the right fragrance, I feel more myself and more confident. I think our smell defines us.”

— From user´s interviews

— Insights

Personalized products

Searching for interaction

Looking for recommendations

Awareness of essences related to the stories

Define

Establishing the main outcomes that can add value

After collecting all the information about competitors and stakeholders and users, we are closer to knowing what the user is looking for.

— Heuristics evaluation results

We found that the main problems were the lack of updating in some parts of the website, not using filters to search netter your product, some malfunctions ant the various aesthetics found (store and home pages).

Meet Carlos, our user persona

Taking into account all the above information, helping us by the empathy map, different possible personas emerged.

“I want a perfume that makes me feel unique and that adapts to every moment”

Age: 28
Profession: Product Manager
Tech: Industry

Wants

Personalized fragrance
Learn from experts and be counselled

Fears

Not finding the right perfume
Spending money in something not worth it

Needs

Own something special
Trust

Goals

Be unique
Personal care and feeling comfortable with oneself

What difficulties does Carlos face when he is on the website?

— Conclusions

Les Topettes Online Shop

Les Topettes Raval Store

✔ Top quality perfumes

❌ Treatment received in the physical store

❌ Trust

❌ Ease to purchase

Ideate

The most important changes to do

Once the heuristics have been detected, we focus by prioritizing the path that “most interferes” with the user's purchase.

Then, through brainstorming, we proposed simple solutions for each of them.

Make things simpler and easier

The addition of a questionnaire to identify which scent best suits you eases the flow in the new site map proposal. Also, we give the option of purchasing a set of perfume samples that can also fit you.

Customize and deepen in your purchase

We created a more intuitive user flow and minimize the nuisance of having repeated screens throughout the site by reducing all the stages and blending some of the pages.

Prototype

Lo-fi Wireframing - First Steps

Focus on the Marc’s path:
First all elements and features for the MVP were configured and tested with users. The biggest complexity was in the conversation screens, so we had to make several versions.
This one was the first version of the main path:

Mid-fi Wireframing - Continuous testing

In the first prototype, errors in grammar and pronunciation appear separately in the conversation, but as the user can continue speaking without correcting them, he or she does not stop to see what is wrong.

In the next version the conversation stops and you have to choose a better version of the wrong answer, in order to improve not only your English, but also the customer service.

In the latest version, they stop these two options and only show one, because according to testing it caused confusion. Grammar and pronunciation have also been unified.