Application Design Proposal: Drink Wisely
Abstract Design Statement:
Drink Wisely offers users with allergies, intolerances, and other dietary restrictions an efficient means to pinpoint personalized, noncompliant ingredients in various alcoholic beverages. With a simple scan of the barcode, its database will supply users with relevant ingredients, nutrition, and processing information. This app aims to quell "food anxiety,” especially among beverages which do not disclose their ingredients list. Further, those who refrain from animal byproducts may also be informed of non-vegan practices for processing, filtration, or more.
Features:
Scanning product with device camera, however manual input option is available
Nutrition and ingredients accurately provided from application database
Suggests diet-friendly alternatives to beverages
Suggests cocktail recipes
Blog-style spotlights for new “allergen-free” or “vegan-friendly” beverage brands
Contents: Target audience • Persona • Competitive landscape • Scenario, interaction framework, use cases • Wireframing • Design guide • Prototypes • Reflection
Target audience
While allergens and dietary restrictions are not innate of specific identity targets (race, income, etc.), research indicates non-Hispanic white adults and women have the most food allergens and special diets. The target audience must be open to exploring a variety of alcohol and spirits and possess interest in mixed drinks as well as possessing basic mobile app competency, including using the phone’s camera and navigating information on a mobile device.
Drink Wisely targets adults of legal drinking age who suffer from allergies and/or intolerances as well as those with dietary restrictions due to religious, ethical, or other lifestyle practices. Thus, the target audience includes the ~26 million American adults with food allergies (according to 2018 research by the Asthma and Allergy Foundation of America), of which an approximate 17 million consume alcohol (according to a 2022 Gallup News poll of alcohol consumption). Further, the application can benefit the ~17.1% of American adults ages 20 that reported having a “special diet.”
Persona: Kelly McLaughlin
Kelley McLaughlin is a 27-year-old marketing specialist in the Bay Area who prides herself on healthy work-life balance. While focused and successful in the office, Kelley likes to unwind from a long work week by hosting her friends and colleagues on weekends. Her favorite after work activity is opening a craft beer or making a quick cocktail with her two roommates and cozying up to a movie. With a satisfactory amount of disposal income, she doesn’t mind splurging on “the good stuff.” Like many of her friends in the SF Bay Area, Kelley is vegetarian and shies away from dairy products which upset the quality of her day.
Goals:
Wants to create an inclusionary space for her friends and guests
Wants to move through daily tasks as efficiently as possible
Wants to remove food anxiety in lieu of an ever-evolving diet-scape
“The last thing I need in my day is another ‘thing to do.’ I do the heavy lifting at work—I want everything else to be a good and easygoing time.”
Competitive Landscape
Yuka
-
Market: Food and Cosmetics
Focus: Wholesome ingredients
Mission: Yuka’s mission is to help consumers make better choices for their health. In doing so, it aims to drive manufacturers to offer better products.
-
Ad-free, meaning brands cannot pay the app to advertise their products
Independent business: Scores and recommendations are obtained independently, with absolutely no influence from outside brands or manufacturers
Data protected
Transparency in funding
-
Clear and consistent brand design that can described as minimal and nonintimidating
Offers free or paid member versions of the app
Features a scan-the-barcode method of identifying food and cosmetic ingredients, including highlighting potentially “harmful” ingredients
Offers an “offline mode”
Transparency in food product ratings and other app features
Streamlined “sign-in” process with only an email necessary
-
Certain app features are limited to members only, such as the “search”
As a French app, potentially limited in international foods database
Does not appear to highlight or mention foods that are not regulated by organizations like the FDA, such as alcoholic beverages which may not feature ingredients lists -
Spokin
-
Market: Food
Focus: Allergens
Mission: Spokin’s mission is to build the ultimate food allergy resource. A go-to spot to provide just what you need, when you need it, regardless of your experience level.
Spokin’s mission is to make managing food allergies and celiac easier by connecting the community to safe foods, restaurants, bakeries, travel, recipes, and each other.
-
Advocating for food allergy awareness
Fostering a safe and allergen-free food guide
-
Fosters a community style app with elements of standard social media apps — includes following/followers, posts, recommendations, and more
Simple interface with aesthetic basics
Offers a diverse option of recipes, retail products, special offers, and more
-
Laggy search results — prompts with error message then loads
Limited reach for “dining out” option — in San Luis Obispo, only offers one option in Pismo Beach
Many products fail to offer information beyond their name — no reviews, information, or so on
You cannot access app information without login in
User interface design closely resembled Apple and Instagram’s design — does not bode well for creating a unique brand identity or image
Limited information regarding alcoholic beverages
Distiller
-
Market: Liquor and spirits
Focus: Acohol
Mission: No clear mission shared, but hold a start-up mentality and are open to expansion.
“This is just the start. We're adding new bottles and reviews every day and are looking for writers, bartenders, distilleries, and spirits enthusiasts to help us grow our collection and perspective.”
-
Reviews cannot be purchased for influence
Data and personal information will never be sold
Striving to do more and be better
Inclusivity to people with various experiences with alcohol
-
Includes beginner-friendly wayfinding when first signing up
Offers free or paid member versions of the app
While seemingly not central to the app, it does foster a community with elements of standard social media apps — includes following/followers, posts, recommendations, and more
Simple user interface that effectively follows Hick’s Law
Highlights flavor profile, description, expert notes, and other information such as origin and ABV
Offers interactive features such as “recently viewed”
Offers desktop-friendly website version
-
Slow loading times throughout the app
Certain app features are limited to members only, such as the “scan” feature
Does not highlight ingredients or manufacturing methods for the drinks, thus failing to provide additional value to those with dietary restrictions
Technical Requirements
Membership
Consideration of membership plans and for which features
Navigating data storage and consideration of data privacy issues
Privacy issues
Personal information, location tracking, in-app behavior
Compatibility with IOS and Android
Must be compatible with a range of mobile platforms
Database/server
External server necessary for logging products and information
Consideration of server sourcing, pricing, management, access, environmental impacts
Curated database
Sourcing product information and database curation
Image sourcing, editing, optimizing, and uploading to maintain transparency and sleek appearance
Scenario
Interaction Framework
Use Cases
Person A is a foodie who loves a well-paired wine, but ethical manufacturing is important to their consumer behavior. They value labor justice and ethical sourcing.
I’m Person A and I want to use the app to be informed about sourcing of ingredients in my drinks by scanning the barcode.
I’m Person A and I want to use the app to quickly gain recommendations of ethically made grocery store wines by perusing the recommendations feature.
I’m Person A and I want to use the app to offer my well-curated recommendations to others on the app by using the reviews feature.
Person B is newly vegan after 6 months of vegetarianism. Their friends have been encouraging in this lifestyle switch, but they’re feeling overwhelmed by the lack of ingredient transparency in their alcohol.
I’m Person B and I want to use the app to ensure the drinks I buy are truly vegan — ingredients and manufacturing-wise — by scanning the barcode.
I’m Person B and I want to use the app to share vegan-friendly drink recommendations with my friends by using the share feature.
Person C has had a dairy intolerance all their life, but that doesn’t stop them from trying new things. They love a smooth cocktail without cream, but they don’t mind egg white!
I’m Person C and I want to use the app to make sure the drinks I buy don’t contain any dairy by scanning the barcode.
I’m Person C and I want to use the app to be able to rate the beverages I consume by using the reviews feature.
I’m Person C and I want to use the app to be able to explore easy cocktail recipes for my nights-in by perusing the recommendations feature.
I’m Person C and I want to use the app to explore new cocktail and craft beer recommendations by viewing the “similar to” feature with drinks I know I enjoy.
Wireframing
Scan page
Product pop-up
Navigation
nav 01: history
nav 02: feed/explore
nav 03: scan/home
nav 04: search
nav 05: personal
Welcome page
Creating an account
Product information
Profile page
Images
image 01: logo
image 02: user’s camera
image 03: brackets to center barcode
image 04: product image
image 05: user profile photo
Buttons
button 01: log in
button 02: create account
button 03: use without account
button 04: vegetarian
button 05: vegan
button 06: dairy-free
button 07: peanut-free
button 08: tree nut-free
button 09: gluten-free
button 10: grain-free
button 11: paleo
button 12: keto
button 13: product 1
button 14: product 2
button 15: product 3
button 16: product 4
Text
text 01: welcome message
text 02: copyright information
text 03: title – create account
text 04: subheading – select dietary restrictions
text 05: title – scan
text 06: product name
text 07: product brief overview
text 08: product ingredients, nutrition info, etc.
text 09: title – personal
text 10: user name
text 11: user membership status
text 12: user dietary restrictions
text 13: favorites
text 14: reviews
text 15: review 1
text 16: review 2
text 17: additional info
Design Guide
Color palette
The app consists of an off-black primary background with an off-white text display, a combination which seeks to mitigate eye strain for mobile users. Additionally, black is frequently associated with alcohol due to its flavor intensity. To further convey a sense of intensity, add an element of warmth, and promote brand awareness through color, a bright orange shade is paired with the off-black and off-white.
Typography
The app uses Comfortaa Regular and Bold throughout the interface. This sans serif font is readable in small sizes and offers an approachable juxtaposition to the intensity of the app colors. The app logo uses Kirang Haerang, an eccentric display font that mimics stylish alcoholic beverage graphics, especially that of craft beers.
Iconography
The app’s iconography mainly consists of its navigation icons and product features, including favorite, ratings, review, and share. These icons are simple and rounded. Navigation icons turn orange when the respective page is open; otherwise, they are white. The product feature icons for favorite and review are outlined unless the user add them to their collection, where then they are filled.
Layout and grid
The app uses a unique grid organization customized to the needs, features, and flow of each page. The page content is grouped through proximity, color, and hierarchy design rules.
Other considerations
The product images are transparent and collected from a organized database, similar to the competition app Distiller.
Prototypes
Project Reflection & Future
While this project ceases at the prototyping stage, creating an interactive prototype followed by usability testing, such as A/B testing, would be the next step. Upon improving the interface, beta testing would follow.
This was my first exploration in mobile app development, incorporating audience research, technical requirements, use cases, and more to define choices in wireframing and subsequent prototyping. The interface considered usability principles I had learned throughout my UX education. During this project, I learned Figma and became increasingly familiar with its abilities.