‍^{My Role: UX/UI Designer}

^{Programs used: Figma, Miro, Zeplin, Lookback, Photoshop, Kap}

^{Project Duration: 11/12/22 - 07/03/23}

‍

Project brief

Town Whiskey is a new brand from the town of Robin Hoods Bay, designed for people who are looking for a high-quality whiskey at a reasonable price, as well looking for Eco-friendly solutions for climate change. Since the pandemic, Brexit and the war in Ukraine, we have entered very uncertain times. Many are battling money struggles as well as seeing intense weather changes, which more than ever is encouraging people to find cheaper solutions and reduce their carbon footprint.

I have been asked to research opportunities in this field and design the platform for my client, who is currently working on branding and the creation of the whisky.

‍

‍

‍‍‍The Problem‍

Many food and beverage companies are still not predominantly using recycled materials for their products. The percentage of people who are trying to live as Eco-friendly as possible is increasing. It appears that some people are struggling to find a balance between finding products they actually like, and products that engage in Eco-friendly waste management.

‍

The Goal

The main objective was to see how big of problem this is and explore whether new Eco-friendly products like this could help to inspire and educate Eco-friendly behaviour. This brand would offer features that would be an obvious solution to users who want to enjoy a premium whiskey, but also serious about reducing their carbon footprint.

‍

My Responsibilities

Qualitative/quantitative research, UX design, prototyping, animation, micro-interactions, visual design, testing, and logo design.

‍

‍

Process

My process is adapting and evolving with every project. It will be determined by the goals of the project, the problem/problems that need to be solved, time and resources. 

‍

The process I used to solve this problem was as follows:

‍

‍

‍

Competitive Analysis

In order to understand key objectives, marketing profile, strategy and usability of similar products, I went searching for some.

I could only find a handful of whiskey brands using 100% recycled materials as well as using renewable energy. Two of these brands were Nc’nean and The Macmallan. Both distilleries for these brands run off 100% renewable energy with the vast majority generated by on-site biomass boilers. In 2019, just 0.01% of Nc’nean’s waste went to landfill.

‍

‍

‍

Research Goal

Ultimately, the main research goal was to understand whether or not there were any opportunities in the market for this type of product. I was first interested in exploring what beverage companies do to help reduce pollution, and how climate change is perceived by different demographics. It was important to find the people most likely to be seeking whiskey products, whilst also open or actively looking for ways to reduce their own carbon footprint. Before any interviews were conducted, I first looked into some external study data to discover some current empirical facts & figures. I then interviewed 3 people, and surveyed a total of 77 adults. The results would contribute to some of the final products key features and themes.

‍

External Studies

‍

Study on other food & beverage companies and climate change figures:

Although the larger external studies online are not always fully reliable or accurate, some of the findings were found to be consistent with the small amount of data that I later obtained from surveys and interviews.

Some findings from a recent survey by the “Journal for Waste Resources and Residues”:

_{- Only 5 out of 6 of beverage companies use only 7% recycled materials}

_{- Large beverage companies together make up a whopping 93% of aquatic plastic & glass bottle pollution}

_{- Glass bottles are more than four times as damaging to the planet as plastic ones because they require far more energy and natural resources to produce}

‍

Age Demographic & climate change

Regarding climate change and the age demographic that appears to be most concerned about it, I found a large study conducted by the University of Auckland Human Participants Ethics Committee and the Pew Research Centre.

‍

Here is a data graph taken from over 27,000 citizens across the 28 European Union countries. It shows that those aged 15–24 years old are more likely to be concerned about climate change than those aged 55 and over. This data is however a few years old (2017):

‍

‍

Who Drinks Whiskey?

Another question before conducting my own research was: which age demographic actually drinks whiskey? There is an external study by the magazine "Scottish field", which found that 84% of whisky drinkers in Scotland start to enjoy whisky before the age of 31, and 42% after the age of 22.

‍

Surveys & Interviews

Following the external studies, I interviewed 3 whiskey drinkers who were between the ages of 26 and 31, and surveyed a total of 77 adults. The purpose was to find clear evidence backing what the external studies had found, pain points, current similar products, feature ideas, and whether there was a gap in the market for this kind of product.

‍

‍

Research Synthesis: Themes & Opportunities

In order to narrow down some feature ideas for the app, I created an affinity board from the interviews & surveys.

‍

‍

‍

‍

After going through all the data, I produced 12 top features for potential solutions and prioritised them according to risk & value.  

‍

‍

Early Proposal

I proposed a design with easy accessibility to all important features & with a strong sense of heuristic control and easily accessible information on all aspects of the product.

^{- Design: Emotionally effective (colours, icons, brand logo)}

