How To Improve Your Winery's Ecommerce UX and Design
Website users expect clear and easy to use ecommerce experiences. Thanks to platforms like Commerce7, WineDirect, and Offset, most of the heavy lifting is done for you. However, there are still many ways to customize the shop on your website to ensure you maximize conversions with a streamlined user experience (UX).
We are sharing the most important guidelines from the Baymard Institute’s recent DTC website research. They are the leading experts in UX and we use their studies to guide our web design projects at our DTC wine marketing agency Highway 29 Creative.
If you haven’t already, check out part one of this article to learn about UX best practices for the other pages on your website.
Your shop landing page should default to an “All Wines” collection. Unless you sell 50+ different wines, no need for the first page to only list categories. Get right to your products.
When laying out your “All Wines” page, do not divide the wines on the page itself into sub-categories and break up the page.
Provide a sub-navigation for categories or filters to allow customers to refine their search. Rarely do you need both filters and categories unless you are a retailer with 50+ wines.
Organize the wines on the page by relevance and not by varietal. Start with your best sellers. The first two wines on the page are the most clicked on.
When displaying wines, you need to provide enough information so users can understand the difference between the wines. At a minimum you need: Title, price, product type, photo, rating, variations available.
If you sell multiple iterations of one varietal (like 8 different Cabernets) try to add a short callout to help users differentiate between them.
Use both bottle shots and lifestyle shots. The best design pattern is to have the bottle shot by default and allow a user to hover over the photo to reveal a lifestyle shot. Bottle shots can be dull and sterile and wine is far from a dull product.
The majority of wineries sell less than 50 SKUs at one time which classifies their catalog as small. This enables you to be more detailed in your product information to ensure users are presented with enough information to make a purchasing decision.
The “Shop” link in your main navigation should default to an “All Wines” collection. This page should be simply laid out with nothing breaking up the list of products like sub-categories or banners. Pay special attention to the order of wines in this collection and rearrange them to have your best sellers at the top. The majority of clicks on this page will be on your first two products so ensure they are available for all users (not club exclusive) and at a reasonable price comparatively.
If you have 15 or less products, there is no need for filters or categories. Users can simply scroll down to view all the products. You never want to let users filter down to only a few wines– that would be over filtering. If you have more than 15 wines, you can use on page filters or categories to help users better find specific wines. Rarely do you need both!
One of the biggest issues with most winery shop pages is that the wines are not easily scannable and differentiated. If you use all white background bottle shots and most of your labels look similar, then there is no easy visual cue to tell the difference between the wines. Especially so since most bottle shots are small and zoomed out. Try uploading a lifestyle shot and coding the website so when a user hovers over the bottle shot, it displays the lifestyle shot. The goal is to inspire the user to buy the wine.
Even worse, if you have multiple SKUs of the same varietal it can be hard for users to understand the true difference between the wines. Most wineries suffer from the curse of knowledge as they clearly understand their wines and fancy terminology, but most users do not. Think about ways you can use callouts for each wine to help differentiate them such as flavor descriptors, quality levels, vineyard designation, body, etc. For instance, if I was shopping on a page with 12 Pinot Noirs, I’d want to know which are light body vs. full body or fruit forward vs. earthy.
New customers want to see what’s most popular.
It can be hard to choose from a long list of wines they can't try before they buy.
If you make more than 6 wines, you should have a category called “best sellers'' and include your 4-6 top selling wines. New users can be easily overwhelmed by too many choices and the paradox of choice dictates they prefer to make no decision than the wrong decision. The usability studies from the Baymard Institute showed new users searched for a best seller category so they can better understand what a brand is known for.
Taking this one step further, make a bundle with 3 of your best sellers and offer it at the top of your “All Wines” page and “Best Sellers” page. For many customers, it will save them time researching and lead to a faster conversion.
Customers don’t trust user reviews, so don’t invest in collecting them and displaying them on your website if you are a small DTC brand.
Customers do trust reviews from critics like notable magazines and wine reviewers. If you use the review, cite who gave it.
Customer reviews do work well on large ecommerce websites like Amazon and Target, but they are not effective for small brands.
Wine is a very subjective product and it can be hard to gain trust of new consumers. While it might seem like a good idea to collect and display reviews from your customers on your website, studies showed that users do not trust reviews from small brands. They assume only the best reviews were cherry picked. Even if reviews were provided, users still googled the product to find a trusted 3rd party.
Expert reviews from critics and publications are much more trustworthy in user studies. For better or worse, Robert Parker changed the industry forever with wine scores and conditioned customers. If you receive a great score, users love to read about it on your website. Be sure to name who gave you the score otherwise users assume it was a random person and not an expert. Even better, share the description of the wine from the review.
Provide plenty of information about your wines on the product detail page, but be thoughtful about where on the page you display it.
Keep the section at the top of the page called the “Buy Section” simple with key info like price, short descriptions, and scores.
Make the price large and clear with bold text or a different color.
Share longer descriptions below the fold on the page and use a mix of both paragraphs of text and bullet points to make content easy to digest.
If you offer special pricing or a shipping deal, display it below the price at the top of the page. Do not rely only on an announcement bar or cart carrot to message this.
Break up your product information into smaller digestible sections with their own title like tasting notes, winemaking, vineyard source, etc. Use images and graphics to break up the information.
Refrain from using technical winemaking data and industry jargon. Use plain language to explain a wine.
Product detail pages provide the biggest room for improvement for most winery websites. Too many provide sparse info and assume the user is a wine expert. The point of a product detail page is to recreate the tasting room experience digitally. Use the space to share the story behind each wine, photos, videos, recipe pairings, and more. Get creative!
Ecommerce convention dictates having the top of the page divided into two columns with product photos on the left and the “buy section” on the right. You should include the name of the wine, short product description, score (review), price, special pricing or deal, product variations available (750ml vs 1.5L), and the add to cart button. We suggest having 2-3 sentences maximum describing the wine at the top and then a “Learn More” text link to scroll them down the page to a longer description.
If you offer a shipping deal such as “free shipping on 6 bottles,” then you need to include this info above the purchase button. Do not assume users see your announcement bar banners as studies show users tune them out. Cart carrots are great, but customers have to add to cart to see them. Having a deal on the page is the best way to communicate it. If you have a discount on wine available, be thoughtful in how you explain it. You can show how many dollars the customer will save or the total percentage discount and you should choose which to use based on which is the bigger number. If you have a $50 bottle, it's better to say 15% off than $7.50 off. But $50 off a $150 bundle is better than 33% off.
Below the buy section you should offer more detailed content such as tasting notes, stories from your winemaker, etc. Do not add all of this information in one long paragraph. Instead break it up into sections with titles and use a mix of bullet points and paragraphs to make your point. Make the sections easy to scan with images and graphics to break them up. Refrain from adding too much technical winemaker data as it confuses users. Industry jargon can make users feel stupid and intimidated. Stick to plain English.
Test your website often (minimum once a month) by clicking through all the pages and making a purchase, reservation, joining club, etc.
Test your site on mobile, tablet, and desktop devices.
Test as both an anonymous user and logged in club member.
Website bugs are part of the business and reality. Even massive multi-million dollar sites like Amazon, Facebook, and Walmart are full of bugs. The key is to find them before your users do. Most users are willing to suffer in silence and abandon your website if it is hard to use instead of speaking up.
Schedule monthly tests of your website and have multiple users test the core functionality on all screen sizes. Even with regular testing, new bugs emerge especially if you are relying on 3rd party ecommerce platforms or plugins to power your website.
Websites are an iterative process. You cannot expect to build a website once and it will be perfect. Budget time and money for making constant improvements to your website UX so you can ensure you are putting your best digital foot forward.
Interested in working with a winery web design agency that obsesses over data and user experience?
Simon Solis-Cohen is the founder of Highway 29 Creative, a leading digital and creative agency serving the wine industry. He challenges clients to think about the future and constantly innovate. The agency chases data, not fads, and provides one-stop shopping for wineries looking to enter or jolt their direct to consumer sales. Their approach starts by designing and building a website focused on conversion (wine sales, club sign ups & tasting room reservations) and then dives into each digital channel with consistent and effective content and messaging.