An online sommelier to pick the right wine for the occasion

Client
Wia
Year
2019

The challenge

Wia promises, thanks to artificial intelligence, a wine perfectly suited to the occasion. To launch its online sommelier site, the team first had to understand its targets and what they expect when choosing and buying a wine.

An online sommelier to pick the right wine for the occasion

Project flow

  1. 01. Targets and user journeys workshop
  2. 02. Site map and co-sketching workshop
  3. 03. Mobile UX sprint and guerrilla tests
  4. 04. Desktop UX sprint and guerrilla tests
  5. 05. Graphic benchmark and moodboard
  6. 06. Mobile UI sprint
  7. 07. Desktop UI sprint

Study detail

On the site mock-ups, Wia’s online sommelier greets visitors with a question: “Hello, what occasion are you looking for a wine for?”

Before getting to that screen, we had to know who this sommelier is talking to.

Stereotyping the users

We started with proto-personas, such as “The passionate connoisseur”, and an experience map. None of these personas describes a real person. Each one brings together needs and expectations.

The experience map, titled “What if I bought some wine?”, follows the purchase in six moments, from the initial urge (“What a good idea!”) to the tasting (“So, how is this wine?”).

Three overlapping proto-persona sheets, including 'The passionate connoisseur', with their attributes, needs, frustrations and an emotion curve
Experience map 'What if I bought some wine?' in six steps: what a good idea, how to find the right product, but which one to choose, time to get the menu out, now we just have to wait, so how is this wine, with the actions, needs and frustrations for each

Imagining the features

From the proto-personas and the experience map, we drew up the site map. Alongside free search, it provides a question journey that leads to a page of three recommendations, winelists and a list of producers.

Site map: home page, questions, recommendation results, winelists, producers, product page, purchase funnel and personal area, with the planned content for each page

Mocking up in greyscale

We then drew the main pages for desktop and mobile, in greyscale. Wine drinkers and the Wia team reviewed them in short loops, and user testing was used to refine the details of the interfaces.

Greyscale mock-ups with the WineSpace logo: home page 'Ask your wine adviser', screen 'Hello, what occasion are you looking for a wine for?', choice of wine knowledge level, product page and results page

Starting with mobile

The site is responsive and designed mobile first: the first UI sprint therefore focused on mobile screens.

A competitive benchmark and a moodboard of trends steered the art direction towards a clean, colourful design that gives plenty of room to images. The service also had to stay warm.

On screen, that means large photographs of bottles and coloured taste tags, such as “Gourmand and full-bodied”.

Mobile results screen: 32 wines as cards, each with its colour, a taste tag such as 'Gourmand and full-bodied' and the price per bottle
Wine product page shown on mobile and tablet, with the expert's note, the aroma profile and food and wine pairings

Scaling up to desktop

When it came to the desktop versions, we put a design system in place.

Desktop screens in perspective: choice of wine knowledge level, questionnaire, wines from the same producer and the service's commitments page
Desktop product page for a wine: expert's note, grape varieties, presentation of the estate, aroma profile, ageing potential and food and wine pairings

Akiani supported us from thinking through the personas all the way to adding colour to the interfaces. At every step, the team showed its expertise and its friendliness. They made our subject their own and found the best compromise between ergonomics and design.

Co-founder at Wia

Want to discuss your project?

Let's talk about your stakes, constraints and ambitions so we can build the best user experience together.

Contact us