Nicks Wine
Problem:
Learning enough about wine to inform your past and future purchases is a daunting task. It’s hard enough to select a wine you like, much less select one that’s similar.
The Goal:
Nick’s Wine is a passion project that overcomes these hurdles by allowing you to learn about wines as you find them and as we recommend them to you. Every product page has information relevant to the wine, vintage, and its main varietal.
Result:
The test groups love the concept and layout. They believe that a product like this would make them more willing to try new wines and expand their horizons.
User Research
Working as a wine consultant and assisting customers yielded a few major takeaways that transitioned into the project.
Some don’t know enough about wine or what they like to make informed decisions.
This makes it hard for them to buy/try new wines or remember some old favorites.
People like the in-store experience because they can more easily ask for help.
For some this also meant they had a distrust of purchasing wines online.
Some don’t drink wine, but their significant others do and they end up being the one to buy bottles for them.
Not knowing their SO’s taste or what they’ve bought for them in the past makes shopping for them difficult and time intensive
User Personas
Thematically these personas are asking for transparency, trustworthiness, and assistance in buying and selecting products. The goal of the product has now been set to achieve these three things.
Lo-Fi Designs
Creation of an onboarding system that drove immediate and apt recommendations was imperative to being the first way of addressing each persona.
Second to that was a checkout experience flow and experience that was trustworthy, secure, and gave you all the information you’d need to feel good about your purchase.
Design Iterations
Cart
Lo-Fi Cart
Checkout mockup in a more vertical fashion to show each of the products and their details.
Theres room to show that checkout is secure as well as what final pricing will be.
Simple checkout button to move over to payment details.
Iteration 1
On first iteration from my lo-fi mockup I tried to consolidate both the Cart and Payment/Shipping windows.
I reasoned that having less steps in checkout would make it easier to get a sale.
Feedback proved that scrolling two separate columns proved to be difficult and it makes it harder to see everything in the cart.
Feedback also noted that this version lacks space to accommodate the secure checkout message featured in the mockup.
There was user drop off in the process.
Iteration 2
Second iteration utilized the feedback and made it so that items in the cart filled the horizontal screen space.
It also had a simple two column split below to show secure checkout, cart total, and payment options.
It also moved the Payment/Shipping to a new screen after clicking checkout.
Feedback here proved that cart contents were more easily viewed as well as item totals, however the contents of this screen still display when the cart is empty.
Added a message for when the cart is empty to signal to users that they need to add something here in order to checkout and pay.
Payment and shipping largely remains the same. Button text changes to signal the next step of the process.
General feedback on this checkout flow was that it was simple to navigate, displays the correct information, and resembles other checkout flows from other sites.
This lets the design leverage user mental models for a more intuitive, trustworthy, and transparent experience.
Product Card (Search)
Iteration 1
Wanted the search card to be able to house a ton of wine info at a glance for the user: description, taste profile, reviews, wine info, etc.
This version largely succeeds in showcasing all of that information. However with everything being text, the card gets crowded fast
Iteration 2
Version 2 swapped the Recommendation text for iconography instead. Moved the pricing details to the bottom of the card.
This solved the issue of too much info in both columns but test groups saw the icons as ambiguous and unclear.
Iteration 3
The final version went with just the thumbs and the word “Recommended.”
Test groups loved this change as the recommendation was now clear and didn’t clutter the screen.
The final version also had the recommendation become a drop down on hover so that you could get an at a glance peek as to why this bottle was being recommended.
Test group viewed this as a good addition as it was not intrusive at all.
Core Design Flows
Keeping onboarding short and concise was paramount during the design process.
The questions needed to be easy to understand and quick enough to answer to propel users directly into the site.
Thus the questions were limited to 4 general questions I used during my time in the wine industry
How familiar are you with wine?
What types of wine do you enjoy?
What flavor styles resonate with you?
Do you like tannins?
Checkout needed to be easy to get to and navigate through.
Product cards keep info simple and relevant.
Cart displays secure checkout information.
Order confirmation is bold and apparent to ensure the user knows their order is placed
Click the image to see the prototype in action!
Reflection
Designing with the transparency in mind drives user trust
Letting the user know that this is a business, it is licensed, and that they verify their customers when needed builds rapport when converting a website visit of a new customer to a sale
Functionality in checkout is far more important than the form of it
Building off of transparency is creating the functionality to keep the user engaged with the process.
Having checkout be a simple organizational layout that retains its design language and structure throughout builds trust and establishes healthy user expectations for the future.
It also gives a good first impression of your first purchase
The products goal should be the through line for feature production
Feature production in educating users, being transparent, and recommending products has to be the forefront of the design process.
This matters for creating good first impressions.
This helps drive home why your product is different and why its better.