Redesigning the Club Soda Guide

Helping to increase users’ engagement with the site and to decrease users’ consumption of alcohol.

A 2.5 week sprint in a team of three UX designers (myself, Catherine and Hugo) as part of General Assembly’s UXDI course. My team decided from the outset that each of us wanted to be involved in every stage of the process so my role covered UX research, UX/UI Design and Product Design.

The Client Problem

The Club Soda Team laid out the following brief:

• Improve the general UX of the Club Soda Guide, with an emphasis on drinks over venues
• Create a simple way for users to discover drinks based on different criteria and recommendations
• Reduce friction points for users to find the drinks they want
• Incentivise users to find low and no alcohol drinks
• Explore ways for users to share more meaningful feedback on drinks than traditional reviews

The KPIs that Club Soda were looking for are:

• The number of individual visitors and returning visitors
• The number of drinks brands signing up

Digging into Club Soda’s Google Analytics, my teammate Hugo found that the Club Soda Guide has a 49% drop off after the landing page. Although the Join Club Soda site (which is separate from the Guide) and the brand’s social media channels have a large following, the Guide doesn’t. We needed to begin our user research in order to find out why, and to create a solution.

The User Problem

We interviewed 16 users, most of whom were suggested by Club Soda and fit within a fairly small demographic. Our other interviewees, who included more of a variety of users, were sourced through a screener survey. Based on our insights, the key reasons for the low engagement with the guide were:

• There is little content on the site for users to engage with
• The site offers no guidance for users when choosing drinks
• Users tend to find a drink they like and stick to it, so no longer need the site
• Users get drinks ideas from friends, or in the supermarket
• Users browse and buy drinks on competitor websites

So we needed to find out what kind of content and guidance would keep users coming back to the site. Affinity mapping our interview notes, we gained the following insights into what our users would and wouldn’t want to see on the Guide:

Reviews:

• Users like reading reviews and recommendations
• People’s tastes are subjective, so users want to see an alternative style of review than just ‘I liked…’
• Some like to read customer reviews, while others prefer insights from industry experts

Help finding drinks:

• It’s difficult to find alcohol free drinks that are sophisticated and complex in flavour
• Users want to try new drinks, but often stick to what they’ve tried and enjoyed before
• While the choice in supermarkets is limited, the choice online can be overwhelming, so users need help to find the drink best suited to them
• Information on how drinks are made helps users understand the price
• Many users gave up or are cutting down drinking for health reasons, so are interested in information on calories, sugar content, gluten etc.
• Interesting information about how drinks are made would fill a gap for users who enjoy e.g. learning about and discussing wines

Ability to save to favourites:

• Users would enjoy a profile page with favourites and reviews saved — one user said: ‘that would make me check the site more’

Venues:

• Users are interested in the drinks stocked in their local area, but are unlikely to choose a venue based solely on the drinks on offer, as the food or friends are more important

Who

In order to remind ourselves who we were designing for throughout the process, we needed to create a persona. Our users seemed to be divided into two categories, reflected in these two user personas:

• Terry, aged 58, has never felt better since he stopped drinking so plans to stay sober.
• Hazel, aged 27, is cutting down her drinking to better balance her job and her social life.

I drew up the following problem statements to highlight their goals and pain points:

• Terry needs a way to find and learn about non-alcoholic drinks, as he currently misses having high quality drinks to discuss with his friends and to offer his dinner party guests.
• Since a lot of Hazel’s social life is based around drinking, she needs encouragement to cut down, and she needs help finding drinks suited to her tastes as she is currently overwhelmed by her choice.

The Club Soda Team leaned towards a primary user within Terry’s age category. I interviewed the head of Wise Bartender, however, where many of the Club Soda users purchase their drinks, and found that their largest group of users were 25–34 year old females. Referring back to Club Soda’s Google Analytics, Hugo found that 61% of Club Soda Guide users are aged 18–34, 62% are female, and this category accounts for 80% of the bounce rate. As a result, we decided that Hazel should be our primary persona.

I created a user journey map to bring Hazel’s key pain points into focus. This highlighted that Hazel:

• Is overwhelmed by the choice of drinks and needs guidance
• Needs more information such as reviews in the product description that help her to know what the drink actually tastes like
• Needs an easier way to buy the drink online or find it in a venue

Based on these key pain points Cat drew up the following how might we statements to help us begin to imagine a solution: how might we…

1. Make it easier to find alcohol-free drink alternatives
2. Categorise drinks to make it easy for users to navigate the guide
3. Customise drink recommendations based on user preferences
4. Incorporate reviews into product descriptions

What

We facilitated a design studio with our client to generate some ideas for what a solution might look like. We used dot voting to highlight our favourite ideas, and together came up with some great stuff.

