Building a e-commerce prototype for a Parisian craft beer shop

The goal of this project was to design hi-fi prototypes for a e-commerce website, we were working for a craft beer shop in Paris to help them increase their online sales revenue, which is even more important since COVID-19.

9 min readMar 3, 2021

For this project we were working for a Cave à bière in Paris, which is a shop selling craft beers. They have one shop in 18ème arrondissement, one in 20ème arrondissement and also a bar in Montreuil.

We worked on this project in February 2021, for 9 days.

I was working as a UX/UI Designer, with a team of 3 others UX/UI Desginers.

Since COVID-19, a lot of shops have increased their online presence. With the closing of the shops during the first lockdown, the curfew, and other constraints, they have lost sales revenue from the shops and need to find other channels to sell. The shop that we are working for is called A la bière comme à la bière, they were the first ones in Paris to propose deliveries during the first lockdown. They now also propose click and collect. The goal of the redesign is to facilitate the order of beers online, for delivery or click & collect and to ultimately result in an increase in their sales revenue.

🔎 Secondary Research

Secondary Research revealed craft beer is a growing market, with loyal customers, and click and collect can have a positive impact on business sales.

The first step of our process was to conduct secondary research. In order to learn more about craft beers, but also online selling and the new habits of click and collect, we did secondary research. This was really important for us to have a global overview of the product we will be working on, but also gave us a lot of insights for the next steps, for example it helped a lot on the questions we wanted to ask the stakeholder.

We ended up regrouping our common secondary research into 3 main topics : craft beer market, the impact of Covid-19 on this market, online presence for shops.

Craft beers market

What is a craft beer ? According to the the Syndicat National des Brasseurs Indépendants (SNBI) it should : not exceed 200000hl in volume of production, brewery has to be made by the brewer, the bottles need to mention his name and address.
France is the number one producer of craft beers, according to SNBI. It counts more than 1600 independant breweries, producing craft beers.
The market of craft beers is growing, by 16% per year average ! Jean-François DROUIN, president of the SNBI explains that “the craft french beer is booming, because consumers leave aside industrialised and standardized beers, and turn towards craft beer, qualitative and local, promoting natural, transparence, and creativity values”
The typical consumer of beer have changed, it used to be a popular drink, today it is moving toward a more young and urban target, it’s becoming more and more fashionable.

Unfortunately, COVID-19 since the first lockdown in March 2020 had a true impact on this market. This sector has been severly impacted, especially the big number of micro breweries, because of the bars and restaurant closed during the lockdown, the cancellation of festive events, and the cancellation of the fairs for this sector.

The loss in sales revenue after the first lockdown has been evaluated to 50% (source : cerfrance).
The 17 millions of liter that were not sold in bars and restaurants have not been reported on distribution, according to Sébastien Monard, analytics director at Nielsen.

This is why the online presence for brewers and craft beer shop has become more and more important. We wanted to know more about the habits of consumption, related to ordering online or click&collect.

Order online :

They like discovering new products
They can find products cheaper.

Click and collect :

When consumers use click and collect, it reassures them because they are sure they will find the right product and not go to the shop for nothing.
They can save felivery fees
The service is fast
Business impact : click and collect has a great impact on total sales revenue. 62% of the clients coming to collect and order use this time to visit the store. And among them 26% end up buying something. The amount of these additional purchases is in average of 45% of the total order of the click and collect. (Source: étude de marché sur le Click and collect, Etudes & Analyses)

👂 Stakeholder interview

After conducting our secondary research, we had a clear vision of what we wanted to ask Audrey, the owner of A la bière comme à la bière. The next step was to meet Audrey for an interview, to complete our primary research. We wanted to learn more about the shop, what was working and what was not, what were her objectives, in order to have a better understanding of the problems the e-commerce website could solve.

We wanted to know more on how the shop was created :

The first shop was opened with her partner in 2013, in 18ème.
It grew up fast, and they wanted to do brewery workshops, the shop was a bit small so they opened the shop in 20ème, with a big room in the back. They started doing brewery workshop, degustaiton classes, etc

What was the impact of COVID-19 :

