Bloomie Florist
Membuat pengalaman memesan bunga terasa personal dan mudah, dari memilih momen hingga menghubungi toko.
Website florist dan hampers untuk membantu pelanggan menemukan rangkaian bunga sesuai momen, lalu memulai pemesanan melalui WhatsApp.
UI/UX Designer & Web Developer
2 Minggu
Figma, Next.js, Tailwind CSS
Concept Exploration
Tantangan Desain
Pelanggan perlu menemukan rangkaian yang sesuai untuk berbagai acara dan tahu cara memesannya. Desain ini mengeksplorasi bagaimana pilihan produk, informasi layanan, dan jalur inquiry dapat dibuat lebih mudah ditemukan.
Toko bunga butik memiliki karakteristik yang sangat berbeda dari toko online umum. Pemesanan bunga sangat terikat dengan emosi personal dan momen spesifik — seperti hari ulang tahun, perayaan anniversary, wisuda, maupun simpati duka cita. Di samping itu, ketersediaan tangkai bunga segar berubah setiap hari, serta pelanggan membutuhkan kustomisasi kartu ucapan dan kepastian waktu pengantaran hari-H.
Sistem keranjang belanja checkout otomatis yang panjang kerap memicu hambatan dan gagal menampung permintaan khusus pelanggan secara luwes. Tantangan desain proyek ini adalah merancang alur praktis di mana pengunjung dapat seketika memilih momen acara, mengisi kebutuhan buket, dan berpindah secara mulus ke percakapan WhatsApp terstruktur.
Tujuan Proyek
Menampilkan katalog berdasarkan momen, seperti ulang tahun, anniversary, wisuda, dan hadiah.
Memudahkan pelanggan menyampaikan kebutuhan khusus atau ucapan personal.
Menjadikan WhatsApp jalur pemesanan yang mudah dikenali dan terstruktur.
Menjaga pengalaman tetap nyaman di desktop maupun ponsel.
Konsep: Brighter Moments
Visual bunga yang hangat dan elegan dipadukan dengan alur pemesanan yang praktis tanpa hambatan.
Fokus Visual Bunga
Foto rangkaian bunga menjadi daya tarik visual utama, menonjolkan estetika buket dan sentuhan personal.
Tipografi Harmonis
Kombinasi tipografi serif untuk nuansa elegan atelier florist, dipadukan dengan sans-serif yang nyaman dan tajam dibaca.
Aksen Coral Terarah
Aksen coral hangat untuk menonjolkan tombol aksi utama dan detail pesanan penting tanpa mendominasi.
Kartu Kategori Momen
Navigasi berbasis acara membantu pengunjung langsung menemukan buket yang tepat tanpa tersesat di katalog.
Rincian Struktur Halaman
01 / Hero Section
Memperkenalkan Bloomie, nilai keunggulan utama, tombol CTA WhatsApp cepat, dan tautan eksplorasi koleksi.
02 / Form Inquiry Terintegrasi
Mengumpulkan nama, nomor telepon, acara, produk pilihan, dan catatan permintaan khusus sebelum chat dibuka.
03 / Keunggulan Layanan
Menonjolkan pengiriman hari-H (same-day delivery), garansi bunga segar, hampers kustom, dan konsultasi mudah.
04 / Kategori Berdasarkan Acara
Mengarahkan pelanggan ke pilihan relevan: Ulang Tahun, Anniversary, Wisuda, dan Hadiah Simpati.
05 / Produk Populer & Best Seller
Menampilkan rangkaian bunga terfavorit lengkap dengan perkiraan harga dan waktu persiapan.
06 / Bagian Lanjutan & Kepastian
Menyajikan testimoni kepuasan pelanggan, tahapan alur pesanan, dan FAQ transparan seputar pengiriman.
Adaptasi Mobile & Ergonomi
Adaptasi mobile dirancang khusus mengikuti kebiasaan belanja satu tangan di smartphone, bukan sekadar versi desktop yang diperkecil:
Navigasi Ringkas
Header dipadatkan dengan drawer menu praktis dan ikon keranjang/inquiry yang hemat ruang.
Hirarki Pesan Jelas
Judul dan deskripsi tetap menjadi pengantar utama yang langsung dipahami dalam 3 detik pertama.
Form Inquiry Ergonomis
Formulir berpindah ke bawah hero dan tersusun 1 kolom penuh agar mudah diisi dengan ibu jari.
Keunggulan Vertikal
Poin keunggulan layanan disusun vertikal dengan ikon tegas yang cepat dipindai saat scrolling.
Katalog Sentuh Responsif
Kartu kategori berorientasi touch-friendly dengan target tap luas (min 44px) untuk navigasi mulus.
- Touch Target Optimal: Semua tombol CTA memiliki tinggi minimal 44px dengan padding nyaman untuk tap jempol.
- Keterbacaan Form 1 Kolom: Field form berukuran font 16px untuk mencegah auto-zoom pada peramban mobile.
- Transisi Mulus Momen ke Chat: Memilih kartu momen langsung mengisi parameter acara di form inquiry WhatsApp.
Sistem Visual & Tipografi
Sistem visual dirancang untuk menyeimbangkan kehangatan emosional buket bunga dengan efisiensi konversi modern:
Palet Warna & Peran Strategis
Coral Terracotta
#E05A47
CTA & Attention GrabberMenarik perhatian pengunjung ke tombol aksi pemesanan dan badge penanda momen penting.
Petal Warm Off-white
#FBF8F5
Warm BackgroundMenjaga suasana hangat atelier florist dan membuat foto rangkaian bunga tetap menonjol alami.
Botanical Charcoal
#25201F
Typography ContrastWarna teks gelap hangat untuk keterbacaan tingkat tinggi yang ramah mata di layar mobile.
Blush Border
#F0E4DE
Subtle Section DividerPemisah blok kartu yang lembut tanpa menimbulkan visual noise atau kesan kaku.
Forest Foliage
#2F4A3E
Trust & Natural DepthSentuhan hijau dedaunan untuk elemen garansi kesegaran bunga dan kepastian layanan.
Tipografi Judul
Playfair Display
Playfair Display / Serif — Dipakai pada tajuk utama untuk memancarkan aura artisan, keanggunan momen, dan craftsmanship buket premium.
Tipografi Isi & Navigasi
Inter Sans
Inter / Sans-Serif — Digunakan untuk body copy, label formulir, dan tombol agar navigasi tajam serta mudah dibaca di berbagai resolusi layar.
Arah Visual & Fotografi
Pencahayaan natural difus dengan fokus tajam pada kelopak bunga asli, tekstur wrapping matte, dan kartu ucapan tulisan tangan.
Elemen Antarmuka
Tombol rounded pill dengan kontras tinggi, kartu buket ber-shadow lembut, serta ikon minimalis yang menyampaikan informasi seketika.
Alur Pemesanan Terstruktur
1. Pilih Momen atau Produk
Pengunjung memilih acara (ulang tahun, wisuda, anniversary) atau memilih katalog buket langsung di beranda.
2. Isi Detail Kebutuhan
Mengisi nama pemesan, nomor kontak, acara, catatan ucapan kartu, dan tanggal pengantaran hari-H.
3. Lanjutkan ke WhatsApp
Satu klik membuka WhatsApp admin dengan draft pesan yang sudah tersusun rapi otomatis.
4. Konfirmasi & Penyelesaian
Admin Bloomie memverifikasi ketersediaan bunga segar hari-H, alamat kirim, dan mengonfirmasi pesanan.
Catatan transparansi: Form dirancang untuk menyusun format pesan terstruktur ke WhatsApp, bukan proses checkout otomatis kartu kredit. Untuk toko bunga butik, percakapan langsung memastikan ketersediaan tangkai bunga segar musiman dan detail kartu ucapan personal sebelum transaksi difinalisasi.
Hasil Desain & Validasi
Hasil Desain yang Dapat Diamati & Validasi Teknis
Katalog Momen & CTA Tampil Instan
Kategori produk dan tombol pemesanan WhatsApp terlihat langsung di area atas beranda tanpa scrolling melelahkan.
Form Inquiry Langsung di Area Hero
Formulir pemesanan terintegrasi di hero sehingga pengunjung yang butuh buket mendesak dapat langsung bertindak.
Adaptasi Mobile 1-Kolom Ergonomis
Struktur konten pada layar ponsel disusun ulang secara vertikal dengan navigasi yang nyaman dioperasikan satu tangan.
Kontras & Keterbacaan Terverifikasi
Kombinasi warna memenuhi rasio kontras WCAG AA, memastikan teks mudah dibaca oleh seluruh kalangan pengguna.
Aset Visual Ringan & Cepat
Format gambar modern teroptimasi dengan rasio aspek terjaga untuk mencegah layout shift (CLS).
Catatan: Sebagai studi kasus konsep desain (Website Concept), metrik bisnis seperti angka penjualan atau konversi riil tidak dicantumkan karena belum ada data peluncuran komersial yang dapat diverifikasi secara objektif.
MULAI PROYEK ANDA
Siap membangun website hangat dan terstruktur untuk bisnis florist atau butik Anda?
Mari diskusikan katalog produk, struktur momen acara, dan hubungkan calon pelanggan Anda ke WhatsApp dengan format pesanan rapi.