Kembali ke Portofolio
PROYEK 01 / REKAYASA WEB TERPILIH / Personal Project • F&B Landing Page & Direktori Cabang

Golqi Chicken — Landing Page & Katalog Menu & Pemesanan Cepat

Proyek eksplorasi mandiri merancang dan mengembangkan landing page interaktif brand F&B Golqi Chicken dengan katalog menu lengkap, pemilihan 26+ cabang terdekat di Makassar & Gowa, serta alur pemesanan online dan WhatsApp instan.

Konteks Proyek: Proyek independen / personal project yang dibuat untuk eksplorasi rancangan UI/UX & sistem pemesanan online, bukan atas nama resmi atau penugasan komersial dari pihak Golqi Chicken.
Peran Full-Stack Web Developer Frontend & Rekayasa UI (Personal Project)
Waktu Pengerjaan 3 Minggu Desain, Implementasi & Rilis
Konteks Proyek Personal Project (Eksplorasi Mandiri) Studi Kasus Konsep UI/UX & Web Ordering F&B
Hasil Kerja Landing Page Interaktif & Katalog Menu Komponen Responsif + Integrasi Cabang & Maps
Semua Layar Bedah Arsitektur
Teknologi Inti: Laravel, Tailwind CSS, Alpine.js, Google Maps API, WhatsApp API
12 Gambar Review Lengkap
Golqi Chicken Landing Page interface showcase
Klik untuk Melihat Gambar Ukuran Penuh (Pan & Zoom)
Hero Banner & Pemilihan Cabang Dukungan delivery & pickup, deteksi cabang terdekat di Makassar, serta CTA Order Online yang menarik.
Pilih Tangkapan Layar (12 Gambar):
Tangkapan layar resolusi tinggi (1918×897) • Review desain antarmuka Fitur Zoom & Pan 360° Aktif
Total Cabang
26+

Titik cabang resmi tersebar di Makassar dan Kabupaten Gowa terintegrasi peta.

Total Varian Menu
18+

Koleksi paket ayam krispi, sambal nusantara, burger, camilan, dan minuman segar.

Performa Responsif
100%

Tampilan mobile-first yang nyaman diakses pelanggan melalui smartphone.

Kemudahan Order
4 Langkah

Alur pemesanan ringkas: pilih cabang, pilih menu, bayar aman, pesanan diantar kilat.

Konteks & Eksplorasi Konsep

Menghubungkan 26+ Cabang Fisik ke Pengalaman Pemesanan Digital yang Simpel

Sebagai proyek eksplorasi pribadi di industri F&B, studi kasus ini mengangkat brand kuliner Golqi Chicken yang memiliki lebih dari 26 cabang di wilayah Makassar dan Gowa. Sering kali pelanggan menemui kendala dalam menentukan cabang mana yang terdekat dari lokasi mereka serta jam operasional masing-masing cabang.

Selain itu, banyak pelanggan yang lebih menyukai pemesanan cepat tanpa harus mengunduh aplikasi tambahan, sehingga rancangan landing page berbasis web yang terintegrasi dengan Google Maps dan WhatsApp menjadi fokus utama eksplorasi ini.

Kendala & Tantangan Awal:
  • Pelanggan kesulitan mengetahui cabang Golqi terdekat dari posisi mereka
  • Menu dan harga promosi tidak tersosialisasikan secara terpusat dan dinamis
  • Alur pemesanan konvensional memerlukan chat manual yang lambat tanpa detail pesanan yang jelas
Solusi & Eksplorasi Desain Web

Landing Page Interaktif dengan Deteksi Outlet Terdekat & Katalog Cepat

Saya merancang antarmuka landing page bertema cerah khas kuliner (kombinasi orange segar, kuning hangat, dan putih bersih) dengan fokus kemudahan navigasi bagi pengguna smartphone.

Fitur pemilihan outlet terintegrasi dengan Google Maps untuk navigasi langsung, sementara katalog menu interaktif memudahkan calon pembeli memilih menu favorit dan mengirimkan pesanan terformat rapi ke WhatsApp cabang terkait.

Pemilihan Cabang Otomatis

Pelanggan dapat memilih outlet terdekat dengan info jam operasional dan link rute Google Maps.

Katalog Menu Cepat & Ringan

Pencarian menu instan dengan filter kategori tanpa reload, dioptimalkan untuk koneksi mobile.

Arsitektur Sistem

Teknologi & Perangkat Rekayasa Web

Dipilih untuk performa maksimal, keamanan kode, dan kemudahan pemeliharaan.

Laravel Framework Inti Backend
Tailwind CSS Desain Responsif Cepat
Alpine.js Logika Interaktif Klien
Google Maps Peta & Lokasi Cabang
WhatsApp API Pemesanan Direct Chat
Mobile-First Optimal di Smartphone
Pemecahan Masalah

Tantangan Arsitektur & Solusi Teknis

01

Perutean ke Banyak Cabang Berbeda

Kendala Awal

Tiap cabang memiliki nomor WhatsApp admin dan jam operasional yang berbeda-beda.

Terselesaikan

Membuat struktur data outlet dinamis sehingga saat cabang berganti, nomor WhatsApp dan tautan Google Maps otomatis berubah tanpa reload.

02

Kecepatan Muat pada Jaringan Seluler

Kendala Awal

Banyaknya foto menu makanan beresolusi tinggi berisiko memperlambat loading pada perangkat smartphone.

Terselesaikan

Mengoptimalkan pipeline aset gambar dan menerapkan lazy loading native untuk performa muat secepat kilat.

03

Alur Pemesanan yang Ringkas

Kendala Awal

Formulir checkout yang terlalu panjang sering kali memicu pembatalan pesanan makanan.

Terselesaikan

Menyederhanakan alur menjadi 4 langkah dengan format pesan otomatis siap kirim ke WhatsApp cabang.

Langkah Selanjutnya & Kolaborasi