Studi Kasus

Brewing Better UX

Peran: Lead Product Designer Tahun: 2024 Klien: Boutique Coffee Subscription Teknologi: Laravel, PostgreSQL, Tailwind CSS

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

Tantangan

Mengubah friksi produk menjadi alur digital yang lebih manusiawi dan lebih kredibel.

Independent coffee shops perlu melayani pelanggan yang ingin serba cepat tanpa mengubah pengalaman menjadi terasa seperti vending machine.

Solusi digital lama terlalu transaksional, minim konteks produk, dan tidak memberi estimasi pickup yang meyakinkan.

Insight Kunci

Apa yang muncul dari riset sebelum keputusan visual dibuat.

Time sensitivity

Pengguna meninggalkan proses checkout saat estimasi pickup terasa samar atau terlalu lama.

Editorial discovery

Pengunjung tetap ingin membaca tasting notes dan detail roast, bukan sekadar daftar nama menu.

Proses

Dari sketsa dan wireframe menuju bahasa interaksi yang lebih hangat.

Spatial mapping. Wireframe awal memprioritaskan hierarki visual antara foto produk, rasa, ukuran, dan waktu pickup.

Micro-interaction pass. State brewing dibuat hangat dan jelas agar pengguna merasa proses fisik di toko benar-benar berjalan.

Notebook with hand-drawn mobile UI sketches beside coffee. — Early ideation untuk alur pre-order dan pickup.

Low-fidelity mobile wireframes on a soft neutral background. — Mid-fidelity wireframes untuk validasi struktur.

Hasil Akhir

Apa yang perlu dikomunikasikan sistem final, bukan sekadar ditampilkan.

Sistem visual akhir menggabungkan espresso tones, cream highlights, dan chip metadata untuk menjaga rasa hangat sekaligus informatif.

Status order dibuat progresif dengan bahasa yang lebih manusiawi agar pengguna paham apa yang sedang terjadi di balik layar.

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");
  }
}

Sinyal Proyek

Beberapa outcome yang layak tetap terlihat.

Checkout completion

+24%

Order abandonment

-18%

Pickup clarity

78% users preferred guided status