AI Web Building #03 — Diskusi Konsep Website dengan AI

Artikel 3 dari 8 · Tahap Perencanaan

Jangan Langsung Menyuruh AI Membuat Website

Pada materi sebelumnya, kita sudah melakukan riset dan mengumpulkan berbagai referensi.

Sekarang saatnya mengubah hasil riset tersebut menjadi konsep website yang jelas.

Banyak pemula langsung meminta AI membuat website hanya dengan satu kalimat singkat, contohnya:

"Buatkan website rumah sakit yang modern, lengkap, dan keren."

Permintaan seperti itu terlalu luas. AI harus menebak sendiri struktur halaman, fitur, desain, hingga alur pengguna. Hasilnya mungkin terlihat bagus di awal, tetapi tidak selalu sesuai dengan apa yang sebenarnya kita butuhkan.

Pendekatan yang jauh lebih efektif adalah menjadikan AI sebagai partner diskusi sebelum mulai membangun website.

1. Berikan Konteks kepada AI

Pertama, berikan hasil riset yang sudah dibuat. Jelaskan jenis website, target pengguna, tujuan, fitur, dan referensi yang sudah kamu kumpulkan.

Kamu bisa mengunggah dokumen riset atau menempelkan isinya langsung ke percakapan AI.

Saya ingin berdiskusi tentang konsep website sebelum mulai membuatnya.

Berikut hasil riset saya:
[Tempel dokumen riset di sini]

Bertindaklah sebagai product designer dan web developer.
Bantu saya menyusun konsep website yang sesuai dengan target pengguna.
Jangan langsung membuat kode.

Mulailah dengan mengevaluasi hasil riset, mengidentifikasi informasi yang kurang, lalu ajukan maksimal 5 pertanyaan penting yang perlu saya jawab.
Jelaskan rekomendasi secara sederhana dan jangan membuat asumsi bisnis tanpa memberi tahu saya.

Dengan cara ini, kita tidak langsung menerima hasil jadi mentah. Kita memberi kesempatan kepada AI untuk memahami konteks proyek secara mendalam terlebih dahulu.

2. Diskusikan Tujuan Utama Website

Satu website bisa memiliki banyak halaman dan fitur, tetapi tetap harus memiliki satu atau dua tujuan utama yang paling krusial.

Misalnya, website rumah sakit bertujuan untuk:

1. Membantu pengunjung mendapatkan informasi layanan dan dokter dengan cepat.
2. Mempermudah proses pendaftaran atau janji temu (appointment).

Dari tujuan tersebut, kita bisa menyusun hierarki prioritas:

• Pencarian dokter perlu lebih ditonjolkan daripada berita internal kegiatan rumah sakit.
• Informasi jadwal praktik harus mudah diakses tanpa harus mengklik berkali-kali.
• Tombol pendaftaran (Call to Action) harus terlihat mencolok dan konsisten.

Coba tanyakan kepada AI:

"Berdasarkan hasil riset, apa tujuan utama website ini? Fitur apa yang paling mendukung tujuan tersebut dan apa alasannya?"

Diskusikan rekomendasinya sampai kamu benar-benar memahami arah website yang akan dibangun.

3. Susun Struktur Halaman atau Sitemap

Setelah tujuan jelas, kita perlu menentukan halaman apa saja yang akan tersedia. Struktur halaman ini biasa disebut sitemap.

Contoh sitemap website rumah sakit:

Struktur ini masih sederhana dan bisa dikembangkan sesuai kebutuhan.

Kita juga harus menentukan hubungan antarhalaman. Contohnya, dari halaman Doctors, pengunjung bisa membuka profil dokter spesifik, lalu mengklik tombol yang langsung mengarah ke halaman Appointment dengan dokter tersebut sudah terpilih otomatis. Alur seperti ini perlu dipikirkan sebelum mulai membuat kode.

4. Diskusikan Fitur Utama: MVP vs Pengembangan Lanjutan

Tidak semua fitur harus dibuat sekaligus di awal. Sebagai pemula atau kreator yang baru memulai, bagi fitur ke dalam dua kategori:

Catatan MVP (Minimum Viable Product): MVP adalah versi awal yang memiliki fungsi inti untuk memenuhi kebutuhan utama dan dapat diuji langsung oleh pengguna.

