UNWINED PROTOTYPE

The Problem

Life seems to get busier as each day passes, and people may not have the time to sit down to taste test wines or go to the store to make purchases in-person. Now more than ever, they desire and need convenience. This includes being able to gather information and buy items all in one place. Currently, wine apps provide most of the wine purchasing experience, but not the complete and individualized experience. Unwined solves this problem with a personal sommelier at the tap of a finger.

What's missing in the market? 

Today, there are apps that provide an online wine community, database and shopping experience, however, none provide the user with a personalized quiz to discover what wines they actually like. By allowing the user to input their own tastes and preferences, Unwined calculates and delivers a curated selection of wines specifically tailored to that person. It also educates the user on a deeper level and alleviates their decision-making while shopping. This solidifies their selections and reduces doubt and uncertainty. Ultimately, Unwined allows users to feel confident and knowledgable throughout each step of the wine purchasing process.

The Vision

Unwined was designed to provide users with an easy and accessible way to learn about and buy wine — essentially a personal sommelier and online store all in one. Thus, achieving a tailor-made, convenient, and educational user experience.

Think of us as the Amazon of wine delivery.

Design Brief

Experience Map

Overall Flow 

To keep Unwined concise and easy to navigate, I designed five main screens for the app. Upon opening, the user will be taken to the sign-in screen — in which they will either sign in or sign up. As Unwined is personally tailored to each user's taste, it is required that they have their own (free) account. Once signed in, they are taken to the home screen, from which they can navigate to any of the sub-pages: Taste Profile, Wine Search, and Shop/Market.

Low Fidelity Sketches

The initial thoughts I had when brainstorming the wireframes, were to keep it simple, but also provide the user with an abundance of useful information. From the opportunities outlined in the experience map, I focused on perceivability to make the process of wine searching easy and accessible; feedback to provide the user with guidance, education and expert recommendations; and predictability to make navigating the purchase process smooth and concise.

Paper Prototype

To test the functionality of the low-fidelity wireframe sketches, I conducted a user test with a paper prototype. The user was instructed to complete the task of searching for a particular wine — in which they had to navigate from the home screen to the wine search screen and then adjust each of the search settings. From this test, I learned that the main nav bar should be moved to the bottom of the screen for easier one-handed navigation accessibility. Having two different search icons was also confusing for users as they couldn't predict where each would take them.  I needed to consolidate down to one. Lastly, it would be helpful to have a keyword search as part of the wine search so that users could search for a specific wine if they so desired.

Medium Fidelity Wireframes

To showcase the different interaction states within each screen, I designed the full flow of the app. With this wireframe, I could lay out what it looks like to swipe through carousels, use the keyboard, and adjust settings (i.e. buttons, sliding bars, and dropdown menus).

Mockups

To transition my mockups from medium to higher fidelity, I started incorporating actual images and copy, while still keeping the design clean and simple. This would allow for a more realistic representation for user testing and interaction.

Upon opening the app, users would be prompted with the sign-in screen. They have the option to sign in with either their email, Google or Facebook accounts. If they don’t have an account, they can sign up.

Once signed in, users are taken to the home screen. Here, they will see the featured content in the main carousel, deal of the week, and weekly wine news. The main navigation along the bottom of the screen allows users to toggle between the home screen, taste profile, wine search, and marketplace. Along the top bar is the shopping cart, if they were to purchase anything in-app, and the settings menu (for account information, app settings, etc.).

In the taste profile, users are prompted to take the wine quiz so the app can be personalized for their specific taste and preferences. As this is a main and important feature, the taste profile will not be filled in with user information until it’s completed. If users want to search for a specific wine or variety, they can navigate to the search screen. There, they can input keywords, select wine type, narrow down price range, select the region, and specify if they have a rating requirement.

If users just want to browse wines, they would go to the market, where they can peruse different categories of wine (such as recommendations, deals, regions, etc.). The content on this screen would also be curated for their personal preferences once users take the wine quiz.

For the scope of this project, I did not design the actual purchase/checkout process.

Design System

In designing the Unwined visual system, I wanted the app to not only embody the feel of wine, but also passion and excitement for the user. Burgundy is an elegant, yet vibrant and attention-grabbing main color. Additionally, I chose muted and neutral secondary colors that would allow the burgundy to stand out. The complementary green is used to highlight deals and encourage the user they’re getting a great price. For typography, I wanted to keep it very clean and easily scannable, for which I chose the Avenir Next font.

Iterations & Insights

Using the design principles to evaluate the feedback I received from my teacher and peers, I iterated the mockups based on consistency, perceivability, learnability, predictability and feedback.

1.     Users felt that the iconography within the app was inconsistent, making it hard to predict the interaction with certain icons. For instance, the Market basket and the shopping cart were too similar to one another, and users couldn’t determine which was for checkout and which was for browsing. So I changed the basket to a market storefront icon to better establish the difference and purpose for each. Additionally, I removed the menu icon from the top nav bar and added a gear icon on the Taste Profile to declutter the main nav options and remain more consistent with app settings icons.

2.     My overall design was also inconsistent with a mobile design. Some of the elements were more consistent with a desktop design, altering the feel of the app. So I removed drop shadows, arrows, and flattened button colors to make the app have a more cohesive feel.  

3.     On the Taste Profile, participants were confused and needed more feedback on what the information on the screen pertained to and how to take the wine quiz. They felt that displaying the quiz ratings made it seem like the results had already been calculated, and the link to take the quiz was too buried and unnoticeable. To better establish that the current content is only sample content, I grayed out the text and added copy for explanation. I also bolded the instructions and added a wine quiz button to make this section the main focus on the screen.

High Fidelity Prototype