HEY! SOMMELIER
A responsive web app created to enable wine drinkers to save, learn and get advice about wine and wine/food pairings.
Overview
CLIENT:
Career Foundry
ROLE:
UX Designer | User Research
UI Design | Prototyping
Usability Testing
YEAR:
2021
DURATION:
6 Months
TOOLS USED:
Pen & Paper | Figma | Adobe XD
Balsamiq | Google Suite
Optimal Sort | Usability Hub
Problem
Sometimes my wife and I like to enjoy a glass of wine with our meals. We often have a hard time figuring out which wine goes with what type of food. After doing a quick internet search or asking for advice from a sales associate we thought we had selected the perfect bottle of wine to go with our meal. More times than not we were disappointed with the selection. Sure, sometimes Sommeliers are available in high end restaurants but what about for the casual wine drinker that wants to have a nice glass of wine with a homemade meal? Perhaps you are hosting an event or want to buy a nice bottle of wine as a gift.
Other people had to have the same problem, right?
Solution
Design an app that would allow us to get information about different types of wine, save the wines that we liked and keep a journal about the types of food that we enjoyed them with. Sure, there are some apps that already do this but a differentiating feature of this app would be the ability to connect with a Sommelier to get personalized advice. People would be able get advice from a Sommelier in real-time via chat, phone or video call for advice on wine purchases.
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
Rapid Prototyping
Usability Test
Design Iterations
Feedback Sessions
Competitive Analysis
I researched and compared two popular wine related apps. Vinnie stands out from the competition by using a series or questions and artificial intelligence to provide personalized wine recommendations. Vivino claims to be the “World’s largest wine app and marketplace”.
Key Insights:
-
Using questions and AI to help with wine and food pairing is a novel idea but I did not find it very effective. I’m sure by providing more data and preferences that Vinnie would've become more effective with wine selections over time.
-
Vivino was very effective at scanning wine labels to identify and get information pertaining to each wine. The main focus of Vivino was to sell or enable the users to purchase wine directly from the app.
-
By combining the effective features of both apps into one and allowing real time access to Sommeliers for advice, Hey! Sommelier should become an attractive options for users.
SWOT Analysis: Vinnie
SWOT Analysis: Vivino
Surveys
At this point I conducted a survey to determine if there was a need for this type of app and what type of features users would prefer. I used this method of research to obtain a relatively large number of responses in a short amount of time. I got 25 responses within a couple of days.
Research Goals:
-
Find out what people typically do to make decisions about purchasing wine.
-
Would the advice of a Sommelier be useful and desired by users?
-
Discover what features users might find useful in a wine related app.
Key Insights:
-
The majority (52%) research which wine to buy/order online.
-
To my surprise most respondents would prefer other app features to help with their wine selection versus talking to a Sommelier (12%). General documentation about wines (76%) and the ability to scan a wine label (68%) to learn more scored the highest.
-
Overwhelming majority (88%) said that they would prefer to chat while seeking advice about picking a wine. That’s compared to 8% for video call and 4% for a regular phone call.
-
Most people need wine advice when trying to pair with a meal they are making (40%) versus just drinking to relax (20%) or hosting an event (20%).
User Interviews
I needed to speak directly with potential users to get a general feeling about this kind of app. Do other people put as much emphasis on wine and wine/food pairing as my wife and I? What other features are desired and what are their opinions about similar apps? I interviewed 3 participants to obtain answers to these questions.
Research Goals:
-
To determine which features of my app are the most desirable and discover new ones.
-
To develop and fine tune the “connect with a Sommelier” feature. Explore video calls versus the chat function.
-
Gain insights into when, where and how the app would be utilized.
-
Gain enough information to help with the refinement of additional features.
Key Insights:
-
In general, people research what type of wine to buy online. Most people said that they just Googled the wine versus using a dedicated app or website.
-
It’s interesting that most people prefer the most convenient method when choosing a wine but the majority would prefer to chat with a sommelier versus a video call or regular phone call.
-
The “Journal” and “Generic Information” features heavily outweighed the contact a sommelier feature for user preference.
-
Most user are not willing to pay much for the ability to contact a Sommelier. But find it a useful feature if trying to purchase a more expensive bottle of wine.
Learning Observations:
-
Being able to record the audio of the interview was really convenient and made it easy to review at a later time. Much easier and better than taking notes since I could focus more on the participant.
-
Coming up with the appropriate questions and the order of those questions was more difficult than I had anticipated. The order is important to help maintain a good flow of the interview.
Affinity Mapping
I needed to speak directly with potential users to get a general feeling about this kind of app. Do other people put as much emphasis on wine and wine/food pairing as my wife and I? What other features are desired and what are their opinions about similar apps? I interviewed 3 participants to obtain answers to these questions.
Key Insights:
-
General Information
-
General information about wine needs to be more specific. Not just “Red wine with meat. White wine with Chicken”.
-
-
Communication
-
Users prefer chat as the main communication method with an expert because it’s typically quicker and more convenient than a regular phone or video call. “Chat, because it’s quicker and I can get to the point”.
-
-
Journal Features
-
People prefer to take notes on wines they’ve tried.
-
Some users will take a picture of a wine they like so they can remember it later.
-
-
Sommelier Feature
-
Users want to know which of the wines they already have on hand will go best with the meal they are making. “I have these wines, which one goes best with this meal?”.
-
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
User Flows
Low-Fidelity Wire Frames
Rapid Prototyping
Usability Test
Design Iterations
Feedback Sessions
Design Language System
Revised Hi-Fi Prototype
Conclusion
Next Steps
User Personas
After my survey and interviews, 2 personas were defined as users of Hey! Sommelier. Patricia - the creative home cook and Brian - the young, busy professional.
Journey Maps
User journey maps were created to empathize better with users and help with the idealization and prioritization of features.
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
User Flows
Low-Fidelity Wire Frames
Rapid Prototyping
Usability Test
Design Iterations
Feedback Sessions
Design Language System
Revised Hi-Fi Prototype
Conclusion
Next Steps
User Flows
The user flows were created by using the personas and task analysis to determine which features/tasks would be useful for these particular users. This process helped me define particular features and navigation of Hey! Sommelier.
Essential Tasks:
-
Document a wine & food pairing.
-
Use sort/filter feature to find a Sommelier (See Learning Observation)
-
Chat with a Sommelier to get advice.
Learning Observations:
-
The second essential task originally started out as “signing up for a monthly billing subscription”. It was later suggested/determined that it may be better to showcase another feature. I decided instead to build out the sort/filter feature to help find the perfect Sommelier to contact.
Low-Fidelity Wireframes
Before I started on the low-fidelity wire frames I created the sitemap to outline the information architexture. Card sorting helped to refine the sitemap and I was ready to start sketching out my idea based on the user flows..
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
User Flows
Low-Fidelity Wire Frames
Rapid Prototyping
Usability Test
Design Iterations
Feedback Sessions
Design Language System
Revised Hi-Fi Prototype
Conclusion
Next Steps
Mid-Fidelity Wireframes
Mid-fidelity wire frames were created next for the purpose of creating an interactive prototype for usability testing. These wire frames were created using Balsamiq and also include a task flow for signing up for Hey! Sommelier.
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
User Flows
Low-Fidelity Wire Frames
Rapid Prototyping
Usability Test
Design Iterations
Feedback Sessions
Design Language System
Revised Hi-Fi Prototype
Conclusion
Next Steps
Usability Test
I conducted a moderated usability test with 6 participants. The goal of this usability test is to assess the utility and usability of the app for users interacting with the application for the first time on a mobile device. I would like to observe and measure if users understand the app, it’s possible value to them and their opinions and behaviors towards the app’s features.
Objectives:
Observe/determine whether participants can:
-
Sign up to use the app
-
Scan a wine label and add notes that are saved to their profile section.
-
Initiate a chat session with a Sommelier by sorting the Sommelier list by method of contact and rating.
-
Chose a Sommelier from the sorted list, chat with the Sommelier for recommendations and save the chat for later reference.
Results:
-
2 Participants were not exactly sure how to proceed from the splash screen
-
All participants with the exception of one had difficulty finding the “Add Notes” option under the “Actions” CTA
-
4 Participants did not know that they had to end the chat session before being given the option to save the chat
-
All participants preferred to sort by rating over contact method
Design Iterations
Based on the results of the usability test I made changes to the effected pages to solve the users’ pain points and increase the usability of the application.
Issue 1:
Added a continue button that allows user to move to the home screen instead of just tapping somewhere on the splash screen.
Issue 3:
Added additional copy to let the users know that they will have to opportunity to save the chat after they have ended it.
Issue 2:
Moved additional options: Add Notes, Add Price, Add Place & Remove Wine from “Actions” CTA and placed on the main screen. Removed “Actions” CTA on main screen.
Issue 4:
Moved the “Ratings” sort feature to the top of the Sort & Filter menu and move down “Availability” with “Alphabetical” being last.
Competitive Analysis
Survey
User Interviews
Affinity Mapping
User Personas
Journey Maps
User Flows
Low-Fidelity Wire Frames
Rapid Prototyping
Usability Test
Design Iterations
Design Language System
Revised Hi-Fi Prototype
Conclusion
Next Steps
Design Language System
Once the iterations were done from the usability test it was time to polish the prototype and create the design language system for the UI of Hey! Sommelier.
Accessibility
Since accessibility is extremely important I tried to factor that in from the beginning but realized that some additional modifications still needed to be completed to ensure complete access to Hey! Sommelier.
Revised High-Fidelity Prototype
Using the newly created “design language system” and the iterations based off of the usability tests and critiques from fellow students the MVP prototype was finally ready to present.
Sign Up:
Sign up for Hey! Sommelier.
Sort/Filter for a Sommelier:
Use sort/filter feature to find a Sommelier
Scan wine label:
Scan the wine label and add notes for future reference.
Chat with a Sommelier:
Chat with a Sommelier and save the chat.
Conclusion
Starting with a good foundation of user research is very important for any UX project. Just because something might seem important to us as the designer does not necessarily mean that it is true. Throughout this project I discovered that what I initially thought would be priorities to users (because they appealed to me) was not the case and had to be adapted over the course of the project.
Research showed that having access to a Sommelier was not a top priority and the ability to scan a wine label or journal features were much more appealing. It’s important to be flexible as a UX designer and to embrace the findings of the research to create the most appealing product for users.
Next Steps
There are still many incomplete areas of Hey! Sommelier, such as the profile section, billing/payment section and specific areas of the journal aspect of the app. These sections and features will need to be developed using the same methods described in this case study.
Another particularly important area that needs to be explored is how the Sommeliers will be involved and interact with Hey! Sommelier. In my mind the Sommeliers need to be treated as another type of user with different features, functionality and task flows. From their perspective the intent would be to make additional income by supplying education material and being available to give advice. Therefore, when they login as Sommeliers they would be presented with different user flows and features then the regular user.
See my other projects