The following key ideas came out of the design studio:

Categorisation to help users find drinks:

• Drinks organised by occasion and time of day as well as by type
• Drinks guide filters
• Offers and staff picks

Customisation to help users learn which drinks are suited to them and to encourage engagement with the site:

• Drink finder quiz
• Save favourites to profile

Product description to inform users and give them more to engage with on the site:

• ‘Where to buy’ and ‘where to drink’
• Food pairings
• Similar products

Reviews to give users a better idea of what the drink tastes like and to build a sense of community:

• Staff testimonials
• Customer flavour ratings
• Short customer reviews

How

Hugo iterated on each of our initial user flows, creating a refined version in which Hazel could take the flavour finder quiz or browse products according to occasion and time of day, and then see the drinks recommended specifically to her tastes. By creating an account Hazel would then be able to save these products to her profile. Going through this helped us to simplify and prioritise the features within the flow.

Testing Low-Fidelity

Based on this flow, we created a first iteration of a prototype. We conducted one usability test as a group, Hugo tested one user, and I tested the prototype on two others to find any problems they had which we could then iterate on.

INSIGHT 1

When we asked our users to take the flavour finder quiz, three of our users struggled to find it. They thought that the ‘what’s your flavour’ button on the home page was just a banner, so in our second iteration we added a ‘take quiz’ button to make this clearer.

INSIGHT 2

Three of our four test subjects struggled to navigate the drinks guide as they didn’t realise the header was a carousel they could slide across for more options, and they didn’t understand what was meant by ‘time’.

In our second iteration, we changed the whole architecture of the drinks section of the site, by creating an entirely separate feature where drinks are organised by time of day and occasion, and keeping the main section to drinks organised by type. We made it clearer that users could slide across the carousel by making the options go off the screen.

Testing Mid-Fidelity

With our second iteration in hand we conducted one usability test as a group, Hugo tested it on one more user and I conducted another three usability tests.

INSIGHT 1

Three of our testers commented on the spacing in the main navigation, which they felt was odd. Two of our users mentioned that they would have liked to see more information about Club Soda, right at the top of the homepage. We added some information about the brand and redesigned the main navigation bar in our most recent iteration.

INSIGHT 2

Four of our users commented that the flavour ratings would be really helpful, but three also said they wanted to be able to read and write reviews, so we added quotes from customers as well as from the Club Soda team in our high-fidelity prototype.

INSIGHT 3

Four of our five users struggled with the flavour finder quiz, suggesting that the flavours didn’t reflect the kinds of drinks they like to drink. They wanted to choose the type of drink before selecting the flavour, so we added in another page to the quiz to reflect this. We also made it more intuitive by keeping the options to a page, since our users struggled to navigate the scroll and were overwhelmed by the choice.

In our user interviews, many Club Soda users commented that they enjoyed the look of the current website. One user felt the fonts are ‘accessible and friendly’, and another commented that the site’s aesthetics made it feel ‘nonjudgmental.’ As such, when we developed the high-fidelity prototype, we continued to use the design system created by Club Soda.

Proposal

Our final prototype, which you can view below, incorporated our insights from these tests as well as from our interviews in order to create a site that is fun and intuitive for users that they will keep coming back to.

Our design would serve Terry thanks to its accessibility and ease of use. He would enjoy being able to find and learn about drinks suited to particular occasions, such as dinner parties, so that he could share and discuss sophisticated alcohol free drinks with his guests.

Most importantly, however, Hazel would be able to easily find, learn about, save and buy drinks tailored to her tastes, which would encourage her to continue using the site and to have a healthier relationship with alcohol.

Club Soda Prototype Walkthrough

Our client was delighted with our work. The co-founder, Laura Willoughby, said following our presentation:

‘It’s really fantastic…you’ve done really well to incorporate what is a complex set of things really simply’.

In light of the primary objective of our brief, which was to increase user engagement, I was especially pleased with the comment from Anja Madhvani, the brand’s content editor:

‘I can actually imagine someone using that, and coming back to it, something we’ve always struggled with with the guide’.

Next Steps

Our next steps would be to do further usability testing to refine the current prototype even further. We also hope to expand the user profile page and, since many users struggle to find the Guide from the main Join Club Soda site, to work towards integrating the two more intuitively.

Key Learnings

• Approaching this complex problem with many different layers to it in a limited time, it was really important to prioritise and simplify. I learned a lot about the need to not develop every feature that would be valuable, but to take the time to work on fewer features to a higher standard.
• Club Soda were fantastic to work with and taught me a lot about working with clients and learning from each other.
• It was great to work in a group and I learned even more about working collaboratively using Agile processes.