Product Discovery - Design Thinking: Dari Empathize hingga Ideate - Nasional Part 3
2.3 Fase Product Discovery 2: Perencanaan & Visualisasi Solusi
2.3 Fase Product Discovery 2: Perencanaan & Visualisasi Solusi
Topik 2.3 Fase Product Discovery 2: Perencanaan & Visualisasi Solusi
Sebuah ide brilian telah lahir dari proses empati dan ideasi. Namun, bagaimana kita bisa memastikan ide ini akan diterjemahkan menjadi produk yang tidak hanya berfungsi, tetapi juga mudah dan menyenangkan untuk digunakan? Di sinilah “jembatan” antara ide dan pengembangan sesungguhnya dibangun. Ini adalah fase di mana kita mengubah konsep abstrak menjadi sesuatu yang nyata, dapat diuji, dan divalidasi.
Topik ini akan membawa kita ke tahap perencanaan dan visualisasi solusi. Kita akan belajar bagaimana Flowchart berfungsi sebagai peta untuk memvisualisasikan logika dan alur sistem, memastikan tim teknis dan non-teknis berbicara dalam bahasa yang sama. Selanjutnya, kita akan menyelami dunia Prototyping, mulai dari sketsa sederhana (low-fidelity) hingga mockup interaktif (high-fidelity), yang memungkinkan kita menguji pengalaman pengguna tanpa menulis satu baris kode pun.
Sebelum kita melangkah lebih jauh, mari kita berhenti sejenak untuk merefleksikan proses krusial ini:
Refleksi Singkat
Pernahkah kamu merancang sebuah fitur yang secara visual terlihat sempurna, namun ternyata membingungkan saat digunakan oleh orang lain?
Sebaliknya, apa yang membuat sebuah aplikasi terasa begitu mudah digunakan seolah-olah kamu sudah tahu persis di mana harus menekan tombol selanjutnya?
Mengapa lebih baik menemukan kesalahan pada sebuah prototipe sederhana di atas kertas daripada setelah produk tersebut dirilis ke ribuan pengguna?
Bagaimana sebuah flowchart sederhana bisa membantu seorang Product Manager berkomunikasi lebih efektif dengan tim developer dan desainer?
Digiers, sebelum memulai pembelajaran, mari kita pahami bersama capaian yang akan kita raih. Berikut adalah tujuan pembelajaran yang akan menjadi kompas kita:
Merancang Flowchart untuk memvisualisasikan alur logika sistem dan proses pengambilan keputusan.
Membangun Low-Fidelity Prototypes (sketsa, wireframe) untuk menguji konsep inti dan alur informasi secara cepat.
Menciptakan High-Fidelity Prototypes (mockup interaktif) yang menyerupai produk akhir untuk pengujian yang lebih detail.
Menggunakan AI-powered tools seperti Visily untuk mengakselerasi proses pembuatan prototipe dari teks atau gambar.
2.3.1 Memetakan Logika & Alur dengan Flowchart
Setelah kamu memiliki ide brilian, pertanyaan selanjutnya adalah: “Bagaimana cara kerjanya?” Sebelum tim engineer menulis kode dan tim desainer membuat antarmuka, semua pihak harus memiliki pemahaman yang sama tentang alur dan logika di balik sebuah fitur. Di sinilah Flowchart (Bagan Alur) menjadi alat yang sangat fundamental.
Apa itu Flowchart?
Secara sederhana, Flowchart adalah peta visual yang menampilkan langkah-langkah, keputusan, dan alur dari sebuah proses atau program. Setiap langkah digambarkan dalam bentuk diagram atau simbol yang standar, lalu dihubungkan dengan garis panah untuk menunjukkan arah alurnya. Flowchart berperan penting dalam memutuskan sebuah langkah atau fungsionalitas dari sebuah proyek pembuatan program. Apalagi yang melibatkan banyak orang sekaligus.
Selain itu dengan menggunakan bagan flowchart dari sebuah program, akan jadi lebih jelas, ringkas, plus mengurangi kemungkinan untuk salah penafsiran. Penggunaan flowchart dalam dunia pemrograman juga cara yang efektif untuk menghubungkan kebutuhan teknis dan non-teknis.
Simbol Pada Flowchart
Gambar 2.3.1 Simbol pada Flowchart
Seperti gambar di atas, kamu bisa melihat beberapa simbol yang sering digunakan dalam flowchart.
Gambar 2.3.2 Contoh Flowchart
Contoh Sederhana: Alur Logika Pemberian Hadiah
Bayangkan kamu ingin membuat sistem otomatis untuk memberikan hadiah kepada pengguna. Sebelum membuat desainnya, kamu bisa memetakan logikanya dengan flowchart:
Gambar 2.3.3 Contoh Flowchart
Mulai (Start)
Cek Kondisi: Apakah total belanja pengguna > Rp 100.000?
Jika Tidak: Berikan respon “Terima kasih sudah berbelanja” kemudian Selesai (End).
Jika Ya: Lanjutkan ke langkah berikutnya.
Proses: Kirim hadiah ke pengguna.
Berikan respon “Terima kasih sudah berbelanja”
Selesai (End).
Diagram sederhana ini memastikan semua orang dari tim marketing yang merancang kampanye hingga developer yang membangun sistem paham persis siapa yang berhak mendapatkan hadiah dan dalam kondisi apa.
Jadi, sebelum kamu terjun ke desain visual, mulailah dengan flowchart. Ini adalah langkah pertama untuk memastikan bahwa ide yang ada di kepalamu adalah ide yang sama yang akan dibangun oleh tim.
Untungnya, kamu tidak perlu menjadi seorang seniman untuk membuat flowchart yang efektif. Bahkan, sketsa di papan tulis atau secarik kertas sudah cukup untuk memulai diskusi. Namun, untuk kolaborasi, dokumentasi, dan hasil yang lebih profesional, ada banyak sekali tools dan software yang dirancang untuk mempermudah proses ini.
Berikut adalah beberapa platform populer yang sering digunakan oleh Product Manager dan tim produk:
Gambar 2.3.4 Platform/tools pembuatan wireframe dan prototype
Dan tentu saja, masih banyak lagi platform lainnya yang bisa kamu pilih sesuai dengan kebutuhan dan preferensi timmu. Kunci utamanya bukanlah pada alat yang digunakan, melainkan pada kejelasan alur yang berhasil kamu komunikasikan.
Mengapa Flowchart Penting Bagi Seorang Product Manager?
Sebagai seorang Product Manager, kamu sering berada di tengah-tengah antara tim bisnis, tim desain, dan tim teknis. Dalam kondisi ini, komunikasi yang jelas dan pemahaman yang terstruktur terhadap alur proses produk sangat penting. Nah, di sinilah Flowchart menjadi alat bantu visual yang sangat penting.
Flowchart membantu PM menggambarkan alur kerja, proses sistem, atau user journey secara visual, bukan hanya dalam bentuk teks atau narasi panjang.
Contohnya: Alih-alih menjelaskan step-by-step proses refund dengan kalimat, kamu bisa gunakan flowchart untuk menunjukkan:
“Jika user klik refund → sistem cek status transaksi → jika valid → lanjut ke proses transfer dana.”
Ini akan mempermudah tim desain, engineer, maupun stakeholder non-teknis untuk memahami proses tanpa kebingungan.
Dengan flowchart, semua tim (bisnis, desain, developer) dapat duduk bersama dan melihat satu sumber kebenaran (single source of truth) tentang proses produk. Ini sangat membantu dalam:
Diskusi grooming backlog
Penyusunan acceptance criteria
Review fitur sebelum development
Flowchart membantu mengurangi miskomunikasi karena semua pihak bisa melihat proses dari ujung ke ujung secara logis dan terstruktur. Ketika terjadi bug atau bottleneck dalam proses, flowchart bisa digunakan untuk melacak dan menganalisis titik-titik rawan dalam alur produk.
Contohnya: Jika ada banyak komplain user gagal login, PM bisa melihat flowchart proses login dan segera mengidentifikasi:
Apakah masalahnya di validasi OTP?
Apakah backend gagal memproses token?
Dengan melihat flowchart, kamu tidak perlu menebak-nebak, cukup telusuri jalurnya.
Saat ingin mengembangkan fitur baru atau memperbaiki yang lama, flowchart bisa digunakan untuk:
Mengevaluasi proses lama
Menambahkan percabangan (decision point) baru
Melihat konsekuensi logis jika sebuah tahapan ditambah, diganti, atau dihapus
Flowchart membuat proses iterasi lebih terstruktur dan bisa dipresentasikan secara logis kepada tim dan stakeholder. Dengan flowchart yang detail, engineer dapat:
Lebih cepat memahami logic sebelum coding
Menentukan skenario unit test dengan lebih akurat
Membangun sistem yang sesuai harapan bisnis
Sementara Quality Assurance (QA) juga bisa menyiapkan test scenario berdasar alur yang disepakati dari flowchart.
Tak semua stakeholder mengerti istilah teknis. Flowchart menjembatani komunikasi karena sifatnya visual, lebih intuitif, dan mudah dipahami tanpa background teknis.
Seorang Product Manager yang bisa menjelaskan alur fitur hanya dengan flowchart akan terlihat lebih kredibel dan terstruktur.
Flowchart bukan sekadar gambar proses. Bagi seorang Product Manager, flowchart adalah alat komunikasi, analisis, dan perencanaan yang sangat kuat.
Dengan flowchart, kamu bisa:
Menyampaikan proses dengan lebih jelas
Menghindari miskomunikasi
Mempercepat diskusi dan eksekusi produk
Seorang PM yang menguasai flowchart akan lebih efektif dalam memimpin kolaborasi lintas fungsi dan menjaga kualitas solusi yang dikembangkan tim.
Studi Kasus
Perusahaan “AquaSmart” adalah startup teknologi di bidang Aquatech yang mengembangkan sistem monitoring dan kontrol kualitas air secara otomatis untuk tambak udang.
Sistem ini menggunakan IoT sensor untuk mengukur pH, suhu, dan kadar oksigen dalam kolam, serta sistem dosing otomatis untuk menyesuaikan kadar tersebut secara real-time.
Sebagai Product Manager, kamu ditugaskan membuat flowchart alur sistem pemantauan dan respon otomatis untuk memudahkan kolaborasi lintas fungsi (tim lapangan, agronomis, dan stakeholder bisnis).
Tujuan dari Flowchart ini:
🔵 Memetakan alur kerja dari sensor membaca data hingga sistem mengambil tindakan (otomatis atau manual).
🔵 Mengidentifikasi titik kritis dan kondisi percabangan yang membutuhkan pengambilan keputusan.
🔵 Menjadi dasar diskusi pengembangan fitur lanjutan seperti alert system atau dashboard analitik.
Implementasi Flowchart:
Gambar 2.3.5 Flowchart “Aqua Smart”
Manfaat Flowchart Diatas Bagi Tim:
Engineer IoT paham kapan sistem harus trigger perangkat dosing dan notifikasi.
Data scientist melihat kapan dan bagaimana data divalidasi untuk analytics lebih lanjut.
Tim lapangan tahu kondisi apa yang butuh intervensi manual.
Stakeholder mudah memahami proses teknis melalui alur visual, tanpa harus paham coding atau sensor.
Dengan flowchart, tim AquaSmart berhasil:
Menyepakati logic sistem bersama-sama sebelum development dimulai.
Menurunkan risiko miskomunikasi antar tim hardware, software, dan operasional.
Mempercepat proses UAT (User Acceptance Testing) karena seluruh kondisi sudah dipetakan secara visual.
2.3.2 Mewujudkan Ide dengan Prototype (Low & High Fidelity)
Setelah memetakan logika dengan flowchart, langkah selanjutnya adalah mengubah alur tersebut menjadi sesuatu yang dapat dirasakan oleh pengguna. Di sinilah kolaborasi erat antara Product Manager dan praktisi UX menjadi sangat penting. Keduanya memiliki peran yang berbeda, namun selaras untuk bisa membangun dan deliver produk dengan sukses. Salah satunya saat Product Manager memulai proses dengan riset pasar dan kompetitor terlebih dahulu. Hasil riset ini kemudian juga menjadi bahan pertimbangan tim desain UX sebelum merancang prototype.
Kamu Harus Tahu!
Prototype dalam Bahasa Indonesia disebut sebagai purwa rupa, merupakan bentuk draft dari produk yang bisa ditunjukkan kepada user maupun klien.
Prototype adalah bagian penting dari user experience (UX) design yang biasanya muncul setelah tahapan ideation. Di tahap ini, kamu dan tim telah membuat serta memilih ide yang dapat memenuhi kebutuhan pengguna (user). Berbeda dengan wireframe dan mockup, prototype berbentuk simulasi. Ia bisa direspon, memungkinkan seseorang untuk mengeksplorasi konsep fitur, dan merasakan langsung rasanya menggunakan produk sungguhan yang kita rancang.
Tujuan pembuatan prototype adalah untuk mendukung validasi user. Memvalidasi apakah aliran produk lancar dan konsisten, sesuai dengan harapan user ketika Usability Testing, yaitu tahapan terakhir design thinking.
Bayangkan seorang arsitek yang merancang sebuah rumah. Sebelum membangun, ia akan membuat maket (bentuk tiruan). Dengan maket tersebut, calon pemilik rumah dan tim konstruksi bisa melihat bentuk bangunan yang menyerupai aslinya, merasakan kondisi lingkungan, serta tata letak interior dan eksteriornya. Jika ada yang kurang cocok dengan desainnya, perombakan bisa dilakukan dengan mudah pada maket tersebut.
Hal ini sama dengan prototype suatu produk. Dengan prototype, kita lebih mudah mengevaluasi kualitas desain dengan memberi kesempatan pada user untuk mencoba desain aplikasi secara langsung. Selain itu, evaluasi juga bisa dilakukan secara menyeluruh dari segi User Experience Design (UX) maupun tampilan User Interface Design (UI).
Satu hal yang sangat penting untuk diingat adalah: prototipe bukanlah produk itu sendiri.
Perbedaan utamanya terletak pada tidak adanya proses development atau coding yang terjadi pada tahap ini. Mengapa demikian?
Alasannya sederhana: untuk menghemat biaya produksi dan waktu. Jauh lebih murah dan cepat untuk memperbaiki sebuah desain di Figma daripada harus mengubah kode yang sudah jadi. Setelah prototipe diuji dan divalidasi dengan pengguna, barulah tim bisa memulai proses pengembangan dengan keyakinan bahwa solusi yang ditawarkan benar-benar memberikan dampak dan menjawab kebutuhan target pengguna.
Mengapa Tahapan Prototyping Penting?
Tahapan prototyping adalah tahapan percobaan yang krusial. Sebab tahapan ini dimaksudkan untuk mengidentifikasi solusi terbaik atas masalah yang muncul selama proses-proses sebelumnya. Selain itu, tujuan dibuatnya prototype adalah menjadi perantara pengujian. Seberapa baik dan efektif rancangan desain yang kita buat, termasuk perpindahan tampilan ataupun flow penggunaan yang dilakukan user dan tim.
Dua Jenis Prototipe: Lo-Fi vs. Hi-Fi
Dalam dunia prototipe, tidak semua diciptakan sama. Bergantung pada tahap dan tujuanmu, kamu akan menggunakan salah satu dari dua jenis utama prototipe: Low-Fidelity (Lo-Fi) dan High-Fidelity (Hi-Fi).
1. Low-Fidelity (Lo-Fi) Prototype: Cepat & Fungsional
Gambar 2.3.6 lo-fi Halaman Login dan Home
Low-Fidelity Prototype adalah representasi produk dengan tingkat presisi atau detail yang rendah. Ini adalah cara tercepat untuk memvisualisasikan sebuah konsep. Fokus utamanya bukan pada keindahan visual, melainkan pada pengecekan fungsi dasar dan alur interaksi antar halaman (screen).
Ada dua cara umum untuk membuat prototipe Lo-Fi:
Paper Prototyping: Cara paling sederhana dan cepat. Kamu hanya membutuhkan media seperti kertas, spidol, dan gunting untuk membuat sketsa antarmuka.
Clickable Wireframe: Menggunakan software desain seperti Figma, Sketch, atau MarvelApp untuk membuat wireframe digital dasar yang bisa diklik untuk berpindah antar halaman.
Kelebihan dan Kekurangan Low Fidelity Prototype.
Gambar 2.3.7 Kelebihan dan Kekurangan Lo-Fi Prototype
2. High-Fidelity (Hi-Fi) Prototype: Detail & Interaktif
Gambar 2.3.8 Hi-Fi Prototype Halaman Home
High-Fidelity Prototype adalah representasi produk yang sangat detail dan interaktif. Prototipe ini fokus pada tampilan visual antarmuka (UI) dan interaksi yang kompleks. Desainnya sudah bisa diklik (clickable) dan terasa sangat mirip dengan produk akhir.
Ada dua cara umum untuk membuat prototipe Hi-Fi:
Menggunakan Software Desain: Membangun mockup interaktif yang detail menggunakan software seperti Figma, Adobe XD, atau InVision.
Mengubah Desain Menjadi Kode: Untuk prototipe yang lebih kompleks, terkadang tim developer membuat versi awal menggunakan kode (HTML/CSS/JS) yang bisa berjalan di browser atau aplikasi.
Kelebihan dan Kekurangan High Fidelity Prototype
Gambar 2.3.9 Kelebihan dan Kekurangan Hi-Fi Prototype
Memilih antara Lo-Fi dan Hi-Fi bergantung pada tujuanmu. Gunakan Lo-Fi di awal untuk memvalidasi konsep dan alur, lalu beralih ke Hi-Fi untuk menyempurnakan detail visual dan interaksi sebelum diserahkan ke tim engineering.
Tips Memaksimalkan Desain Prototype
1. Pahami user persona pengguna prototype
Agar web app yang kita buat tepat guna, kita perlu memahami user/pengguna yang akan memakai fitur/produk yang kita kembangkan. Selain memangkas waktu membuat prototype yang efektif, dapat dipastikan kita akan mampu membuat sebuah fitur dan produk yang tepat sasaran.
2. Melakukan competitors analysis
Tidak ada salahnya kita belajar dari kompetitor. Saat kita mengeksplorasi serta mempelajari best practices dalam mendesain sebuah fitur/produk dari kompetitor, minimal secara tidak langsung kita bisa merasakan plus minus dari implementasi UI/UX design.
3. Fokus terhadap konten dan section
Sebuah prototype web app yang baik juga perlu memperhatikan proses pembuatan, serta penyusunan konten dan section-nya. Kamu juga perlu memastikan bahwa layout-nya efisien, section dibuat dengan rapi, dan konten mudah dipahami user.
4. Intuitif namun efisien
Ketika bikin prototype web app, pasti ada beberapa flow yang mengharuskan kita bikin design mulai dari proses menunggu, mengerjakan, konfirmasi, dan sebagainya pada web app tersebut. Nah, kita perlu pastikan nih kalau prototype yang kita buat memiliki desain yang cukup interaktif dan intuitif agar tetap efektif dan efisien. Contohnya loading state, desain antarmuka yang optimal, dan sebagainya.
5. Unity of elements
Seperti namanya, unity of elements merupakan usaha yang mana kita harus pastikan bahwa elemen desain yang dipakai sesuai dengan penggunaannya.
Contoh:
Warna biru biasa digunakan untuk sebuah text-hyperlink
Warna merah untuk menunjukkan sebuah peringatan atau kesalahan
Call to Action (CTA) dibuat mencolok dan dapat di-klik
6. Responsif & Mobile friendly
Kebanyakan web app saat ini direkomendasikan memiliki kapabilitas untuk menyesuaikan konsep desain dengan ukuran layar pengguna.
Dengan begitu, hal tersebut dapat meningkatkan usability pengguna produk/fitur yang dibuat.
7. Keep it simple
Terakhir, sebuah web app juga direkomendasikan agar sesederhana mungkin meskipun yang dibuat adalah produk/fitur yang cukup kompleks. Dengan menerapkan tips nomor 3, sekompleks apapun produk/fitur, kita dapat mengupayakan layouting yang baik dan efisien. Selain itu, kita juga lebih efektif dalam memberikan kualitas konten yang mudah dipahami.
Tips Memaksimalkan Prototype Pada Mobile App:
1. Simple Navigation
Navigasi adalah salah satu action utama ketika pengguna menggunakan mobile app. That’s why, kita perlu memastikan agar seluruh usability atau elemen navigasi terlihat sesederhana mungkin.
2. Paper size of elements/navigation
Ketika mendesain elements/navigation, terutama bagian kontrol yang dapat disentuh, sangat disarankan membuat ukuran yang cukup proper. Dengan begitu, user tidak akan kesulitan untuk menggunakan hal tersebut, maupun tidak akan kesulitan untuk menyentuhnya (tap/touch).
3. Keep minimum content on screen
Maksudnya adalah kita tidak berlebihan dalam menyajikan informasi dalam satu layar mobile prototype. Perlu diingat bahwa screen-size mobile device terbatas, sehingga memaksimalkan delivery content secara bijak akan membantu user untuk memperoleh UX yang baik.
4. Font Size
Pastikan prototype menggunakan font size yang sesuai dan readable oleh calon pengguna prototype kita. Selain itu, kamu juga bisa menyesuaikan font-nya sesuai tone dari produk kamu sendiri agar tampilannya semakin menarik.
5. Use touch control
Use touch control adalah kondisi ketika seorang pengguna melakukan control navigasi pada platform. Terkait hal tersebut, sebaiknya kita menghindari melakukan implementasi beberapa control pada web app ke dalam mobile app. Tujuannya untuk menghindari control yang berpotensi kurang nyaman, serta konsep desain yang kurang UX-wise pada mobile app.
6. Form
Ketika berhadapan dengan web app, tentunya kita dapat memanfaatkan fitur form sebebas mungkin. Akan tetapi, hal ini tidak berlaku dengan mobile app yang pada dasarnya memiliki keterbatasan screen-size. That’s why, pastikan kita menggunakan form yang sederhana dan efisien untuk meningkatkan UX.
7. Reachability
Seperti namanya, istilah ini merupakan kondisi di mana kita sebisa mungkin memastikan komponen pada prototype mobile app kita mudah dinavigasi menggunakan satu tangan atau dua tangan saja. Namanya juga mobile app, sebisa mungkin desainnya harus mobile friendly ya.
Peralatan untuk Membuat Prototipe
Gambar 2.3.10 Platform Populer Design System
Setelah memahami jenis-jenis prototipe, pertanyaan selanjutnya adalah: alat apa yang bisa digunakan untuk membuatnya? Untungnya, ada banyak sekali pilihan tools yang bisa kamu manfaatkan, mulai dari yang paling sederhana hingga yang sangat canggih.
Bisa kamu cek gambar di atas, di gambar adalah beberapa platform populer yang sering digunakan oleh tim produk untuk membuat prototipe dan bahkan membangun Design System.
Refleksi Singkat
Menurutmu, apakah kita harus membuat dua jenis prototype sekaligus (Low Fidelity dan High Fidelity)?
Atau bisa memilih salah satu jenis saja? Coba jelaskan alasan di balik pilihan jawabanmu ya.
2.3.3 Akselerasi Prototyping dengan AI (Studi Kasus Visily)
Setelah memahami pentingnya prototipe, kita tahu bahwa proses ini, terutama di tahap awal, haruslah cepat. Dalam pengembangan produk digital, kecepatan adalah kunci. Tim produk sering kali perlu:
Menguji ide secara cepat.
Menyampaikan solusi visual kepada stakeholder.
Melibatkan tim lintas fungsi dalam eksplorasi fitur.
Sayangnya, membuat prototype dari nol secara manual membutuhkan waktu dan effort dari desainer UI/UX. Di sinilah AI-powered prototyping tools seperti Visily berperan.
Visily memungkinkan siapa pun bahkan kamu yang tidak memiliki latar belakang desain untuk menghasilkan wireframe dan prototipe dalam hitungan menit, hanya dengan deskripsi teks atau bahkan gambar sketsa sederhana.
Apa itu Visily AI?
Gambar 2.3.11 Logo Visily
Sumber : Visily.ai
Visily adalah platform prototyping yang didukung oleh kecerdasan buatan, yang memungkinkanmu untuk:
Mengubah Teks atau Sketsa Menjadi Desain: Cukup deskripsikan antarmuka yang kamu inginkan atau unggah gambar sketsa, dan Visily akan mengubahnya menjadi wireframe UI.
Mengimpor dari Screenshot: Ambil screenshot dari aplikasi atau website yang sudah ada, dan Visily akan menganalisis serta mereplikasinya menjadi komponen desain yang bisa kamu edit.
Mengedit dan Menyempurnakan: Hasil yang digenerate oleh AI bukanlah hasil akhir. Kamu bisa dengan mudah mengeditnya menjadi prototipe visual yang siap pakai.
Berkolaborasi Secara Real-time: Bekerja sama langsung dengan tim desain, produk, dan developer dalam satu platform.
Kapan Sebaiknya Menggunakan Visily AI?
Visily menjadi alat yang sangat ampuh dalam beberapa skenario kunci, terutama bagi seorang Product Manager:
Saat eksplorasi ide produk di tahap paling awal: Ketika kamu punya ide kasar dan ingin segera memvisualisasikannya tanpa harus menunggu jadwal desainer.
Untuk diskusi dengan stakeholder non-teknis: Membantu para stakeholder (seperti manajemen atau tim bisnis) untuk “melihat” idemu, bukan hanya mendengarnya.
Ketika ingin memvalidasi alur (flow) secara cepat: Sebelum masuk ke tahap desain high-fidelity yang memakan waktu, kamu bisa menguji alur dasar dengan cepat menggunakan prototipe yang dihasilkan Visily.
Sebagai alat pendukung dalam design sprint atau workshop ideasi: Mempercepat proses dari ide menjadi visualisasi dalam sesi kerja yang intensif.
Dengan tools seperti Visily, hambatan untuk membuat prototipe menjadi jauh lebih rendah, memungkinkan siklus inovasi yang lebih cepat dan inklusif.
Step-by-Step Menggunakan Visily AI untuk Quick Prototyping
1. Akses dan Daftar Akun
Gambar 2.3.12 Halaman Awal Visily
Kunjungi:
https://www.visily.ai
Daftar atau login dengan Google/Microsoft account
2. Buat Proyek Baru
Gambar 2.3.13 Gen AI Visily
Klik “New Project” atau Create Blank Board
Pilih kamu mau membuat Lo-fi design/Hi-fi design/Diagrams, lalu continue to create Board.
Klik Ask AI “Design with AI:
Klik Generate design from text / Generate design from screenshoot / Modify existing design / Generate diagram from text / Generate prototype from selection
Pilih jenis produk (Mobile, Website, Web App)
Pilih Entire App atau Single Screen
Masukan prompt yang diinginkan
3. Gunakan AI untuk Membuat Prototype
Gambar 2.3.14 Contoh prompt untuk di Visily
Ada dua cara yang bisa dilakukan:
Text-to-UI (Gunakan prompt)
Klik tombol “Ask AI”
Pilih “Text to Design”
Masukkan prompt seperti:
Tabel Contoh Penulisan Prompt AI di Visily
Image-to-UI
Klik “Upload Image”
Upload sketsa kertas, screenshot web, atau app lain
Visily akan membaca dan mengubahnya menjadi layout digital yang bisa langsung diedit.
Edit dan sesuaikan prototype
Ubah teks, warna, layout, icon, button sesuai kebutuhan
Tambahkan komponen dari library Visily seperti navbar, form, modal, dsb
Bisa juga tambahkan interaksi atau link antar halaman
Kolaborasi dan Review
Ajak tim desain, dev, atau stakeholder untuk melihat atau memberi komentar
Bisa export sebagai image, PDF, atau dibagikan via link
Jika siap, kamu bisa pakai output ini untuk membuat high-fidelity di Figma atau langsung ke dev
Tabel 2.3.1 Contoh Penulisan Prompt
Studi Kasus Visily AI
Untuk memahami bagaimana Visily AI bekerja dalam skenario nyata, mari kita ambil sebuah contoh. Bayangkan kamu adalah seorang Product Manager yang sedang merancang produk baru.
Tabel 2.3.2 Rencana Produk
Kamu memiliki ide awal yang kuat, tetapi kamu perlu memvisualisasikannya dengan cepat untuk mendapatkan umpan balik dari tim dan stakeholder potensial.
Masalah yang Ingin Diselesaikan
Banyak pengguna merasa sulit mencatat dan mengontrol pengeluaran harian.
Aplikasi keuangan yang ada cenderung terlalu teknis atau membingungkan bagi pengguna awam.
Butuh solusi cepat untuk membuat prototipe ide aplikasi dengan UI/UX yang intuitif agar bisa segera divalidasi ke pengguna atau stakeholder.
Solusi dengan Visily AI
Visily AI memungkinkan tim produk membuat quick-prototype berbasis prompt dan hasil upload gambar inspirasi (UI Screenshot, hand-drawn wireframe, atau template PDF).
Fitur Utama yang di Prototipe via Visily:
Dashboard keuangan bulanan
Input transaksi harian
Tampilan detail anggaran
Fitur “Tujuan Tabungan”
Notifikasi & insight keuangan otomatis
USER JOURNEY: Budgetly
Persona Utama
Nama: Lita (27 tahun)
Pekerjaan: Pegawai swasta
Motivasi: Ingin bisa menabung untuk liburan, tapi sering kebablasan belanja dan tidak sadar kemana uangnya pergi.
Tabel 2.3.3 Prompt Lengkap Visily
Catatan:
Semua prompt bisa digunakan langsung di Visily AI → AI Design → Generate UI from text prompt.
Setelah desain muncul, kamu bisa mengedit tampilan, mengganti teks, atau menambahkan elemen visual sesuai kebutuhan produkmu.
Setiap screen dapat dikoneksikan untuk membuat clickable prototype yang bisa diuji secara internal atau langsung ke pengguna.
Berikut contoh prototype yang dihasilkan oleh masing-masing Prompt di Visily AI.
1. Onboarding Screen – Kenalkan manfaat app dan CTA daftar
Promptnya:
“Design a mobile onboarding screen for a personal finance app with friendly illustrations,
short value props, and a big 'Get Started' button.”Hasilnya:
Gambar 2.3.15 Onboarding Screen
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Onboarding Screen.
2. Set Monthly Budget – User tentukan anggaran per kategori
Promptnya:
“Create a budget setup screen where users can enter their monthly income and allocate budget
for categories like food, transport, and entertainment.”Hasilnya:
Gambar 2.3.16 Set Monthly Budget
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Set Monthly Budget.
3. Dashboard Bulanan – Ringkasan keuangan, sisa anggaran
Promptnya:
“Design a personal finance dashboard with monthly budget summary, remaining balance, and
expense categories breakdown.”
Hasilnya:
Gambar 2.3.17 Dashboard Bulanan
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Dashboard Bulanan.
4. Catat Pengeluaran Harian
Promptnya:
“Generate an expense entry screen with category dropdown, amount input, and date picker.”Hasilnya:
Gambar 2.3.18 Fitur Catat Pengeluaran Harian
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Fitur Catat Pengeluaran Harian.
5. Lihat History Pengeluaran
Promptnya:
“Make a screen showing transaction history with filters by date and category.”Hasilnya:
Gambar 2.3.19 Fitur Lihat History Pengeluaran
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Fitur Lihat History Pengeluaran.
6. Progress Tujuan Tabungan
Promptnya:
“Design a savings goal screen with progress bar, target amount, and deadline.”Hasilnya:
Gambar 2.3.20 Progress Tujuan Tabungan
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Fitur Progress Tujuan Tabungan.
7. Insight & Notifikasi Otomatis
Promptnya:
“Create a notification center UI for a finance app with budget warnings, saving tips, and
monthly spending insights.”Hasilnya:
Gambar 2.3.21 Insight dan Notifikasi Otomatis
Nah, gambar di atas merupakan penerapan prompt AI di Visily untuk membuat Fitur Insight dan Notifikasi Otomatis. Well, dalam hitungan detik saja kamu sudah bisa bikin 7 halaman UI/UX dengan bantuan AI! Ini akan mempercepat kamu dalam proses membuat prototype untuk didiskusikan dengan tim produkmu.
Untuk bisa menggunakan Visily AI secara gratis, kamu mendapatkan benefit berikut ini:
2 editable boards per workspace
Limited elements per board
200 AI credits, dengan detailnya:
Text to Design 30 credits / screen
Screenshot to Design 20 credits / screen
Sketch to Design 20 credits / screen
Text to Diagram 10 credits / diagram
Image Generator 10 credits / image
Modify Design Depending on request
150 template credits dengan detailnya:
Component template 10 credits
Diagram template 20 credits
Screen template 30 credits
Jika kamu ingin fitur dan fasilitas yang lebih kamu bisa upgrade dan langganan ke versi PRO dengan membayar US$11/editor/bulan, dan US$29/editor/month.
Gambar 2.3.22 Upgrade Plan Visily
Sumber : Visily.ai
Penutup
Dalam sesi ini, kita telah menjelajahi berbagai pendekatan praktis dan strategis yang digunakan oleh Product Manager untuk memperkuat proses validasi produk sebelum masuk ke tahap pengembangan. Kita telah melihat bagaimana:
Flowchart berfungsi sebagai alat bantu visual yang fundamental untuk menyusun logika sistem, menjembatani komunikasi antara tim teknis dan non-teknis agar semua pihak memiliki pemahaman yang sama.
Prototype, baik dalam bentuk low-fidelity maupun high-fidelity, menjadi cara yang efektif untuk menguji ide, mengeksplorasi alur, dan mengevaluasi user experience secara nyata tanpa harus menulis kode.
AI tools seperti Visily kini hadir untuk mengakselerasi proses desain dan prototyping secara efisien, memungkinkan siapa saja untuk memvisualisasikan ide dengan cepat, bahkan tanpa keahlian desain teknis.
Semua tools dan metode ini merupakan bagian krusial dari fase Product Discovery, yang berperan sebagai jembatan kokoh antara ide abstrak dan implementasi yang solid. Dengan memvalidasi alur dan desain di tahap awal, kita secara signifikan mengurangi risiko membangun produk yang salah dan memastikan sumber daya tim dialokasikan dengan bijak.
Poin-Poin Penting yang Telah Kamu Pelajari
Dengan menyelesaikan materi dalam topik ini, kamu telah berhasil mencapai tujuan pembelajaran berikut:
✅ Menjelaskan Pentingnya Validasi Awal: Kamu kini memahami bagaimana tahapan perencanaan dan visualisasi solusi (flowchart, prototyping) berfungsi untuk meminimalkan risiko kegagalan produk.
✅ Merancang Flowchart Sederhana: Kamu dapat merancang sebuah flowchart untuk memetakan alur logika dasar dari sebuah fitur produk.
✅ Membedakan Jenis Prototipe: Kamu mampu membedakan antara prototipe low-fidelity dan high-fidelity, serta menjelaskan kapan masing-masing paling efektif untuk digunakan dalam siklus pengembangan.
✅ Memanfaatkan AI untuk Prototyping: Kamu memahami bagaimana tools AI seperti Visily dapat digunakan untuk mempercepat proses pembuatan prototipe dan memfasilitasi kolaborasi tim.
Refleksi Akhir
Sebagai seorang Product Manager, kemampuan untuk memvisualisasikan ide dan menguji hipotesis sebelum masuk ke tahap coding adalah kunci untuk menghindari kesalahan mahal di kemudian hari.
Kita juga melihat bagaimana AI, seperti Visily, membuka peluang baru untuk mempercepat iterasi dan validasi produk sejak dini.
Di era serba cepat ini, kemampuan untuk “build fast, test smart” adalah keunggulan kompetitif yang wajib dimiliki oleh setiap tim produk.
Halo lagi, Saepul! Wah, materi AquaSmart dan Prototyping ini benar-benar inti dari pekerjaan harian seorang PM. Memahami alur logika (flow) sebelum masuk ke desain adalah kunci agar produk tidak hanya cantik, tapi juga fungsional.
Berikut adalah pengerjaan ulang soal-soal tersebut dengan penjelasan yang mendalam dan sentuhan realitas industri:
1. Konsekuensi Tanpa Flowchart (Studi Kasus: AquaSmart)
Soal: Menganalisis studi kasus AquaSmart, apa konsekuensi paling mungkin jika tim tidak membuat flowchart terlebih dahulu?
A. Proses pengembangan akan berjalan lebih cepat karena tidak ada waktu untuk diskusi.
B. Terjadi miskomunikasi mengenai kapan sistem harus memicu perangkat dosing otomatis.
C. Tim hardware dan software akan bekerja secara terpisah namun tetap sinkron.
D. Data scientist akan mendapatkan data yang lebih akurat untuk dianalisis.
Jawaban: B
Penjelasan: Dalam sistem IoT seperti AquaSmart, logika “Kapan” (kondisi) dan “Maka” (aksi) sangat krusial. Tanpa flowchart, developer mungkin salah menangkap instruksi, misalnya alat dosing menyala di waktu yang salah, yang bisa berakibat fatal pada ekosistem air yang dikelola.
Realitas PM: Di dunia nyata, kesalahan logika pada sistem otomatis bisa menyebabkan kerugian fisik atau finansial yang besar. Flowchart adalah “dokumen kesepakatan” agar orang hardware dan software tidak saling menyalahkan saat sistem gagal berfungsi.
2. Prototipe vs Produk Akhir
Soal: Apa perbedaan fundamental antara sebuah prototipe dengan produk akhir yang sudah dirilis?
A. Prototipe memiliki semua fitur lengkap yang akan ada di produk akhir.
B. Produk akhir hanya fokus pada tampilan visual saja.
C. Produk akhir tidak dapat diuji oleh pengguna.
D. Prototipe tidak melibatkan proses penulisan kode (development).
Jawaban: D
Penjelasan: Prototipe (terutama Lo-Fi dan Hi-Fi desain) dibuat untuk mensimulasikan pengalaman tanpa harus menulis kode yang rumit dan mahal. Produk akhir adalah hasil pengembangan penuh yang sudah stabil, bisa diskalakan, dan terhubung ke database asli.
Realitas PM: Prototipe itu ibarat “maketing rumah”, sedangkan produk akhir adalah “rumah asli”. PM menggunakan prototipe untuk membuang ide-ide buruk secara murah. Jangan sampai kamu baru tahu fitur itu tidak berguna setelah tim engineer menghabiskan ribuan jam untuk meng-kodenya.
3. Desain Mobile: Minimum Content on Screen
Soal: Mengapa prinsip “Keep minimum content on screen” menjadi lebih krusial pada desain prototipe untuk mobile app dibandingkan web app?
A. Karena koneksi internet pada perangkat mobile umumnya lebih lambat.
B. Karena web app tidak memiliki batasan dalam jumlah konten yang ditampilkan.
C. Karena layar mobile device memiliki ruang yang terbatas, sehingga penyajian informasi harus bijak.
D. Karena pengguna mobile app lebih suka membaca teks yang panjang dan detail.
Jawaban: C
Penjelasan: Ukuran layar ponsel yang kecil menciptakan “beban kognitif” yang tinggi. Jika layar terlalu penuh, pengguna akan bingung dan sulit menekan tombol (masalah fat finger). PM harus memprioritaskan informasi yang paling penting saja.
Realitas PM: Di industri, ada istilah “Mobile First”. Jika kamu tidak bisa menjelaskan fungsi fiturnya dalam layar sekecil HP, berarti fiturnya mungkin terlalu rumit. PM yang hebat adalah mereka yang berani menghapus teks yang tidak perlu demi kenyamanan jempol pengguna.
4. Strategi Validasi Startup (Healthify)
Soal: Startup “Healthify” ingin memvalidasi konsep alur konsultasi kepada investor dengan dana terbatas. Manakah pendekatan yang paling efektif?
A. Langsung membangun Hi-Fi prototype interaktif dengan desain sempurna.
B. Mengembangkan versi awal aplikasi menggunakan kode agar investor bisa mencoba.
C. Melakukan presentasi menggunakan narasi panjang tanpa visualisasi.
D. Membuat serangkaian clickable wireframe (Lo-Fi) untuk menunjukkan seluruh alur fungsional produk secara cepat.
Jawaban: D
Penjelasan: Clickable wireframe (Lo-Fi) sangat murah dan cepat dibuat. Ini menunjukkan kepada investor bahwa tim sudah memikirkan alur logika secara matang tanpa menghabiskan modal besar untuk urusan visual atau coding yang belum tentu disetujui.
Realitas PM: Investor lebih tertarik pada logika bisnis dan alur pengguna daripada sekadar gambar cantik. Menunjukkan bahwa kamu bisa memvalidasi ide dengan biaya rendah adalah bukti bahwa kamu adalah PM yang efisien dalam mengelola anggaran (resourceful).
5. Flowchart sebagai Jembatan Komunikasi
Soal: Mengapa sebuah flowchart dianggap sebagai jembatan komunikasi yang efektif antara tim teknis dan non-teknis?
A. Karena menggunakan simbol-simbol teknis yang hanya dimengerti developer.
B. Karena fokus pada aspek bisnis dan keuntungan finansial produk.
C. Karena berisi detail kode yang akan diimplementasikan oleh tim teknis.
D. Karena bersifat visual, intuitif, dan mudah dipahami tanpa latar belakang teknis.
Jawaban: D
Penjelasan: Gambar lebih bermakna daripada seribu kata. Flowchart menggunakan bentuk-bentuk standar (seperti belah ketupat untuk keputusan) yang bisa dipahami orang marketing maupun engineer untuk menyatukan visi alur kerja.
Realitas PM: PM sering berada di tengah-tengah antara desainer yang ingin “estetika” dan developer yang ingin “logika”. Flowchart adalah alat PM untuk mengunci perdebatan: “Pokoknya alurnya seperti ini, setuju?”.
6. Visualisasi Logika Diskon
Soal: Tim developer bingung mengenai kondisi apa saja yang membuat pengguna berhak mendapatkan diskon. Alat bantu visual apa yang seharusnya disiapkan PM?
A. User persona pembeli.
B. Flowchart alur pemberian diskon.
C. Mockup halaman checkout.
D. Laporan analisis kompetitor.
Jawaban: B
Penjelasan: Diskon sering melibatkan banyak syarat (if/else), misalnya: minimal belanja 50rb, hanya hari Selasa, dan hanya untuk pengguna baru. Flowchart sangat pas untuk memetakan percabangan logika tersebut agar tidak ada celah (bug).
Realitas PM: Menjelaskan logika kompleks dalam bentuk teks di dokumen PRD seringkali berujung pada salah paham. Satu diagram alur diskon bisa menyelamatkanmu dari puluhan pertanyaan “bagaimana kalau...” di Slack dari tim developer.
7. Fungsi Clickable Wireframe
Soal: Manakah yang paling tepat menggambarkan fungsi “Clickable Wireframe”?
A. Sebuah representasi statis yang fokus pada keindahan warna.
B. Prototipe Lo-Fi digital yang bisa diklik untuk simulasi perpindahan halaman.
C. Sebuah sketsa tangan di atas kertas yang menunjukkan alur.
D. Prototipe Hi-Fi yang sudah terhubung dengan database sungguhan.
Jawaban: B
Penjelasan: Ini adalah kawat (wire) yang bisa diklik. Fokusnya bukan pada warna atau gambar, tapi pada bagaimana pengguna berpindah dari layar A ke layar B. Ini membantu menguji navigasi aplikasi secara digital sejak dini.
Realitas PM: Clickable wireframe adalah alat terbaik untuk User Testing tahap awal. Kamu bisa melihat apakah pengguna bingung mencari tombol “Lanjut” sebelum desainernya repot-repot mewarnai semuanya di Figma.
8. Visily vs Software Desain Tradisional
Soal: Berdasarkan deskripsi pada teks, apa yang membedakan Visily dari software desain tradisional seperti Figma atau Sketch?
A. Visily hanya dapat digunakan untuk membuat prototipe low-fidelity.
B. Visily tidak memiliki fitur kolaborasi untuk tim.
C. Figma dan Sketch tidak dapat digunakan untuk membuat prototipe interaktif.
D. Kemampuan Visily untuk menghasilkan desain secara otomatis dari input teks atau gambar.
Jawaban: D
Penjelasan: Visily menonjol karena fitur AI-nya, seperti mengubah sketsa tangan menjadi desain digital atau menghasilkan komponen dari perintah teks (prompt), yang mempercepat proses desain bagi non-desainer.
Realitas PM: Banyak PM bukan desainer profesional. Alat seperti Visily sangat membantu PM untuk “menggambar” ide mereka dengan cepat menggunakan AI, lalu hasilnya baru diberikan ke desainer pro untuk dipoles di Figma. Ini memperpendek siklus ide-ke-visual.
9. Investigasi Masalah Checkout
Soal: Banyak pengguna meninggalkan keranjang di langkah terakhir. PM menduga alurnya membingungkan. Langkah evaluasi pertama manakah yang paling logis?
A. Menawarkan diskon lebih besar untuk memotivasi pengguna.
B. Mengganti seluruh desain UI halaman checkout.
C. Meninjau kembali flowchart proses checkout untuk melacak dan menganalisis potensi titik masalah.
D. Menghapus beberapa metode pembayaran yang jarang digunakan.
Jawaban: C
Penjelasan: Sebelum menyalahkan harga atau warna tombol, PM harus melihat alurnya. Mungkin ada langkah yang berulang, atau informasi ongkir yang baru muncul di akhir. Meninjau flowchart membantu menemukan “gesekan” (friction) dalam alur tersebut.
Realitas PM: Memberikan diskon (pilihan A) hanya menutupi masalah, bukan memperbaiki. PM yang data-sentris akan mencari tahu di kotak mana dalam flowchart pengguna paling banyak “kabur”, lalu memperbaiki bagian spesifik tersebut.
10. Fokus Prototipe High-Fidelity (Hi-Fi)
Soal: Apa yang menjadi fokus utama dari sebuah prototipe High-Fidelity (Hi-Fi)?
A. Kecepatan pembuatan dan biaya yang rendah.
B. Struktur dasar dan alur informasi antar halaman.
C. Tampilan visual antarmuka (UI) dan interaksi yang kompleks.
D. Konsep inti dan fungsi dasar sebuah fitur.
Jawaban: C
Penjelasan: Prototipe Hi-Fi adalah tahap “glowing”. Di sini kita sudah bicara soal warna, tipografi, transisi animasi, dan detail visual yang sangat mirip dengan aplikasi aslinya saat dirilis nanti.
Realitas PM: Hi-Fi digunakan untuk mendapatkan persetujuan akhir dari pemangku kepentingan (stakeholders) atau investor. Ini adalah saat di mana kamu ingin mereka berkata, “Wah, ini terlihat sangat nyata!”. Hi-Fi memberikan rasa percaya diri sebelum tim masuk ke fase coding yang mahal.
Sumber Referensi
Atlassian. (n.d.). Acceptance criteria in agile. https://www.atlassian.com/agile/project-management/requirements
Balsamiq. (n.d.). Wireframing academy. https://balsamiq.com/learn/
Cooper, A., Reimann, R., & Cronin, D. (2014). About face: The essentials of interaction design (4th ed.). Wiley.
Figma. (n.d.). Create prototype flows. https://help.figma.com/hc/en-us/articles/360039832954-Create-Prototype-Flows-in-Figma
Google. (n.d.). Material design. https://material.io/
Kalbach, J. (2016). Mapping experiences: A complete guide to customer alignment through journeys, blueprints, and diagrams. O’Reilly Media.
Lucidchart. (n.d.). What is a flowchart? https://www.lucidchart.com/pages/what-is-a-flowchart
Mountain Goat Software. (n.d.). Product backlog refinement (grooming). https://www.mountaingoatsoftware.com/
Nielsen Norman Group. (2020, July). Low-fidelity vs. high-fidelity prototyping. https://www.nngroup.com/articles/low-fidelity-prototype/
Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. Morgan Kaufmann.
Visily. (n.d.). AI wireframing & prototyping. https://visily.ai/
Warfer, T. Z. (2009). Prototyping: A practitioner’s guide. Rosenfeld Media.
Atlassian. (n.d.). Single source of truth (SSOT). https://www.atlassian.com/work-management/single-source-of-truth
Guru99. (2023, July). User acceptance testing (UAT). https://www.guru99.com/user-acceptance-testing.htm
Glosarium
