Local Business Website
This website is new and is currently being updated!
Please reach out for portfolio or sample works while I build out this site.
Thank you for understanding!
-Adam Smilo
The problem
Distillery's users are in need of an online experience that better resembles the premium caliber of experience that is found in-person.
The solution
Objectives
Design a responsive website for Verdi Local Distillery and their customers.
Design a logo and brand for Verdi Local Distillery that reflects their brand attributes.
Create an intuitive and informative experience for their online users.Provide Client with Responsive Web Design
My role
Product Designer, self-directed with mentor feedback. Responsible for maintaining assets, providing designs, and delivering a testable prototype.
Timeline: 80 hours
Role: UX/UI Designer
Deliverables: Branding, Website prototype
Tools: Sketch App, Illustrator, Photoshop, InVision
Background
Verdi Local Distillery is a micro-distillery that opened in September 2014. They hold the world record as the smallest distillery and specialize in flavored whiskeys. Verdi Local Distillery sells to roughly 200 bars and stores, and offers tastings, tours, and a bar experience on-site. Their physical location has a great deal of appeal, but their website is in need of an update. Our goal is to provide branding and a responsive website for their users.
Design Thinking Process
1. Empathize
Goal: To understand the user on a deeper level in order to provide a positive experience.
Deliverables: Research plan, market research, competitive analysis, empathy map, and user persona.
Research Plan
Secondary Research:
Market Research - Gather quantitative data that relates to whiskey distilleries and their users in order to define and target primary market
Competitive Analysis - Define major competitors and recognizing strengths and weaknesses in design patterns.
Provisional Personas - Create fictitious representative users to assist in empathizing with target market.
Primary Research:
1-on-1 Interviews - To gather qualitative data in order to help us empathize with users.
Research Goals:
Define competitors, define personas, define relevant statistics, recognize patterns in competitor designs, better understand wants, needs, and habits of users.
Market Research
In order to gain a better understanding of the market, I answered the following questions:
What is a distillery?
A place where alcohol is manufactured. A “micro-distillery” is a small, often boutique-style distillery established to produce beverage grade spirit alcohol in relatively small quantities. The distillation process is the separation of components. Thedistillation of the fermented products produces the final product, which is then aged and later bottled.
What is whiskey?
A distilled alcoholic beverage made from fermented grain mash. Various grains are used for different varieties, including barley, corn, rye, and wheat. Whiskey is typically aged in wooden casks, generally made of charred white oak. The final product is generally 40%, although cask-strength is much higher.
Who drinks whiskey?
“Whiskey drinkers in their 20’s and 30’s tend to be very engaged with the brands they love. They’re interested in the maker, the process, the story. They come to festivals and tastings, visit distilleries, and take part in the educational programs. Stuff their parents or grandparents never did.”
In 2015, 70% of bourbon drinkers were male, 30% female, but this has been shiRing over Cme as culture changes.
Consumption of alcohol by women has been rising steadily since the 1950’s, and studies suggest they may drink as much alcohol as men, with younger women possibly drinking more.
NPR notes that two decades ago, about 15% of whiskey drinkers were women, but had increased to 37% by 2014.
Who sells whiskey?
Major distilleries - Of the hundreds in Kentucky alone, there are seven major players:
Buffalo Trace, Four Roses, Heaven Hill, Jim Beam, Maker’s Mark, Town Branch, Wild Turkey, Brown-Forman/Woodford Reserve.
Micro-distilleries - A small distillery that produces beverage grade alcohol in much smaller quantities, usually in single batches.
Only five “craft distilleries were operational in the US in 1990, now there are more distilleries in New York than in Scotland. Some predict this trajectory may cause a craft distilling bubble if numbers continue to increase.
The market research above was the most relevant, but I also gathered information specific to bourbon production, the United States craft spirits market, the global craft spirits market, historical facts, and facts about alcohol tax and consumption.
Competitive Analysis
I identified direct and indirect competitors in the online clothing market in order to find patterns in strengths and weaknesses.
Provisional Personas
Based on secondary research, I created two provisional personas that each contain demographic information and a few facts about themselves. The goal of these provisional personas are to begin empathizing, as well as hypothesize about who I would find at Verdi Local Distillery. These were later replaced with user personas based off of primary research findings.
User Interviews
I interviewed five participants on Saturday July 7th. Four of the participants were male, one was female. All participants were between the ages of 29 and 28 years old. By interviewing actual customers of Verdi Local Distillery, I was able to empathize with each participant and gain a better understanding of their frustrations, needs, goals, and motivations.
Empathy Map
By mapping findings from user interviews, I was able to spot patterns of user behavior. I then uncovered insights from these patterns and created needs based on them.
Insights:
Atmosphere, authenticity, and culture contributes to the user’s overall experience.
Hospitality is an important factor in choosing whether or not they are going to visit the business.
Users value the quality of drink made at the establishment
Needs:
To know the atmosphere is going to provide a good time.
Outstanding hospitality in order to feel welcomed.
Bartenders with a high level of expertise.
User Persona
I created a fictional yet realistic representation of one of Verdi Local Distillery’s users based on primary research findings. Dave is referred to as if he is a real person throughout the design thinking process in order to continue empathizing with the user.
2. Define
Goal: Define the core problems before coming up with solutions. This helps ensure that business and user goals are met.
Deliverables: POV statements & HMW questions, project goals, feature roadmap, and sitemap.
POV Statements & HMW Questions
I defined Point of View Statements based on insights and needs. Then posed “How might we…” questions to fuel a brainstorming session before defining both business and user goals.
Project Goals
I defined business, user, and technical goals using a venn diagram in order to help keep clear objectives when making decisions. I then recognized shared goals and mapped them accordingly.
Sitemap
I created a sitemap to show the relationship between content on the website design and to build logical flows for the users.
3. Ideate
Goal: To create ideas in volume, then move forward with the best solutions.
Deliverables: Task flow, user flow, UI requirements, wireframes, branding, responsive design, UI kit.
User Flow
I created a user flow chart that illustrates how users would complete different tasks in a given scenario. This helps us ensure that all of the necessary pages are created and functions are implemented in order to satisfy user scenarios.
Task Flow
To highlight how users would complete individual tasks within the user flows, I created a task flow chart. Asides from age verification, these task flows are linear and do not contain decision trees.
UI Requirements
I created a document that contains a list of pages and the features that are required in order to complete the given user flows. This document serves as a checklist during wireframing to ensure that all required features are present in the design.
Wireframes: Low Fidelity Sketches
I sketched several wireframes before working with digital wireframes in order to keep costs low while rapidly exploring different designs.
Wireframes: Mid Fidelity
Wireframes allows stakeholders to see how the elements are laid out. Designing in low fidelity keeps costs down. Once wireframes are approved, we increase fidelity.
Wireframes: Responsive
I also designed a few key responsive wireframes to account for the different devices a user may be accessing the website from.
Branding: Mood Board
Before applying visual design to the wireframes, I gathered visual references and inspiration from Pinterest in order to gain inspiration. I started with brand attributes, then created boards that contained three attributes each.
Brand Attributes: Balanced, Bold, Dark, Rich, Rustic, Strong, Traditional, Warm, Weathered.
Branding: Logo
To design the logo, I first sketched different ideas on paper. I then explored typefaces that were similar to ideas that I had sketched. Ultimately, I moved forward with a design that was highly legible and scaled well.
Branding: Style Tile
With the new logo in place, I built a dark and a light style tile to begin defining the brand’s aesthetics. These choices are based on research, the mood board, and brand attributes.
UI Kit
The style then evolved into a UI Kit, which serves as a living document that provides stakeholders with design elements used for the website.
4. Prototype
Goal: Build a scaled-down version of the final product to test with users in order to see how users interact with the website.
Deliverables: Mid-fidelity prototype.
Mid-Fidelity Prototype
I designed a mid-fidelity prototype with Invision from the wireframes to have a product to bring to testing. This includes all main pages and hover interactions to accurately represent how the site would function.
The mid-fidelity prototype can be interacted with here.
5. Test
Goal: Test the prototype in order to recognize patterns within user bahaviors. These patterns help us prioritize feature revisions and implementation.
Deliverables: Usability testing, affinity map, priority revisions.
Usability Testing: Plan
Before bringing the prototype to usability testing, I first created a plan. The plan contains objectives, participants, a script, and scenarios that are to be tested for.
Usability Testing: Findings
Our findings consists of everything that we learned during usability testing. This includes behaviors, actions, and comments of participants.
Affinity Map
Usability testing findings was used to create an affinity map where each participant is represented by a different color. From here, I recognized patterns and uncover insights based on user comments and actions. This resulted in a recommended revision list which included implementing desired features.
High-fidelity prototype
I then applied visual design to the prototype. A few of the main pages can be seen below.
Conclusion
In order to provide Verdi Local Distillery with branding and a website prototype, I followed the design thinking process. By focusing on user needs and carrying empathy throughout the entire process, I was able to design a website that is intuitive for users and represents the core attributes of Verdi Local Distillery.
Next Steps
The high-fidelity prototype is complete is ready to be presented to the stakeholders of Verdi Local Distillery and design specs are available to deliver to developers. As feedback is received and designs are approved, further revisions can be approached and implemented. As the development process continues, I am able to remain in contact with stakeholders and developers in order to provide support where needed.
