Langsung ke konten

Karpen Coffee

Karpen Coffee

Klien pertama kami: situs dua bahasa untuk kedai kopi di tepi sawah Madiun. Menu 91 item, pesan antar dan reservasi lewat WhatsApp, promo terjadwal, dan panel staf yang diatur sendiri oleh tim Karpen.

karpen.id (membuka tab baru)
  • Website
  • CMS
  • Sistem bisnis
Karpen Coffee digambar dalam 3D: kedai di tepi sawah, meja saji, empat area duduk, dan panel staf.Karpen Coffee digambar dalam 3D: kedai di tepi sawah, meja saji, empat area duduk, dan panel staf.
Tepi sawah Pilangbango91 menu, diatur dari CMSEmpat area dudukPanel staf dengan peran
Tepi sawah Pilangbango91 menu, diatur dari CMSEmpat area dudukPanel staf dengan peran

Kedai kopi di tepi sawah Madiun, buka sejak 2021

Karpen Coffee adalah kedai kopi di tepi sawah Pilangbango, Madiun, yang buka sejak 2021. Kopinya dari Ijen dan Dampit, menunya 91 minuman dan makanan, dan tempat duduknya tersebar dari ruang dalam berangka kayu sampai mezanin yang menghadap sawah, buka setiap hari pukul 10.00–23.00. Namanya diambil dari carpenter, karena pemiliknya anak seorang tukang kayu. Kebanyakan tamunya membuka situs dari HP: cek menu, lihat jam buka, lalu pesan atau reservasi.

Klien
Karpen Coffee
Industri
Kedai kopi
Lokasi
Pilangbango, Madiun, Jawa Timur
Tahun
2026
Peran kami
Desain, pengembangan, CMS, dan panel staf

karpen.id hari ini, di laptop dan di HP

Beranda karpen.id di laptop: judul "Better days with Karpen.", foto kedai di bawah pohon, dan tombol lihat menu dan reservasi meja.
Beranda: kedai, jam buka, dan dua tombol yang paling sering dipakai, lihat menu dan reservasi meja.
Menu karpen.id di HP: kategori Signature Beverage dengan 32 menu, foto minuman, harga, dan tombol tambah.
Menu per kategori, dengan pencarian.
Satu menu di karpen.id: Kopi Susu Karpen Rp22.000, deskripsi, kolom catatan, jumlah, dan tombol tambah.
Satu menu: penyajian, catatan, dan jumlah.
Menu karpen.id dalam bahasa Inggris di HP: judul "The full menu", pilihan Drinks dan Food, dan pencarian.
Menu yang sama, dalam bahasa Inggris.

Setiap ganti harga harus lewat developer

Situs lamanya ditulis langsung di kode, jadi setiap perubahan menu atau harga harus lewat developer. Saat kami mengauditnya pada 16 Oktober 2026, kami juga menemukan:

  • Judul dan gambar share yang sama di setiap halaman, dan alamat yang tidak ada tetap dijawab sebagai halaman normal, bukan 404
  • Teks BUKA dan TUTUP sama-sama ada di halaman, sehingga pembaca layar membacakan keduanya
  • Tombol FAQ tanpa label, dan menu yang tidak diterjemahkan ke bahasa Inggris
  • Tidak bisa memilih panas atau dingin saat memesan
  • JavaScript 545 KB dan gambar total 23 MB, dengan file PNG sampai 3,3 MB, untuk pelanggan yang kebanyakan memakai HP

Isi karpen.id, halaman demi halaman

