CloudWine — Your Pocket Sommelier
A UI/UX Case Study
Project Type: Academic.
My Role:UX Researcher, Design Strategy, Product Design
Timeline: 10 Weeks.
Tools: Sketch, Figma, Whimsical, Invision, Pen & Paper
Overview:
Discover wines that you’ll love with CloudWine — a hyper-personalized wine pairing & recommendation app that suggests wines tailored to your personal taste.
Discovery of Problem Space:
A personal struggle
Bamboozled by the plethora of wine bottles and labels with cryptic vocabulary, one decides to pick a bottle a friend mentioned, spend money on it, and look forward to opening it, only to find out that the wine inside isn’t as great and doesn’t even pair well with the food. Such situations and several other versions have made so many of us wary of wines.
I believe good things like food & wine shouldn’t be mysterious, scary or generic. They should be fun & personalized.
My aim is to provide a platform that enables food & wine lovers to get personalized recommendations based on their unique taste profile & help them easily pair it with the available food options.
Research & Insights
Today technology has redefined the way we enjoy food & beverages but there are several challenges that remain unresolved. Through my research, I found some of those challenges:
- Wine is a experiential & an information-laden product that is overwhelming for the uneducated wine consumer
- People are choosing wines based on ratings rather than their personal taste preferences due to lack of knowledge
- Difficulty selecting wine remained the top reason for consumers to not drink wine.
On an average:
A Person drinks 1–3 glasses of wine every week
9/10 people say “I don’t know what I like”
10/10 people want to learn about wines
Based on my research, I found that on the surface it seems like we don’t like wine, but the reality is that we don’t know what we like. We find it intimidating to choose and also have an embarassment factor attached to it. This is where I want to focus my project, I want to help people track their palate and help them choose from wines personalized to their unique palate.
Project Assumptions:
To narrow my scope, I made some assumptions about the problem space. I focussed on older Gen Zers (19–24) because I believed they are more likely to struggle with this issue. Gen Zers have grown up with a multitude of options so having more options was never an issue, but finding what best suits them has remained a challenge. I believe they have a need greater need to get tailored recommendations.
Project Hypothesis:
I believe that Gen Z have a hard time choosing wine because of the multitude of options, confusing information and lack of knowledge.
I also believe Gen Z are seeking resources to make the process of choosing, pairing and drinking wine an enjoyable and simple one.
Competitive Analysis:
Before I could think of developing a solution, I decided to conduct a competitive analysis to check whether there are platforms that tackle a similar problem space. I found 3 apps that currently offer taste match personalisations, but none that offer menu scanning for pairing recommendations, based on the taste match.
Research Plan
After my initial assumptions and some possible solutions in mind, I was ready to talk to people to get my hypothesis validated. I decided to have in-depth conversational interviews with my prospective users and find out what their experiences are and their specific pain points when it comes to selecting & pairing wines. To begin, I made a research plan for conducting interviews.
Goal & Objective:
To find out the challenges, pain-points, motivations and behaviours towards wine buying, pairing and consumption that Gen Zers face. Also discuss how they go about pairing wines with food.
Methods:
Interviews (20–40 mins long) were conducted over zoom & slack video interviews.
Apart from the interviews, I also sent out a quick survey to understand wine habits of Gen Z and to gauge the overarching emotions surrounding wine consumption.
Participant Criteria:
- Gen Zers
- 19–24
- Tech savvy
- Consumes winesa
- In Canada
Schedule & Location:
13, 14, 15th Feb over Slack/ Zoom Video call
Constraints:
Interviews were conducted with only 9 users over zoom & slack calls due to limitations of time and demographic access. My findings are based on this limited population.
Interview Insights & Data Synthesis
Themes
Education: “I would love to learn more about wine and how to pair it”
Recommendation: “I wish I could get recommendations based on my meal so I can buy the wine that pairs perfectly”
Wine tasting: “I would love to visit vineyards and indulge in wine tasting events”
Overarching Insight Statements
Gen Zers aren’t able to experience wine at its best due to lack of knowledge.
The emotions they feel include curiosity, confusion and intimidation.
Yet, they are actively seeking more resources on how they can improve their experience.
Persona & Experience Map
From the interview insights that I could gather, I defined a proto-persona. I did this so it allows me to always have the target users in mind when I design. Once I had the persona, I crafted out an experience map that would help me identify opportunities for design intervention.
After looking at the experience map and identifying possible areas of opportunity, it is clear that Gen Zers want a simpler & more personalized way to select & pair wines. So I revised my how might we statement:
“ How might we simplify & personalize the process of selecting the right food & wine pairing, in order to help users choose based on their unique palate”
Developing a solution
Using the refined HMW statement and considering the needs of Tara, I created a set of user stories to help me define product functions and to plan the app features when I build my Minimum viable Product (MVP)
Core Epic: Pairing the right wine with the right food
Tasks:
- As a user, I want to find the best food & wine pairing from a restaurant menu so that I can order the pairing.
- As a user, I want to rate the wine and add it to my favourites so that I can remember what I like.
After identifying my main tasks,I developed them into a taskflow diagram to clearly identify the user’s process and how they would interact with the product to complete these tasks. This task flow takes into account system decisions, state/location/ page changes & user action.
Sketching & Wireframes
Once I had my main taskflow identified, I sketched out really rough sketches of what the possible solution would look like. I referred to the existing UI components and functionalities from apps like Vivino and Pingza for inspiration.
I went through several versions before I finalized the screen for my first prototype testing. Below are 2 examples of this evolution:
Home Screen
V1 Home Screen:
The original idea of the home screen was to have just 4 sections — Find, Pair, Experience & Buy
V2 Home Screen:
I thought about having suggested wines on the front page with editorial content and a pair button on the bottom navigation.
I went with version 2 and added it for user testing.
V1 Pairing Screen:
I had imagined the first version of the pairing page to be something like a tinder match screen, since this is an app for Gen Zers. However, I soon realized that although it looked fun, it was not as functional as I couldn’t enlist any information on that screen.
V2 Pairing Screen:
I thought about a page where the wine and food information would be next to each other, in a more organized way, such that it is easy to read.
I went ahead with V2 for user testing.
Wireframes
Prototype Version 1
After going through the ideation process above for each screen, I created the first wireframe flow in mid-fidelity. This version of prototype was used for the first round of usability testing.
Usability Testing
2 Rounds of usability testing were conducted on mid fidelity wireframes, with 5 participants in each round.
Each participant was given a situation and a set of 5 tasks to complete.
Situation:
Imagine you are Tara Johnson, a Social Media Specialist and a user of CloudWine. You are entertaining prospective clients at a fancy restaurant and really want to impress them. You take a look at the menu card and want to order the perfect food & wine pairing, but there are too many options. How would you go about it?
Tasks:
- Go to the page where you may find food & wine pairing options
- Find the pairing recommendations from the restaurant menu
- View reviews for the wine of your choice
- Record wine notes for future reference
- Add the wine to your favourites
Round 1 Key Findings:
1. Pairing option expected on the home screen, not on the bottom navigation
2. Confusion about rating wine based on appearance, aroma, taste
3. Home button expected on extreme left of bottom navigation
4. The text was very tiny throughout the app
5. Testers did not appreciate that they had to go back to the rating page to write a review
6. Testers thought they were scanning food & not the menu
On getting first-hand user insights, I decided to make the required changes and develop a version 2, which would then be tested in ysability testing Round 2.
Round 2 Key Findings:
1. Testers could now easily find the pairing page
2. Personal taste profile match was much appreciated
3. Testers wanted to know if there any alternatives to the wine & food pairing recommendations
4. Testers only wanted to see the grape, year & ABV
5. Everything on the wine profile page was fighting for the testers attention.
Notable Changes
4/5 Testers expected the pair button to be on the Home Screen instead of the bottom navigation.
3/5 Testers were not clear about what they were actually scanning.
I made design changes to the prototype based on the feedback that I received from the 2 rounds of user testings with a set of 5 unique users.
The main issue during this round of testing continued to be the rating system, so I worked on it and came up with an easier way to rate wines which would help users get personalized recommendations. It was a an extra screen addition but since this was a part of the main task of the app I worked on it so that users get the best value. I also removed the unnecessary information on the wine profile page and added information that the users actually wanted to look at. This was an easy fix but an important one as well.
Final Prototype:
After the testing was complete and I had received sufficient feedback, I worked on the most important ones first and then made changes to the smaller and easy fixes with lower impact. After that I fleshed out the final prototype and created a version which would then be used to create the hi-fi version.
Creating a Visual Identity
Before I could dive into designing the visual identity of my application, it was necessary to research what I wanted my app to feel like, what would the brand personality be like, what would I call it?
For this, I started by creating a moodboard for all my brainstorming work.
List of Possible Brand Names
Colour & Typography:
Since the personality of CloudWine is vibrant, trendy & flamboyant,
I extracted colours from the moodboard that would depict these personality traits & at the same time augment the in-app experience.
- Hot Pink depicts playfulness & exudes warmth, happiness & zest for life.
- The rosé wine is a variation of this colour.
- Black & White is a classic combination that helps with minimalist design and the pink & yellow accents to make the app more vibrant & engaging while drawing attention to important elements.
Typography
When I looked at my brand adjectives, I thought it best to go with a typeface that would exude confidence & modernity while being simple to read. Magazines like Vogue, Harper’s Bazaar embody this thought.I wanted a typeface that is minimalistic yet trendy. So I looked for fonts used by fashion & lifestyle magazines. My inspirations were Bodoni, Poppins & Helvetica Neue.
Colour Injection
After injecting the primary brand colours on all screens it started looking a bit too bright. The bright colours were fighting for the users attention and also adding cognitive load.
so I decided to PIVOT & work with lighter brand colours that will allow the food & wine colours to stand out.
I also found out that the users were confused with the amount of information on the screen so I simplified the same content into easily digestible chunks.
Final UI Design
After synthesizing all this information, I developed my final UI design. Here’s a link to the final prototype walkthrough.
Expanding the brand
To promote the application, I created a product marketing website — Desktop & Mobile version. The goal of the site is to:
Get customers excited about the product
Showcase the product benefits & features
Promote app downloads
User testing & changes
I went through a series of iterations while crafting the desktop & mobile website. The common feedbacks that I got were:
- To include the download app button in the footer as a reminder to download.
- To add a why section so as to make the product more compelling
- To add names to the reviews to make the testimonials more authentic.
4. To add pagination dots and arrows to indicate horizontal scroll in the mobile website.
After incorporating the feedbacks, the websites looked like this:
Multi-Platform Challenge
Once I had the iOS app ready, I thought about further pushing myself and making the application work across platforms. The one logical platform that the app could work well on, considering the needs of the persona and her lifestyle, could be an iPad mini.
Learning Outcomes
Since this was the first ever UX/UI Project I worked on, I learnt a lot during the process. Right from problem space discovery to the final prototype.
- I learnt that as a designer it can be very easy to visualize the solution and suffer from tunnel vision. It is important to keep an open mind & respond to the insights derived from research through design intervention.
- I also experienced the Tapper & Listener experiment in my own project — Since I was designing the product, it was very clear to me what was being scanned, but testers who were not aware of the solution making it difficult for them to understand. So what seemed obvious to me wasn’t obvious to the testers, while things I assumed were difficult to understand were easily understood by testers. This taught me that the importance of user testing cannot be stressed enough.
- One of the most important things I learnt about UI design is to first inject colours only on a few screens, test and then inject colours on all the screens. Doing this could have avoided the redesign work and I could have optimized my time properly.
- When I started working on the app, I did not keep a document/library of all the design elements that I used which made me invest more time in building a full fledged library towards the end of the project. I leant that establishing styles, building a UI library in the beginning of the project makes the whole design process streamlined and helps establish consistency across the app.
What’s Next for CloudWine?
Although the app received positive feedbacks during user testing, Ibelieve there is a lot of room for improvement to the project. My next step would be refine the design. I would invest more time on exploring the visualization for the Home, Wine Profile & Favourites Screen.
Next Steps & Future Considerations
Because this project was completed in just 10 weeks, there are a few things I would do differently if I had the time and resources:
- Interviewing a larger, more diverse group of wine lovers
- Take more time to work on CloudWine’s branding and logo design
- Conduct user testing with more people for more accurate design
