Project 04
Devario: Website untuk Usaha Lokal
Brand jasa pembuatan website untuk usaha lokal. Untuk saat ini lima jenis usaha yang dilayani: salon, barbershop, spa dan klinik kecantikan, penginapan, serta katering dan toko kue, masing-masing dengan tiga paket dan empat pilihan tampilan.
- Brand jasa website
- HTML statis
- nginx
- Docker
Latar Belakang
Devario itu brand saya untuk jasa pembuatan website usaha lokal. Yang jalan sekarang lima jenis usaha: salon, barbershop, spa dan klinik kecantikan, penginapan, serta katering dan toko kue. Tiap jenis punya tiga paket dan empat pilihan tampilan, dan semuanya bisa dicoba langsung lewat halaman contoh di devario.rioeka.com. Totalnya 60 halaman contoh, ditambah halaman hub dan satu halaman daftar paket per jenis.
Masalah
Calon pelanggan susah membayangkan hasilnya kalau cuma dikasih daftar fitur. Tiap jenis usaha juga punya alur sendiri: pemilik salon mau lihat pilih layanan lalu jadwal, pemilik penginapan mau lihat pilih kamar dan tanggal, pemilik katering mau lihat pilih menu dan cara terima. Karena itu tiap paket saya beri halaman contoh yang bisa diklik, dengan alur pemesanan yang benar-benar jalan. Isinya data fiktif dan ditandai jelas, jadi tidak ada yang mengira itu usaha sungguhan.
Alur kerja
Cara kerjanya, langkah demi langkah
Urutannya seperti ini kalau dipakai dari awal sampai akhir.
Pilih jenis usaha
Halaman hub menampilkan lima jenis usaha yang dilayani. Tiap kartu membuka daftar paket untuk jenis itu saja.
Pilih paket dan tampilan
Tiap jenis punya tiga paket, makin tinggi makin lengkap, dan empat pilihan tampilan yang bisa dibuka langsung dari HP.
Buka halaman contoh
Halaman contoh memakai nama, alamat, harga, dan foto fiktif. Strip DEMO ada di atas header dan penanda contoh muncul di bagian penting, jadi statusnya tidak pernah ambigu.
Coba alur pemesanan
Alurnya menyesuaikan jenis usaha. Salon, barbershop, dan spa: pilih layanan, lalu terapis, lalu jadwal. Penginapan: pilih kamar, tanggal, jumlah malam, dan tamu. Katering: pilih menu, jumlah, cara terima, tanggal, dan jam.
Sampai langkah pembayaran
Paket 2 berhenti di pemeriksaan pesanan. Paket 3 menambah satu langkah: pembayaran lewat QRIS atau transfer.
Antarmuka
Tangkapan layar
Semua gambar diambil langsung dari aplikasi yang sudah jalan.
Yang sudah jalan
- Lima jenis usaha × 3 paket × 4 pilihan tampilan: 60 halaman contoh, ditambah halaman hub dan halaman paket per jenis.
- Alur pemesanan mengikuti cara kerja tiap jenis usaha, bukan satu formulir generik untuk semuanya.
- Halaman contoh ditandai berlapis: strip di atas header, kartu pembanding isi contoh dan website asli, label contoh di tiap bagian, dan penutup.
- Halaman 404 dan 50x dibuat sendiri, bukan halaman bawaan server.
- Semua halaman dipasang noindex, nofollow, ditambah robots.txt yang menolak seluruh mesin pencari.
- Satu image nginx, tanpa framework JavaScript dan tanpa database.
Di balik layar
Halaman contohnya HTML statis jadi. Tidak ada backend, tidak ada database, cuma nginx di satu image Docker yang mendengarkan port 80. Generator dan skin-nya saya taruh di repo privat, jadi repo publik isinya hasil build, foto, dan konfigurasi nginx saja. Deploy-nya tidak bergantung pada toolchain apa pun. Empat pilihan tampilan dibangun dari struktur konten yang sama, jadi satu paket bisa tampil dalam beberapa gaya tanpa menulis ulang isinya.
- HTML dan CSS statis, tanpa framework JavaScript
- nginx dalam image Docker, port 80
- Font di-host sendiri: Archivo, Cormorant Garamond, Fraunces
- Generator dan skin di repo privat, hasil build disalin ke repo publik