UX/UI · Mobile App · Case Study

Dairy
Drop

An end-to-end UX/UI case study for a subscription-based dairy & non-dairy delivery app — designed to feel as effortless as “set it and forget it,” from first search to one-tap subscription control.

Role
Sole UX/UI Designer
Tools
FigmaMiro
Focus
Research · IA · Subscription UX
Deliverables
8 hi-fi screens · Prototype
Dairy Drop — UX/UI case study cover UX/UI Case Study
Project Overview

“Set it and forget it” dairy delivery

DairyDrop is a subscription-based dairy and non-dairy delivery service that gives customers the convenience of a grocery run — without the trip. The goal was a validated, low-friction flow built around three things: search, transparency, and effortless subscription control.

The approach combined competitive research, primary user interviews, and quantitative market data to move from assumptions about the target user to a design grounded in real behaviour.

8
Hi-fi screens designed
2
Personas & empathy maps
4
Competitors benchmarked
The Challenge

How might we make dairy delivery reliable and flexible?

How might we

Help customers achieve reliable, flexible dairy delivery without dealing with unpredictable delivery windows and confusing subscription management?

The Challenges
01
Unpredictable delivery windows
Customers skip entire weeks when they can’t plan around uncertain arrival times.
02
Confusing subscription management
No clear path to pause, skip, or modify a recurring order — leading to cancellations instead of adjustments.
03
Lack of origin transparency
Customers wanted to know which farm their milk came from — the existing UI gave no traceability.
04
High new-user friction
Account creation was required before product browsing — a well-known driver of top-of-funnel abandonment.
My Role & Vision

Sole designer, end-to-end

End-to-end ownership of research, strategy, interaction design and visual design. The design goal was invisibility — every decision measured against one question: does this remove a step, or add one?

My responsibilities

  • Competitive analysis of four direct competitors across ten feature dimensions
  • Primary qualitative research: walk-and-talk interview with the target user
  • Secondary quantitative research: market sizing, delivery-abandonment data, food price indices
  • Assumptive and validated personas, empathy maps and user flows
  • Information architecture and sitemap
  • Speed sketching, A/B testing, low-, mid- and high-fidelity wireframes
  • Customer journey map
  • Interactive prototype and brand-aligned UI system

Project vision

To build a dairy delivery app that feels as considered as the product it delivers — where a customer can find what they need in one search, understand exactly where their milk came from, know precisely when it will arrive, and skip a week in a single tap.

Success criteria

  1. A first-time user reaches a product page without creating an account
  2. Any product is findable in one search
  3. Subscription pause or skip in a single tap
  4. Delivery ETA visible before checkout
Brand Identity

Colors and typography

A clean, dairy-fresh identity — a soft cyan carried by black and neutral surfaces. Confident serif display for headlines, humanist sans for the interface.

Ink#000000
Cyan#8CE4ED
Mist#DFE5E5
Surface#FFFFFF
Display Font
Eloquent JF Pro
Every drop counts
UI Font
Proxima Nova
Clean, readable interface text.
Brand Board Dairy Drop brand identity board
Discovery

Research & competitive benchmarking

I benchmarked four direct competitors across ten feature dimensions, gathered qualitative signal from a walk-and-talk interview, and grounded delivery-abandonment and market-size assumptions in secondary data.

Competitive Matrix Competitive matrix across ten feature dimensions
Competitive Research Competitive research board
Feature Teardown Feature teardown affinity board
Primary Research Primary research
Secondary Research Secondary research and market trends
Users

Personas & empathy maps

Two personas anchored the work: Maya, an assumptive qualitative “Explorer,” and David, a validated quantitative “Sage.” Empathy maps turned their frustrations, fears and gains into design fuel.

Persona — The Explorer Qualitative persona: Maya Patel
Empathy Map — Maya Empathy map canvas for Maya
Persona — The Sage Quantitative persona: David Kim
Empathy Map — David Empathy map canvas for David
Structure

User flows, IA & journey

I mapped an assumptive flow first, then validated it against the user interview and secondary research and rebuilt it — guest browsing, search-first discovery, and one-tap subscription control shaped by those findings.

Assumptive Flow Assumptive user flow
Validated Flow Validated user flow
IA Site Map Information architecture site map
Customer Journey Map Customer journey map
From sketch to structure
Speed Sketches Eight speed-sketch layout variants
A/B Testing A/B testing of two layouts
Refined Wireframes Refined wireframes — eight screens
Mid-Fidelity

Mid-fidelity screens

Grayscale mid-fidelity screens locked layout, hierarchy and flow before any visual styling — proving the structure works on its own, with no color or imagery doing the heavy lifting.

Mid-fidelity sign in / sign up screen
Mid-fidelity home screen
Mid-fidelity product detail screen
Mid-fidelity product catalog screen
Mid-fidelity checkout screen
Mid-fidelity track order screen
Mid-fidelity subscriptions screen
Mid-fidelity profile screen
Final UI

Hi-fidelity screens

Eight screens define the complete experience — from guest-friendly sign-in and search-first home to product detail, checkout, real-time tracking, and one-tap subscription management.

Sign in / Sign up screen
Home screen
Product detail screen
Product catalog screen
Checkout screen
Track order screen
Subscriptions screen
Profile screen
Reflection

What the research changed

01
Being proven wrong
The assumptive persona expected a sustainability-driven user. Observation showed the opposite — she skipped the ethical story and looked for a farm name and best-before date. Proof over narrative.
02
Sign-in placement matters
A sign-in wall right after the splash made me abandon a competitor app almost immediately. Guest browsing became non-negotiable.
03
Cancel-ability = trust
Subscription, assumed to be a simple benefit, triggered the strongest emotion: fear of not being able to cancel. Easy pause/skip earns the subscription.
04
Watching beats asking
Users described themselves as browsers — then went straight to the search bar every time. Design for what people do, not what they say.

Want to see it move?

Explore the interactive Figma prototype, download the full case study, or let’s talk about building clean, research-led product experiences.