Mockup psd created by freepik - www.freepik.com

Creating the UX/UI for a wine expert app
that allows wine lover to discover
online wine tastings.

While expanding my UX Design knowledge at CareerFoundry, I decided to go in deep with a topic that lays close to my heart: making wine tastings easier to promote for wine experts and easier to access by wine lovers. 

The scope of the projects took me through an extensive user research, interviews, flow ideation and finally the definition of visual concepts and design. Through the research I was able to pinpoint pains and challenges from both the side of wine experts and wine consumers related to online wine tastings. 

The project is still a work-in-progress, now on the final stage of fine-tuning, testing and gathering feedback on the UI.

TIMELINE January 2021 - July 2021 (ongoing)
my role
UX Research
UX Writing
UI Design
team
Ridin’ solo
tools
Abode XD
Whimsical - for user flows & affinity maps
UsabilityHub
Paper & Pencil 📝
ABOUT THE PROJECT

WeinKlub connects wine lovers to winemakers, giving them access to the online experiences, including online wine tastings and lessons. With this service, two target groups are involved: the wine lovers that are looking for an easy way to book wine tastings and discover new wines and the wine experts that are able to promote their wine in a new digital way. 
MAIN GOALS

Create an app that accommodates the needs of both target groups:

🍇 The app invites wine lovers to explore, discover and experience wine through online wine tastings and lessons.

🍇 The app supports the digitalization of wine tastings, granting wine experts an easy way to create online wine tasting events. 

SCOPE
Research, Conceptualization, Wireframes, Prototypes, Illustration, User Interface, Testing and Iteration.

The Challenge

📅

A way to book an online wine tasting and be sure that you’ll receive the ordered wine

🍷

A way to create online wine events and set all information needed. 

👑

A way to be flexible and be able to assume either roles to create or book an online wine tasting.

Design Methodology

01.

UNDERSTAND

Exploring the products' landscape

Competitive Analysis

The wine consumption market has grown in the recent years, specially the online offerings and through the lockdowns applied in 2020-2021 many winemaker and wine sellers opted to improve their online presence and take part in online wine tastings. However, the efforts are scattered and there is no unified platform where users can explore and choose a specific wine experience. 

Direct regional competition includes Vivino, WirWinzer, Weinfreunde as they provide online shops where users can buy wines and wine packages. More specific competitors in relation to online wine tastings would include wine.com (although it’s limited to the USA the wine tasting can be watch all around the world) and MioMomente, which offers wine-boxes with online wine tasting (made as a response to the lockdown).

Business Analysis

TARGET AUDIENCE

🍷 User 1: Wine lover
As the name describes, they are wine lovers, they enjoy good wine and are interested in getting to know insights and details about the wine. They use and trust online shopping portals.

🧑 User 2: Wine expert
Includes winemakers, sommeliers, wine sellers and enthusiasts. The users who join are avid technology users and are open to learning new ways to market their winery and get new customers.

SITUATION ANALYSIS

🧠 Opportunity
Online wine tasting are on demand and leveraging online offers can lead to successful customer journeys. Expanding to online wine tastings improve the chances of  purchase, retention and advocacy.

⚠️ Possible challenges
Resistance from the wine experts to create and present their wine on an online format. Once the lockdown is lifted or people are able to move freely, online wine tastings may not be attractive, therefore the service needs to foresee changes in the offer.

02.

OBSERVE

Gathering feedback from potential users

Collected quantitative and qualitative data through 85 surveys and 6 interviews to explore the viability of the project, behaviors, needs and pains of potential users.ick and start writing.

Survey Highlights

The survey was only conducted from the point of view from the consumer.

Interviews

The research goals need to be divided into the two target audience, as they don’t have the same needs and won’t add up to the same user persona. Consequently, these are the key takeaways from the interviews:

Wine lovers

- Wine is a hobby
- Have participated and like online wine tastings
- Very positive perception of winemakers and experts
- Want to understand wine
- Want to support local winemakers
- Search and discover based on wine type and region, not directly by following a brand
- Winemakers are also wine lovers

Wine experts

- Passionate about wine and sharing insights with wine lovers
- Brand awareness, marketing, promotion and reputation are important
- Need easy and tailored solution, where creating an event is not a hassle
- Intentionally about “faceless corporation”, want to always have a close relationship with wine consumers

Actionable takeaways
Wine lovers want to see all relevant information in one page, including wine package, difficulty, medium and what they'll learn.
Wine tastings are a marketing tool for wine experts, the app needs to be easy and blend with other tools they know.
The main page is "Discover" there, wine lovers want to be able to explore through categories, set filters or simply search.

03.

POINT OF VIEW

Translating data into user personas

As a result of the research 4 personas were created and for each a user journey - they represent the wine lovers and wine experts point of view, needs, goals and overall definers. Here we'll focus on only 2 main personas.

Wine Lover Persona
Eva's User Journey
Wine Expert Persona
Thomas' User Journey
Two other user personas were created, for the scope of this project only the primary personas were taken into consideration
Key features for the main user personas
For EVA as wine lover
- Discover with search, categories and suggestions
- Share details of online wine tasting
- Wine Lessons: Wants to see not only wine tastings but wine seminars
For THOMAS as wine expert
- Event creation sequence (wine tasting or wine lesson)
- Set profile information (extensive)
- Able to purchase inside the app as a wine expert (dual profile)

