Orang yang membeli kopi lewat website tidak bisa mencium aromanya atau mencicipinya lebih dulu. Mereka harus mengandalkan informasi yang kita tampilkan: asal biji, proses, profil sangrai, dan gambaran rasanya. Itu titik awal saya saat membangun Himawari Roastery, sebuah website untuk roastery yang berfokus pada kopi single-origin Gayo, Aceh.
Saya mengerjakan desain antarmuka dan pengembangan webnya, dari halaman pengenalan sampai alur pemesanan. Claude Code dan Codex ikut membantu proses pengembangan, termasuk menerjemahkan konsep visual biji kopi menjadi objek yang dibentuk lewat kode. Di tulisan ini, saya membahas alasan di balik pilihan tersebut dan hal yang bisa diambil untuk proyek serupa.
Mulai dari pertanyaan pembeli
Untuk pembeli yang sudah terbiasa dengan specialty coffee, nama daerah saja belum cukup. Mereka mungkin ingin tahu proses pascapanen atau apakah sangrainya cocok untuk filter dan espresso. Pembeli yang baru mencoba justru membutuhkan penjelasan yang lebih sederhana agar bisa memilih tanpa harus mengerti semua istilah kopi.
Karena itu, informasi produk dan konten edukasi punya peran berbeda. Halaman produk membantu orang mengambil keputusan, sementara halaman tentang kopi dan Gayo memberi konteks bagi yang ingin membaca lebih jauh. Pelajaran yang saya ambil: tentukan dulu pertanyaan yang perlu dijawab di setiap halaman, baru pikirkan tampilannya.
Memberi ruang untuk kopi dan ceritanya
Arah visualnya menggabungkan tata letak yang tenang dengan warna gelap, teks krem, dan aksen emas hangat. Playfair Display dipakai untuk judul, Inter untuk bacaan panjang, dan IBM Plex Mono untuk detail teknis. Pembagian ini membantu membedakan cerita, informasi produk, dan spesifikasi saat halaman dipindai.
Visual biji kopi memberi titik perhatian di antara teks dan foto produk. Namun, orang yang sudah tahu apa yang ingin dibeli tetap perlu menemukan katalog dan tombol pesan dengan mudah. Bagi saya, ukuran keberhasilan desainnya adalah seberapa jelas pengunjung bisa memahami produk dan melanjutkan ke langkah berikutnya.
Konsep objek 3D dan bantuan Claude Code serta Codex
Saya menggunakan Claude Code dan Codex sebagai alat bantu untuk mengeksplorasi ide dan menulis implementasinya. Bantuan itu juga mencakup konsep objek biji kopi: bagaimana bentuk, kesan kedalaman, dan geraknya bisa diterjemahkan ke dalam kode. Arah visual dan pemilihan hasil yang digunakan tetap menjadi bagian pekerjaan saya.
Pendekatan visual yang dipakai bersifat prosedural. Bentuk dan geraknya dihitung lewat kode serta canvas, sehingga tidak harus bergantung pada unduhan model 3D yang besar. Di sini, istilah visual 3D merujuk pada tampilan bervolume yang dibangun secara matematis; prosesnya tidak sama dengan membuat aset pahatan di aplikasi pemodelan lalu mengekspornya ke website.
Hal yang menarik dari bekerja dengan AI adalah ide bisa lebih cepat menjadi sesuatu yang bisa dilihat. Setelah ada bentuk awal, barulah saya bisa menilai apakah tampilannya cocok dengan brand, apakah geraknya terlalu ramai, dan apakah detailnya memang perlu. Hasil dari AI tetap perlu diperiksa dalam konteks halaman yang sebenarnya.
Saya juga tidak menganggap kode yang berhasil dikompilasi sebagai tanda semua pekerjaan selesai. Pemeriksaan tipe membantu menemukan sebagian kesalahan, tetapi tidak bisa menilai apakah bentuk bijinya terasa pas atau apakah interaksinya nyaman digunakan. Itu membutuhkan penilaian visual dan pengujian di browser.
Animasi punya biaya
Objek yang terus bergerak membuat browser terus bekerja. Untuk membatasi pekerjaan tersebut, animasi dipantau berdasarkan visibilitasnya: ketika bagiannya keluar dari layar, render loop dijeda. Preferensi reduced motion juga diperhitungkan untuk pengguna yang mengurangi gerakan di perangkatnya.
Gambar produk ditangani terpisah melalui Vercel Blob dan pemrosesan Sharp menjadi beberapa ukuran. Tujuannya agar gambar kecil di katalog tidak perlu memakai berkas sebesar gambar detail. Ini keputusan implementasi untuk mengendalikan beban halaman, bukan bukti bahwa semua perangkat akan mendapat hasil performa yang sama. Saya tidak menyertakan angka FPS atau skor kecepatan karena belum ada hasil pengukuran yang disertakan dalam case study ini.
Alur belanja berlanjut setelah tombol bayar
Pemesanan dirancang tanpa mewajibkan pembeli membuat akun. Dari halaman produk, pilihan barang dapat langsung dibawa ke alur pemesanan agar pembeli tidak perlu memilih ulang. Ongkos kirim dihitung menggunakan RajaOngkir melalui Komerce, dengan tujuan pengiriman sampai tingkat kecamatan.
Pembayaran menyediakan DOKU dan transfer bank manual. Pilihan manual berarti ada pekerjaan lanjutan: pembeli mengunggah bukti transfer, admin memeriksanya, lalu status pesanan diperbarui. Notifikasi WhatsApp melalui Fonnte dan email melalui Resend membantu menyampaikan perkembangan pesanan.
Dari bagian ini, pelajarannya cukup praktis: desain checkout perlu mencakup pekerjaan admin. Tampilan pembayaran yang singkat belum menyelesaikan masalah kalau pengelola kesulitan mencocokkan pembayaran dan pesanan. Status serta langkah verifikasi perlu sama jelasnya dengan formulir yang dilihat pembeli.
Konten yang bisa dikelola setelah website selesai
Next.js dan React menangani halaman serta interaksi, sementara Payload CMS menyediakan tempat untuk mengelola konten dan data operasional. Turso digunakan sebagai database. Pemisahan ini membantu pengelola memperbarui informasi tanpa harus mengubah kode halaman setiap kali ada perubahan produk.
Data produk juga menjadi dasar metadata dan structured data. Saya memperlakukan bagian ini sebagai upaya menjaga informasi tetap konsisten dengan yang terlihat di halaman. Implementasi schema tidak saya jadikan janji peringkat pencarian atau jaminan munculnya bintang ulasan di Google.
Yang saya bawa ke proyek berikutnya
Himawari membuat saya melihat desain, visual interaktif, dan operasional toko sebagai pekerjaan yang saling terkait. Sebuah objek biji kopi bisa menarik perhatian, tetapi informasi produk harus membantu orang memilih. Checkout perlu mudah dipakai, dan proses di belakangnya harus bisa ditangani pengelola.
Claude Code dan Codex membantu saya mengubah konsep menjadi implementasi yang bisa diperiksa dan diperbaiki. Nilainya terasa pada proses mencoba dan mengulang. Keputusan tentang apa yang layak ditampilkan, apa yang perlu disederhanakan, dan apa yang masih harus diuji tetap perlu diambil oleh orang yang membangun websitenya.