Wyldwin
Wyldwin is a startup from California. They created a technology that can precisely blend different wine varietals according to given proportions. My task was to create a design for the dashboard and website
Industry: wine-blending, e-commerce
My contribution: Wireframes, UI
The primary audience of Wyldwin is people who create blends to try something new or to surprise their friends and family with an unusual gift. But the company wants to attract more wine connoisseurs and possibly even sommeliers.
The task was to create a web service where users can mix their blend of wine and order as many bottles with this blend as they like. They can also use Wyldwin as storage and deliver bottles whenever they want.
How can users blend wine to get their perfect taste? The Wyldwin technology is mostly based on the five main wine characteristics — sweetness, acidity, body, alcohol, and tannin. However, they shortened them to sweetness, acidity, body, and finish.
0.1 Blender
The two main problems we had to solve were the design of the dashboard and the design of the wine blend visualization.
The dashboard has two modes — basic and pro. Basic is for newbies, pro is for wine enthusiasts and sommeliers.
0.1.1 Basic mode
In the basic mode the user can change wine taste preferences or characteristics, edit flavors, plus rank flavors from the strongest to lightest.
Here are several versions we designed.
The main problem here is that the user should see all the settings at once (or easily switch between them) as they are all interconnected and considering that the blend visualization takes up the most space on the screen (e.g. if the user changes flavors, the taste preferences change as well).
The main problem with these screens is that the user won’t be able to see all the main settings all at once, plus such a layout considerably limits us in space. What if we want to add more flavors?
Here’s the final version we came up with. We changed the layout to a vertical one. Here the user can quickly navigate between flavors and taste preferences, reach out to see pairings and description
Default
Scroll
Pairings
Description
0.1.2 Pro mode
In the pro mode, the user can change the percentage of varietals but cannot add/delete flavors or tweak wine characteristics. If the user buys the pro mode, they can switch between the modes to get the perfect result.
On the varietal card, the user can change the percentage, wine age, and barrel type, and add or delete varietals.
In the first versions, we made the same mistakes with the layout. During the second iteration, we changed it to the vertical one.
0.1.2.1 Change varietal volume
The next task to solve was how we can allow the users to delete and add varietals, considering that before they press the 'Create your label' button, the volume should always be 100%.
If the user deletes a varietal, then the remaining one becomes 100%.
We developed the following logic. If there’s one varietal, and the user adds one more, then the second one adds up to 100%. The same happens when the user changes the percentage of one of the two varietals. The total volume is always 100%
If there are two varietals in the blender, and the user adds one more, its percentage is 5 percent, and the total percentage is now 105%, highlighted in red. If the user presses on the CTA, then we show a notification that offers to distribute varietals proportionally to make it 100%
Same happens when the total percentage is less than 100%
0.2. Blend vizualization
The second main problem of the blender is blend visualization. The task was to create an aesthetically pleasing but logically correct graph that helps the user understand the taste of their blend. The visualization also works as a label placed on bottles.
Here are several versions we created. As you can see, they might be called visually pleasing, but some of them are really hard to understand, while others won't be suitable for the bottle label.
0.2. Blender: Mobile version
Basic mode —Default
Pro mode —Default
Basic mode — Scroll
Pro mode — Scroll
0.3. Website
The second main problem of the blender is blend visualization. The task was to create an aesthetically pleasing but logically correct graph that helps the user understand the taste of their blend. The visualization also works as a label placed on bottles.
0.3.1 Main pages
0.3.2 Quiz
To get inside the blender the user has to either take the quiz that consists of five questions or go to catalogue and select a blend they can later edit in blender
Quiz decision tree. Each flow has 5 questions
0.3.1 Catalogue
The users can choose from wine blends recommended by the editors or explore pairings
0.3.3 Product page and cart
