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?”).
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.
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.
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”.
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.