Case study — Redesign an e-commerce website: À La Bière Comme À La Bière

Intro

As its name suggests, A la bière comme à la bière is a company whose core business is the distribution of craft beers.

The founders of the company opened their first boutique in 2013, in Paris and offer for sale more than 500 references of artisanal beers. A second boutique was opened in 2014, offering tasting and amateur brewing workshops in addition to the sale of beers. In the light of the success of their business, they finally opened a craft beer bar called the Drunken in 2016.

The first vocation of the company is to make the customers discover the varieties of artisanal beers in a very friendly atmosphere.

Our goal for this project was to redesign the company’s website by focusing on the “eshop” part to offer a better user experience and facilitate online sales. We were 4 to work on this project during 12 days. To be able to propose improvements to the eshop in such a short time, we used the design thinking method.

Secondary research outcomes

We started by carrying out an analysis of the beer market (artisanal or not) in order to look before we leap!

The craft beer market has been booming since 2016 with the rise of microbreweries in particular (16% average growth per year). In January 2020, France became the leading European country in terms of the number of breweries: it currently has nearly 2000 breweries offering more than 6000 different brands for an annual turnover of 4.1 billion euros (1).

And with good reason: beer has become the second favourite drink of the French (43%) after wine (48%) (2).

This development of the artisanal beer market in France can be explained in particular by the changing consumer trends of the French:

  • Customers now prefer to consume less, but consume better, giving priority to quality.
  • They want to give meaning to their purchases by favoring products from small local production rather than industrial production.

The profile of the beer consumer has also changed: half a century ago beer had a cheap image and the typical consumer was a working-class man. Nowadays 40% of consumers are women. The typical consumer is also younger and lives in urban areas. The consumer base is still linked to the working class, but beer is becoming more and more fashionable with a high quality image due to the craft beer revolution.

But the COVID-19 pandemic turned everything upside down: due to successive confinements, the closure of bars/restaurants and the cancellation of festive events, the turnover of the craft beer sector was divided by two in France.

Beer distributors as well as small breweries are struggling and internet sales have become indispensable to limit losses. In this situation, delivery and “click-and-collect” become the best solutions to maintain sales.

Sources:

  • (1) Brasseurs de France — chiffres 2019
  • (2) Etude menée par le Baromètre SOWINE/DYNATA 2019

Stakeholder interview insights

We interviewed the creator of the company A la bière comme à la bière in order to obtain all the necessary information before redesigning the website.

She created the website during the first lockdown in March 2020, in order to maintain her sales. It was an excellent way for her to keep a shop to display her products while all the stores were closed.

In the beginning, only his regular customers ordered via the eshop. The website not only helped maintain the link with loyal customers, but also allowed to acquire a new clientele, more distant from the physical store. She offers a click & collect service for customers close by and a delivery service for customers further away.

The store in a few words :

  • Objective: to offer quality products
  • Ambition : democratize craft beer
  • Corporate culture: family spirit and open mindedness

Who are the clients?

  • Often the same customers who order online and buy in the shop
  • Over 30s, a real “geek-based” customers base
  • Customers using the delivery are the ones who don’t live close to the shop

What customers are looking for?

  • New products
  • Quality
  • Rare & local products

The existing website having been created in a hurry to maintain an activity, the owner wanted to improve the user experience by reinforcing its brand image (with the constraint of keeping its brand color: blue) and by facilitating the users’ navigation, especially in the eshop part.

Heuristic evaluation

Once the context was clearly defined, we conducted a heuristic evaluation of the store’s existing website in order to identify priority areas for improvement:

  • Homepage is confusing
  • Brand image not clearly visible
  • Information difficult to read because of background patterns
  • Menu not clear
  • When you arrive on the website you don’t see any beer
  • No possibility to filter the beers
Store’s actual website

Site map

The site map allowed us to define the structure of the enterprise’s existing website.

Starting from the previous sitemap, we have created a new one by reorganizing the organization of the pages of the site to offer a better user experience by:

  • Creating a homepage
  • Reorganizing the site hierarchy so that the customer knows directly where to find information
  • Highlighting the eshop on the home page

Userflow

Before starting the wireframes construction, we have defined the user’s path on the site with his first motivation (discovering quality beers) and his final objective (buying artisanal beers).

In the user flow you will find the different steps of the customer’s purchasing act: from the home page to the validation of the order. This allows us to clearly define the pages to be redesigned or created in priority.

Mid-fi prototype — Mobile

Mid-fi prototype for usability testing

FIRST VERSION

