Designing An Events Hub for Total Wine & More
Redesigning the online booking experience for in store wine tastings and events.
OVERVIEW
UX Designer
User Research, Interaction & Visual design
August 2022 - Current
ROLE AND DURATION
Total Wine is a large retailer of wine, beer, and spirits. The company partners with wine and spirit producers globally to sell products exclusively in their stores. These products are not well know outside of Total Wine stores, making brand recognition difficult.
Wine and spirits tastings are vital to the success of selling Total Wine’s exclusive products. Creating a loyal relationship with customers helps grow the success of Total Wine’s exclusive products.
The Problem
The current events hub is outdated compared to the rest of Total Wine’s Website. Events have low visibility across the site and are difficult for users to find. The events webpages are not responsive. Total Wine wants to focus more on their in store events to promote their exclusive products.
How can we improve the current experience for in store events and increase site wide visibility?
User Research
Before I started working at Total Wine, the design team conducted usability testing on the current events experience. This was to better understand the page’s technical and structural problems. I took these key factors into consideration when crafting my solution.
Store Location
Users were confused about the location of events and how to change their store. This has since been updated on the site, however I still wanted to make the event location more visible in the redesign.
Accessibility
The events pages are not responsive. The team also noted that some users in the test did not recognize that the titles were clickable. This gave me the idea to explore alternative module options
Better Information
Some users wanted more details on the event itself, such as what they're going to be learning about, pictures of the wines they'll be sampling, etc.
Business Goals
Increase visibility of store events for online shoppers and drive more business to the store.
Increase engagement for store content on our search results page.
Increase sales of tasting events
Make pages accessible to all online customers + meets ADA requirements.
Prioritize mobile experience, the most traffic comes from mobile devices.
Competitive Analysis
I started researching UI patterns across other platforms that host events through a 2022 lense. I saw a common pattern of using clickable cards to show event lists. These cards were always accompanied by images to show what the event was about. From here, I decided to explore am option using a similar card style.
DESIGN PROCESS
Conceptualization
I began creating lo-fi wireframes to illustrate my idea of using cards as a way to show events. I also began creating a template for the events detail page.
DESIGN PROCESS
The First Pass
I presented my first version hi-fi wireframes to stakeholders and pitched the idea of creating card modules. While they liked the idea and thought that it elevated the current experience, there was concern over if we could support images internally.
DESIGN PROCESS
Back to the Drawing Board
After the internal review, I began several iterations. I explored designs using templates that we already have and loosely modifying it to fit my needs. I created several options for both the event list page and event details page for my next design review.
The Solution (For Now)
Stakeholders voted on repurposing our new PDP template for the event details page. They also wanted more of a 1:1 conversion of our current events template to cut down on development time.
Explore Events
Discover events in your area through this event list. View how many spots in the event are left and what type of alcoholic beverage will be served.
FEATURES
FEATURES
Filter By Date
The current experience for changing dates is clunky and limited to specific months. Using a calendar allows users to select specific dates.
FEATURES
Find out More Information
View tasting location, price, and varietals featured in the event on this PDP page.
FEATURES
Mixed Search Results
Stakeholders wanted to explore an option of including events in our search result in order to bring more visibility on the site. This is the first draft of what that could look like using one of our pre built components.
Next Steps
Decide on final design mocks
Polish UI designs and annotate for developers
Explore search functionality and inline content