They were very reactive to propose online selling. They started doing delivery and click and collect about a week after the first lockdown.
They were lucky to have already the right tool , and they were already working with courier, so everything was kind of ready.
The customers ordering online and in the shop are often the same, these are loyal customers.
At the beginning people were paying at the shop, now they pay online otherwise a lot of people did not come to collect the orders, and the ones who did had to wait in line to pay, so it was a waste of time.
But the online customers who use delivery services are the ones who don’t live close to the shops. With the curfew it is complicated to move around so they order online our products.

What are the culture and values of the shop :

They wanted a concept which could show people their personnality. They did everything their selves to create the shop, the website as well.
They want to propose great quality products.
They want to democratize craft beer to a lot of people.
The experience they want to provide in the shops is a casual place, where people can learn more about beer without feeling judged, and with nice music and ambiance.

What the customers are looking for :

The customers are over 30, and men for the most part. BUt they have more women in the boutique of the 20ème where she is. She thinks it’s because she is a woman so she is careful to have women in the team, because it is already a geek and man universe.
They have a wide base of clients she considers as “geeks”
They want quality and local products
They really appreciate the new products, it is the best sellers.

Gathering all these information helped us have a clear vision on what the customers are looking for, the specifics of craft beer market and the important issues to address for the owner of the shop.

👀 Heuristics Evaluation

We conducted heuristics evaluation on the current website to have a clear vision of what needed to be improved. Heuristics evaluation is based on a set of desgin principles that help us review our designs to ensure we won’t miss any important functions. The main pain points emerged :

The homepage was confusing : a lot of information, it was not clear at first that there was an eshop.
Information were difficult to read because of a pattern in the background
The menus were not clear : information architecture was not well defined and the information did not stand out.
When the consumer arrived on the website he did not see the beer eshop, he had to scroll a lot.
There was no possibility to filter the beers.

🧭 User flow & Mid-fi Wireframes

The next step was to build the sitemap of the website as is. We were able to dig in the information architecture and improve it to make it easier for the customer to find the relevant information.

But for user flow, we focused on the journey to buy a craft beer. With Covid-19, obviously the possibility to offer customers to buy online are even more important. So we created our user flow with this goal in mind.

We then moved on to the realisation of mid-fi wireframes.

For the mid-fi prototype the main improvements were :

A dedicated eshop highlight for the beers at the top of the page : the first thing the consumer sees when he arrives on the website.
A new products category on the homepage, it is the main thing that customers are looking for when they go to the shop.
A “find my beer” button to facilitate the action to go on the eshop and buy beer.
We created a filter menu on the eshop, which was really important considering the choice available on the website.
We added a breadcrumb on the top of the page to facilitate the navigation.

The important part of this challenge was to design mobile first but also to adapt the mobile design to desktop, in order to build a reponsive website.
Below you can see an exemple of how the product page was transposed from mobile to desktop.

The users were asked to achieve different tasks :

Buy a new beer who just arrived in the shop, because you love discovering new tastes.
You are looking for advices to find a beer you will like, because you find difficult to buy a beer without knowing it and tasting it.
You are looking for information on the type of beer you want to buy.
You are looking for information on delivery conditions because you want to be delivered in less than a week
You want to buy a large bottle of amber beer with minimum 8 degrees of alcohol, because this is the favorite type of beer of one of your friends you will see soon for a dinner.
You want to buy a beer from the Gallia brewery, an artisanal parisian brewery you like a lot.
You want to add to the basket the first beer you see on the homepage.
Check the content of your basket.

We did usability testing with 5 different persons and had great feedbacks to improve our prototype.

The most valuable feedback was the fact that the users did not understand at all the first CTA on the homepage redirecting to a test to help them find a beer, but they loved the filter functionnality.
We then decided to remove the test, and keep it for a later iteration, when we would have more time to dig in this topic. And we chose to highlight the eshop part, with a new naming for the CTA that was more clear for the user.

📱 Hi-fi prototype

The last step of our iteration was building the hi-fi prototypes, taken into account the feedbacks from our user testing.

But first things first, we brainstormed to come up with a brand identity. We created a moodboard based on the brand attributes that we defined : Conviviality, Craft, Funk.

Below you will be able to see the prototypes that were presented to the craft beer shop.

For the hi-fi as well, it was really important to have a mobile version that was responsive and transposed well to desktop.

The owner of the shop responded really well to these prototypes, and found them really in line with the spirit of the shop.

I am looking forward to have your feedbacks, thanks a lot for reading me !

Mathilde