Semua yang dilihat tamu diatur tim Karpen sendiri dari panel staf. Tangkapan layarnya asli, diambil dari karpen.id.

  1. Beranda yang menjawab dulu

    karpen.id (membuka tab baru)

    Buka jam berapa, ada promo apa hari ini, menu apa yang paling dicari. Favorit dibagi per kategori, promo yang sedang berlaku muncul sendiri, dan status buka atau tutup dihitung dari jam buka hari itu.

    • Favorit per kategori
    • Promo yang berlaku sekarang
    • Jam buka hari ini
    Beranda karpen.id di HP: lokasi Pilangbango, Madiun, judul kedai, dan foto tamu di area luar.
  2. 91 menu, diatur sendiri

    karpen.id/menu (membuka tab baru)

    Minuman dan makanan per kategori, dengan pencarian. Setiap menu punya foto, harga, dan cara penyajian, panas atau dingin, dengan add-on dan pilihan yang wajib diisi. Menu yang habis cukup ditandai "habis hari ini" dari panel staf, tanpa dihapus.

    • Pencarian
    • Panas atau dingin
    • Add-on
    • Habis hari ini
    Menu karpen.id di laptop: tab kategori dan empat minuman berfoto dengan harga dan tombol tambah.
  3. Pesan antar lewat WhatsApp

    karpen.id/cart (membuka tab baru)

    Tamu menyusun pesanan, memilih ambil sendiri atau diantar ke seluruh Kota Madiun dengan ongkir Rp7.000, lalu bayar tunai atau QRIS. Totalnya sudah termasuk PBJT 10% dan kemasan, dan WhatsApp terbuka dengan pesanan yang sudah tersusun rapi. Kalau kedai sedang tutup, halamannya bilang begitu.

    • Ambil sendiri atau diantar
    • Tunai atau QRIS
    • Pajak dihitung otomatis
    Halaman pesanan karpen.id: satu item, pilihan ambil sendiri atau diantar, dan tombol kirim lewat WhatsApp dengan totalnya.
  4. Reservasi meja dan acara

    karpen.id/reservasi (membuka tab baru)

    Pesan meja untuk 4 sampai 20 orang: pilih tanggal dalam tujuh hari ke depan, jam dari jam buka, jumlah orang, dan area duduk. Ringkasan di sampingnya menghitung DP minimal, Rp10.000 per orang. Untuk arisan, acara kantor, atau ulang tahun ada form big order: pesanan besar, paket catering, atau sewa tempat.

    • 4–20 orang
    • Pilih area duduk
    • DP dihitung otomatis
    • Big order dan acara
    Reservasi meja di karpen.id: pilihan tanggal, jam datang, dan jumlah orang, dengan ringkasan dan DP minimal di sampingnya.
  5. Promo yang muncul sesuai jadwal

    karpen.id/promo (membuka tab baru)

    Paket makan siang setiap hari, paket Jumat siang dan malam, dan diskon pelajar 20% muncul dan hilang sendiri sesuai jadwalnya, dengan label "Berlaku sekarang" dan syarat yang bisa dibuka. Jam promonya mengikuti waktu Madiun.

    • Berlaku sekarang
    • Filter per jenis
    • Syarat yang bisa dibuka
    Promo di karpen.id: TGI Friday Package 1, Jumat 11.00–16.00, dua paket Rp28.000 dan syarat yang bisa dibuka.
  6. Mampir, dengan jam yang selalu benar

    karpen.id/outlet (membuka tab baru)

    Alamat dengan tombol Google Maps dan salin alamat, jam buka dengan hari ini disorot, fasilitas dari Wi-Fi sampai musholla, dan area duduk berfoto. Hari libur khusus diatur dari panel staf, jadi status buka atau tutup tidak pernah salah.

    • Google Maps
    • Hari ini disorot
    • Hari libur khusus
    Jam buka di karpen.id: status hari ini, Senin sampai Minggu 10.00–23.00, catatan dapur, dan daftar fasilitas.
  7. Cerita dari kata carpenter

    karpen.id/our-story (membuka tab baru)

    Asal nama Karpen, tempatnya di antara sawah dan rel kereta, dan perjalanan enam babak sejak 2021, dengan foto di setiap babaknya.

    • Asal nama
    • Enam babak
    Halaman cerita karpen.id: judul "Dari kata carpenter.", foto tamu di kedai, dan cap "Sejak 2021".
  8. Karpen Kelola, panel untuk staf

    Panel admin bawaan CMS terlalu teknis untuk dipakai di balik kasir. Jadi kami membangun panel staf sendiri: pemilik mengatur peran dan izin setiap staf, dan setiap perubahan tercatat di log aktivitas.

    • Peran dan izin
    • Log aktivitas
    • Ubah harga di daftar
    • Jadwal promo mingguan
    • Navigasi bawah untuk HP
    Halaman masuk Karpen Kelola, panel staf karpen.id: email, kata sandi, dan tombol masuk.
  • Ulasan dari Google

    karpen.id/ulasan (membuka tab baru)

    Halaman ulasan bintang 5 dari Google Maps, ditulis apa adanya oleh tamu dan diurutkan dari yang terbaru, dengan tautan ke semua ulasannya di Google.

  • Karir

    karpen.id/karir (membuka tab baru)

    Lowongan yang sedang dibuka, dengan batas waktu melamar dan cara mengirim CV, diatur dari panel staf.

  • FAQ

    karpen.id/faq (membuka tab baru)

    Pertanyaan per kategori dengan pencarian: jam dan lokasi, menu, fasilitas, reservasi. Yang belum terjawab langsung ke WhatsApp.

  • Dua bahasa

    karpen.id/en (membuka tab baru)

    Setiap halaman tersedia dalam bahasa Indonesia dan Inggris, termasuk menunya, dan alamat lama dari situs sebelumnya tetap jalan atau dialihkan.

