901 Very Good Cocktails

Project Brief

My intern project at Vertigo was to create an iOS application for the book, “901 Very Good Cocktails,” a specially curated guide to Stew Ellington's favorite cocktails. The book has a ton of content: 901 cocktail recipes, around 250 ingredients used, and 140 categories to sort the cocktails by. Our end goal was to ensure the user could find the perfect cocktail faster using the app than with the book.

Type
iOS App
Role and Scope
UX/UI, competitive analysis, information architecture, wireframes, visual design
When
2014
Team
(CEO) Scott Stanfield, (Engineers) Zachary Thompson, Kyle Janssen, Arthur Wuterich, and Cameron Hall

The Problem & Opportunity

Beyond the limitations of the book

My initial user research was focused on how and why people use the book. I sat down with users and showed them the book, paying attention to how they went about finding a recipe, whether by ingredient, category, or cocktail name. However, what people wanted to do was find a cocktail that you could make right now with what you have and also fit other random criteria (I have gin and I’m in the mood for something tart and fruity, what can I make?).

The book's main disadvantages are being able to search by only ingredient, one category, and only being able to see a few relevant cocktails at any given time. If the user could cross reference multiple ingredients and categories, they could find all the cocktails that match what they’re looking for instantly.

Wireframes

Tackling the big problem

Preventing information overload was critical, so how could the user easily find and select from a total of 400 ingredients and categories without being overwhelmed? How to organize all these filters, by number of appearances, most commonly used, relation to the current search, or by kind of liquor came into consideration in every design iteration.

UI/UX Decisions

Going back to tabs

I held firmly to my belief that the hamburger button did not belong in the app. It made no sense to hide a short list of four main navigation items in a menu which required an extra tap. From any point in the app, the user can access search, favorites, home, and the guide, quickly and easily.

Searching with tags

While the user was searching, it was necessary for them to also see what keywords their query included. The solution was to make search based on tags. A cocktail, ingredient, or category was a “tag” in the search bar, and could easily be deleted from the query without having to open the filter drawer again.

Filters in a sliding drawer

The user can see the number of cocktails decreasing concurrently as they select filters. The drawer was actually one of my first ideas, but was initially rejected because it required an extra click to view filters. In the end, I was able to show that a filter drawer only partially taking up the screen was the best compromise, allowing the user to see the greatest amount of information at once.

Eliminating smart search

With smart search suggestions, we could eliminate the filter drawer, and instead have both matching and related search results appear (for example, if you search whiskey, then related results like orange peel, rye, and scotch would appear, not just word matches). However, since we already had live results based on ingredient and cocktail name, it was redundant to also have smart search.

Use Case A

What can I make with what I have?

You and your friends are all hanging out, and you decide to make some drinks. You didn't prep for this so your bar is pretty empty, and all you have right now are gin and vodka.

Use Case B

How do you make this cocktail?

You're practicing making cocktails and you want to try a classic one. You vaguely remember how to make an Old Fashioned, but you want to be sure of the ingredients and the amounts.

Use Case C

What fits all my requirements?

You've had a huge sugar craving all day and you need something that will satisfy your sweet-tooth and make use of a new bottle of Baileys that you still have yet to use.

Visual Design

Algorithmically created cocktails and garnishes

I had no photos or images to work with, so I had to figure out an alternative. My idea was to have an illustration instead for each cocktail, but as the sole designer with limited amount of time, there was no way I could individually create 901 cocktail images. We decided to create the cocktail images as SVGs so they could easily be altered with a few lines of code.

I used the 12 cocktail glasses used in the book as the base. Each SVG had several layers for garnishes (like lemon wedge, orange peel, cucumber slice, crushed ice, an umbrella, etc.) that could be turned on or off depending on the recipe. The liquid for each cocktail was algorithmically created based on numeric values given to each ingredient that were then averaged. Voila, 901 cocktail images!

Takeaway

Though this project is from 2014, I find it significant because it solidified my passion for design. It was my first real project working with a client and team of engineers, paired with strict requirements and a hard deadline. My biggest lessons learned from this project were collaboration with engineers and how to present my designs and explain design decisions to a client. Collaboration was smooth: updating and handing over assets to engineers through GitHub, and daily meetings organized by myself to discuss the designs.

However, I was unprepared for the deadline, and severely underestimated the time it would take to finalize wireframes and move on to visual design. Admittedly, I'm not the proudest of the way the app looks because of the rush at the end, but I am more than satisfied with the functionality and user experience. Of course, we achieved what the client was looking for in terms of just creating an app, but we went above and beyond by using what was lacking in the book as an opportunity to create a stellar search feature.

Previous Project

Hamilton Benefits Group

Next Project

NCAA March Madness Live