Online wine shopping made simple.

The Challenge

During the COVID-19 pandemic lockdown, I went online to shop for wine and found that Great Grog’s website is challenging to navigate, search and select wine. The website look and feel was outdated and the whole shopping experience could be much better. I decided to help redesign their website as part of my project - here’s my project brief.

From the initial chat with the Great Grog team, I found out that with lockdown, and supermarkets running out of wine, they had a significant peak in online orders. From around five to eight orders per day to nearly 100, coming from their website. That’s a lot for a local company that had the majority of their business done face to face.

The pandemic accelerated the shift to online shopping. Great grog has the opportunity to grow its online presence by providing customers with a delightful online wine shopping experience.

How can I help Great Grog refresh its current website and optimize the way new and current customers use the website to allow them to navigate more intuitively, choose wine easily and place an order using a simple checkout process?

The Solution

My solution will be to re-design a modern, responsive and visually pleasing website for Great Grog, and improve site navigation in order to provide customers with a simpler and more familiar way to search, browse, filter and buy products.

Research

In order to be able to design the right solution for Great Grog, I had to first understand their business and the market they are competing in, as well as understand and empathise with new and current customer needs, behaviours and concerns. I’ve put together a research plan.

Methodologies

Secondary Research:

• Expert Base Analysis - A Heuristic Evaluation of the current website design to identify potential improvement areas.

• Competitive Analysis - To identify trends, gaps and patterns used by other similar businesses, I’ve analysed their websites and offerings.

Empathy Research:

• Qualitative Research - I met four people and conducted Zoom Interviews (and observation of how they use the current website) to get into customers mindsets and behaviours.

• Quantitative Research - To further support my findings, I’ve created a survey using TypeForm and got more insights from ten participants.

Interview findings mapped using Miro.

Insights and opportunities

• 80% of the participants said they buy wine online

• 70% buy wine from a specialist wine shop

• 60% choose wine by grape, recommendations and offers/promotions

• 40% rated reviews and rating as important

• 80% like to explore different wines

• 40% spend under £7 per bottle

When it comes to wine knowledge, I identified mainly two groups: Those who feel they have reasonable knowledge and those who love wine but feel they had no clue how to go about and choose.

Participants also mentioned that they prefer to shop locally or from a family type of business. A personal touch, knowledge of what they sell, unique and better selection of wine, all contribute to the feeling of trust and lead to becoming a loyal customer.

There’s an opportunity here to leverage the passion and knowledge of Great Grog’s team by helping customers choose the right wine for them. More information about the wine, like taste and food pairing options will help customers feel they make better selections, while bringing forward the offers and promotions that the walk-in stores currently has.

From analysing the competitor’s websites, there is an opportunity to give Great Grog’s website a ‘facelift’ with a modern and trustworthy design, providing customers with the standard e-commerce experience they are familiar with. Also, an improved product category to help customers navigate easily, as well as better filtering options to cater to different needs.

Research findings synthesised from both interviews and survey:

Define

Now that I understand a little bit more about the market and the customers and have identified some opportunities for my redesign, it is time to clarify and define the areas of focus. The details of what will be designed, for whom, and how.

User Personas

I identified in my research stage, there are two main types of customers. One who is more knowledgeable and perhaps will fit into the current loyal customer position, and another, who might be a newbie and a potential new customer - I’ve created a user persona for both types: Let’s meet John - The wine lover and loyal customer and Alexa - The wine beginner.

I’ve also created empathy maps for John and Alexa.

Card Sorting

Before I move on with the rest of the design, I had to find out how people understand and categorise wine and other products Great Grog offer to help me map the website.

I have used an Open Card Sorting research technique. Participants were presented with a list of items to sort and label as they understand. Analysing the results will help me organize the website in a way that will be easy for the user to find what they want.

Information Architecture

Based on the card sorting results, I have created a sitemap to show how the site will be organized and how similar information will be grouped and categorized.

User Task Flow

The main task I’ll be focused on in my design will be buying red wine. I have created a user task flow, that shows how the user might interact with the website and the decision points as well two ways the user might get to the site: Triggered by a new to buy wine or by an email link with an offer.

Design

With a clearer idea of who the user is, what task to design for and how the website content should be organised, I could start sketching some ideas (with pen and paper) and then moved on to wireframe in Figma.

Wireframes

I have transferred my sketches into a more detailed representation of the screens I needed for the main tasks of buying wine. These are the mid-fidelity wireframes for desktop.

Home page, Listing Page and Product Page:

Basket and checkout pages:

Branding and UI Kit

High - Fidelity Design

I wanted to design a website that will have a modern look and feel and follows the same patterns the users are used to when they shop online. It was important to bring the offers and promotions to the front and to also cater for the novice wine shopper by having some of the staff selections.

Great Grog have a blog, which I also wanted to bring to the front and include at the homepage.

I have created an easier navigation and a wider filtering to help customers navigate and find what they want easily, as well as including more information to help them decide if the product suit their need, such as food pairing and customer reviews.

Below you can see the homepage, listing page and product page:

These are the screens which are part of the checkout process: the basket, shipping information and payment details.

Prototype and Test

I’ve connected the High fidelity screens, designed in the previous stage to a prototype and put together a usability test plan to test the main task - Buying red wine. Using Maze, I had 16 participants going through the usability test cases.

The main areas I wanted to test were:

• Overall user experience and impression

• Navigation and search

• Content and information of products

• The checkout process

• Additional user expectations

You can view the responsive design of the home page here. Where you can see how the homepage will look on a desktop and on a mobile device.

Usability Test Findings

Based on the insights I collected from evaluating user feedback I could identify areas for improvement to include in the next iteration.

Next Steps

The next steps will be to implement the additional changes identified in the usability tests and conduct another round of usability testing.

The changes in the next iteration will include the below:

• Add a new price next to the crossed-out price at the discounted wine cards - For users to instantly see how much they would save.

• Reorder the filters to bring filter by pairing up to customer view.

• Changes to copy on the homepage to align to common use - ‘Money-back guarantee’ for example.

Reflection

This project was born from a real pain my partner identified when trying to order wine online from his favourite place, during the covid-19 pandemic lockdown when we couldn’t travel to the shop as it was in a different area.

I enjoyed conducting the research for this project as I could test the website with users and see the issues they face on real time. It was a big joy to then test with some of the users that helped with the research and see their reaction to my re-design of Great Grog’s website, which made me feel proud of the work I’ve done.

I would have wanted to design and develop Great Grog’s website end to end, however the web site is the owners ‘baby’ and he is making changes on his own time. I’ve shared my designs and prototype with the owner of course. Looking at the website months after, I saw that some changes had been made, which resemble some of my design.

As a designer who is interested in results, if I could do the work end to end, I would defiantly be interested in comparing the statistics of user engagement and sales before and after the redesign.