Case study: How might we make it easier to find alcohol-free drink alternatives?

Catherine Gates
Bootcamp
Published in
9 min readMay 4, 2021

--

A mobile-first redesign of the Club Soda Guide website, over a 3-week sprint on a UX Bootcamp. Our team consisted of three people — myself, Hugo Altendorf and Eliza Edwards.

My Role:

  • I led our remote design studio with the client, the creation of our two personas, problem statement and project-managed throughout using Trello.
  • As a group, we shared tasks conducting user interviews, affinity mapping, competitive/comparative research, user flows, user journeys, sketching and wireframes to the final prototype.
  • The project finished with a group presentation and a full high-fidelity prototype walk-through.

“Ever-increasing numbers of people are looking to change their relationship with alcohol, Club Soda believe that low and no alcohol drinks play an important role in helping people do so”.

Three iPhone screen mock-up showing final hi-fidelity wireframes.

Who are Club Soda?

Club Soda is a mindful drinking brand and platform established in 2018, that helps you live well by being more mindful about drinking. Whether you want to cut down, take a break from alcohol or stop drinking.

The Club Soda Guide aims to help consumers discover low and no alcohol drinks and know where to find them (whether online or in venues) in the UK. The Guide brings together drink brands, venues and consumers in order to find the best drinks options out there.

The Guide currently lists over 1000 drinks and over 3000 venues as well as attracting around 100 individual users a day.

The Brief:

  • To carry out a redesign of the Club Soda Drinks Guide website that emphasises drinks.
  • With the aim to create a more intuitive guide that navigates and curates the user to products and places.
  • Which can then be integrated into the rest of the Club Soda business.

What is the current Business Problem?

Analytics pulled from the guide website showed that it has a 49% bounce rate meaning that nearly half of the people arriving on the website leave without clicking through or browsing further.

Why do we think users are dropping off the site?

Because currently the guide isn’t helping users make decisions and they are likely going elsewhere and not returning as the lack of detailed advice and content doesn’t give them a reason to.

Key Business Goals:

  • To increase the number of individual visitors to the site
  • While also increasing returning visitors
  • This will then ultimately, encourage more drinks brands to sign up

The User Problem:

  • To either stop or reduce their alcohol intake by finding great alternatives to their favourite alcoholic drinks.

The Discovery Phase

We started the process by interviewing 16 users made up of some who were familiar with the Club Soda brand and others that weren’t.

We wanted to find out why the Join Club Soda website and social media channels have such a strong following while the guide doesn’t.

Reasons we discovered:

  • Users tend to find what they like and stick with that.
  • They will go to friends for recommendations or just find what’s available in their local supermarket.
  • They also might have been redirected to collaborator and competitor eCommerce sites and instead return there.

User Insights:

To take you into more detail — stand out insights were in regards to reviews, finding drinks and occasions when people drink.

Reviews:

  • We found that users like some form of review or recommendation.
  • But find that reviews to do with flavour are very much subjective.
  • There were mixed opinions on the preference of style of review, some prefer users reviews while some would value more ‘expert’ reviews.

Finding Drinks:

  • As mentioned before — Users are most likely to find their drinks in the supermarket and are therefore limited by the selection available to them.
  • However, when they move online they can often find the choice to be overwhelming.
  • Users are interested to know and understand how these types of drinks are made and how this is reflected in the price point.

Occasions:

“I like to treat myself once a week on Friday with kombucha.”

  • Users will choose to drink alcohol-free drinks for exactly the same occasions they might have opted for alcohol.
  • Showing it is very much about the overall experience — that feeling of a treat or reward rather than necessarily the feeling of alcohol.

“ You can get almost the same experience with an alcohol substitute.”

Further insights were about flavour preferences, social stigmas and finding venues.

Flavour Preferences:

  • All users wanted to try new drinks but often find they get one that they like and stick with that.
  • They are looking for “grown-up alternatives” — drinks with more sophisticated and complex flavours.
  • They are interested to know what’s in the drink, for example — calorie and sugar content, gluten, etc.

Social Stigmas:

“Alcohol is ingrained in the culture of most countries”

  • Users have many different motives for wanting to reduce their alcohol intake but often find it frustrating having to explain themselves to others and therefore would like drinks that make it less obvious that they are not drinking when in social settings.

Finding Venues:

  • Users said they’d like to know about the best venues in their local area but would not necessarily choose where to go based on the drinks selection saying that the food and the company of friends were more important when choosing where to go out.

Discover Learnings:

  • This was a really interesting topic to research to understand consumer behaviours, motivations and the impact social stigmas have on these.
  • I learnt how important it is to seek diversity during the research phase to ensure you are getting the full picture and not to carry over the client’s assumptions.

Define

From these insights, we were able to draw up two personas. These personas represent two different types of user demographics.

Terry — who is the older of the two and has given up drinking entirely, he’s looking for ways to entertain his friends at dinner parties and make the alcohol-free drinks selection just as enjoyable, interesting and complex to discuss over dinner as it would be with alcohol.

Hazel— is in her late twenties and just starting out in her career. She works in PR which involves many evening events during the week, she wants to cut back her alcohol intake at these events and keep it strictly for weekends with her friends.

Back to the Google Analytics

To help us choose which persona to make our primary, we went back to the google analytics which confirmed that —

  • 61% of Club Soda Guide users were aged 18–34 and predominantly female and account for 80% of the bounce rate.

… This brings us back to Hazel