04.

IDEATE

Transforming concepts into sketches

After the extensive research to determine who and why the product was going to be used, it was time to visualize the proposed solution. Based on the user flows and site maps, basic paper sketches were created, which were later transformed into wireframes.

Paper sketches

Paper sketches are key for the rapid exploration of concepts, here I did continuous rounds of 4-minute sketching per planned screen.

05.

PROTOTYPE

Transforming sketches into digital wireframes

The paper sketches made the navigation, information architecture and flows clearer, now it was finally time to start designing digitally. Digital prototypes don't come without challenges, smaller details, fitting and general accessibility rules were taken into consideration. All designs were made with Adobe XD.

First Wireframes

06.

TEST

Collecting feedback and validation

Before the formal usability test, I gathered some feedback on an informal level from peers, colleagues and friends, to determine if the flows actually made sense. Testing is the cornerstone of User Experience, feedback and validation are important not only to make a nice product, but one that makes sense for the target users.

Usability Test

I aimed to assess the learnability of the app for first time users on mobile and desktop. My goal is to determine whether the users understand the main functions and how they navigate through the app, additionally we want to explore the satisfaction of the users.

Methodology

The usability tests will be conducted with 6 participant and be held both in person and remotely. Moderated in person tests will be conducted with 4 participants, and moderated remote tests will be conducted with 2 participants. The usability test will be follow-up with a small satisfaction survey to complete the research.

PARTICIPANTS: All participants need to have a level of interest in the wine topic.

METRICS: Errors will be measured using Jakob Nielsen’s scale.

Key takeaways from the usability test

Usability Issue #1: “Discover should offer more categories and invite the user to explore”

This screen needs to be extended to meet user’s needs, the following changes were implemented: added categories per tab in a more visual way and added an "Experts" tab.

Usability Issue #2: “Learn tab was confusing and hard to understand”

The “Learn” direct access was removed since it was confusing to the user and a new path was determined to find them and the “tastings” remained in the main navigation as that is the main selling point from the app

Usability Issue #3: “It’s confusing how the info I saw in the event doesn’t match the creation page.”

The elements seen in the (new) Online wine tasting page need to reflect one-to-one the elements the wine expert adds in the Event creation sequence.

Preference test

As a graphic designer, the lack of ideas is not the problem, rather committing to one. Preference tests and A7B testing allowed me to decide the direction of the project and the feeling the app would be aiming for. I decided to test the Discover screen, as most users in the usability test naturally gravitated there.

OPTION 1 was performing better, and the difference is 65.0% likely to be statistically significant. That meant, that I can be confident that it is actually better, and not performing better due to random chance.

Most participants preferred the regions as images, as they would easily recognize the regions by name, and it would get them to the next screen of information faster and easier.

However, I found that, like myself, some user still liked the idea of having a map to interact with and explore regions previously unknown. In an effort to provide the with this exploration sentiment, a call to action was added, where the user could access a map and discover from this perspective new regions.

OPTION 1
Regions with images

Selected by 65% of the participants

OPTION 2
Regions with maps

Selected by 35% of the participants

RESULT
A combination of both

Solution integrating user's feedback

07.

VISUAL DESIGN

Refining the design and creating brand identity

The visual presentation of WeinKlub is fun and clear, although some illustrations are used (and many more were planned) the design relays primarily in photos, as the user needs to be able to evaluate the tasting by the quality of the photos (and the information provided).

Logo

Colors

Typeface

Drafting process & preference tests

After 5 different sets of designs for the home and discover page, I decided it was time to involve other designers and potential users for a preference test, in order to determine which option was most popular and avoid my bias going forward.

66%

23 PARTICIPANTS

"I’m able to digest the most information easily and quickly with this one."

"Real photos allusive to the topic and also the smaller tiles with the wine types"

26%

9 PARTICIPANTS

"The colorful wine glasses really popped."

"Looks the most modern/ contemporary and fun"

"It adds so much more personality."

9%

3 PARTICIPANTS

"Simple and to the point.  Visual hierarchy and weight seems appropriate."

"I like the illustrations, but it looks like more juice than wine. I prefer this design coz it’s more clean."

The final design

The first impression: Home page sections ━━━
Multiple options to discover the perfect wine experience ━━━
Finding and exploring wine tasting + all relevant content to make a booking decision ━━━
Book & Share ━━━
Reserving a seat for a wine lesson ━━━

Main Takeaway

Through this ongoing project, I have learned the importance of good user research and how they can form concepts and transform preconceived ideas. As well as the power of iterations, and how incorporation Design Thinking and Agile UX guide to true and all-round designs, that fit the user needs and my standards as a designer.

All tools and processes used:

- User research
- Usability Test
- A/B Testing
- Preference test

- Accessibility Guidelines
- WCAG Guidelines
- iOS Design Guidelines
- Inclusive color and typography

What I've learned

Next step:

- Develop UI for wine expert profile creation and event creation process (online wine tasting or wine lessons)