UX/UI Case Study | UnTapped

Overview

Timeframe: 3 Weeks

My Role: UX Designer/UI Designer

The Team: Adam (UX/UI), Jennifer (UX/UI), Natasha (UX)

Tools: Sketch, InVision, Illustrator, Photoshop

Deliverables: Responsive Web design (web and mobile high-fidelity prototypes)

UX Methods: Research, Competitive analysis, Surveys, Interviews, Contextual Inquiry, Affinity Diagrams, Personas, Storyboard, User Flows, Content Audits, Feature Matrix, Lo-Fi & Mid-Fi Prototyping, User Testing

UI Methods: Domain Research, Typography, Illustrations, Visual Language, Colour theory, Style Tiles, Style Guide, High-Fidelity Prototyping

UnTapped Design Team

Agenda

Introduction

With the delivery industry growing rapidly through the use of apps and websites, convenience seems to be a top priority to the general public. It is surprising that we have seen little of craft beverage delivery services. That is until UnTapped came to be.

The Project

You are probably asking the question…

“What is is UnTapped”?

UnTapped is a beer distribution company that aims to provide easy access to the best craft breweries. They curate a portfolio of the most sought after beverages and have a high quality of standard for their products and services. Customers have built a trust for UnTapped and their expertise.

The Problem

“What problem did they need solved through UX/UI designers”?

Right now, Untapped is mainly in the B2B market, but they wanted to expand into the B2C market. To expand into this market, they introduced their ‘Special Buys’ program. This subscription program has not yet taken off, but this is the main feature that UnTapped wants to highlight and build a customer base on.

“What is the Special Buys Program”?

Our clients, Chris and Ben, wanted craft beverage lovers to subscribe to an email newsletter and get a packaged variety of craft beverages delivered right to their doorstep. However, since our clients did not yet know the frequency of when they could deliver the craft beverages and didn’t have a pricing model, we had to provide a solution.

Also, the current website does not justify the brand identity. We decided to take on the challenge of rebranding UnTapped to align with their business goals.

The Solution

With our responsive web redesign we had to provide a brand identity and a seamless user experience. Some of the many important solutions that we had to provide that the current UnTapped website didn’t already have was…

1. Educating the user on what UnTapped actually does as a company
2. Implementing the Special Buys program as well as straightening out their business model related to this program
3. Implement a B2C side of the website they did not have while keeping the B2B side of the business on the website
4. Create an in-store page for the user to find craft beverages at government liquor stores near them

Goals

Following the breakdown of the problem and the solution we developed our over-arching goals.

Business Goals

The first business goal of UnTapped was to build an email list and sell the Special Buy subscription boxes to the market of craft beer enthusiasts.

The second goal was to generate more engagement with the craft beverages that they distributed to government liquor stores.

User Goals

The user goal was to discover and get access to unique and exclusive craft beverages in a convenient and easy way.

Project Goals

The project goal was to achieve a minimal viable product that highlights their business goals such as their special buys beer subscription model. Another goal was to design a user friendly website that empowers the brand.

Research

Domain Research

After developing our goals, we went into our research phase. This was where we looked at competitors that distribute and sell craft beer online. Since few websites actually did beer subscription services, we looked at beer e-commerce stores such as BeerXpress. We looked at what features these competitors had and where we could find the competitive advantage that UnTapped could fit into. This led us into our competitive analysis.

Competitive/Comparative Analysis

Following our domain research of beer companies, we found gaps in the market.

After looking into specific features, we found that the niche that UnTapped could fit into, which was the beer package newsletter and subscription service. After we did our market research, we wanted to get more insight with our potential users.

Survey

Survey Respondents: 66

Deployed to: Craft beer enthusiasts

Our client, Ben, informed us their target market is craft beer lovers. With that in mind, we deployed our surveys to the general public that enjoys craft beer.

With this question, We wanted to gain insight into the motivation as to why people purchase craft beer.

Top 3 Motivations for purchasing craft beer:

1. Variety (60.4%)
2. Rarity (54.5%)
3. Free Delivery (47%)

We also wanted to gain insight into why someone would actually subscribe to a craft beer membership.

1. Access to unique beers (59.1%)
2. Discounts (43.9%)
3. Sampler Box (36.4%)

With this information from the survey findings, we knew what our focus was going to be in the design of our website. This relays back to the business goals of gaining UnTapped subscribers.

Interviews

Interviewed: Craft Beer Enthusiasts

Number of interviewees: 6

Goals:

From our interviews, we were looking for both goals and pain points in their current craft beer purchasing experience.

We found validation in our interviews similar to our surveys. Craft beer enthusiasts search for variety, uniqueness, and rarity in their craft beer.

Another goal, of the user is convenience. The interviewees told us they liked the idea of delivery because going to search for craft beer in-store is inconvenient and time consuming.

Painpoints:

We wanted to find pain points from the in-store experience that we could address on the design of the UnTapped website.

Through our interviews, we found that liquor stores seem to carry the same craft beer. We also found that the staff at liquor stores might not be knowledgable about craft beer.

Following our interviews, we went into affinity mapping to gather all of our data that we collected from our surveys and interviews.

Affinity Mapping

An affinity diagram is where we gathered all of our thoughts and put them together into one board. In this board, we look for patterns and commonalities in the people that we interviewed and surveyed.

Affinity Map

Affinity Mapping Key Findings

Motivations for buying craft beer:

• Uniqueness
• Varieties
• Convenience
• Free delivery

Subscription motivations:

• Quick shipping,
• Timely delivery
• Quality assurance

Pain points:

