SHAKER
A recipe app for cocktail crafting where users can search for recipes based on what ingredients are on hand.
PROBLEMS
These are some of the issues I encountered that inspired the concept.
MISSING PIECES
Trying to find recipes for what you have, but often missing some ingredientBROKEN SEARCHES
Other drink recipe sites have broken or un-robust search functionalitySCATTERED DATA
Craft recipes are difficult to find in one spot, being scattered across blogs and distillery sites
UNCERTAINTY
Not knowing what you can make with what you have on handCULTURAL DIFFERENCES
Cultural gap between existing recipe sites and craft cocktail communityGROWING COMMUNITY
Need for a centralized hub to support growing interest through curation, sharing, and educationRESEARCH
CULTURE STUDY
Participants were asked to arrange concepts on a circle based on personal relevance.
These are the concepts that were explored.
Global Community
Local Community
Home Bartending
Professional Bartending
Experimenting
Trying New Things
Contributing
Learning
Gaming / Achievements
Learning
Logging
Feedback
Inventory
Inventory Searching
Filtered Searching
Seasonal / Special Occasion
COMPETITORS ANALYZED
BarNone
DrinksMixer
AllRecipes
Mixology
Liquor Cabinet
Bartender’s Choice
My Cocktail Bar
DESIGN
Sitemap
WIREFRAMES
Home
Drinks
Drinks
Drinks
Drinks
Drinks
Create
Create
Create
Visual Design
01. Home
The home screen includes access to account settings, drink search, and the four primary menu items.
Drinks: A filterable list of drinks in the database.
Profile: A hub for the user’s list of their favorite recipes, recipe submissions, & stats on cocktail exploration
Cabinet: The user’s current inventory of liquors, liqueurs, bitters, & other ingredients.
Create: A place for users to submit their own recipes for drinks, bitters, infusions, or other cocktail ingredients.
02a. Drinks
After selecting “Drinks” from the home screen, users are presented with a search bar and several buttons that include browsing all drinks, a list of IBA cocktails or other popular categories, and displaying a random cocktail based on their inventory (as an alternative to shaking the phone).
The filter button on the right of the search area brings up the filter menu to search for recipes based on specific criteria.
02b. Drinks List
Drinks are presented in a single-column list, with each item displaying the name and summary of ingredients. There is also an icon to the left of the name to indicate whether or not the user has marked the drink as a favorite.
Users are also able to search and filter recipes from this page.
03a. Filter
Accessed by tapping the filter icon in the right of the search field, the filter presents categorized criteria for the user to customize their search for recipes.
Categories of criteria are spirits, liqueurs, and flavors; multiple selections are allowed for these fields and criteria can be selected and deselected by tapping that option.
Users can also opt to search based on their current inventory, allow for substitutions, or make their search strict.
03b. Subfilter
The subfilter would be for lengthier lists, such as liqueurs in this case. In this menu, they are presented in categories (tentatively Herbal & Spice, Fruit & Berry, Cream, Coffee, Citrus, Mint, Chocolate/Dessert). Some liqueurs may appear in multiple categories, so any selection will automatically check all instances of that liqueur.
An issue with the subfilter is how specific the list should be, as there are many brands and variations on similar liqueurs. One solution could be to ensure there is a selectable umbrella term for similar liqueurs (“Irish Cream,” “Horchata Cream,” “Elderflower Liqueur”) but also list the more well-known brands beneath it (“Rum Chata” and “Caruva” under horchata cream liqueurs).
This way, users will be able to visually know what a liqueur is by its sub-category, rather than relying on brand name identity.
04. Recipe
The name of the recipe is displayed at the top with four icons below that the user can tap to favorite this recipe (star icon), indicate that they have made this (olive icon), that they want to make this (bookmark icon), or to share the recipe externally.
Users can also tap on specific ingredients to learn more information and add the ingredient to their shopping list.
Below the recipe is a two-tabbed hub for the community to review or provide feedback (public) or for the user to leave their own notes on the recipe (private).
CHALLENGES
Landing Page
Hesitant to design a more robust landing due to wanting usage research to guide layout.Simplifying the Filter
Continue optimizing through iteration to ensure filter options work ideally in native controls.Subfilter Organization
Alphabetical, categorical, both… what is the best solution?Other Ingredients
What should the cutoff point be for non-alcoholic ingredients in cabinet? Should recipes still be shown for cabinet-based searches?Similar Ingredients
Should similar ingredients be listed under or identified by an umbrella term?Quality User Data
Continue optimizing inputs to promote clarity, such as requiring precise measurement input for recipe ingredients.CONSIDERATIONS
Results Indicator
Adding an indicator to the filter menu showing the number of recipes the results will yield as filters are altered by the user.Shaker Phone
Shaking the phone will generate a random cocktail recipe. This feature will have a setting to be cabinet-based or not.Updating Cabinet
Encourage engagement and exploration by letting users know how many new drinks they can make when they add ingredients.Community Integration
Add a community-based approval system for new cocktail recipes to ensure quality and clarity.NEXT STEPS
- Wireframe remaining pages
- User test wireframe prototypes
- Build structure for interactive prototype