Satu aplikasi untuk situs, CMS, dan panel staf

Situs, CMS, dan Karpen Kelola dibangun sebagai satu aplikasi Next.js dengan Payload CMS, di server Singapura, jadi tidak ada tiga sistem terpisah yang harus dirawat. Semua yang dilihat tamu datang dari CMS:

  • Menu dengan varian, add-on, dan grup pilihan dengan aturan minimal dan maksimal
  • Promo terjadwal, dengan label "Berlaku sekarang" yang dihitung dari jadwalnya
  • Jam buka per hari dan hari libur khusus
  • Cerita, FAQ, galeri, ulasan, lowongan, dan informasi outlet

Rilis pertama memakai WhatsApp untuk pesanan dan reservasi, dengan pesan yang sudah terisi rapi, karena di situlah tim Karpen sudah melayani tamunya.

Audit 27 baris, dua arah desain, lalu tes untuk setiap izin

  1. Audit situs lama

    Setiap fitur dan kekurangan situs lama kami catat dalam 27 baris. Situs baru wajib menyamai semuanya, lalu melampauinya.

  2. Dua arah desain

    Moodboard dan dua arah desain ditampilkan sebagai halaman pratinjau. Klien memilih prototipe versi keempat pada 17 Oktober 2026.

  3. Token, komponen, dan CMS

    Arah yang dipilih diturunkan menjadi design token dan komponen, lalu skema CMS diisi dengan konten asli: 91 menu, promo, FAQ, dan cerita.

  4. Panel staf

    Karpen Kelola dibangun di atas CMS yang sama, dengan tes untuk setiap izin.

  5. Pengujian

    Logika bisnis (status buka, promo yang sedang berlaku, aturan pilihan menu) diuji dengan Vitest. Alur pelanggan dan aksesibilitas diuji dengan Playwright dan axe di HP dan desktop, dalam dua bahasa.

Yang sudah terukur, dan yang belum

Menu yang diatur tim Karpen sendiri
91
Sumber: Isi CMS, karpen.id · Diukur 5 November 2026
Aksesibilitas di HP
100
Sumber: Lighthouse 13.5, mobile, median tiga kali uji di karpen.id dan karpen.id/menu · Diukur 5 November 2026
SEO dan best practices
100
Sumber: Lighthouse 13.5, mobile, median tiga kali uji di karpen.id dan karpen.id/menu · Diukur 5 November 2026
Pelanggaran aksesibilitas serius atau kritis di 18 halaman
0
Sumber: axe (WCAG 2.1 A/AA) lewat Playwright, HP dan desktop, Indonesia dan Inggris · Diukur 17 Oktober 2026

Yang belum: di HP, skor performa Lighthouse masih 70 karena LCP 6,2 detik, terutama dari foto besar di layar pertama. Total Blocking Time 82 ms dan CLS 0, jadi halamannya tidak tersendat dan tidak bergeser saat dimuat. Angka bisnis seperti jumlah pesanan lewat WhatsApp per minggu belum diukur.

Next.js dan Payload, di server Singapura

Satu aplikasi untuk situs, CMS, dan panel staf, jadi tidak ada tiga sistem terpisah yang harus dirawat.

  • Next.js 16
  • React 19
  • Payload CMS 3
  • Postgres
  • GSAP
  • Lenis
  • Vitest
  • Playwright
  • axe

Lihat 91 menunya di karpen.id

Buka karpen.id

Harga perkenalan · sisa 2 dari 3 slot

Mau website seperti ini untuk usahamu? Bisa banget.

Kedai, restoran, salon, atau toko: menu, pesanan lewat WhatsApp, reservasi, dan panel untuk timmu, disusun dari cara kerja usahamu sendiri. Ceritakan lewat brief singkat, kami balas dalam satu hari kerja.