Skip to main content
UI/UX Case Study
Drink Diary icon

Drink Diary

A deep dive into the design thinking behind a social drink logging app — from messy first sketches to a final product that feels like your favourite corner café.

iOS Mobile AppEnd-to-End DesignFigmaReact NativeUser Research

The Brief

Everyone has a drink
they wish they remembered.

There's no good place to log a beautiful matcha latte, a natural wine you found at a farmers market, or the perfect espresso from that tiny shop in Barcelona — and then actually find it again. Instagram buries it. Notes apps forget the context. Vivino only cares about wine.

Drink Diary was designed to fill that gap: a personal, visual, and social log that works for every drink, for everyone — built with the warmth of a handwritten journal and the usability of a modern app.

Logo Concept

A crayon.
On purpose.

The Drink Diary logo was designed to feel made, not manufactured. The mark is intentionally imperfect — edges that don't quite close, fills that bleed slightly outside the lines, a texture that says someone drew this.

That's the crayon philosophy. A crayon drawing has character that a laser print never will. It's warm, a little messy, and completely human. It's the visual equivalent of a handwritten order on a chalkboard at your favourite neighbourhood café.

In a world of slick, rounded app icons that all look the same, Drink Diary's icon is meant to make you pause — and smile. It looks like it belongs on a coffee shop pin board, doodled on a napkin, or stamped on a tote bag.

Drink Diary icon
imperfect edges ↙
↘ handmade texture

Quirky

Not corporate. Never sterile.

Warm

Like a favourite mug.

Cozy

Corner booth energy.

Honest

What you see is what you get.

Color Philosophy

Why green and brown?

Every color in Drink Diary was chosen to evoke a feeling, not just look nice.

G

#19350C

Forest Green

Deep, grounding, and ancient — the color of old forest floors and antique botanical prints. It anchors the app and signals that Drink Diary takes your taste seriously, without taking itself too seriously.

EarthyTrustworthyNatural

O

#687D31

Olive & Sage

Where forest green is depth, olive is light. It's the color of new growth on old vines, of herbs hanging in a kitchen window, of the chalkboard specials at a farmers market. It brings life and warmth.

FreshBotanicalAlive

B

#6F4E37

Coffee & Clay

Coffee brown is the heartbeat of the app — warm, familiar, and rooted in the ritual of drinking. It appears in drink category tags and illustrations, anchoring every screen to the physical act of holding a warm mug.

CozyFamiliarRitual
Forest
Olive
Coffee
Amber
Cream

Full palette — hover each swatch

User Research

Who is Drink Diary for?

Three personas emerged from user interviews and competitive research — each with a different relationship to drinks and discovery.

M

Maya, 26

The Aesthetic Documenter

Freelance photographer who lives for a beautiful latte. She photographs every drink before she sips it, posts to Instagram Stories, then forgets what it was called six months later.

Goals

  • Remember where she found that perfect matcha
  • Build a visual archive of her drink aesthetic
  • Share discoveries with friends without losing them in DMs

Frustrations

  • Instagram is too noisy — drinks get buried
  • Notes apps have no structure or beauty
  • She wants a dedicated space that *gets* her
J

Jordan, 31

The Curious Sipper

Product manager who travels for work and wants to remember the wines, cocktails, and craft beers he discovers. Has a running note in his phone that is completely unmanageable.

Goals

  • Log drinks with enough detail to find them again
  • Track spend and patterns over time
  • Discover new things based on his taste history

Frustrations

  • Vivino is wine-only and dry
  • Untappd feels like a sports bar app
  • Generic note-taking has no drink-specific context
P

Priya, 23

The Social Butterfly

Recent grad who goes out with her friend group every weekend and always wants to know what everyone is drinking. She loves sharing recommendations but hates the friction of texting back and forth.

Goals

  • See what her friends are ordering in real time
  • Give and receive drink recommendations easily
  • Feel like there is a home for her drink personality

Frustrations

  • No app combines logging *and* social in one
  • Privacy concerns with apps that ask for too much
  • Wants a vibe, not a database

Design Process

From sketch to screen

Wireframes were kept intentionally rough — the goal was flow and hierarchy, not aesthetics. Aesthetics came after the structure was proven.

splash art
Onboarding
Home Feed
photo area
Log a Drink
Stats
Profile

Low-fidelity wireframes — structural layout, no visual polish

Usability Study

Testing before building

The full research plan and facilitator script for a hypothetical moderated usability study on the Drink Diary low-fidelity prototype — structured using the Google UX Design framework.

Drink Diary — UX Research Study Plan

Hypothetical study · Spring 2024

Introduction
  • Title: Usability study of Drink Diary — core logging and social discovery flows
  • Author: Joan Karstrom, UX Designer & Developer, joan@jcodestudio.com
  • Stakeholders: Joan Karstrom (Product Owner), iOS Development Team
  • Date: Spring 2024
  • Project background: The Drink Diary design team wants to learn how easy it is for new users to log a drink, share it to the social feed, and find past entries. Early prototype walkthroughs revealed that users hesitated during the log flow and never discovered social sharing on their own. The team wants to identify exactly where users get stuck and why.
  • Research goals: Determine which elements of the log flow are difficult or unclear. Identify why users don’t engage with social sharing on first use. Understand how users navigate back to past entries.
