Competitor research

When I started this project, Vivino only allowed wine storage management through the Cellar feature on the app. This drove me to analyze Vivino’s competitors, Vinify and CellarTracker, who offered Cellar tracking on the web. I explored their processes for managing wines and adding personal data points to extract valuable insights and avoid possible pitfalls. In doing this I found three key insights:

• Both utilized drawers and had the detailed wine information and actions living there focusing on relevant content.

• Both Lacked responsive design and struggled with offering this feature on web when on smaller devices.

• Consider flow similar to Vinify to ensure an easy modern approach

Example of Vinify's cellar management flow.

Exploring drawer solutions

To maintain external consistency with other cellar management approaches, I decided to explore how a drawer solution could work for Vivino, while accounting for the many user data points available for the user to add. Doing so good frame two main opportunities:

• Align with web-based cellar solutions and creating consistency with other cellar management solutions to provide a familiar experience.

• Draw on familiarity and decrease the time users need to learn the systems by drawing recognizable environments.

Snippet of some of the drawer approaches for inspiration

Ideation

First step was ideating how to approach the list structure for web and the drawer look. I started by wireframing different ideas. This helped me eliminate less optimal ideas, and note the valuable bits. In doing this I centered in two things:

• Exposing all user data points as I couldn't justify the reasoning for deciding what the user finds most valuable here

• Home in on the resposiveness and align it the upcoming vivino lists which also meant designing cards

Wireframes of different ideas for the lists

Taking a standing point in the early ideas, decided to design the web responsiveness from the bottom up, starting with a mobile look first. Having recently explored the Vivino list cards, I already had a near final vision of their appearance. From there, it was primarily a matter of "stretching" the cards to fit larger screens. Doing this meant:

• A familiar user experience between app and web no matter the device

• Expected stacking behavior and never harmed the information

Illustration of the bottom-up responsive ideation approach

Prototyping flows

With the lists defined, I moved to prototyping to test user flows and spot potential issues. Inspired by Vinify's simplicity, I tailored it for Vivino adding steps like cellar notes for quantity changes. After discussions with product management and web development, we decided to exclude editing user-added data points for version 2 (V2). Prototyping the flow ultimately resulted in:

• A straightforward management flow inspired by Vinify, though with alterations to fit Vivino, particularly for the option to add a cellar note regarding the quantity change

• A descoped, yet partially V2 ready flow and design that resolved how to change certain user data points easily

Flow diagram of cellar management for cellar on web

Testing & flows for adding new wines

Due to recent reorganization, Vivino's resources were more limited, so testing was only done internally. I held a small meeting with product management and QA to test the flows. Initially, I designed a flow for adding wines from the Cellar view, but we discovered the need to add this option from the wine's product page as well. This became the V1 for the new feature, with the Cellar view adding flow planned for V2.

Illustration of the missing link, the option to add to Cellar from wine PDP

Product descoping & hand-over

The project culminated in an extensive hand-over file, detailing responsive looks and flows for every aspect of Cellar on the web. Moreover, during the hand-over, it was decided to descope the option to change the drinking window on the web. Having already structured the flow in Figma, I created a descoped version while retaining the V2 solution. Due to the hand-over file's extensiveness and changes I sought to:

• Communicate V2 & V1 logically, ensuring all established ideas were included and the descoped solution was communicated.

• Organize the file thoroughly with sections, flows, states, device labels and more.

Close-up view of the hand-over file, illustrating the V2 solution alongside the descoped V1