• Physically going to the store
• Lack of selection
• Warm beer
• Delivery wait period

Once we found the commonalities, patterns and trends in our data, we went into our planning phase.

Planning

Persona

Based on the research and data we collected, we created our persona Ruben. We create a persona because we want to get a better idea of who we are designing for.

Ruben is a digital marketer living in Vancouver who is always on the look out for a variety of unique craft beers to drink with his friends.

After creating our persona, Ruben, we wanted to make sense of Ruben in a scenario where he would actually use the UnTapped website which led us into our storyboard.

Storyboard

A storyboard in UX is a tool that visually predicts and explores a user’s experience with a product. It helps us as UX designers to understand the flow of people’s interaction with a product over time and gives us a clear sense of what’s really important for the users.

Storyboard Sequence

1. Ruben gets invited to a craft beer hangout with his friends.
2. Ruben is looking to find craft beer for the hangout.
3. But Ruben always sees the same craft beer at the store, but he wants more variety.
4. Ruben receives an email from UnTapped about a craft beverage pack.
5. The package of craft beer gets delivered right to his door step.
6. He brings the craft beer to the hangout and they all enjoy the unique variety of beers Ruben brought. He then gets praise from his friends.

Feature Matrix

After collecting all the data and creating a persona, we created a feature matrix. A feature matrix gave us a chance to sort the features from our data into categories. This gave us a better idea of what features are must have, nice to have, and not needed on the website

Must have: We knew that from the business goals and data, a subscription page and newsletter were a must have.

Nice to have: A nice to have, but not necessarily needed was the account profile and quiz for personalization, because we could not justify a reason for them to be there.

Not needed: A chat bot was not needed because it steered away from the minimal viable product.

Userflow

After we figured out our featured matrix we went into our user flow. This gave us a better idea of how the user will navigate through the site and what content is actually going to be on the website

From our feature matrix, we solved that there will be 6 pages and a subscription pop up. After producing our user flow, we could then get into rough paper prototype designing

Design, Building and Testing

Lo-Fi Prototype

Following our planning phase we started Low-Fidelity prototyping. This is the beginning stage of designing where we get our user flow on to paper. We get people to test with a task as our theoretical personas and they give us quick feedback which improves the design before we start digitizing the prototypes.

User testing tasks

Once we gave the user a task we wanted to find out any problems they had while navigating through these tasks.

Feedback and Iterations

Our clients, Ben and Chris, emphasized to us how the beers they distribute in government liquor stores generate revenue and continued business for UnTapped. With that said, we created a page where consumers can easily filter through what beers are available in their provincial liquor stores.

While user testing, the “Find in-store” button verb-age was confusing for the user and they didn’t know they were being directed to an external website. We added the icon for a link as well as view product to make it more clear for the user.

We renamed the ‘Special Buys’ subscription service to UnTapped Club because, through testing, users did not comprehend Special Buys actually meant. We decided to brand it more and make it feel as if the user is part of a club.

Also, we removed testimonials and reviews because our clients did not have them readily available and they requested it to be on a version 2.0.

Finally, we decided to reduce the amount of steps in the infographic because through user testing, the users found that it was too much to read through.

On our clients site, they originally had ‘Portfolio’ for their B2B brewery market. We decided to change it to ‘Brewery Partners’ because users did not understand the meaning behind portfolio. Also, instead of a list sort, we made it a scroll so it is more appealing to the user.

UI Design

Mood and Colour Palette

Firstly, we put together key words that reflect the mood of this website. These words were high standard, expertise, casual and welcoming with the feel of a dark cellar.

The colour palette that forms this mood is black, charcoal, gold, muted yellow, and warm light grey.

Voice and Tone

Here are some examples of how the copy we wrote speaks to the user in a casual and welcoming voice and tone. On the left, the contact form is titled “let’s talk beer” and on the right, the confirmation message seen after a user joins the UnTapped club is welcoming and inclusive.

We balanced the classy dark and gold tones with a personable voice to give the impression that the brand is backed by expertise, but is inclusive when it comes to sharing.

Logo

The current logo did not suit the colour palette so we adapted it to reflect the mood of the brand. We added a gold gradient finish on the word UnTapped. This new colour scheme reflects the elevated yet casual brand identity of UnTapped.

Typography

Typography choices:

Prohibition: A bold typeface with a name that uniquely aligns with the theme of UnTapped. It stands tall with authority but has a lot of character and a bit of charm.

Acumin Pro: A neutral typeface style that was designed to be easily read on digital interfaces.

Illustrations

This is the process for signing up with the UnTapped club. We really wanted to engage the user into signing up as it is a main business goal of the company. Instead of boring steps, we decided to illustrate a fun infographic that was interesting for the user.

With the team design, we wanted to display the high standard of the craft beer mood with the colours. We also wanted to put each of the team members on a beer label to represent craft beer.

Hi-Fi Prototype

Desktop Hi-Fi

Click here to view the project `Untapped - Desktop - HiFi`

Mobile Hi-Fi

Click here to view the project `Untapped - Mobile — HiFi`

Future Considerations and Conclusion

Conclusion

We put together a comprehensive framework and visual identity based on research that we believe truly achieves the business goals, project goals and user goals. For the business, we designed a website that promotes and drives the user to become part of their club subscription. For the user, we created value and delight as they maneuver through the new site and join the club. For the project, we delivered an MVP in a short period of time.

Future Considerations

For version 2.0, we would like to include the following features to enhance the user experience even more:

• Reviews
• Blog and Forum for beer lovers
• Personal login for members of the UnTapped Club to review their previous orders
• A fun beer quiz for personalization
• Chatbot