Case Study

Brewing Better UX

Role: Lead Product Designer Year: 2024 Client: Boutique Coffee Subscription Tech: Laravel, PostgreSQL, Tailwind CSS

Coffee ordering app on a phone beside a latte in warm morning light.

The Challenge

Turning product friction into a more human, more credible digital flow.

Independent coffee shops need to serve customers who want speed without making the experience feel like a vending machine.

The previous digital flow was too transactional, offered little product context, and failed to communicate pickup timing with confidence.

Key Insights

What research surfaced before visual decisions were made.

Time sensitivity

Users were likely to drop off when pickup estimates felt vague or stretched too long.

Editorial discovery

Customers still wanted tasting notes and roast details, not just a list of menu names.

The Process

From sketches and wireframes to a warmer interaction language.

Spatial mapping. The initial wireframes prioritized the relationship between product imagery, flavor notes, size selection, and pickup timing.

Micro-interaction pass. Brewing states were made warmer and clearer so users could feel the physical process happening behind the counter.

Notebook with hand-drawn mobile UI sketches beside coffee. — Early ideation for the preorder and pickup flow.

Low-fidelity mobile wireframes on a soft neutral background. — Mid-fidelity wireframes used to validate structure.

The Outcome

What the final system needed to communicate, not just display.

The final system blended espresso tones, cream highlights, and metadata chips to keep the interface warm while still informative.

Order status was rewritten in more human language so users could understand what was happening behind the scenes.

const brewingStages = {
  RECEIVED: { label: "Order Received", icon: "receipt_long" },
  GRINDING: { label: "Grinding Beans", icon: "grain" },
  POURING: { label: "Careful Pour", icon: "water_drop" },
  READY: { label: "Ready for Pickup", icon: "check_circle" },
};

export function updateStatusIndicator(currentStageId) {
  const stage = brewingStages[currentStageId];
  if (!stage) return;

  UI.setStatusText(stage.label);
  UI.animateIcon(stage.icon, {
    duration: 300,
    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
  });

  if (currentStageId === "READY") {
    UI.triggerHapticFeedback("success");
    UI.highlightContainer("bg-success");
  }
}

Project Signals

A few outcomes worth keeping visible.

Checkout completion

+24%

Order abandonment

-18%

Pickup clarity

78% preferred guided status