Untuk proyek latihan atau demonstrasi, form appointment yang belum terhubung ke database harus diberi label jelas sebagai Demo. Jangan menampilkan konfirmasi bahwa janji temu benar-benar tercatat di rumah sakit jika sistemnya belum terintegrasi.

5. Tentukan Konsep Desain

Sekarang, gunakan hasil riset visual untuk menentukan arah desain. Aspek penting yang perlu didiskusikan meliputi:

• Warna utama dan aksen: Misalnya biru kesehatan (#023E8A), toska aksen (#00B4D7), dan latar bersih (#EDF4FC / #FFFFFF).
• Tipografi: Pemilihan font sans-serif modern yang mudah dibaca di berbagai ukuran layar.
• Gaya layout: Spacing yang lega (whitespace), hierarchy judul, dan konsistensi card.
• Komponen UI: Desain tombol, badge, input form, dan state kosong (empty state).
• Responsif: Memastikan navigasi dan tabel nyaman dibuka di HP, tablet, maupun laptop.

Desain yang modern tidak harus penuh animasi berlebihan. Prioritaskan kenyamanan membaca, kemudahan navigasi, dan kecepatan akses informasi.

6. Rancang Alur Pengguna (User Flow)

Sebelum menyuruh AI membangun website, petakan alur perjalanan pengguna (user flow).

Misalnya, proses membuat janji temu dokter:

1. Buka website → Pengunjung melihat hero dan tombol pencarian dokter.
2. Cari dokter → Mengetik nama atau memilih spesialisasi (misal: Spesialis Anak).
3. Lihat profil & jadwal → Memilih dokter dan melihat hari praktik yang tersedia.
4. Pilih jadwal → Klik tombol "Buat Janji Temu".
5. Isi formulir → Memasukkan nama pasien, nomor WhatsApp, dan tanggal kunjungan.
6. Terima status pendaftaran → Mendapatkan notifikasi konfirmasi pendaftaran berhasil.

Setiap langkah harus memiliki perilaku yang jelas:

• Apa yang terjadi jika dokter tidak ditemukan?
• Bagaimana jika pengguna salah memasukkan format nomor telepon?
• Apakah ada pesan sukses setelah formulir dikirim?

Untuk website rumah sakit sungguhan, alur pendaftaran juga perlu mempertimbangkan privasi pasien, keamanan data, dan integrasi dengan rekam medis.

7. Minta AI Menyusun Konsep Final

Setelah selesai berdiskusi, saatnya merangkum seluruh keputusan ke dalam satu dokumen resmi.

Berdasarkan seluruh diskusi kita, susun dokumen konsep final website.

Dokumen harus mencakup:
1. Ringkasan proyek
2. Target pengguna
3. Tujuan utama website
4. Sitemap dan fungsi setiap halaman
5. Fitur MVP dan pengembangan lanjutan
6. User flow utama dan kondisi gagal
7. Arahan desain (warna, tipografi, layout, UI)
8. Kebutuhan konten dan aset
9. Asumsi yang masih perlu divalidasi
10. Kriteria keberhasilan proyek

Gunakan keputusan yang sudah saya setujui.
Jika masih ada hal yang belum diputuskan, tulis sebagai pertanyaan terbuka, bukan mengarang keputusan baru.
Jangan membuat kode terlebih dahulu.

Simpan dokumen tersebut agar bisa digunakan sebagai landasan pada tahap berikutnya.

Hasil Akhir Materi #03

Kamu memiliki dokumen konsep final berisi keputusan tentang tujuan, sitemap, fitur MVP, arah desain, dan alur pengguna website yang matang.

Kesimpulan

AI bukan hanya alat untuk menghasilkan kode. AI juga bisa membantu kita mengembangkan ide, mengevaluasi pilihan arsitektur, dan menyusun rencana proyek.

Dengan berdiskusi sebelum mulai membangun, kita mengurangi risiko membuat fitur yang tidak dibutuhkan atau harus mengulang pekerjaan karena konsepnya belum jelas.

Semakin jelas konsepnya, semakin mudah kita mengarahkan AI ketika mulai membuat website.

Pada materi berikutnya, kita akan mengubah seluruh hasil diskusi menjadi sebuah Website Brief yang terstruktur dan siap diberikan kepada AI Developer.

Lanjut → AI Web Building #04: Cara Membuat Website Brief yang Lengkap