Vivino

Case Study

Project Overview

Challenge

Vivino has established an enormous wine database and attracted a substantial user base with its excellent user-friendly features, but there are still some shortcomings for wine beginners. To expand its users, Vivino recognizes the importance of implementing a feature that will help beginners to learn more about wine and ultimately to become connoisseurs.

Solution

Add feature for existing web page
Design new features within the brand guide line

Project Scope

Responsive Website, Add a feature

Role

Research, Visual Design, UI design, User Testing

Team

Self directed, with feedbacks from mentor and peers

View Final Prototype

Ideate

User Persona

With the data gathered from Primary research and secondary research, I was able to come up with 2 key different perspective of the audience.

Strategy

Along with user persona, I created a Point of view statement to ideate a goal and How might we questions to ideate in order to reach the solution to a problem.

Project Goal

With How Might We questions, I was able to define goals for the project which it will also be a guide to the project.

Product Roadmap

By setting a goal, I was able to create product roadmap initializing features into categories into 4 from “must have” to “can come in later” to resolve the problem and potentially lead to a solution.

Site map

With the help of product roadmap, I was able to visualize primary features’ relationship between content along and arrange the hierarchy. For full site map click here.

Research

Research Plan

This comprehensive research serves as a foundation to understand the market landscape and prioritize user-centric design. To ensure focus and guide the research process effectively, I developed a research plan that outlines the specific goals and methodologies to be employed

Research Goals

Understand users frustration when selecting a wine
Learn how people approach when selecting wine
Learn about competitors strategy on wine sales
Learn about users experience with vivino
Understand how people learn about wines
Understand how people choose a wine to buy

Secondary Research

Market Research

It is crucial to conduct comprehensive market research to gain an understanding of the market landscape and identify the target audiences as well as trends. The understanding of the market will help me to create provisional personas along with interview questions on primary research.

Online services

Covid Pandemic had a significant impact on the wine market.
Increase in online sales and decline in on-premise sales
Online wine market value is 5.43 billion and is expected growth of 10% during 2021 to 2025 (Technavio)
Online market is benefiting from increased demand for premium and luxury wines.

Markets trends

Market size is values USD 444.8 billion in 2020
Expects 5.7 growth to 2028 (Grand View Research)
There has been growth in demand for premium wines
Younger consumers tends to seek new and interesting wines to try

Competitive Research

For competitive research, there were many competitors but I searched for direct competitors that have similar features and it came down to 3 that I can analyze more specifically.

Provisional Persona

From secondary research, I was able identify and create two provisional persona with distinct perspectives of target audience.

Primary Research

User Interview

Total of 5 participants participated in the interview process. With the help from the participants, I was able to dive in deeper and to emphasize the users.

Empathy Map

Interview Findings

Unless people are confident about what to purchase, many of the choices are assumed
Reviews and taste graph takes a major role on deciding
Recommendation from sommelier is better than random guess
But those who knows their wine taste, sommeliers are helpful but not a major need
Experience is similar to brewery, but classy feeling
Purchasing wine at the winery is easier than purchasing at wine shops

Customers Needs

Taste variety of wines to know their preference
Recommendations depending on the taste
Guidance to choose wines for gifts or for their own
Quick way to make a decision
Easier flow or to choose wines

Define

Task Flow

Task to complete:

User Flow

Scenario A:

You want to purchase wine for an event, but you do not know which wine will be a good fit. You decide to purchase a wine sample package to try and sign up for private group virtual wine tasting with friends.

Wireframes

Before I started to digitize wireframes, I sketched some key pages that I identified in task flow and in user flow. With wireframe sketches i was able to develop into digitalized wireframes.

Style guide

Style guide was created in order to align the design consistency with the Vivino brand and along with style guide, I created UI components to utilize it on designing the next phase.

Design

Priority Revisions

With the help from the participants, I was able to organized and categorize and set priorities to change in user flow and in design.

Less frequent and severe

Updates on visuals

Add filter feature on virtual lobby room
New features show on the banner
enter password page

Updates on userflow

Add filter feature on virtual lobby room
Reduce purchasing steps too repetitive
Step to ask for notification
step to add a password to enter virtual room

More frequent and severe

Updates on userflow

able to skip the sign up for virtual wine tasting
Change information architecture on combination offer to pairing

Updates on visuals

Add attendees column
show attendees capacity column on virtual lobby
accentuate virtual link will be sent for private group wine tasting

Before

After

Responsive UI design

To see full UI designs, click here.

View Final Prototype

User Testing

Usability Testing

After implementing style guide to mid fidelity, I was able to use the wireframes into a usability testing. I created 2 task to complete for the web page format and 6 users were participated.

Test Objective

Test if users are able to accomplish the given tasks
Identify that generate difficulties and confusion when users are navigating through the website and completing a task
Generate findings from testing results to iterations for the next round

Tasks to complete

Task 1:

Scenario:

Task 2: Book an appointment
Join a live virtual wine tasting room.
Scenario:
You have already signed up for virtual wine tasting. Now it's time to join a virtual wine tasting service.

Affinity Map

5 participants participated in the virtual group test and the test result were very similar. With the results and the notes, I created an affinity map to help me to organize all the feedbacks and notes from the participants. With the feedbacks, I was able to categorized each notes by needs, pains, struggles, frustration, insights, design feedbacks, and etc.

Final Thought

Takeaway

This project has presented its fair share of challenges, yet it has also been a tremendous learning opportunity for me. Analyzing the website and adhering to the brand guidelines provided valuable insights and allowed me to understand the essence of the brand. One particularly enjoyable challenge was designing the new feature pages while maintaining consistency across the entire website. It felt like solving a complex puzzle, as I meticulously dissected the existing components and crafted my own UI components. This process not only honed my design skills but also fostered a sense of creativity and innovation.

Next Step

Next stage would be to build the clinicals side of user flow when receiving appointment requests and updating patients information.