Create a design that allows members to quickly and easily scan for all the necessary wine information, so they can in turn spend more time enjoying wine.
Project Scope
Client: Winespectator.com
Timeframe: 9 weeks
My Role: UX/UI Designer
Methods: Competitive Analysis, Survey, Problem/HMW Statement, Wireframes, Mockups, Design System Improvements
Tools: Sketch, Surveymonkey.com, Slack, Google Suite
Project Overview
Client Kickoff
Although stakeholders did not request a redesign of this page, as the most popular page on our website the dev team and I took it upon ourselves to redesign the page. With that, stakeholders hoped to see an increase in page views, a decrease in bounce rate, and an increase in overall subscriptions.
Objectives
Improve the page’s overall visual design and usability.
Gather helpful and otherwise hidden wine information found throughout the site and highlight it on this page.
Introduce new content that helps wine drinkers know all the necessary information they need when purchasing/researching wine.
Before and After
Methodology
Competitive Analysis
Survey
Problem/HMW Statement
Low-fidelity Wireframes
High-fidelity Mockups
Design System Improvements
Competitive Analysis
I spent some time looking at direct competitors such as Vivino and Wine.com to better understand what type of content they choose to present, and how they might present it. I also spent time gaining “detail” page layout design inspiration from indirect competitors such as Logitech, Etsy, and Wayfair.
Competitive Analysis Findings
Must-Have
Grape, region, wine, price, tasting note, and vintage information
An improved layout design that better reflects the user’s needs
Winespectator.com’s rating of the wine
Suggested wines/articles related to wine being viewed
Nice-To-Have
Wine and food pairing information/tool
The ability to select from different vintages on the detail page
A visual graph indicating WS.com’s score over time
Information on the winery
Survey
Winespectator.com members were given the option to take the survey in two different ways:
Clicking into the survey box CTA on the wine detail page
Received two email blasts that were sent to 5,000 active/engaging WSO members
Note: I only performed user research with members of Winespectator.com as the wine detail page is member-only content.
Survey Objectives
Learn more about the content our members wish we covered on the wine detail page
Understand our members’ frustrations when interacting with the wine detail page
Learn more about how or if our wine detail page helps our members understand a wine’s drinkability
Learn more about how or if our wine detail page influences our members’ buying decisions
Better understand what features our current members wish we had and any frustrations they have with the current design
Survey Findings
Majority of members found features such as the Personal Wine list and printing Shelf-talkers not useful
Certain features such as to why we’ve given a wine that score, viewing different vintages of the same wine side by side, discovery related wines, and more information about a winery were highly requested.
Our users mainly learn about wine by researching online or through apps, tasting, or are already familiar with what grapes or regions they like.
Problem/User Needs Statement
Winespectator.com members need to be able to quickly and easily scan for all the necessary wine information so that they can spend more time enjoying wine.
How Might We…
Enhance the wine information on our wine detail page?
Make users feel confident they have all the information they need?
Increase the probability of a user finding a wine they’ll enjoy?
Low-Fi Wireframes
After gathering feedback from the survey I was able to prioritize which features were needed and where they should exist within the layout. One of our biggest problems with the old wine detail page design was lack of scroll depth. I wanted to ensure that users had all of the necessary information they needed during the wine purchasing and researching process, higher up on the page, while still offering more discoverable and in-depth content lower on the page. These are only 2 of many wireframes.
First Round of Mockups
In this next phase on the design process I began focusing on visual hierarchy and emphasis. The design on the left starts to play at the question “why we’ve given a wine it’s score”, however, after speaking with the wine tasting department this score breakdown rubric would require a lot of work. While the design on the right might be similar, it provides more emphasis on the wine bottle visual and less visual emphasis on the vintages.
Left design:
Emphasis on a wine’s score, tasting note, and different vintages
The use of tabs to organize secondary content
More information presented above the fold
Right design:
Emphasis on visuals
Vintage dropdown offers utility while taking up less space
Second Round of Mockups
Left design:
More information provided above the fold
Introduced a graph with score and vintage combined
Added a sharing feature
Right design:
Focused on improving readability with a more appropriate line length
Designed a vintage graph that when hovered over shows the wine’s vintage, score, price and drinkability. You can also toggle to see the wine region over time.
Added a sharing feature
Final Mockup
Final designs
Added a billboard ad at the top to meet the needs of the advertisement department
Created a score and vintage combination dropdown to allow users to quickly switch between vintages
Changed the score graph’s starting # to 70, as most of our wines start around there
Deemphasized the retailer button by offering it as a link
Introduced new winery details that help educate the user on how many times Wine Spectator has given them a high rating
About the Client
Founded in 1976, Wine Spectator is the world’s most influential source of wine information, both in print and on the Internet. Wine Spectator editors review more than 11,000 wines each year in blind tastings, and each issue contains from 400 to more than 600 wine reviews with detailed tasting notes and analysis. The magazine sets stringent standards for itself and relies on the proven abilities and experiences of its editors as tasters and critics.