In addition to having reorganized the architecture of the site by following the site map previously realized, the first version of the prototype offers new functionalities :

  • A new home page to welcome the customer as in a store and not arrive directly on the photos of the physical store
  • A “quick buy” button to add products to the cart in one click!
  • A “find my beer” button on the home page, offering advice and beer suggestions according to customers’ tastes
  • Filters on the eshop to help customers quickly find what they’re looking for

We also have :

  • Put the focus on beers on the home page
  • Added breadcrumbs at the top of the page so the customer always knows where he is on the site
  • Removed redundant information

Usability testing & Mid-fi prototype iteration — Mobile & Desktop

Once the prototype was ready, it was time for usability testing.
We carried out these tests with 5 different users.

They were rich in learning.
We had very positive feedbacks about the fluidity of use of the site, its clear organization, about the menu and the filters.

But we noticed that all the testers were unanimous on the next improvements to be made: like improving the filters, the organization of the home page or making some buttons more easily recognizable.

So we did a first iteration to adapt our wireframes according to the testers’ feedback:

Homepage wireframe V0 vs V1

1. “Find my beer” button

The main disillusionment was the “find my beer” button we were so proud of. None of the testers understood its primary purpose: they all thought it was a filter from the home page. Once on the eshop, the testers were confused because they saw another “filters” button.

“I don’t understand the usefulness of the “find my beer button”

In the end, this button confused the users more than it helped them. So we chose to simply remove it.

2. Highlighting of the eshop button

However, this “find my beer” button was very useful: each tester clicked directly and mechanically on it from the home page while below was the “eshop” button. We understood that the first button was strategically placed: it was the ideal place to place the eshop button.

3. Shortcut buttons to view new products and boxes

On the home page, new products were not highlighted enough according to the testers. So we added buttons to give quick access to the new products and the current boxes sold by the store.

4. More information about delivery

Delivery information was also a problem for the testers: none of them knew where to find it. We therefore clarified and highlighted the delivery details on the home page in addition to the “delivery” banner on the eshop.

5. Redesign of filters

“I didn’t know I could scroll through the filters”

The testers had some difficulties with the filters which led to a complete redesign of our first wireframes: we changed the order and layout of the filters to make it more logical for the user.

6. More detailed product information

The products page has also been modified to add information about the origin of the products, give advice on how to consume them, etc.

7. Shopping cart

“I didn’t know I was in the cart page, I didn’t recognize it!”

Users found the caddie icon irrelevant for buying beer. We have therefore changed it to a shopping cart icon to make it more understandable.

Finally, we redesigned the shopping cart page and added a feature for the user to edit the products in his cart.

Find the brand attributes, moodboard & colors

As soon as this first iteration was completed, we moved on to the subject of the website’s user interface.

The brand attributes :

  • Brand culture — Craft
  • Potential customer — Epicurean
  • Desired emotion — Relax
  • Brand voice — Funk
Moodboard

Our moodboard above shows the artisanal, authentic and epicurean side of the brand with images of sharing and warm colors. There is also a vintage and funky side, reflecting the identity of the boutiques.

From this moodboard we have chosen 3 colors:

New siteweb colors

These colors also take into account the requirements of the store owner: keep the color of the brand (blue). Here we have created a variant of the brand color with a blue-green. Yellow reminds us of the beer robe and it is also a complementary color of blue-green. Finally, we chose a functional color, ochre, which we used very little to keep a site with colors that are harmonious (blue-green, yellow and white).

Hi-fi prototype — Mobile & Desktop

The selected colors and all our research allowed us to create the high fidelity wireframes of which here is the prototype:

Interactive mobile prototype
Interactive desktop prototype

Key takeaways

It was an exciting project. Whether through the rich exchanges with the store owner, the teamwork or the learning it gave us.

We have realized the importance of the positioning of buttons and CTAs for a e-commerce website.

Starting from a desire to do the right thing, we wanted to help users find the ideal product according to their taste with this “find my beer” button. We realized that wanting to do well and helping the user too much was not necessarily in his interest. Worse, in addition to confusing the user, it also did not serve the interests of the store by relegating the button to the eshop in the background. It was obvious after the usability tests that we should remove this button.

On the other hand, the “quick buy” buttons were a success. This button, which allows the user to skip 2 steps and buy a product without going through the product page, was very useful during usability tests and was particularly attractive to testers. This illustrates that this type of button is already well known by users and is becoming indispensable to an efficient eshop for users who are more and more in a hurry throughout their navigation.

Many thanks to you who have read me so far and to my team, Charlotte, Mathilde & Guillaume, with whom I have been happy to work on this project.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store