UX Design | Visual Design | Branding | Packaging Design
How I designed a mixology business from zero to launch
Making mixology manageable for event hosts with a cocktail service website & branding
OVERVIEW
Problem
People hosting private gatherings or events need a way to provide good cocktails to guests while focusing on interacting with guests. When searching for a vendor, there are too many drinks and services available making it difficult for users to choose one.
Solution
I designed the Horseations website with intentional information architecture and branding. Therefore the user can navigate intuitively and quickly understand available services without getting lost in the site.
My Role
UX Research, UX Design, UI Design, Branding. Business Strategy
Tools
Figma, Adobe Illustrator, Trello, Miro, Canva, Google Forms.
Constraints / Challenges
To use an existing CMS platform to build a website - for the client to easily manage the website as a non-designer. This meant limited layouts and feature options to work with.
My Approach
Research
Overview
Stakeholder Discovery
User Interview
Affinity Mapping
User Personas
Competitive Analysis
Feature Prioritization
Information Architecture
Design
Design Principles
Design Constraints
Key Screen Sketches
Low-Fi Wireframes
User Feedback
Visual Design Direction
Mood Boards
Branding
High Fidelity Design
Evaluate
Usability Testing
System Usability Scale (SUS) Questions
Usability Testing Results
Design Refinement
Interactive Prototype
Next Steps
Learn How it Works at a Glance
Eye-catching icons allow a quick understanding of the important information.
We made it easier to check important but easily missed information using icons.
Instantly Find the Best Drinks for Your Event
The best cocktails are already picked for various events.
See pre-selected drink packages perfect for every occasion without spending time handpicking individual cocktails. We'll lighten up your load as an event host.
Room to Communicate before Ordering
We double-check details to ensure the best experience for you.
Instead of checking out, select from the available products and submit them as a ‘want’ list, and we will follow up with details before confirming your order to ensure perfection.
RESEARCH
Stakeholder Discovery
To create a design that everyone will be happy with, both users and client, I kick-started the research with a stakeholder interview. The goal was to gain insights to help guide the flow of the entire project, such as business goals, technical constraints, usability problems, and more. With this data collected, I would be better equipped to deliver a great design that ticks all the boxes.
Questions I asked:
User needs. How will the design help the users? Who are the users?
Business goals. How will the design support business objectives? What are some business concerns? What is the definition of product success? What are a few competitors? What are some competitive advantages?
Technical limitations. What technical constraints are there?
Client Needs
Need help with the website he had started making but was unsure if it functioned well from the customer's point of view.
Find a way to organize a long list of cocktails to allow easy sorting and selection process for users.
Wants to explore ways to inform the users about the available services that are both approachable and easy to understand.
Business Needs
For users to easily find available services on the website and get a higher booking/ inquiry rate.
To build a website using a website builder tool, so it's easy for clients to manage in the future.
To look professional and established as a business.
Look and feel of the website to be cohesive with the contents of the website.
Create a branding that best represents the business
User Interview
I conducted structured user interviews with 5 potential users. Below is the summary of the research plan.
Background:
People hosting private gatherings or events need help providing well-made drinks to their guests to keep them happy and entertained.
Is there an opportunity to help the hosts to easily vet for bar service vendors that meet their needs and can rely on?
Is there an opportunity for a drink service vendor to help the host to have a successful, worry-free, and enjoyable event?
Users
People who have and will host a small, private gathering or events with the help of vendors, especially drink services.
Research Goals
To find out how to better the hosts' experience when planning and running the event, as a mixology/drink service vendor.
To understand hosts' event planning process.
To find out what event hosts look for when they hire a vendor
To identify opportunities to better their experience of serving guests drinks
To learn what the event hosts' expectations when working with a drink service vendor. For users to easily find available services on the website and get a higher booking/ inquiry rate.
Affinity Mapping
With insights collected from user interviews, I invited the stakeholder to join me to create an affinity diagram using Trello boards based on the qualitative research results. Below is what we put together.
Affinity Mapping Key Takeaways
From analyzing the user interview data, we were able to draw insights that repetitively came up among multiple users, that we decided to address in the design.
Wanting to know what to expect- what exactly is included in the product
Concerns around price/budget
Planning around different Event Sizes
Host's role: Interaction w/ guests VS running the event
Lack of experience/knowledge with cocktails makes it hard to choose
Personalized cocktail experience= theme-specific drinks interest people
Future of Service (Social Distancing Concerns)
User Personas
Based on the interview results I summarized and analyzed, I created the following personas to help guide the design process.
Competitive Analysis
I first conducted a competitive analysis of existing drink service businesses and vendors' websites.
Competitive Analysis Take-aways:
Clear explanation of available services
Intuitive navigation
Call-to-action button leading to booking/ordering
Full-blown header image with a tag line summarizing the business
A large pool of FAQ to check before reaching out to ask questions
Feature Prioritization
We gained many great insights from user research and pinpointed features we liked from competitors. To prioritize these features from a business standpoint, I created a 2 x 2 matrix and reviewed it with the client. The features we decided to focus on are the following:
Pre-organized cocktails into themed packages or categories (To ease selecting process)
Details of products/services (To help users understand what to expect)
Inquiry (Client needs to review the order before confirming)
Description of flavors (To promote users to try a new cocktail)
Information Architecture
From the research, we found out users hesitate to choose drinks when the menu seems too elaborate and also when they don't have much prior cocktail experience. I approached information architecture with the below strategy.
Strategy:
Simplified the cocktail choosing process
Organized individual cocktail products into assorted packages; by theme, event types and spirit types.
Similar to 'Packages' I divided delivery cocktails into categories to make the choosing process easier for customers.
DESIGN
Design Principles
Before starting the design phase, I took the insights from research and formulated a set of Design Principles. The below list would serve as a guideline to help me, the designer, and the client to stay focused on the direction we want to go as we progressed on the project.
Understanding the Constraints
I determined it's a good time to check the CMS tool client requested to use, Squarespace, to see what capabilities and limitations I should consider when designing wireframes. I went over the templates and editing functions and gave myself enough time to get acclimated with the tool to understand the technical feasibility.
Key Screen Sketches & Wireframes
I first hand sketched some key screens to illustrate the basic functionalities and layout of the website. Since the majority of our target users look for drink service vendors using a device larger than mobile, I sketched the wireframes for a laptop screen.
A low fidelity prototype was quickly built in Figma, and we brought an interactive prototype to the target users for feedback. The emphasis at this stage is on functionalities rather than visual design to make sure that the final design meets users' needs before refining the interface.
User Feedback
I asked several potential users to test the low fidelity prototype for midway user testing. I created the following task scenarios for the users:
During each evaluation session, I explained the task scenario, and I watched users interact with the prototype. After users completed the tasks, I asked them several follow-up questions and encouraged them to share feedback on the design.
Most of the users said it was easy to find the information needed to complete the task. The following feedback was insightful, and we decided to include it in the next design iteration.
Based on users' feedback, I created the following design recommendations for our medium-fidelity prototype. Below is a list of important insights and possible solutions.
Keywords for Visual Design Direction
To cultivate a consistent brand image and create an authentic website, I brainstormed with the client to reflect on the brand and the values of the company. This exercise helped us to picture the kinds of aesthetics we foresee. We agreed that the following adjectives should describe our final website.
Mood Boards
With the list of words extracted from visual direction brainstorm, I created mood boards. The purpose of the mood boards was to help us visualize the colors, fonts, photography tones for the brand and the website. That way, we can decide on a direction and use it as a guide as we finalize the design and the photo contents. To help the non-designer client visualize the mood board content with the website, I made the structure of the mood board roughly follow the form of the web page.
Cozy Weekend
#Warm #Trendy #Friendly #Inviting #Cozy
The Night Out
#Dimmed #Bold #Bar-Like #Neon
Modern Storytelling
#Clean #Whitespace #Subtle #Neutral
We decided to go with the #3 Modern Storytelling mood. It resonated the most with our overall visual direction of creating a warm, welcoming, and subtle mood with the clean background to bring the most out of the product photos.
Brand Guideline
Based on the keywords and the mood board we agreed on, I created a spread of brand guidelines below. It includes the detailed instruction on the usage of logo, font, colors, icons, and photography.
Logo Design
Since one of the main goals of the client was to create a logo that best represents the business, I went through the process of researching, sketching, presenting logo iterations, and finally landing on the final design.
Logo Exploration Process:
I mainly explored around the ingredients used to make cocktails. The final logo embodies the symbols of citrus, ice, and herbs to suggest the identity of a cocktail business in a subtle way.
Packaging Design
One of the main services provided is cocktail delivery. The client and I did a series of brainstorming, research, design and experiment around branding and packaging. Below is the process and the final design.
Sticker Label
I printed out the 3 label designs and decided to go with the square shape because of the following reasons.
#1 Square label had the most room to handwrite the cocktail name.
Even though the circular looked the best following the curve of the bottle, the square-shaped label also looked visually balanced and the square allowed more room to handwrite the cocktail name.
Instruction Card
Front side: Priority Information
Inspired by recipes written on index cards, the layout of the front page was sectioned into logo, name of cocktail, ingredients, storing and serving instruction.
Backside: Secondary Information & Personalization
In hopes of this card becoming a token of customers’ experience with the brand, I wanted the backside to achieve two functionalities. I divided the space into two sections; one contains business information, and the other section allows customers to write down their tasting notes.
UI Illustration
There were a few components of the business that were difficult to visually explain with photography or just with text. To effectively communicate in a short time user is scrolling through the website, I created a series of illustrations.
Process
I created these human illustrations from scratch by sketching on paper and transferring to Adobe Illustrator to create parts and the assembly. I intended a minimal use of color on the illustrations and putting the pop color of orange for important components to highlight the relation with the text.
High Fidelity Design: Iteration #1
Implementing feedback from the earlier low-fidelity prototype and the visual design direction, I created a high-fidelity interactive prototype of the website in Figma. I also built the same design on CMS platform simultaneously to make sure the designs in Figma could be transferred for the final shipping.
Services
Find a Cocktail Package
Find a Delivery Cocktail
Find a Mixology Class
Home
About
Contact
EVALUATE
Usability Testing
I made the below three task scenarios which would test the main features of the website; Packages, Classes, Delivery. Users were asked to share the process of completing the task, and why they chose a certain service for their task.
System Usability Scale (SUS) Questions
To quantitatively gauge the success of the design, I divided the larger design goals into detailed sections and built a questionnaire.
Followed by the SUS form, I developed a set of questions using the same measurable scale to understand users feedback on UI portion of the website with the following categories:
Logo, Colors, Photography, Mood, UI, UX Writing
Finally, users were asked to share personal feedback on the negative and positive aspects of the website typed in their own words, so they could openly share their thoughts in detail.
Usability Testing Results
My design received an average SUS score of 83, which is interpreted to be excellent falling into 90-95 percentile range. Though a larger sample size would allow a more accurate measurement of the design's usability, a SUS score of 82 told us that the design is considered usable by most of our target users.
Overall, I was able to collect a lot of positive responses on the interactive prototype among a wide range of participants. Below is an outline of the valuable takeaways from the usability testing.
Takeaways:
"How it works" section on Delivery and Packages page was not read thoroughly by a number of users.
Several users took a while to find FAQ section and didn't expect to find it at the bottom of contact page.
Instead of going through the Services page to get to Delivery, Classes, and Packages pages, some users hoped to directly access each of the service pages from home.
Several users felt that the contact form was too general for multiple functions such as book, inquire and order. Some of them said they expected a cart function to add and purchase products or services.
Some users pointed out that operating hour was difficult to locate and unclear for each service.
High Fidelity Design: Iteration #2
| Services : Improved Navigation
Several users expressed how it felt like there was an unnecessary extra step to get to the cocktail service page they wanted. Previously the users were able to access the individual service type through 2 ways; "Services" tab on the top navigation menu or the "Services" banner in the main page right below the fold.
Before:
Indirect Access to Services
To access individual services, user must go through "Services Page" and “Services” tab.
After:
Direct Access to Services
User can directly access individual cocktail services through a separate navigation tab and the banner with a clickable link to the according pages.
| Contact : Clearer Inquiry Process
As a small business owner, the client wanted to review orders or bookings before confirming to make sure he can provide the service with his hard-to-predict schedule. Therefore we had decided to use an inquiry form rather than a common e-commerce order-and-check-out flow. From the usability testing, I learned that users felt using one inquiry form for ordering delivery, booking a package, and signing up for a class was too general and not specific enough. We proceeded to make three different forms specifically for each of the main features of the website, but displaying all of them on one page might lead to confusion for users.
Before:
1 General Form
A general form for all types of service inquiry
After:
Toggle to Forms for Specific Services
Toggle Menu for forms of specific usage with targeted question fields. Added custom code to make the forms show and hide depending on the user's need for 3 different types of services.
| FAQ : Quick to Locate Info
Some of our users didn't find the FAQ immediately as it was on the contact page, below the long contact/order inquiry form. They expressed FAQ was hidden and didn't expect to find it on the bottom of the contact page. We also received some feedback that due to a large amount of text it took a while to scroll through and spot the information users needed.
Before:
Information Tucked Away & Long List of Info
FAQ was on the contact page below the contact form. FAQ had information broken into categories of service with bolded question and answers using thinner font, but still took many scrolls to get through.
After:
Direct Access from Top Nav & Quick Scroll to Find Info
User can now directly access to FAQ page from the top navigation bar. I created accordion questions to toggle between hiding and showing the corresponding questions. Showing only the questions unless clicked to show the questions allow users to skim through the page quickly to find the question they want to know about.
| How It Works: Understand at a Glance
'How It Works' contains critical information to read before users scroll down to see the menu and ordering on the Delivery and Packages pages. That's why this section was placed right below the header banner, so it can't be missed. Some users felt like it was a chunk of fine print text, and didn't really pay close attention to it before proceeding to see the rest of the menu below. There was a lack of visual hierarchy that needed to be changed in order to catch users' attention.
Before:
Simple Descriptions Still Easy to Miss
Four bullet points with text explaining how it works.
After:
Eye-catching Icons Telling the Core Story
Added icons to each line of instruction to help bring attention and to help understanding the instruction.
Next Steps:
Add an E-Commerce Feature for Instant Ordering
As mentioned before, for the early phase of the business launch the client wanted to confirm every order coming in to make sure the capacity and availability in his schedule. After we take a few months and observe the user behavior patterns when ordering services, I plan to add an e-commerce feature when the business is ready for expansion.
Expand the Class Page with Booking System Integration
Currently, there are 2 classes offered on the class page and users can book by sending an inquiry. After the launch of the website, the client shared that he foresees growing online class offerings in the future. With a variety of courses to book, I would redesign the page with a booking system with a calendar to check availability.
More Projects
