Case study: how can we help a local shop improve his online presence to be more competitive in today’s market
Time frame: 7 days
Role: UX/UI designer
Team of 3
Challenge: designing an e-commerce desktop website to help a local shop improve his online presence
Tools: Figma, Miro, Google Suite
Since COVID-19, local shops and practitioners are seeing a drop in demand for their services and products.
At the same time, we see a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue, so more and more professionals are on the verge of their digital transition.
Today, let’s see how we can help a local shop improve his online presence to be more competitive in today’s market.
Step 1 — Meet Olivier & his shop : L’Atelier de Torréfaction
So, our first step was to find a store that didn’t have a website with an online shop (or one that required improvements) and convince the manager to give us an interview to understand his business, his customers and his goals.
Coffee lovers & curious, my team and I quickly decided to focus on local roastery and we identify 3 shops in our neighbourhood that didn’t have an e-commerce. After 2 refusals, the managers having no plans to have an e-shop, we landed in Oliver’s store.
Located in a historic courtyard in the 11th arrondissement of Paris, L’Atelier de Torréfaction is a shop selling specialty coffee.
5 years ago, Olivier, an artisan roaster, decided to take over this historic store located in the Cour Damoye. Already specialized in coffee, the store has a good customers base. Here you can find specialty coffee: to taste here, to take away or to buy in bags to consume at home.
For 2 years, Olivier decided to keep the shop as it was but he quickly realized that the coffee shop aspect of his establishment was neither profitable nor to his taste.
He then stopped all the coffee shop part to focus on his core business: roasting specialty coffee.
As a passionate artisan, Olivier likes to assist new consumers in the discovery of this unique coffee.
In a word: Olivier knows his business, his typical customer, what he wants and doesn’t want.
Since taking over the store, Olivier has always kept in mind the idea of having an e-shop but didn’t feel ready. First for lack of legitimacy, then, once known and recognized, for not needing to have new customers - his shop working very well between regulars and by word of mouth.
However, his clientele has a very Parisian lifestyle: in a hurry and often stuck late at night in the office.
The problem: the Cour Damoye is a private street, so it closes its doors at 7pm. A bit early for a Parisian shop ;)
Today, Olivier is thinking about extending his service online, to make it easier for his regular customers to buy his products and why not generate new sales through word of mouth.
Step 2— Understanding the market
After our meeting with Olivier, we create CSD matrix to have a clear starting point.
We decided to make some online research to have a precise vision of the coffee market in France and coffee consumers’s habits.
Over the last 10 years, there has been an evolution of the French coffee market as people started to be more interested in what they consume and how. France is the 7th largest coffee market and 8 out of 10 people drink coffee.
In 2000, the proliferation of coffee shops in city centers has been a powerful lever on sales and for several years, people started to throw away their Nespresso machine, for example, we have seen a 70% increase in sales of espresso machines with a grinder in 2019.
Actually, 53% of coffee drinkers buy ground coffee and 13% coffee beans: we saw a 38% increase in sales of roasted coffee beans in 2021.
On the specific segment which is specialty coffee, the market grows as interest grows and currently represents 2 to 5%.
What’s specialty coffees ?
To complete that, we decided to focus on 4 competitors:
We choose them because: they sell specialty coffee & they are near L’Atelier de Torréfaction so they potentially have the same type of clientele than Olivier.
When we look at their global environment, we saw that:
- they all are a coffee shops
- they are small businesses (1 or 2 shops max in Paris)
- 3/4 already have an online shop
As our stakeholder already know who are his competitors and what they are doing in their shops, we decide to dig deep on the online shop part to see:
- What is working?
- What is not working?
- What features do the competitors have that our users will expect?
- What features are missed in the marketplace?
We saw that most of the sites have the same type of info about the products: images, description, weight/quantity/grinding options.
They also mostly offers advices and suggestions.
On the other hand, we observed unclear user’s flow, unclear purpose of site (for example: at first sight, Alain Ducasse website looks more like an informative website than an online shop), sometimes too much informations/texts, long page loading time,…
To go further on our research and the global understanding, we interviewed 5 users, based on the description of the persona L’Atelier de Torréfaction’s owner gave to us and people we observed when we were in his shop.
Our goal was to understand their coffee consumption, why they buy from a local shop and what could enhance their experience.
Here are some of their main quotes. They mostly talked to us about their lack of time, regularly buying online and wanting to consume better.
Step 3— Defining the problem
Meet Ugo, the “parisian bobo”, our persona. Ugo lives in Paris, 11th. He has a master degree in communication and he is currently working in an agency as a Social Media Manager. He has been a vegetarian for 4 years and enjoys watching documentaries about food, consumption in general and how what we buy has an impact on the environment. He likes to hang out in his neighborhood since there are so many cool local shops where he can buy food and clothes from.
By the way, he recently threw away his Nespresso machine to buy a coffee machine with a grinder, influenced by a chat he had with one of his friend.
For some time now, he has been buying his coffee mostly from L’Atelier de Torréfaction but sometimes he has to buy some at his supermarket when he comes home from work late and knows he’s out of coffee at home.
Ugo’s motivation? Know what he’s buying. His goal? Encourage his local shops.
We can see 2 spots where Ugo is thinking about coffee: his frustration starts in the morning, when he notices the lack of coffee at home and reaches its peak when he realizes that he won’t be able to go to the shop before closing time because he has to stay late at work.
This is where L’Atelier de Torréfaction’s e-shop could be interesting for both parties.
Here are our problem statements:
Step 4— Refining the solution
At the time of the ideation process, we brainstormed our ideas to refine the solution.
Our main insights when looking at competitor’s and even other coffee roaster online shop were:
- What’s working out there? Minimalist ambiance, product description and advices, coffee visual…
- What’s not working? Unclear flow, unclear purpose of site, lots of info, long page loading time,…
- What we need on L’Atelier de Torréfaction: clear shopping flow, image & description of the product, grind options, advices, grade, transcribe the shop’s vibes,…
We group our ideas into 4 category to help us design the website:
- Header & footer
- Coffee category
- Product’s page
- Colors & look
We were now able to create our moodboard with a goal in mind: keep it simple, clear, minimalist. In short : retranscribe the vibe’s shop.
Step 5— The website
Jumping to the website, we think about a clear user’s flow, as L’Atelier de Torréfaction has few products to sell.
We first define the site map and the flow to buy coffee on the e-shop:
After drawing the lo-fi, we jump to the mid-fi prototype (here):
Before going to the hi-fi phase, we decided to do an usability testing of our prototype, to validate the clarity of the user’s flow and see how users interacted with the prototype.
We choose 5 coffee lovers and potential users, based on our persona. Their goal while testing the prototype : buying some coffee.
Here you can see the flow in details and the main feedbacks who help us design the final prototype:
Our main insights were:
- the user’s flow for buying coffee is clear: there was no friction/hesitation during our testings and our users said that this is the experience they are expecting when shopping online
- what’s missing: “go back” navigation, explanation of “Selection” on the homepage and on what’s the score, delivery informations on the shopping card
- what they want to see: something simple, elegant, some grey & beige, coffee beans somewhere
Based on those feedbacks, we were ready to design the hi-fi. Here are the prototype:
In a nutshell
We designed a simple e-commerce website to retranscribe the minimalist vibe of the shop.
The main goal of the site is to allow regular consumers to order whenever they want, without opening hours constraints.
It could also be a lever for new customers that want to try coffee from L’Atelier de Torréfaction, as the store also works by word of mouth.
What’s next?
- Conduct usability testing on the hi-fi
Go back on user’s testing to valide the hi-fi - Request stakeholders & user’s feedbacks on the site’s look
Be sure that we are align with owner and users needs - Design all the site’s pages
- Adapt it to mobile
Thanks for reading!
You can find my work on my portfolio and if you want to say “hello”, let’s connect on Linkedin :)
Want to see the redesign of this project?
Check out my article about “why and how” I decided to redesign this project for my portfolio:
