Lewati ke konten
Kembali ke karya
Landing Page

Jack & John Kitchen - Website

Website bilingual (Bahasa Indonesia / Inggris) untuk Jack & John Kitchen yang menghadirkan informasi brand, menu lengkap, lokasi outlet, dan layanan katering dalam satu platform. Dirancang sesuai kebiasaan masyarakat Indonesia yang mengandalkan WhatsApp, setiap tombol aksi langsung terhubung ke WhatsApp sehingga pelanggan dapat menghubungi tim dengan cepat tanpa proses checkout yang rumit. Website ini mudah dikelola untuk memperbarui menu, harga, informasi outlet, dan promo kapan saja. Dioptimalkan untuk perangkat mobile, website memberikan pengalaman yang cepat dan nyaman bagi pelanggan lokal maupun ekspatriat.

jack-john.vercel.app
Open ↗

Masalah

Jack & John Kitchen berdiri di Surabaya pada 2016, berkembang menjadi 10+ outlet di Surabaya dan Jakarta, mendapatkan investasi dari ISMAYA Group (salah satu konglomerat F&B terbesar Indonesia), dan membangun basis pelanggan setia — termasuk 24.000+ followers Instagram dan julukan informal "No. 1 Babi Kriuk In Town." Meski demikian, brand ini tidak memiliki website resmi. Kehadiran digitalnya sepenuhnya terfragmentasi: Discoverability yang buruk. Calon pelanggan yang mencari "babi kriuk Jakarta" atau "katering babi kriuk Surabaya" akan mendarat di situs review pihak ketiga, listing aggregator, atau profil Instagram — tidak satu pun yang dikontrol penuh oleh brand. Tidak ada halaman milik sendiri yang bisa muncul di hasil pencarian. Cerita brand tidak tersampaikan. Dukungan ISMAYA Group, kisah para pendiri, perjalanan ekspansi brand — semua ini tidak dikomunikasikan di mana pun secara online. Yang seharusnya menjadi sinyal kepercayaan kuat bagi pelanggan baru justru tidak ada di ruang digital. Permintaan katering tidak punya jalur yang jelas. Katering adalah sumber pendapatan bernilai tinggi (acara korporat, pernikahan, perayaan Imlek), namun tidak ada cara yang terstruktur bagi bisnis atau penyelenggara acara untuk menghubungi brand. Pertanyaan masuk secara tidak konsisten melalui DM Instagram, telepon, atau dari mulut ke mulut. Ketergantungan pada aplikasi pesan antar menimbulkan risiko. Sebagian besar pesanan masuk melalui GoFood, GrabFood, dan ShopeeFood. Setiap platform mengambil komisi 20–30%, memiliki data pelanggan, dan mengontrol visibilitas brand melalui algoritma mereka sendiri. Perubahan struktur biaya atau peringkat platform bisa langsung berdampak pada pendapatan. Tidak ada tempat sentral bagi pelanggan setia. Pelanggan reguler yang ingin mengecek menu terbaru, menemukan outlet baru, atau berbagi brand dengan teman tidak punya destinasi yang andal. Brand sepenuhnya bergantung pada jangkauan Instagram yang rentan terhadap perubahan algoritma.

Tujuan

Website ini dibangun untuk menyelesaikan setiap masalah tersebut secara praktis dan bertahap: Membangun satu sumber informasi utama. Satu URL — jacknjohnkitchen.com — tempat pelanggan, media, dan mitra potensial bisa menemukan segalanya: menu lengkap, semua lokasi dan jam buka outlet, layanan katering, cerita brand, dan informasi kontak. Memiliki hubungan langsung dengan pelanggan untuk jenis pesanan tertentu. Pesanan WhatsApp langsung untuk takeaway dalam jumlah besar, katering, dan produk kemasan sepenuhnya melewati komisi aplikasi pesan antar. Brand mempertahankan data pelanggan dan channel komunikasinya. Membuat katering mudah diakses dan terasa profesional. Formulir permintaan katering yang terstruktur — dengan jenis acara, tanggal, jumlah tamu, dan lokasi — memberi tim semua informasi yang dibutuhkan untuk merespons dengan cepat. Notifikasi email memastikan tidak ada permintaan yang terlewat. Memberikan brand identitas digital yang mencerminkan energi fisiknya. Desain visual website — hitam dan kuning yang bold, tipografi condensed, tidak ada sudut melengkung, layout editorial yang tegas — adalah terjemahan langsung dari karakter brand di dalam toko. Pengunjung pertama kali yang mendarat di website seharusnya langsung memahami siapa Jack & John sebelum membaca satu kata pun. Memberikan kemandirian dalam pengelolaan konten. Tim dapat memperbarui harga menu, menambahkan outlet baru, mempublikasikan kampanye, dan mengubah teks hero tanpa perlu mengajukan permintaan ke developer. Sanity CMS dirancang untuk editor non-teknis. Membangun fondasi untuk pertumbuhan. v1.0 sengaja tidak menyertakan payment gateway, akun pengguna, dan pelacakan pesanan. Ini adalah fitur Fase 2 dan Fase 3. Arsitekturnya dirancang agar fitur-fitur tersebut bisa ditambahkan tanpa membangun ulang seluruh situs.

Fitur

  • Menu lengkap yang bisa dijelajahi per kategori (Babi Kriuk, Babi Kecap, Rice Bowls, Produk Kemasan, dll.)
  • Tab kategori dengan urutan tampil yang diatur dari CMS
  • Setiap item menampilkan nama, deskripsi, harga dalam IDR, varian rasa, dan info alergen
  • Badge Bestseller dan Baru, keduanya dikontrol dari CMS
  • Tombol pesan WhatsApp di setiap item menu, sudah terisi nama item secara otomatis
  • Seksi terpisah untuk produk kemasan/olahan yang tersedia di luar outlet
  • Semua konten bilingual — nama, deskripsi, dan pesan WhatsApp dalam dua bahasa
  • Kartu outlet yang dikelompokkan per kota (Surabaya lebih dulu, lalu Jakarta)
  • Setiap kartu menampilkan nama outlet, mall/lokasi, alamat lengkap, dan jam buka hari ini
  • Jam buka dikalkulasi secara dinamis — menampilkan "Buka Sekarang" atau "Tutup" berdasarkan waktu saat ini
  • Tautan satu ketuk ke Google Maps, GoFood, GrabFood, dan ShopeeFood per outlet
  • Nomor WhatsApp khusus per outlet (menggantikan nomor global jika diisi)
  • Galeri foto per outlet
  • Badge outlet baru untuk lokasi yang baru dibuka
  • Tiga atau lebih paket katering (misalnya Korporat, Privat, Pernikahan) dengan fitur dan harga mulai per orang
  • Setiap paket menampilkan minimum dan maksimum jumlah tamu, lead time, dan area pengiriman
  • Highlight "Paling Diminati" pada paket yang direkomendasikan
  • Formulir permintaan katering dengan kolom: nama, nomor HP, email, jenis acara, tanggal acara, jumlah tamu, lokasi, dan catatan
  • Validasi Zod di sisi klien dan server — tidak ada pengiriman yang tidak lengkap sampai ke tim
  • Notifikasi email ke tim katering untuk setiap pengiriman yang berhasil
  • Rate limiting untuk mencegah penyalahgunaan formulir