Updated: Aug 28, 2021
Delaplane is home to many boutique family-owned wineries in Virginia. Located approximately 50 miles from Washington D.C., wineries in Delaplane attracted many locals and tourists from the Washington D.C metropolitan area. Among those wineries, Barrel Oak Winery is known by offering children and pets-friendly experience. By browsing the Barrel Oak's website and reading some reviews, I discovered three problems:
The website has low readability and difficult to navigate
Business branding is inconsistent on the website
Overly crowded venue
Due to a recent experience, I noticed the user experience of a digital product can be disconnected with onsite customer experience. However, I assume the customer-facing digital product should provide solutions to the on-site issues and support the on-site customer experience. Barrel Oak Winery has a digital product, and also provides onsite experience. I consider this is a great opportunity to align both sides.
It is crucial to understand the business before developing a UX strategy. I started with a SWOT diagram to highlight the strengths, weaknesses, opportunities, and threats of the business.
What set Barrel Oak aside among the other wineries around it is being family-friendly. Wine tasting and on-site tours generate most of the revenue for the business. Other than that, online store and wine club memberships should also bring revenue. However, the features of Barrel Oak's current website cannot well support the online shopping experience, neither can provide enough support for the onsite services due to lack of self-service features. For example, customers cannot apply for club memberships online, neither making wine tasting reservations via the winery's website. The winery could get crowded on some weekends or holidays, customers won't be able to know the winery traffic until they run into the crowd. The staff could feel worn off since they have to answer more phone calls, help customers with reservations and club applications, and also serve the crowds on the busy days. The service quality could decline during the workload. In fact, the two types of complaining from Barrel Oak's customers via social media reviews are crowdedness, and decline of quality of service during the winery's "rush hours".
Social media platforms, such as Yelp, TripAdvisor, and Google review, make a large quantity of user data available and approachable. Barrel Oaks have 280+ reviews on TripAdvisor and over 500 reviews on Yelp. The time that people leave reviews could imply identifying the changes in the business, such as product variation, service quality, and physical environment. Looking at the trend of customers' needs and expectations through time is also important. I took a glance at Barrel Oaks reviews from TripAdvisor and Yelp to form the big picture that helps me identify the user groups. Based on the quantity of the available online reviews and the limited time that I have, my best choice is to have a strategy to be able to selectively going through relevant reviews that could give me the information that I need:
Who: gathering general information of users/customers, such as gender, age group, marital status, with or without kids or pets.
Where: Where the customers come from can reveal location information and some behavior information.
Why: Why people leave reviews and what they write could tell me about their motivations, habits, and needs.
After reading the reviews and visiting Barrel Oaks' website, the customers can be categorized into four categories:
Price Driven Everyday Loyal: These customers drink wine about 3-5 times a week. They aim quality wine at a bargain price from established wineries. Both online deals and cellar door bargains attract them.
Wine Enthusiast: They are knowledgable and experienced wine drinkers. They would explore different wineries to try new wines after doing some research.
Family Oriented: The kids-friendly environment is important to these customers. They want to make sure that all family members can enjoy the wine tasting experience. They appreciate the convenience of online shopping.
Engaged New Comers: They are social drinkers who open to learning more about wine. They usually visit wineries with a group of friends. They search for on-site activities such as concerts and tours before visiting a winery.
I consider it's important to study the existing product and research on competitors' products. At this stage, I revisited some competitors' websites in-depth that I used for reference when developing the SWOT diagram, then I looked at Barrel Oak's current site page by page.
Barrel Oaks' current sitemap is redundant with duplicated pages and lack of proper content organization.
The site lacks proper information categorization and a consistent naming system. Under the first navigation item, "Calendar", there are secondary navigations that lead to attractions, mobile apps, group reservations, and restaurants (outside the winery). These subjects don't fit under the "Calendar" class. Before regrouping the pages, I took another approach to redesign the primary navigation. The website promotes both online and on-site experience. I would highlight four areas via primary navigation: onsite services, online shopping, our story, wine clubs. All of them relate to increasing revenues besides winery history. However, our story section could be an important supplement to sale. Our story is the section that can highlight the history, culture, craftsmanship, and awards that adds value to the winery's products.
The content structure is not well established on this site. A single piece of information can be split into two or more pages. "Celebrations" page contains general information about group events reservations. On the other hand, the "Group and Reservation" page explains how to make group reservations. These two pages could be combined that people can find sufficient information on a single page. Pages with similar issues are combined to reduce the redundancy.
The site has limited self-service functions. Self-service could be extended from online purchases to club membership applications and online reservations. This type of interactive function reduces the traffic of phone calls to the winery. Customers can fill up club membership applications, or purchase one online 24/7. Reservations can be made and updated 27/7 to reduce no-shows.
I drew the site map of the current site and mapped out the content:
In the next step, I analyzed the current site map and content:
The updated site map is redesigned with a couple of new features:
Our Story: "Our Story" page allows the winery to define their brand in detail, and showcase the business history, award-winning products, and staff expertise.
Tour the Winery: On-site wine tasting and tours drive the revenue to Barrel Oaks based on both the business and user research. I used verbs in front of each menu item that customers should take actions. The events section is moved under this section since that's also part of on-site service. The new feature of this section is a self-service online reservation. This feature reduces the incoming calls that the winery staff should take to save their time. Customers are able to make and change their reservation 24/7 and the staff could use this data to manage the traffic to the winery.
Shop Our Wine: An online store is valuable to small businesses. Online shopping option helps the business to reach a wider range of customers. The option also gives customers a flexible and convenient option. Customers could create an account for online shopping. The club members could use their club member accounts to log in and shopping.
Contact (About) Us: Other than address, phone number, and email form, the "Work with Us" section is also under this section.
Join the Clubs: The winery has many types of clubs. I simplified and regrouped them into two main types of membership and each one has two subcategories based on existing information. The reorganization makes the level of each membership more clear to users. Users are allowed to submit club membership applications online. Club member account also enables the members to self-serve 24/7.
Low Fidelity Wireframe:
I sketched the initial idea on paper. This way, I can focus on put initial ideas together and focus on structures without spending too much time on pixels and alignments.
Medium Fidelity Wireframes:
Main navigation sticks on the top with a search box, login/registration, and shopping cart
A full-screen banner includes the quick links that highlight online store, winery tour and membership.
Winery live information provides live information such as winery traffic, weather, and temperature. It also has information such as present business hours, the address and phone number. Users can quickly find the information when they are on the run. The majority of negative online reviews mentioned the crowdedness and noise level affecting their on-site experience in a negative way. To have a live traffic update on the homepage could help to set customers' expectations and making decisions.
Upcoming events are displayed right next to the winery live information section that is easy for customers to find events that appeal to them before planning their trip.
A weekly special section is at the bottom to promote products that also drive traffic to the online store.
The footer section has the links to all pages with a simple subscription form for the winery's newsletter. A newsletter is another way to connect the customers.
The full-screen video background introduces Barrel Oak's business strategy.
An animated timeline covers the key milestones of the business and awards of the product.
Timeline navigation enables users to jump to a different year on the timeline.
The universal footer: same as the homepage footer
Shop Our Specials:
A narrow promotional banner to drive traffic to the membership applications, special promotions, events, or gift cards purchased.
Product list section lists products
The promotional area within the product section to drive traffic to the membership applications, special promotions, events, or gift cards pages.
General contact information is above the fold since this is the information that users will be looking for on a Contact Us page. Embed Google map to add a visual hint of the physical location
Send a message form that allows users to send general questions and requests
Join the Club
A promotional banner: same as Shop Our Special page
A comparison table to compare the benefits of different levels of membership
Below is the desktop and mobile version of medium-fidelity wireframes to demonstrate the mobile view of the responsive design:
Through this process, I used internal group reviews to validate the design decisions.
The value of rebranding is beyond visual changes. It can separate the business from the competitors, and enable the business to reach and attract new customers. A clear brand can lead to customer loyalty, retain returning customers, establish the credibility of the business and products. Barrel Oak's website doesn't reflect a clear branding. Based on the user research results, I draw conclusions from Barrel Oak's customer with several keywords: natural, simple, quality, healthy, fun, and local.
When thinking of words such as "natural", "local" and "healthy", I immediately considered an earthy color palette of a vineyard with the green from the grape plants, yellow and brown of the soil and blue of the sky. I decided to use a san serif font with simple lines in the logo to reflect the feeling of simplicity. When customers thinking of Barrel Oak winery, they refer to good quality wine, relax and fun time. I picked up these characters from the name "Barrel Oak" by combining half acorn shape and wood planks that refers to the materials that make wood barrels.
The redesign is focused on highlighting the on-site tasting, tours, and events that attracted the most of Barrel Oak's customers based on the user research. On the other hand, promoting the online store and club membership subscription through the redesign to explore the potential of increasing revenue from other perspectives by improving the usability of the website.
Medium, high-fidelity wireframes, and clickable prototypes are all created in Adobe XD.
The top navigation includes the horizontal version logo, five navigation items, search bar, login/registration icon, and shopping cart icon. The login/registration icon has more than just log in and registration since there are different types of user accounts. One is a general user account for the users without a club membership. The purpose of this type of account is to attract general loyal customers and simplify their shopping path. Club members can also log in from this path but also be able to manage their membership and wine subscriptions after login. The top right corner of the page is a generic place to see login and cart icons
The three boxes on the top banner are repeating three of the main navigation items. An online store, winery tours, and wine clubs bring revenue to the business. We should encourage users to take action. I started each phrase with verbs to inspire users to take action. Action verbs directly tell users what to do even not reading the supporting text.
Winery Live Update section is made to support on-site traffic. Users feel that they have more control by knowing the winery traffic when planning their trips. The section starts with the date and contact information followed by weather and traffic. This section pretty much covered all the information for a pop-up visit.
Events at Barrel Oak attract many visitors. Since the on-site visits bring a majority of the revenue to the business, it makes sense to promote upcoming events right next to the Winery Live Update section.
Weekly Special section on the home page is used to drive traffic to the online store.
The footer section includes the full navigation and newsletter/promotion subscription form. This subscription form is another way to help the winery to reach more audiences and probably grow loyal customers.
The full-screen video background is visually appealing and commands attention. It also a great way to tell the story. The mockup below is just a demo that doesn't reflect a real background video.
An animated timeline covers the key milestones of the business and awards of the product. Content about business and history can be very static. I would add more UI animations to engage the users.
The timeline navigation is simplified from the medium-fidelity prototype to give a more sleek and clean look.
Our staff highlight section is added to help customers learn about each staff's expertise, and also a good way to recognize the winery staff. Of course, winery staff should be one of the most important parts of the story. Seeing real people who are part of the history of the winery could help customers to develop an emotional attachment to the winery.
Shop Our Specials:
A narrow promotional banner to drive traffic to the membership applications, special promotions, events, or gift cards purchased. In this mockup, the banner will drive traffic to Join the Clubs page
Products filter (left): filter by year and wine type. This is a technical filter.
Products filter (right): filter by popularity, price, expert ratings, and customer rating. This filter is less technical but more personalized.
Quantity selector and add to cart button: users don't have to click the product to the product page to purchase. With the quantity selector, users can type in or use up and down arrows to set the quantity then directly add items to cart.
The contact us page structure remains the same as the medium-fidelity version. The design is standard but only contains sufficient information such as an address, phone number, business hours and an interactive map. The email address is replaced by a contact form. Using a contact form can show the professionalism of the business and protect the business inbox from spam.
Join the Club
A promotional banner: In this example, the promotional banner is used to promote the wine clubs
A comparison table to compare the benefits of different levels of membership. Neilson Norman Group has an article about the three most critical activities that users perform. Comparison is one of the most critical activities. Comparison tables can help users have a clear understanding of the membership packages at different levels before making their decisions. Five major benefits are highlighted and details of each benefit can be found by clicking the yellow arrow to unfold each box. Users will be lead to matching application pages when click the club's name or the buttons at the bottom of the list.
Below is a short prototype video:
The validation test is conducted with 5 users. The users were asked to use the current site and do a bit of research on the winery via search engines before seeing and trying the prototype of the updated version. The results show that:
5/5 users think the new site structure is easier to adapt and make sense to them
5/5 users find the winery live information section is useful and convenient
4/5 users find the re-branding of the site is visually appealing
5/5 users think the online store redesign aligns with their expectations of a trustworthy e-commerce page.
Thanks for reading. I'm not affiliated with nor work for Barrel Oaks. The UX case study is done for educational experience purposes.