Studi kasus · Website

Sroja Coffee

Website mobile-first untuk coffee shop open-space di Renon, Denpasar, Bali.

Lingkup: Desain, front-end, struktur konten
Bahasa: Indonesia dan Inggris
Teknologi: HTML, CSS, JavaScript murni

10seksi beranda
72item menu dalam 9 kategori
2bahasa, ganti dengan satu tap
0framework, kode statis yang cepat

Klien

Coffee shop open-space di tengah Denpasar dengan area outdoor, semi-outdoor, indoor bebas asap, dan ruang meeting. Buka setiap hari sampai tengah malam.

Brief

Tampilkan suasana tempatnya, sajikan menu lengkap, permudah booking untuk grup, dan undang kolaborasi event. Semua di situs yang terasa seperti brand-nya, bukan template.

Pendekatan

Ponsel dulu, karena situs kafe dibuka di meja, di jalan, atau dari profil media sosial. Layout editorial yang berani, foto asli, dan gerak ringan yang tidak mengganggu konten.

01
Hero yang langsung terasa suasananya.
Slideshow foto asli dari kafe membuka situs, dengan wordmark besar yang selalu muat satu layar.
- 4 slide foto, masing-masing 6 detik, dengan progress bar
- Foto digelapkan agar judul tetap terbaca
02
Jam buka panjang jadi nilai jual.
Satu seksi lebar menceritakan pagi, siang, dan malam di Sroja.
- Label BUKA / TUTUP dihitung dengan waktu Bali
- Foto dengan parallax halus
03
Empat area, empat pilihan jelas.
Outdoor, semi-outdoor, indoor, dan ruang meeting masing-masing punya kartu dan satu tombol booking.
- Tombol langsung memilih area di form booking
- Kartu bisa digeser di ponsel
04
Menu favorit dari satu file data.
Kartu produk berwarna dengan stiker harga yang dibaca dari data menu.
- Ganti harga cukup di satu tempat
- Chip kategori menuju menu lengkap
05
Booking lewat WhatsApp, tanpa server.
Form mengecek aturan dulu, lalu membuka pesan WhatsApp yang sudah terisi, sehingga staf menerima permintaan yang lengkap.
- Kalkulator minimal order langsung
- Validasi jam buka, jeda 2 jam, dan kapasitas ruang
06
Kolaborasi event yang sulit dilewatkan.
Kapasitas hingga 150 orang dijadikan fokus, lengkap dengan jenis kolaborasi yang diterima.
- Tombol kontak membuka WhatsApp dengan pesan terisi
07
Menu lengkap yang dipindai dari meja.
72 item dari satu file JSON, dengan tab kategori, pencarian, dan filter Signature. Alat kecil membuat kartu QR siap cetak untuk tiap meja.
- Toolbar menempel saat menggulir
- Halaman yang sama jadi menu meja