CLUB SODA
Client project
Responsive mobile website
Club Soda is a mindful drinking movement that claves in helping mindful drinkers — people who want to reduce their alcohol intake or completely stop it — without feeling disconnected from their society and entourage for that reason. The sense of community, acceptance, support, and inclusivity are their main drives and motivation.
OPPORTUNITY
In addition to their great variety of support programs, education, events, and big festivals, they have a dedicated pub guide website that helps people find venues that offer low & non-alcoholic drinks in any desired area within the UK. With their venue scoring system, not only they provide very accurate information to the users of the guide website, but they also encourage venues to step up their game to meet the requirements to be listed on the Club Soda Website. Lastly, they want to raise low & non-alcoholic drinks brand awareness. The challenge here was to redesign the website with a mobile-first approach, ensuring that the website is responsive to mobile devices so customers can use the website easily on the move.
Discovery and Research
EXISTING PERSPECTIVES
Our first task was to understand whether there are any other websites in the existing landscape that offer a similar service. After careful analysis of existing competitors, we found no direct competitors to Club Soda.
​
A great example of a company pushing a similar social movement is the Sustainable Restaurant Association. They work directly with restaurants to encourage them to demonstrate more sustainable operations, for example, minimising food waste. Therefore, for individuals who want to go to more sustainable restaurants, the SRA will guide them to the best restaurants. Even though the SRA is not a direct competitor to Club Soda, it was interesting to see how a company would help a user navigate towards an end goal and how they would use the website to achieve this.
TESTING THE CURRENT WEBSITE
How can we identify the current issues that a user may be experiencing?
We set out to test the existing website using a series of tasks based on the business and user goals that Club Soda established. I was responsible for designing a set of task scenarios that would help us deconstruct the website.
​
Task scenario 1: You are want to find a pub near your current location that accommodates mindful drinking.
Please walk me through how you would go about doing find a venue on the website.
Our testing results revealed that participants:
​
1. Failed to find a venue because it was difficult to pinpoint the current location.
​
2. Found it difficult to find the search bar to look for a venue. Overall the navigation wasn't intuitive.
​
3. Were distracted by other menu elements of the website which made it difficult for them to understand what the purpose of Club Soda is.
USER RESEARCH
We created an online survey to study users' drinking habits. It received 118 replies. 60% of users post to visit a venue twice a month or more. Also, 90% of users have ordered a non-alcoholic at least once in the last six months. About users behaviour, we found that for users the location is important to 55%, follow friends acquaintances 37%, review or ratings are important to 20%.
With our focus on a user-centred approach, we ran some user interviews to gain a more in-depth understanding of a user’s current drinking behaviours, their motivations and the social impact of those decisions. Generally, people felt a level of social pressure that would affect their decisions to drink. It’s the idea that if they don’t drink in a social environment, they would be subjected to judgment and isolation.
AFFINITY MAP
We also created an affinity map which greatly increased our understanding of the space since we let the actual user quotes form the themes which were primarily based on feelings rather than general groups.
The main themes emerged:
​
1. Self-awareness
2. Social impact
3. Positive thinking​
Define
USER GROUPS
The user research helped us define what the most prominent motivations were to change drinking behaviours.
As a result, we created 3 specific user groups:
​
1. They don’t like whom they become when they drink.
2. They feel like they drink too much.
3. They are concerned about their health.
​
We defined one empathy map for each user group, and this practice led to the creation of our proto personas.
PERSONAS and SCENARIOS
SANDRA is a 34, retail manager for a luxury brand in London. At the weekends, she used to go out for dinner and drink with her husband and close friends. Because she was recently diagnosed with IBS, she needs to limit her intake of alcohol. She doesn’t want to affect her social life because of her condition.
​
SCENARIO
Sandra starts planning a date night for her and her husband. She starts looking for venues that offer food as well as a variety of low or non-alcoholic drinks since she was diagnosed with IBS recently.
KRISTIN is a 31, account manager for an advertising company in London. She has a very busy lifestyle with networking events and client meetings, which make her feel pressured to drink and be more sociable with her colleagues.
​
​
SCENARIO
Kristin just closed a large deal at work and wants to celebrate with her team after work. She opens Club Soda website to get inspiration for locations that offer non-alcoholic options so she doesn’t feel left out.
Design
​
DESIGN STUDIO
After intensive user research, we had the pleasure to attend a design studio with Club Soda. Well, it was my first client design studio ever so I feel emotional when I remember it! We organise two rounds, one for Kristin scenario and one for Sandra scenario. Both my team and Club Soda came out with numerous good ideas.
​
We agreed to focus on the following features:
-
searching a venue by tags
-
a drink swapper game to suggest non-alcoholic alternatives.
​
INFORMATION ARCHITECTURE
The usability testing of the existing website indicated that the categorise were confusing and did not give a clear understanding of how Club Soda helps mindful drinkers. With this in mind, we decided to conduct an open and closed card sort to re-categorise the menu bar and ensure the website becomes easier to navigate.
PAPER PROTOTYPE
Using a paper prototype, we conducted usability testing and iterated our design in a low-fidelity prototype. Our participants provided feedback on how they find a venue, find drinks brands and how they can choose a specific venue.
LOW-FIDELITY TO MID-FIDELITY
​
User flow 1: SANDRA
​
User flow 2: KRISTIN​
UI DESIGN
Before moving the prototype into high-fidelity, it was important for us to explore the branding and tone of voice needed for the final design. These design decisions made at this point of the project ensured we continue to demonstrate a lean UX process.
The exploration into Club Sodas’ brand values and related imagery helped build the foundations for the style guide, looking specifically at typefaces and colours that would be used to support content hierarchy and interactive elements.
Deliver
​
FINAL PROTOTYPE
The exploration of UI design and usability testing results gave us the foundations to create our final prototype. We designed a mobile responsive website that helps people find places that accommodate for mindful drinkers. The app also offers the opportunity for mindful drinkers to educate themselves on non-alcoholic, or low-alcoholic, drink brands and where these brands are available. As you can see, the app uses geo-location settings to provide the user with nearby venues. It offers a map and list view of each venue, whilst listing all the important details, such as the Club Soda rating, location, opening times and categorisation tags to provide more detail about the venue.
​
TAKEAWAYS
We gained some extremely positive feedback from Club Soda - making reference to our ability to create an innovative design that is sensitive to user pain points, whilst meeting stakeholder business goals. Additional opportunities for development would look at improving the venue onboarding system and enhancing the desktop experience.
Club Soda is looking to use this prototype in a presentation to Heineken as an example of how drink brands can promote low/non-alcoholic drinks.