Designing an eCommerce website for a French wine company, that supports a subscription service and is mobile responsive

Role: UX Designer + Researcher

Scope: Design a mobile responsive website for a wine company, with a wine club and eCommerce functionality.

Process: Empathize - Marketing + competitor research, user interviews; Define - user personas, project requirements, sitemap, content strategy; Ideate - Task + user flows, responsive mid-fidelity wires; Test - High-fidelity prototype, usability testing, priority revisions.

Project Background

Le Grand Verre was in the process of extending their brand and into the US market, with an emphasis on being a leader in the subscription wine space as well as being more appealing to retail buyers. The existing version of its site was inconsistent in style, branding, and structure throughout each page. It was difficult to understand their product offering and make a purchase, the wine club was confusing in its features and check out, and retail buyers could not tell what product it was they could stock on their shelves.

Objectives

Design an eCommerce website that better communicates the brand, it’s unique value propositions, and it’s products. All while being mobile responsive and having a wine club that is easy to understand and subscribe to.

Secondary Research

Starting with Market Research, I spent time familiarizing myself with the wine industry in the US. Approached the task with these questions in mind: What are the wine-drinking demographics? Have trends in the Bev-alc space affected wine sales? What do the direct-to-consumer and single-serve eCommerce landscape look like? How can LGV stand out amongst the pack?

Demographics:

1. Millennials (25-42) and Boomer (54-73) each make up 34% of the total wine marketing.

2. 54% of wine drinkers are female and 46% are male.

3. 14% of people drink wine more than once a week, 35% drink wine less than once a week

Industry insights:

1. Direct-to-consumer wine sales grew by 500% in the first half of 2020.

2. Wine shipping has been up by 20%, with online sales account for 11% of revenues.

3. According to a 2018 industry study, consumers are more likely to try a brand if they have stories and values along with competitive pricing.

4. Single-serve and other Bev-alc companies have grown by as much as 200%, with wine second only to hard seltzers and tied with beer sales. 

5. Smaller bottle sizes have seen positive growth year over year since 2015.

To determine how Le Grand Verre could compete against more established competitors, I conducted a Competitive Analysis on their strengths and weaknesses. This allowed me to discover areas of familiarity as well as opportunities to improve the customer experience.

Primary Research

With market and competitive research sorted, the next step of my research involved conducting 1-on-1 User Interviews.

Four people were interviewed. 3 women and 1 man, between the ages of 26 and 31. Two of the women and the man have ordered wine or alcohol online before, the remaining woman had just decided against buying from Usual Wines despite being very tempted to do so. Two of the participants were from Chicago, one lives in New York City, and one lives in Oakland. I was able to distill their insights into the following needs and pain points -

Needs/Desires:

1. To be able to buy the wine they like at a reasonable price.

2. For the checkout process to not be a hassle.

3. To buy from companies that resonate with their lifestyle.

Pain points:

1. Wine companies hid a lot of information or showed a lot of irrelevant info, making decisions hard.

2. Wine clubs and subscriptions were confusing and they felt that an overcharge or scam was inevitable.

3. It’s hard to tell if you’re buying from a good source or that the wine is good or that you’re getting your money’s worth.

User Persona

From those needs and pain points, I was able to create a User Persona to represent what an ideal Le Grand Verre customer would look like. This helped me empathize with the customer as I built features to suit their needs. So, let me introduce you to Ellie - a busy Marketing Manager nearing 30, who is motivated by a need to live a lifestyle of exploration and sharing.

Project Goals

I then analyzed where the Business Goals and User Goals overlapped in regards to this redesign and came to the following conclusions based on the above research. Both Le Grand Verre and its potential customers wanted:

1. An easy to navigate site that didn’t hide any information.

2. A simple path of purchase from entering the site and learning about its products, to checkout.

3. A wine club that didn’t obfuscate it’s visitors and instead gave a compelling reason to subscribe and save.

Sitemap

We had discussed all of the features and pages the client requested as well as those discovered and research. I created a Sitemap of all the proposed web pages and structured them in such a way that helped me visualize what the eventual Le Grand Verre website would look like and how the basic navigation would be.

User Flow

With the site map charted out I moved on to creating User flow & Task flow, this helped my team and the client visualize the path a user would take on the site.

USER FLOW

The user flows I devised took a look a look at Ellie’s journey through the app, based on instances she might visit the page. Additionally, there’s an example that shows the path a wholesaler might take to learn about the product.

Sketching

Before diving into full wireframes and a homepage mockup, I started Sketching a few solutions to discuss with my marketing team and developer. This exercise was a good way to get out content and design ideas in alignment with technical ability, where we found that a preferred design direction (v2.0) would be far too complicated to implement with our development team.

Mid-Fidelity Frames

WIREFRAMES

After sketching, I created mid-fidelity wireframes of the pages as laid out in the Sitemap. Some of the UI assets from our design system were used in this phase to speed up the design process, although certain parts later changed in the high-fidelity phase.

High-Fidelity Wireframes

In collaboration with our UI designer, I helped create High-fidelity Wireframe based on the recommendations I uncovered in initial testing of the prototyped mid-fidelity wireframes.

Prototype

A High-fidelity Prototype using the high-fidelity wireframes and the testing I conducted on them. I used Figma to create the prototype taking into account changes in UI and functionality that were implemented.

View the high-fidelity prototype here

UI Kit

Finally, I prepared a UI Kit using the elements I included on the high-fidelity prototype. This guide includes all colors, font sizes, icons, components, and other graphic elements that the Le Grand Verre responsive site is built out of.

Key Takeaways

1. Don’t delay/skip/put off the Content Strategy

   Our client being in France meant that the scheduling of feedback and review suffered. This is also while the client was highly enthusiastic and collaborative on the design aspects - it didn’t help that we were working on packaging in parallel to the web project. With our resources and timing stretched over projects, the content strategy was half-implemented as we completed our work. This came to bite design later as we ended up having to make big changes based on content re-writes later.

2. Follow the research not the “wouldn’t it be a good idea if..”

   It’s easy to get lost in the sea of ideas when working on novel parts of a site. In our case, the wine club and how it works became an endless source of options and ideas. However, the solution we went with ultimately came from researching existing clubs and subscriptions in eCommerce and an analysis of the shipping and warehousing capabilities of the client.