Vino Verité
Demystifying and simplifying the online wine shopping experience with a ecommerce overhaul for a local wine boutique
I love wine so much, partly for some of the same reasons that intersect with my passion for design. Like some of the most stunning designs, I believe that great wine has the power to be corporeally and viscerally captivating - it can tell a story about a place, tradition, history, and transformation. And like a great design, wine can foster human connections.
A small local business with an immense knowledge, love and inventory of wine…
Shortly after moving to Seattle, I serendipitously happened upon a lovely little independent wine shop called Vino Verité while exploring my new neighborhood. The store not only had a robust inventory of wines, but also friendly, unpretentious, and knowledgeable service. The staff had this remarkable ability to genuinely describe any bottle I inquired about as well as offer wonderful recommendations when given even the most vague criteria.
… and a very inadequate online presence.
When COVID-19 became a pandemic, leading to the severe limitation of routine social outings and services, I was both curious to see how some of my favorite local businesses were coping with this upheaval and eager to support them with my shopping choices. This prompted me to visit and explore the Vino Verité’s website; however, the online shopping experience was a stark contrast from my previous experiences shopping in the store.
The store’s expansive inventory had very little sense of hierarchical organization and no tools to make the process of navigating the wine list manageable. And only after some investigating, I was finally able to locate an inconspicuous note on the “Sale Wines” page to call or email the store in order to place an order - there was also no way to purchase wine directly from the website. Moreover, the website as a whole lacked any substantive content - there were no images or engaging and informative content about its products, events and services. Simply put, the overall visual design of the website was lackluster.
The Challenge: Adapting to Current Ecommerce Demands
It was so disappointing to see that Vino Verité’s website was not in any way indicative of the quality of service or product the store has to offer. Deciding which wine to buy is particularly daunting for most people, whether it’s online or in a store aisle filled with a gazillion options, and Vino Verité’s website offered meager information and tools to mitigate this disorientation and indecision. Online shoppers in 2020 have come to expect swift and convenient purchasing options, comprehensive and accurate product information, and rich and engaging online experiences. And the limitations placed on normal in-person shopping habits by the global pandemic has made it even more vital to have a well designed e-commerce site that blends the physical and digital realms seamlessly in order to have a better chance of staying financially afloat in these uncertain times.
My Role
I wanted to help. And that meant that I would need to build the information architecture for a very complex inventory from scratch (and if you drink wine, you might have some idea of how complex the classification and organization of wine can be) as well as overhaul the visual and interactive design of the website to better convey the store’s high caliber yet down-to-earth brand identity as well as fulfill shoppers’ needs and expectations.
The Process
Role: Product Designer, Researcher, UX/UI Designer
Timeline & Output: 3 Weeks to Re-brand, Redesign the Information Architecture and User Interface Responsive for Desktop and Mobile Web
Tools: Sketch, Invision, Zeplin, Anima
What Wine Shoppers Want
Before diving into the work of organizing and sprucing up Vino Verité’s website, it was essential to learn about the specific goals, frustrations, and needs of wine shoppers in order to ensure that the store’s website was truly functional. In my approach to the user research, I wanted to not only build an understanding of the thoughts, opinions, and feelings of users when interacting with the store’s current website, but also learn about users' usual wine shopping habits in order to build a simple and accessible solution for a broad range of users.
Key Takeaways
The patterns I was able to discern according to the verbal data I collected from my interviews indicated that the following aspects were often taken into consideration before making a purchase:
01/ Style of wine
02/ Price
03/ Label on the bottle
04/ A brief description of the wine by either a store staff member or a wine publication
05/ The ability to compare multiple options
All interview participants also expressed a preference for shopping for wine in person, pointing out that they enjoyed the personal assistance and recommendations they received from store staff. Users explained that their most memorable shopping experiences were largely shaped by the confident and informed assistance from store staff, while poor shopping experiences were primarily due to the inability to find what they were looking for - because of either a mediocre selection or difficulty in navigating the aisles containing a vast number of options. And while shopping online for wine wasn’t the favored option, the inability to find a limited or special item in-store or the restricted ability to shop for wine from their go-to stores as a result of COVID-19 related business closures had prompted users to resort to making purchases online.
Sizing Up the Local Competition
It was also important that I identified specific features to consider in my redesign, so I instructed each of my interview participants to narrate their thoughts and feelings as they explored Vino Verité’s website as well as the website of a local competitor called Molly’s Bottle Shop in order to pinpoint specific strengths and weaknesses of the two online experiences.
01/ Visual Content
All users indicated that one of the primary advantages that the Molly’s website had over Vino Verité’s was its display of product photography. This noted difference between the two sites underscores the significance of providing visual details to facilitate users’ wine buying decisions, especially since online shoppers don’t have the tactile experience they would typically have in-store to inform their choice. Visual content helps to provide context and builds a connection between the user, the product and the store brand identity.
02/ Verbal Content
The availability of product information on the Molly’s site was another edge it had over Vino Verité’s site - though the level of information provided was described as still too brief.
Content - whether it is verbal or visual - must provide complete and accurate product information so users can make an informed purchase decision as well as establish trust with the site before handing over their money. If users can’t decide if the product meets their criteria, they are more likely to abandon the purchase. Moreover, the limited tactile experience that users have before deciding on a purchase when online shopping means it is crucial to provide strong verbal content, which Vino Verité fails to deliver.
03/ Search, Sort & Filter
Users expressed that the ability to search and filter on Molly’s site was a helpful feature for sorting through the store’s inventory. In contrast, users felt overwhelmed by the single web page on Vino Verité’s site listing its entire wine catalog as a long string of text with no tools to sift through it all. Giving users the ability to sort through their options - especially if an inventory is expansive and complex - lightens the cognitive load for shoppers and simplifies their ability to reach a purchase decision. Moreover, search and filter features support shoppers who have a predetermined idea of what they are looking for, whether it’s a particular type of product or a specific product. If the user can’t find the product, then they can’t buy the product.
04/ Seamless Online Shopping and Checkout
As mentioned earlier, Vino Verité’s site only displays its wine inventory and doesn’t offer shoppers the ability to order and checkout online. Users expressed confusion and frustration about having to call or email the store in order to place an order, dissimilar to Molly’s site which implements Square - an eCommerce platform - for its online store. As online shopping continues to grow in popularity, users’ expectations for convenience in online shopping are increasing, making it increasingly essential for stores to offer flexible and seamless shopping experiences across a variety of devices and channels.
05/ Expert Recommendations
An important feature that users felt was absent from both websites was specific wine recommendations made by store staff. Personal recommendations can help shoppers avoid information overload by identifying products that might interest them. Moreover, good recommendations promote a sense of credibility, fostering customer satisfaction and loyalty.
06/ Aesthetic Quality
To put it plainly, participants described Vino Verité’s website as aesthetically uninteresting and outdated. Users perceived the website to be less usable as a result of this culmination of scant and dated visual content and poor information architecture. According to the aesthetic-usability effect, visual designs that elicit positive emotional responses often help to communicate ease of usability, orderliness and competence. And a positive user experience builds loyalty and trust.
Quantitative Validation
To further validate these qualitative findings and uncover anything significant that might not have surfaced during the user interviews, I surveyed additional participants about their typical wine shopping behaviors. While the salient parallels between the qualitative and quantitative data confirmed the patterns outlined above, I still needed to investigate how shoppers compartmentalize wine. Knowing what categories actually helped shoppers navigate a wine store was key to constructing a robust information architecture for Vino Verité’s site that would match users’ mental models and expectations.
Based on the patterns that emerged from a card sorting exercise where participants grouped and labeled a diverse selection of wines from Vino Verité’s existing inventory according to whatever criteria made sense to them, the broader umbrella descriptions based on wine style contained more specific labeling schemes based on variety and growing region.
These were also the commonly used criteria used by shoppers when determining what wine to purchase as indicated by the user interviews and survey. Whether the shopper is a wine expert or novice, more information is better as long as it isn’t too much information. So when organizing Vino Verité’s inventory content, it was important to find that sweet spot.
From the research it was clear that wine shoppers need not only an informative and easily customizable way to view, compare and select wine that best fits their personal preferences, but also features that produce a premium and personalized user experience.
Who I’m Designing For
In order to focus the scope of the design process and ensure that my design choices effectively attended to users’ needs and goals, I used the qualitative and quantitative data to develop personas who would represent the pain points and goals of the primary target user bases:
Fastidious Tammy
Tammy knows what she likes, and she likes the finer things in life. She can sometimes be very difficult to please because she has very particular standards that she doesn’t like to compromise. In addition to being very selective and goal-oriented, she also likes to get what she wants quickly and without any fuss. And when it comes to wine, she prefers to enjoy a glass or two of a decadent bold red or a buttery chardonnay with dinner or while watching RHOC with her best girlfriends.
How might we ensure that Tammy is able to select and purchase a bottle of wine that impeccably fits her preferences in a way that is quick and convenient?
Christina the Unfussy Sipper
Christina is your typical millennial who's got a gazillion things going on at any one time, so she doesn’t really have the bandwidth to spend much time on anything that isn’t related to her hustle. When she does get the rare opportunity to chill and unwind, she loves to grab happy hour or cook dinner with friends which often involves sipping on a glass of wine. When deciding on what wine to buy, Christina often feels overwhelmed by the vastness of options but doesn’t like to overthink her choices - just as long as it's tasty and cheap but not too cheap. She's a sucker for a good-looking label too. As far as all the wine nitty gritty goes, she doesn't know too much but she is open to trying new things.
How might we demystify the world of wine for Christine by making finding an affordable and delicious bottle of wine simple and approachable while also helping her learn about what wine she likes in a way that is informative and engaging?
James the Wine Aficionado
James calls himself a wine enthusiast, but his friends would describe him as a total wine nerd. Having spent a number of years working as a wine professional and studying for his sommelier exams, he is highly knowledgeable about wine varieties, viticulture, terroir, and history - though he insists there is still plenty more to learn. He regularly attends wine tasting events so he can keep his palate in tip-top shape, meet others who share his passion for wine, and try exclusive vintages and releases. It's difficult for him to pin down a favorite wine since he has an appreciation for all varieties and styles. However, he does enjoy trying new and non-mainstream varieties and usually visits his local natural wine shop to discover anything that is off the beaten path.
How might we keep James up to date about unique and exclusive wine offerings and connect him with the local wine community?
Comparative & Competitive Analysis
Having established an understanding of wine shoppers’ goals and needs, I was curious to see what kind of content and services were being offered by other online wine retailers to address users’ objectives as well as examine the depth of information and layout of content on other websites. I was also curious to see what kinds of information that online sellers of other types of beverages offer to its customers.
I found that packages that were personally curated as part of a monthly subscription service or club membership was a popular service offered, which could be obtained via delivery or in-store pick-up. Additionally, two monthly subscription wine clubs offer a quiz on their sites that allows users to learn about what wines they might enjoy based on their personal preferences, offering recommendations based on those preferences. In my comparative research, I found that both of these types of services were also offered by coffee retailers. These features offered the potential of increasing customer retention and loyalty by providing a reliable and convenient service to its shoppers while regularly engaging with them on a monthly basis at minimum. Another potentially valuable feature that I encountered in my broader analysis was the inclusion of key tasting notes for each product. Given the limited ability to tactilely experience a product in an online environment, these sorts of descriptions could aid shoppers’ purchase decisions by providing more nuanced sensory information.
User Flow & Site Mapping
Having compiled and synthesized the research and identified high-priority features that aligned with users’ goals and needs, I constructed a series of primary flows that the personas who represented the target user groups would take in order to fulfill their aims for visiting the site.
Tammy’s Task Flow
Christina’s Task Flow
These user flows informed the development of the sitemap that would serve as the most elementary blueprint of the redesign of Vino Verité’s site.
Key Feature Developments
01/ An approachable and efficient filtering and sorting system that enables users to customize what products are displayed based on a selection of basic product descriptors and how they are arranged.
02/ A dynamic and scannable comparison table that allows for a quick and simple comparison between different products’ features in order to help shoppers identify the option that best fits their needs, helping to reduce cognitive load and interaction cost.
03/ Crowdsource and include ratings and reviews in order to provide more accurate and precise information on prospective purchases and answer any questions shoppers may have about the product.
04/ Offer personalized product recommendations that help shoppers discover relevant alternatives, helping them avoid information overload and encouraging user engagement and loyalty.
05/ A secure and simple means to make a purchase and checkout directly through the website.
06/ Give shoppers an option to schedule an in-store pick up or delivery, streamlining the purchase flow and satisfying users’ need for immediacy when shopping online.
07/ The option to register for a store account that gives shoppers easy access to previous purchase information that can be used for simple reorders, status updates on purchases, and an archive of saved favorites and recommended products.
08/ A quiz that invites users to learn about their particular taste profile and delivers product suggestions that match this palate profile, helping users like Christina who may not know exactly what they want when navigating a large complex inventory.
Usability Test Driven Iterations
During the design and development of the website, I submitted the low and mid-fidelity wireframes to a series of usability testing in order to identify any strengths and weaknesses in my design choices. My observations and the feedback I received from test participants helped to edit and refine my design choices, ensuring that those choices mitigated any potential frustrations and effectively fulfilled user needs and goals.
The insights gleaned from the usability testing resulted in the following key UX and UI improvements:
Since all users demonstrated some difficulty locating the “Compare” CTA button as well as the tab displaying selected items to be compared on the bottom of the page, I relocated the comparisons tab to the right side of the page with the "Compare" CTA button relocated to the top of the tab.
Based on my observations of users’ tendencies to click the logo in order to navigate back to the home page, I removed the potentially redundant "Home" link in the main navigation bar and enabled the logo link back to the home page.
The above change prompted the rearrangement of the primary navigation link titles on the navigation bar so that it could be more quickly scanned.
Sophisticated & Modern Simplicity
The current version of the site did not offer much as far as a style guide goes when adapting new elements of the web redesign. Interview participants had also described the current website as “ugly” and “dated”. So a crucial facet of this website redesign was fleshing out Vino Verité’s brand identity and echoing that in the visual design of the site. I not only strived to bring sophistication and modernity to the interface, but I also wanted to convey the staff’s product expertise and gracious guidance that interview participants referred to when describing their most pleasant wine shopping experiences. Thus, I produced a style guide that was both modern yet classic, elegant yet down-to-earth in order to instill feelings of welcome, comfort, confidence, and trust in users.
Adapting For Mobile
As users increasingly shop and make purchases with mobile devices, it was imperative that I also designed for an e-commerce experience that is optimized for the capabilities and constraints of smartphones. This meant carefully assessing each of the primary webpages and determining where adjustments in the user interface should be made to adhere to accessibility design best practices.
Moving Forward
Though this redesign started off as a conceptual project, I hope to convene with the owners of Vino Verité in order to ensure the redesign aligns with their business needs and goals. In the meantime, I would like to confer with developers and wine experts to design an effective wine quiz that utilizes AI in order to deliver the most accurate wine recommendations to users. In effort to enhance convenience and add a “personal” touch to the online shopping experience, I also want to explore the possibility of implementing a chat bot that would connect online shoppers with store staff during store operating hours so that users could inquire about specific products or ask for recommendations given a specific set of criteria, replicating the customer experience that they would receive if they were to shop in-person. If the idea of a Wine Club Membership proves to be fruitful and receives sustained positive reviews from both the store owners and shoppers, exploring the possibility of increasingly tailoring each package by giving users the ability to rate each membership package item could encourage increased and consistent engagement. Providing several means for users to interact with the website and the people behind the website could generate a greater sense of trust, satisfaction and loyalty among users.