Research Questions
  • What can I learn from the steps users take to log their first drink?
  • Are there parts of the log flow where participants get stuck or confused?
  • Do users understand how to share a log to the social feed — and do they want to?
  • Can users locate a specific past entry through search and filters?
  • Are there design changes I can make to reduce the time and friction of the core log flow?
Key Performance Indicators (KPIs)
  • User error rates
  • Drop-off rates
  • Time-on-task
  • System Usability Scale (SUS)
Methodology
  • Moderated usability study
  • Location: United States, remote (each participant completes the study on their own iPhone)
  • Date: Sessions will take place over five consecutive days
  • Length: Each session will last 30–35 minutes, including a SUS survey following the tasks
  • Compensation: No compensation
Participants

Participants must be:

  • Daily smartphone users, aged 22–38
  • Visit a café, bar, or restaurant at least once per week
  • iPhone owner comfortable with mobile apps
  • No prior exposure to Drink Diary
  • 2 women, 2 men, and 1 nonbinary individual
  • One participant who uses accessibility features (larger text or VoiceOver)
  • Mix of social media habits — from frequent sharers to private users
Script

During the moderated usability study

Prompts are read aloud by the facilitator. Participants think aloud as they interact with the prototype.

Prompt 1: If I told you this app was designed to help you keep track of drinks you love, what kinds of things would you expect to be able to do with it?

Prompt 2: Imagine you just had an amazing matcha latte at a new café down the street and you don’t want to forget it. Show me how you’d log it using this app.

Prompt 2 follow-up: Was logging this drink easy or difficult? What felt natural? What was confusing or unexpected?

Prompt 3: Now imagine you want to share that matcha log with your friends on the app. Show me how you’d go about doing that.

Prompt 3 follow-up: Did you realize the sharing feature existed before I mentioned it? What was easy or challenging about finding it?

Prompt 4: Let’s say you logged a red wine a few weeks ago that you’d love to order again tonight. Show me how you’d find that entry.

Prompt 4 follow-up: What did you try first? What did you expect to see?

After the moderated usability study

Participants will complete the System Usability Scale (SUS)

Participants will score the following ten statements by selecting one of five responses ranging from “Strongly Disagree” to “Strongly Agree.”

  • I think that I would use this app frequently.
  • I find the app unnecessarily complex.
  • I think the app is easy to use.
  • I would need the support of a technical person to use this app.
  • I find the various features in this app to be well integrated.
  • I think there is too much inconsistency in this app.
  • I imagine that most people would learn to use this app very quickly.
  • I feel very confident using this app.
  • I needed to learn a lot of things before I could use this app.
  • The main flow to log a drink is clear.

Competitive Landscape

What's already out there — and where it falls short

The market has excellent vertical solutions. But no app combines broad drink coverage, beautiful visual logging, and a social layer that doesn't feel bolted on.

Vivino

The gold standard for wine logging with a massive community and label scanner.

Gap: Wine only. The UI feels like a wine shop catalogue — functional but cold. Zero social warmth, and no room for coffee, cocktails, or anything outside wine.

Social
2/5
Visual
3/5
Breadth
1/5
Vibe
2/5

Untappd

Huge community for craft beer with badges, check-ins, and venue discovery.

Gap: Beer only, and the design language feels dated and masculine. The badge system is fun but overwhelming — it prioritizes volume over experience.

Social
4/5
Visual
2/5
Breadth
1/5
Vibe
2/5

Instagram

Where most people currently share their drinks — massive reach, beautiful format.

Gap: Drinks get buried in the algorithm and your own feed. There's no structure, no memory, no way to find that amazing negroni you posted 14 months ago. It's not built for this.

Social
5/5
Visual
5/5
Breadth
5/5
Vibe
3/5

Drink Diarythis app

Visual, social, and personal — built for every drink, every person.

Social
5/5
Visual
5/5
Breadth
5/5
Vibe
5/5

Design Principles

The rules that shaped every screen

01

Cozy over clinical

The app should feel like sitting in your favourite café, not filling out a spreadsheet. Warmth, rounded corners, and earthy tones over sharp edges and cold greys.

02

Photo first

The photo is the centrepiece of every log. Everything else — category, location, price — is context that supports the image, not the other way around.

03

Social without oversharing

Your phone number lets you sign in. Your username is what the world sees. Privacy by default, connection by choice. The feed shows vibes, not personal data.

04

Fast logging wins

If logging a drink takes more than 30 seconds, users stop doing it. Every flow was optimised until it hit that target. Speed is a design value, not just engineering.

05

Delight in the details

Background removal on-device. Staggered gallery animations. Micro-haptics on log confirmation. None of these are required — all of them matter.

06

Every drink counts

Matcha, beer, kombucha, orange juice — Drink Diary doesn't have a hierarchy of worthy drinks. The UI treats every entry with the same care.

See the finished product

From crayon logo to final screens — explore the live app page or get in touch.