A template showing the persona, Hazel, 27 from London. Including Hazel’s scenario, behaviours, goals and paint points.
Primary Persona — Hazel, 27, Junior PR Manager, London

“Hazel needs a better way to source and find alcohol-free drink alternatives because she wants to reduce her alcohol consumption during the week when attending work events so that she has more energy to do her job well.”

We continued by creating Hazel’s user journey map.

Hazel’s user journey map, highlighting struggles she has when browsing the current Club Soda website.

Define Learnings:

  • During this phase, I learned how to choose between multiple personas and how to back up that decision.

Develop — The First Design Studio

This helped us to really get behind potential features that we wanted to focus on and prioritise. We could relay user insights to the Client and really work out how to make their business goals fit with the user needs.

A collage of paper sketches used in a design studio with the client, it includes markings to vote for the most popular ideas.
Design Studio, №1 with Client.

Feature Prioritisation — How Might We…

Make it easier to find alcohol-free drink alternatives?

  • ‘Where to buy’+ ‘Where to drink’
  • Food pairings
  • Similar products
Three iPhone screen mock-ups showing final, hi-fidelity wireframes of the product pages.

Categorise drinks to make it easy for users to navigate the guide?

  • Drinks by occasion + Time of day
  • Drinks guide filters
  • Offers + Staff picks
Four iPhone screen mockups of the final hi-fidelity wireframes showing the browse pages and categories.

Customise drink recommendations based on user preferences?

  • Drink finder quiz
  • Save preferences to profile
  • Favourites
Three iPhone screen mock-ups showing the final hi-fidelity wireframes of the quiz start, ending and the profile page.

Incorporate reviews into product descriptions?

  • Staff testimonials
  • Customer flavour ratings
  • Short customer reviews
Two iPhone screen mockups showing the final, hi-fidelity wireframes of the product review section.

Hazel’s flow through the Club Soda Guide website — and how it’s solving her problems and the business problems

A user flow highlighting elements that are relevant to both the business, Club Soda and the user persona, Hazel.

Test, Test, Test.

We tested with 4 users then 5 users and iterated at each stage of the Design Phase to ensure that the flows in the website were intuitive and seamless.

Points for focus and iteration that came up from testing were-

  • What is and how to get to the Flavour Finder Quiz?
  • How the filters worked and were arranged.
  • Information on who are Club Soda.
  • Users wanted to be able to include short written reviews as well as flavour ratings.
Two mockups, showing the before and after greyscale wireframe iteration for the flavour quiz.
Quiz Iterations
  • 3 out of 4 users couldn’t find the taste test.
  • 2 out of 4 users thought ‘what’s your flavour?’ was just a header.
Two mockups, showing the before and after greyscale wireframe iteration for the product page navigation and back arrows.
Filter Iterations
  • 3 out of 4 users struggled to navigate the drinks guide.
  • 2 out of 4 users tried to go back and couldn’t.
Two mockups, showing the before low-fidelity and after hi-fidelity wireframe iteration for the navigation bar and brand story section.
Navigation Bar and Brand Story Iterations
  • 3 out of 5 users didn’t like the aesthetic of the main navigation.
  • 2 users wanted information about Club Soda to be more prominent.
Two mockups, showing the before low-fidelity and after hi-fidelity wireframe iteration for the product review section.
Flavour Ratings and Written Review Iterations
  • 3 out of 5 users wanted to be able to read and share written reviews as well as flavour ratings.

Develop Learnings:

  • I was challenged working with the brand design system and aesthetics as it consisted of a lot of very strong colours, it was hard not to get carried away and have something that looked ‘tacky’. As a group, we all had a different vision of what looked best and when — ‘too much, is too much’ or ‘too much, is never enough’.
  • I learnt how to iterate on designs while keeping the group on board and engaged with changes and decisions being made.
  • By duplicating the design numerous times and creating multiple colourways and arrangements, everyone could view it in their own time and vote for their favourite.
  • This meant, that although the group disagreed on the direction, at times, we were able to come to a compromise that everyone was happy with and ultimately worked for the user and the client.

Deliver — The Prototype and Proposed Solution

Have a try of our prototype and proposed solution.

Client Feedback

“It’s really fantastic, we don’t make things very easy having so many moving parts to what we want to do. You’ve done really well to incorporate what is a complex set of things really simply. It’s really exciting!”

— Laura Willoughby MBE, Co-Founder and Director of Partnerships, Club Soda UK

“I really enjoy the simplicity of it.”

— Dru Jaeger, Co-Founder and Director of Programmes, Club Soda UK

“It’s really fun to see, from those drawings that it’s turned into this flow and I can actually imagine someone using that and coming back to it, whereas something we’ve always struggled with, with the guide, is getting people to actually tune into that regularly. So it’s really nice to see some of those ideas form a bit of a plan. It’s really cool.”

— Ana Madhvani, Content Editor, Club Soda UK

Next Steps

  • Further usability testing of the high-fidelity prototype.
  • Expanding other flows and pathways on the website, including — user profile, sign-up/log-in, and content pages.
  • Integrating the guide site into the main Join Club Soda website.
  • Developing the Venue Guide section of the site.

Key Learnings

  • I learnt a lot about handling brand aesthetics and design systems with that of my own and the group when sharing UI sections of the project.
  • How to present user findings to a client in a way that they understand and support even if it doesn’t go along with their initial assumptions and points of view.
  • How challenging it is to make something simple!

Thanks for reading, you can find me on Linkedin.

--

--