01. Konteks Bisnis & Masalah Nyata di Lapangan
Yakurir adalah layanan kurir lokal dan pesan-antar makanan on-demand terkemuka di Kota Probolinggo dengan volume transaksi harian yang tinggi. Sebelum perancangan ulang sistem ini, bisnis menghadapi gesekan (operational friction) yang nyata di lapangan:
- Kekacauan Operasional Skenario “Barang Habis”: Masalah terbesar terjadi saat menu pesanan habis di warung/resto. Admin harus chat pelanggan secara manual di WhatsApp, menghitung ulang total nota di kalkulator, dan mengabari kurir. Kesalahan hitung nominal tagihan sering terjadi dan membuat kurir menunggu lama di lokasi.
- Friksi Pendaftaran di Kota Tier-3: Memaksa pelanggan mengunduh aplikasi Play Store atau meminta registrasi kata sandi dan kode OTP SMS memicu tingkat drop-off (pembatalan order di awal) yang sangat masif.
- Beban Biaya API Pihak Ketiga (SaaS Cost Drain): Margin layanan logistik lokal tergerus jika mengandalkan Google Maps Distance Matrix per-panggilan API serta biaya percakapan berbayar dari vendor WhatsApp Business API (WABA).
Sebagai UX Engineer, pendekatan saya bukan sekadar membuat gambar mockup visual, melainkan membangun fondasi Design Tokens di Figma yang dipetakan 1:1 ke kode produksi, memodelkan alur kerja kurir melalui state machine, dan menghadirkan solusi antarmuka hidup (living interfaces).
02. Fondasi Design Tokens di Figma (The Engineering Blueprint)
Sebelum merancang komponen UI, saya menyusun aturan token baku di Figma agar tidak ada magic numbers atau nilai arbitrary saat diterjemahkan ke kode frontend.
A. Skala Spacing Tokens & Aturan Tata Letak
Setiap jarak antar elemen memiliki fungsi fungsional yang terdefinisi secara matematis:
| Jarak Token | Skala Tailwind | Peruntukan Fungsional dalam Komponen |
|---|---|---|
4px | gap-1 / p-1 | Micro gap: Jarak antara ikon kecil dan teks label |
8px | gap-2 / p-2 | Tight: Jarak antara label formulir dan field input |
12px | gap-3 / p-3 | Card Default: Jarak hierarki internal antar baris kartu |
16px | gap-4 / p-4 | Card Padding: Padding standar wadah konten (container) |
24px | gap-6 / p-6 | Section Spacing: Jarak pemisah antar grup modul |
32px | gap-8 / p-8 | Major Spacing: Jarak antar seksi utama dalam halaman |
48px | gap-12 / p-12 | Page Section Break: Jarak pemisah blok arsitektur besar |
B. Sistem Corner Radius Tokens
Sudut lengkung (border radius) diatur bertingkat sesuai kedalaman dan ukuran elemen:
xs: 4px(rounded-sm): Input field kecil, tag status kecil, micro badge.sm: 8px(rounded): Tombol aksi standar, thumbnail item menu.md: 12px(rounded-md): Kartu produk merchant, panel dialog ringkas.lg: 16px(rounded-lg): Bottom sheet mobile, modal checkout.xl: 24px(rounded-xl): Banner promosi hero, kartu promo utama.full: 9999px(rounded-full): Avatar pengguna, pill tag filter aktif.
03. Arsitektur State Machine & Alur Antarmuka Kurir
Pengalaman kurir di jalan (on-the-road UX) sangat menuntut kepraktisan: jari kurir sering kali hanya bisa menjangkau satu jempol saat mengendarai motor. Saya merancang alur kerja kurir berbasis State Machine yang deterministik:
Courier Dispatch Lifecycle (The 4 Core Phases)
Kurir membuka antarmuka, status armada berubah menjadi "Aktif Standby" di dispatcher pool.
Notifikasi via grup WhatsApp kurir terisolasi. 1-tap terima pesanan mengunci tugas.
Kurir mengambil makanan, update status status ke picked_up, rute GPS ke pelanggan aktif.
Tiba di titik antar, input biaya parkir riil warung, 1-klik tanda pesanan terkirim (Delivered).
04. Ekosistem Multi-Peran (Customer, Courier, & Dispatcher)
Sistem Yakurir bukan hanya satu antarmuka tunggal, melainkan sebuah orkestrasi 3 peran yang saling terhubung secara real-time:
A. Customer Mobile Web (Zero-Friction Ordering)
- Zero-Password Onboarding: Pelanggan tidak perlu repot mengingat kata sandi atau menunggu SMS OTP yang rawan gagal. Identitas (nama & nomor WhatsApp) tersimpan aman di cookie peramban dengan retensi 30 hari.
- Rp 0 Maps Pinning via Leaflet & OpenStreetMap: Pelanggan dapat menggeser pin lokasi pengantaran secara presisi dengan mesin pencari geocoding Nominatim tanpa menimbulkan biaya API per klik.
B. Dispatcher & Admin Operations Panel
- Live Operations Dashboard: Panel monitoring waktu-nyata untuk memantau status pesanan (PROSES, ANTAR, SAMPAI, LUNAS).
- Assign Kurir Modal: Modal cepat untuk memilih kurir yang bertugas di zona radius terdekat.
05. Inovasi “Living Invoice” & Automated Visual Diff
Salah satu inovasi UX terpenting dalam proyek ini adalah mengubah nota transaksi statis menjadi Living Invoice (/i/{token}) yang hidup dan adaptif:
- Visual Diff Transparan: Jika restoran kehabisan satu menu, admin mengubah pesanan di panel Filament. Tautan WhatsApp otomatis mengarah ke Living Invoice.
- Pelanggan melihat baris menu yang dibatalkan dengan format strikethrough merah, penyesuaian nominal harga terlihat langsung, dan tersedia tombol 1-klik “Setujui Revisi” atau “Batalkan Pesanan”.
- Tri-Party WhatsApp Copy Synthesizer: Dari satu pesanan, sistem secara otomatis meracik 3 salinan pesan WhatsApp yang berbeda sesuai peran:
- Salinan Pelanggan: Rincian menu, rekening transfer, dan link Living Invoice.
- Salinan Dapur/Restoran (Tiket Masak): Hanya daftar pesanan dan catatan koki (kontak pelanggan & margin internal disembunyikan).
- Salinan Kurir: Alamat penjemputan, pin GPS antar, kontak telepon, dan total uang tunai yang wajib disetorkan.
06. Dampak Bisnis & Hasil Nyata di Produksi
Hasil penerapan prinsip UX Engineering yang terstruktur dari Figma ke kode:
- Migrasi Data 100% Utuh: Berhasil memigrasi 50.118 data transaksi historis (2020–2026) dengan total nilai GMV mencapai Rp 1,07 Miliar.
- Efisiensi Finansial Maksimal (Rp 0 API Costs): Menghapus biaya tagihan bulanan Google Maps & WhatsApp Business API komersial dengan mengandalkan Leaflet/OSM dan agen mandiri Hermes Daemon.
- Peningkatan Kecepatan Operasional >60%: Otomasi Living Invoice memangkas waktu negosiasi admin saat resto kehabisan stok dari sebelumnya 5–10 menit menjadi hitungan detik.
- Ketahanan Sistem Teruji: Dilengkapi 364 automated tests (100% green suite) yang diuji langsung pada salinan database produksi.
- Staging Terverifikasi: Dapat diakses dan dicoba langsung di yakurir.donnysaas.com.