^{- Navigation: Easily understandable transitions}

^{- Animation: Visually appealing, particularly when user is waiting for something (loading)}

^{- Features: Lots of information on steps taken to help the environment and optional CTA for how the user can also help}

‍

 “Crazy 8” sketches/ideas

‍

Onboarding

Below are some flowcharts, which detail some of the key user flows throughout the site, as well as all the potential features. When moving into the development phase of this app, flow charts like this will lower the workloads for engineers/developers & highlight any problems that may be present.

Upon opening the website, users will be guided through the “Sign In” &/or “Sign Up” page(s) before progressing to the main default “Home” page. My client insisted upon having users sign in/sign up upon site entry in order to help establish a customer email list at the start of the business. This is something that is an ongoing discussion and will likely only be a temporary feature in the onboarding process after the site is published/established. I added a skip button in order to help avoid frustration for users who don't want to engage in this process.

‍

Flow Chart - Splash

‍

Features & UI Elements

The flow chart below highlights some of the primary user flows that the website will feature.

‍

Primary Actions Flow

‍

‍

I designed a lo-fi prototype to cover different scenarios and detail out some of the flows. I then used this prototype to gain feedback and insight from users on Lookback & Zoom.

‍

‍

🚩Key Issues

1. 50% of users had confusion between Login & Sign Up

2. 90% of users said navbar buttons too small, difficult to press

3. 30% of users thought CTA buttons too small

4. All users had confusion of how to close the nav side bar after opening the burger menu

5. 40% of users thought it was unclear what to do once payment is complete

6. All users were expressed irritation for being required to have an account to enter website

✔️ Solutions

1. Create a clearer hierarchy between buttons

2. Increase icon's frame wrapper size (not actual Icon inside)

3. Create larger buttons with more striking colour hierarchy

4. Create a larger exit button to remove side nav bar. Clicking outside should also remove

5. Create CTA (instructions) after payment

6. Users can skip signing in or creating an account

‍

‍

Inspiration - Following low fidelity testing

‍

‍

‍

‍

‍

Laying down the foundation

I decided that this product should have a darker, clear, wholesome feel containing photos that would leave users craving whiskey, and colours that would be natural/organic to represent the Eco-friendly stance of the brand. I used "WebAIM.org" to make sure all colour combinations met WCAG AAA requirements.

‍

Typography

I chose a more traditional serif font for the bulk of the headlines in order to represent age, as people tend to think of aged whiskey as superior. I chose a modern sans serif for the body text, navbar, and buttons for a clearer, cleaner aesthetic.

Style Guide

This is a style guide for Town Whiskey mobile site. This style guide contains colours, typography, buttons, input fields and icons:

‍

‍

‍

After designing the first high fidelity prototype, I performed a usability test on “Lookback”, to test how the draft designs performed. 

🚩Key Findings:

1. Navbar buttons mostly unnecessary as there was burger menu and it didn’t translate well to desktop design.

2. All users thought it wasn't clear where or how many items were in their cart after adding product to basket

3. Half the users pointed out that other payment options other than debit card were required

4. Empty cart page required

5. Nobody actually found the charity page during flow

✔️ Solutions

1. Remove navbar buttons and have only burger menu and shopping cart

2. Highlight cart with colour and add number of ordered Items next to it

3. Multiple payment methods added at checkout stage

4. Designed empty cart page to prompt users to add product to basket

5. Scroll CTA added to main home page to prompt users to explore the site more

‍

Responsive design

The layouts of some of the pages also required changes as they did not translate well to different devices. In particular the product page and the landing page. The changes will make the developers life much easier. Here's 2 examples of some of the final iterations.

‍

Animations & Micro-interactions

I thought it was important to add some animations and micro-interactions to this prototype in order to keep users attention, particularly during periods of loading. Micro-interactions can create a feeling of professionalism throughout a website, and animations can help to make mundane tasks, like checking out, more interesting. I also made all the active buttons responsive with a hover effect in order to help with the user flow. On the final user test, these changes proved to increase engagement by around 50%.

Homepage Zoom Animation

‍

Product Information Micro Interactions

‍

Checkout Animation

‍

‍

‍

‍

‍

‍

What I have learned from this project?

I very much enjoyed the process of designing this site and thanks to the help of the user interviews, surveys and test participants, I felt that this design was a great overall success. The research revealed so much unexpected information, which helped to bring the website together.

Every project is a learning curve, and with this one I expanded my research scope further than I usually do by looking into other external data material before I conducted my own interviews & surveys.

There is currently a pause on this project while my client works on the whisky and the business model. I will be returning to this design to finalize and complete the site once the product is ready for distribution.