Hundred Proof

A happy little web application to scale cocktail recipes or dilute spirits.

View project: Hundred Proof

Client: Zach Steiner

My role: User interface, copy, and visual design

Hundred Proof

Challenge

Zach, a front end developer and UX designer, approached me to help with Hundred Proof, the responsive home bartending web application he'd created to do the math necessary to dilute homemade liqueur.

He already had a direction he'd wanted to take the UX, so I took care of the visual design, copywriting, and UI.

I wanted Hundred Proof to feel lighthearted, approachable, and contemporary, but with nods to the material culture of food, drink, and entertaining from the 19th and 20th centuries.

Solution

Wordmark and illustrations

I didn't want the application to feel vintage, or "old-timey", but to be a subtle nod to vintage liquor bottles, cookbooks, and entertaining guides.

This is maybe most evident in the design for the wordmark, which went through many iterations before we struck a balance between vintage-feel and clean, and the illustrations, which are in a flat style meant to be a playful, modern interpretation of a midcentury style.

Hundred Proof wordmark concepts

Typography

I paired a sans-serif typeface with a serif for emphasis and to establish hierarchy while maintaining the vintage aesthtic of the wordmark and illustrations.

The script typeface used for user inputs is a fun nod to old recipe cards, and handwritten labels on small-batch or homemade liqueurs.

Hundred Proof typography specimens
Hundred Proof scale view on mobile
Hundred Proof dilute view

Custom iconography

The icons are also custom, and went through a round of iteration to ensure they were graphically reduced enough to be recognizable at a small scale without drawing too much attention.

Hundred Proof custom icons
Hundred Proof dilute view on mobile

Lessons learned: the need for speed!

When I started designing software, I focused on adopting speed as an operating principle.

The possibility of iteration, and the knowledge as a designer that an experience is likely to change after becoming available is a great reason to lean into delivering quickly and aiming for excellence, not perfection. "Good enough to ship" often wins the day.

This project, executed quickly over a few hours in an afternoon, then revisited over another afternoon, was no different. We worked fast, kept things flexible, and had fun without sacrificing craft.

Lessons learned: design and dev are like chocolate and peanut butter

I love working with developers. I count collaborating closely with developers among some of my favorite work experiences to date.

I find it so much more valuable to have a conversation about implementing more difficult parts of an experience than getting caught in the back and forth of failing something in QA because it isn't quite perfect. There were a number of small changes, or compromises, to Hundred Proof, but I'm really glad to have had the opportunity to collaborate in real time to work through them together, and I'm really pleased with where we landed.

Home