MOBILE UX/UI DESIGN | 2020
Redesigning key features of the Vivino app to better meet the needs of newer wine buyers
Vivino is one of the most widely used apps to buy and identify wine. I was first introduced to Vivino in college when I was taking a wine tasting class. Amongst young people who were newly legal wine drinkers, I found it to be a useful tool to not only quickly identify, but also curate wines and expand my knowledge. The app has evolved quite a bit since I first discovered it, and I was eager to flex my UX skills to learn about how this app has changed the wine discovery experience and eventually redesign the app.
First, I interviewed five users of the Vivino app who varied in age, gender, wine knowledge, and tech savviness. Then, I created a rough discussion guide that outlined three tasks for participants to complete (navigating through the "For You" tab, using the filters to find a specific wine, and adding an item to the "cellar") while narrating aloud their actions. The interviews ended with a semi-structured interview section where participants shared their thoughts on the app more generally.Several learnings emerged from these sessions, notably:
1. The app suffers from information overload: lots of text and details are presented in a way that is intimidating, especially to those unfamiliar with wine.
2. With so many features packed into the app, users under-utilize most of the app's functionality.
From these interviews, I spent time refining my thoughts in my notebook. I found the needs and pain points of younger, inexperienced users to not only be the most interesting, but also provided the greatest opportunities for app improvements. I created a persona to capture what exactly I’m designing for.
From here, I synthesized everything into a finding, a need, and a “How might we" statement for this user group.
INSIGHT
Vivino’s many capabilities are under utilized because many buyers prefer buying wine in stores, and information-dense design can intimidate inexperienced buyers.
NEED
Inexperienced buyers need a way to easily access wine information and a variety of buying options
HOW MIGHT WE...
...guide new users through the wine buying experience in an approachable way, both online and in a store?
To answer this HMW statement, I first dove into my notebook and then moved to Sketch to create medium and high fidelity solutions. The goal was to:
1) redesign the app by creating a consistent design system that improves the reading of a variety of information
2) create a user flow that allows users to use the app to find wine near them
3) fix other UX problems, like confusing visual hierarchies and CTAs, highlighted by my interviewees
1. Brainstorming with pen and paper
2. Low-fidelity prototype
3. High-fidelity prototypes, exploring layout options
A redesigned Vivino with new features that make wine buying easier and more approachable.
Cards used throughout each section establish a consistent visual language and make it easier to find and process information
Pop-out cards allow users to glean quick information about a wine. By pressing and holding a wine listing, users can learn the basics before choosing to see its full profile. This intermediary step eases the jump in information density between the spare listing and full profile, making the experience of learning about a wine more approachable.
Improved layout of each wine information page more clearly highlights the name and type of wine, a quick summary, and a change to review, all in the same frame without needing to scroll.
CTAs are placed in more prominent locations in the highlighted box and upper right corner, giving the user more clarity and direction as to how to interact with each wine page.
One of the design imperatives was to create a wine buying experience in which users aren’t restricted to exploring solely online.
In a new “Explore” feature, users can explore wines carried in nearby stores, allowing them to use Vivino in a way that supports a greater variety of buying habits and making a quick pickup easier.
