“Rapid Prototyping” in Digital Product Design

Dalam produk development kita sering mendengar istilah inovasi produk dan kita selalu memiliki keinginan untuk membuat sebuah inovasi. Namun terkadang kita sering kali lupa untuk melakukan validasi diawal terlebih dahulu apakah ide-ide brilian kita bisa diterima atau dipakai oleh calon-calon targert user produk kita. Kita cenderung meluangkan banyak waktu dalam memikirkan ide-ide brilian itu. Sampai kita menyadari bahwa setelah merilisnya, ternyata ide desain produk yang kita anggap brilian itu tidak memiliki daya tarik dihadapan users kita. Seolah-olah kita sudah melakukan hal yang sia-sia. Membuang banyak waktu dan tenaga.
Menurut pengalaman saya sebagai UX Designer, metode Rapid Prototyping adalah salah satu solusi dari permasalahan ini.

Sedikit berbagi tentang metode “Rapid Prototyping” dalam tulisan kali ini dan saya bagi menjadi 3 sub bagian supaya lebih nyaman membahasnya yaitu:
1. What the hell is “Rapid Prototyping”?
2. Why “Rapid Prototyping” is important?
3. How to implement “Rapid Prototyping”?

What the hell is “Rapid Prototyping”?

Seriously, sebenarnya saya tidak begitu paham dengan istilah ini. Namun karena saya merasa sangat penasaran, istilah ini sering muncul dan digunakan di komunitas design, lebih tepatnya UX Design. Dari rasa penasaran itulah kemudian saya mencoba untuk mencari tahu, tentu cara paling mudah yaitu dengan bertanya sama “mbah” Google.

Akan tetapi hal inilah yang saya dapat kan dari hasil pencarian di google dengan kata kunci “Rapid Prototyping”

Google Search dan image search saya gabungkan.

Berdasarkan dari pengertian di Wikipedia:
Rapid prototyping is a group of techniques used to quickly fabricate a scale model of a physical part or assembly using 3 Dimensional computer-aided design data(……)

Namun pengertian ini kurang bisa saya pahami saat itu. Yang jadi permasalahan, saya tidak bekerja di bidang manufaktur, Saya bekerja di bidang digital product design/agency digital. Dimana ketika membuat mockup design untuk satu flow bagi saya hal itu sangat mudah, dalam satu hari saja sudah selesai dengan menggunakan berbagai tools/software.(tentu tergantung situasi dan kondisi)

Jadi mengapa kita harus menggunakan istilah “Rapid prototyping”? seolah olah ada perbandingan slow prototyping saja. :D

“Rapid Prototyping” hanya sebuah istilah Prototyping yang dilakukan dengan cepat.
my two cents about Rapid Prototyping.

Why “Rapid Prototyping” is important?

Sebagai ux designer atau bagi kalian yang berkecimpung dalam produk development sering sekali mendengar istilah Design Thinking, dimana framework ini sering digunakan untuk memecahkan suatu permasalahan dalam proses development produk.

Sumber gambar

Ditahap Prototype inilah sebenarnya metode ini digunakan, inilah yang akan kita bahas dengan meminjam istilah “Rapid Prototyping” seperti yang saya sampaikan di awal tadi. Namu perlu diingat

Design Thinking bukan linear proses yang selalu dimulai dari empathy, kemudian tahap selanjutnya dan lanjutnya lagi. — Berdasarkan pengalaman pribadi.

Sebagai contoh saja ketika kalian bekerja di sebuah company, startup atau agency mungkin kalian akan di kasih beberapa task dari PM atau klien kalian. Misalnya “Tolong dong bikinkan mockup ini, ini dan blaa blaa blaa blaa” mungkin saja kalian perlu pahami brief itu dulu dengan seksama. Terkadang ada pula brief, problem statement atau masalahnya yang sudah jelas dan clear apa saja requirement dan kita tinggal KICK n RUSH (langsung hajar aja designnya).

Prototype

Model eksperimental sederhana / bentuk awal dari sebuah design yang belum dirilis ke market dengan tujuan untuk menguji atau memvalidasi ide, asumsi desain,mencari insight, feedback apa saja yang bisa berfungsi dan apa yang tidak berfungsi.

Jadi kalau melihat dari kata Prototype diatas maka istilah Rapid Prototyping bisa diartikan dalam kalimat yang sederha menjadi:

Rapid Prototyping
Proses iterasi dengan merealisasikan ide kedalam sebuah visual design untuk mencari feedback dan validasi dengan cepat dan murah.

Coba pikirkan kita punya waktu 3 bulan (1quarter) untuk develop sebuah produk mulai dari research, bikin hypothesa, diskusi sama stakeholders, ngerjain user flow, wireframe dan design ui.

Cycle development tanpa prototype

Mencari approval design ke client atau stakeholder juga butuh waktu, tanpa melakukan test dengan prototype langsung masuk ke tahap code development dan langsung dirilis ke pasar. Dan hasilnya tidak works (ide tidak tervalidasi, user tidak paham, user tidak tertarik atau g mau pake produk itu, atau bisa juga conversinya tidak sesuai harapan). Pada akhirnya semua siklus development akan mengulang dari awal lagi, sedangkan effort dan waktu development code adalah fase paling lama. Seakan waktu dan tenaga terbuang sia-sia.

Cycle development dengan prototype untuk menjembati sebelum masuk ke tahap full code dev

Namun hal itu akan berbeda ketika kita menggunakan prototype pada produk development. Dengan Prototype inilah kita bisa melakukan test fungsional dari berbagai aspek dan memvalidasi berbagai ide, asumsi atau hypothesa yang sudah kita miliki. Dari hal yang tidak works bisa kita iterasi dan revisi lagi sebelum akhirnya masuk ke phase development codenya. Effortnya lebih kecil waktu pengerjaan lebih cepat dan tidak perlu menunggu programmer full coding.

Goals and Benefit of Prototype

“If a picture is worth a thousand words, then a prototype is worth a thousand meetings.” — IDEO

Beberapa tujuan pembuatan prototpye sebelum masuk tahap full development dan keuntungan yang bisa kalian dapat:

1. Start a conversation
   Prototype bisa jadi sebagai media untuk memulai sebuah obrolan dengan calon user produk kalian.
2. Empathy Gaining
   Dengan prototype bisa melibatkan stakeholders untuk membantu tim memutuskan ke arah mana desain, ataupun solusi yang harus ditempuh tanpa harus banyak berkompromi sebelum produk itu benar benar rilis.
3. Learning and Understanding Faster
   Dengan prototype lebih mudah mengkomunikasikan visi kalian dan bisa dengan cepat mendapatkan insight, feedback bahkan dapat inspirasi tambahan untuk membuat produk atau fitur baru.
4. Solve Disagreement
   Dengan menggunakan prototype kalian dapat membuktikan atau menyangkal asumsi kalian kedalam konteks sebenarnya dan dengan demikian semakin menyempurnakan — atau bahkan mengabaikan ide awal kalian.
5. Iterate quickly & Cheaply
   Membuat prototype memungkinkan kalian untuk mengeskplor dan menguji sejumlah ide tanpa menginvestasikan banyak waktu, resources dan uang pastinya.

How to implement “Rapid Prototyping”?

Rapid Prototyping sendiri memiliki setidaknya 3 siklus yang terus berulang.

Create
Membuat mockup dalam bentuk visual atau interface dari solusi yang kalian tawarkan.

Test
Test ke user dan review prototype dengan stakeholder, evaluasi prototype yang sudah kalian test, apakah sudah sesuai dengan ekspektasi user atau belum.

Refine
Berdasarkan dari feedback test itu, identifikasi bagian mana yang perlu diperbaiki atau yang sudah tervalidasi.

Sebagai catatan ketika membuat prototype biasanya mulai dari fungsi yang paling krusial atau yang akan paling sering digunakan. Maksud dari prototyping adalah untuk menunjukkan bagaimana suatu fitur bekerja atau seperti apa desainnya tanpa membuat prototipe seluruh produk secara terperinci.

3 Methods of “Rapid Prototyping”

Mengingatkan kembali, Prototype adalah model eksperimental sederhana. Ini dimaksudkan untuk membantu memvisualisasikan User Experience dari produk sebenarnya. Seperti yang dikatakan Daniel Burka Google Ventures design partner :

The ideal prototype should be “Goldilocks quality.”

Maksudnya Jika kualitasnya terlalu rendah, orang tidak akan percaya prototype adalah produk nyata. Jika kualitasnya terlalu tinggi, Kalian akan bekerja sepanjang malam, dan tidak akan selesai.

1. Paper Prototyping

Mungkin kalian menduga, kalau Paper Prototype itu terbuat dari hasil screenshoot dari layar kemudian di cetak di atas kertas. itu ada benarnya juga, akan tetapi metode ini memiliki tingkat kompleksitas yang berbeda. Memang benar Paper Prototype berbentuk sketsa, konsep, gambar atau storyboard, yang mewakili kerangka interface pengguna kalian. Tapi eksekusinya lebih pada gambar coretan dengan tangan dan marker.

Photo by José Alejandro Cuffia on Unsplash

Yang pasti Paper prototyping bukan merupakan pengganti sepenuhnya dari digital prototyping. Tujuan dari metode ini untuk mengumpulkan feedback dengan cepat dari pengguna dan memastikan tim kalian yang berada dalam proyek berada di jalur yang benar sejak hari pertama.

Kapan menggunakan metode ini?
Paper prototyping sangat cocok untuk konseptualisasi tahap awal. Kecepatan, kemudahan, dan kesederhanaannya, belum lagi dokumentasi otomatis, membuatnya jauh lebih cocok untuk bereksperimen dengan ide-ide baru daripada prototipe digital yang lebih kompleks.

Photo by UX Store on Unsplash

Tools untuk membuat Paper Prototyping?
Beberapa tools untuk membuat paper prototyping yang pasti paper and marker kalau mau instant gunakan printer, print free template ui kit bisa juga jadi alternatif.
Sebagai contoh toolsnya bisa klik link berikut.

Akan tetapi, saya hampir tidak pernah menggunakan metode ini seutuhnya, ya karena sekarang banyak tools online digital prototyping yang sangat mudah, dan juga metode ini memiliki berbagai kekurangan. Apa saja keuntungan dan kekurangannya? yuk kita bahas di bawah ini.

Pros:

• Rapid iteration
  He em cepat banget karena pake kertas, tinggal cora coret dan tempel-tempel dan jadi kemudian test.
• Inexpensive
  Murah banget, kan tinggal ambil kertas kosong dan corat -coret, atau kalau mau effort dikit ya tinggal print UI kamu dari komputer atau bisa ambil dari template yang tersedia di Internet.
• Team-building
  Jangan meremehkan efek seni dan kerajinan yang menyenangkan di lingkungan kantor ya. Menggambar, memotong, dan menempel bersama dapat membangun kesatuan tim dan membangkitkan semangat. Tapi jarang banget tim lain yang mau diajak apalagi yang se level PM yang fokus ke metric-metric gitu.(Dan selalu bilang kan sudah banyak tools online, yang less effort. Kenapa harus pake potong2 kertas kayak anak PAUD aja :D)

Cons:

• Inaccurate feedback
  Metode ini membutuhkan banyak imajinasi, dan ada banyak ide yang hilang ketika membayangkan seperti apa sebuah produk nyata secara digital. Apa yang dipikirkan pengguna mungkin berbeda dari yang kalian pikirkan, sehingga feedbacknya tidak akurat.
• Limits user interact
  Namanya juga pake kertas, pasti terbatas interaksinya dong. Sebagai contoh: gimana mau scrooling, dragging sama sistem feedback dari sistemnya juga jadi terbatas.
• No gut reactions
  Bagaimanapun juga ini hanya kertas, tidak ada cara untuk meniru pengalaman menggunakan produk digital di atas kertas, tidak peduli seberapa detailnya gambar atau template kertas yang ada. Pasti reaksi dari user tidak se excited ketika melihat digital prototype.

2. Digital Prototyping

Metode favorit saya, atau bisa jadi semua UI/UX Designer menggunakan metode ini ketika mereka bekerja. Berbeda dengan Paper Prototyping, metode ini mencoba untuk meniru bentuk sebenarnya/asli dari sebuah final produk digital yang belum rilis. Dengan aspek visual yang sangat detail seperti skema warna, tipografi, gambar, sampai video pun juga bisa.

Photo by Daniel Korpai on Unsplash

Setiap element design UI dari produk dapat dimasukkan di dalamnya, dan dapat diimplementasikan pada perangkat/device yang kita inginkan seperti dengan produk yang akan dirilis.

Kapan menggunakan metode ini?
Kebanyakan best practice penggunaan dari metode digital prototyping ini adalah ketika dalam fase mencari validasi. Bisa juga sebagai mockup design untuk handover ke tim enginer setelah selesai validasi design.

Photo by Tran Mau Tri Tam on Unsplash

Tools untuk membuat Digital Prototyping?
Peranti pasti yang digunakan untuk membuat digital prototyping sudah pasti computer, bisa PC atau Mac. Untuk Windows user bisa gunakan software seperti Figma, AdobeXD, atau kalau mau lebih advance micro interaction bisa pakai AE. Untuk Mac user pasti software andalannya Skecth dan Principle. Ada juga online tools prototyping seperti Marvelapp, Invision, prototypr, dan uxpin tinggal dipilih saja senyamannya dan perhatikan kantong kalian juga ya. Kalau saran saya sih Invision atau marvelapp untuk kolaborasi dengan klien lebih nyaman dan lebih terjangkau. Kembali lagi semua itu tergantung kebutuhan

Adapun berbagai keuntungan dan kekurangan dari metode digital prototyping adalah sebagai berikut:

Pros:

• Realistic
  Sudah pasti, secara bentuk visual dan interaksi hampir mirip dengan final produk.
• More adaptive to change
  Lebih mudah untuk di aplikasikan ke dalam mockup device sehingga lebih terlihat seperti final produk. Juga lebih mudah untuk iterasi dan melakukan perubahan ketika dalam proses iterasi terus menerus.
• Attractive and Coherent
  Terlihat sangat menarik bagi user karena bisa secara nyata melihat dan berinteraksi dengan prototype. Apalagi didukung dengan aspek visual yang keren dan fungsi yang hampir sama dengan final produk.

Cons:

• Costly
  Iya sudah pasti “Ono rego ono rupo” kata pepatah jawa seperti itu.
  Perlu sedikit ektra effort mengeluarkan biaya untuk membikin prototype dengan metode ini.
• Extra Time Consuming
  Kalau ingin realistic lagi perlu tambahan waktu untuk pengerjaannya. Apalagi untuk interaksi behaviour yang lebih detail.

3. Native Prototyping
Berbicara native identik dengan native produk itu sendiri, ya bisa dibilang metode ini membuat prototype dengan menggunakan base code, namanya juga produk digital sudah pasti basicnya code dan code. Semisal, kalau produknya website ya sudah pasti basic prototypenya menggunakan code html, dan css. Sejujurnya saya g begitu paham code, paling cuma basic html, css dan sedikit jquery aja. Itupun pake framework bootstrap. Hehehe :D.

Photo by Sai Kiran Anagani on Unsplash

Akan tetapi akhir-akhir ini saya lagi eksplorasi tools Framer. Yang katanya itu bisa lebih cepat implementasi ke code development waktu handover ke tim enginer. Karena basicnya reactjs (wth isitlah opo meneh kui, saya benar2 g paham). Maaf kalau tidak terlalu jelas untuk penjelasannya native protoyping, karena saya sendiri tidak terlalu paham code.

Pada intinya metode ini menitik beratkan untuk membuat semirip mungkin dengan final produk dengan dasar pembuatannya menggunakan code. Mungkin teman-teman enginer atau developer yang lebih paham. Maafkan saya yang fakir ilmu.

Kapan menggunakan metode ini?
Hampir sama dengan digital prototyping cuma kalau punya waktu yang lebih longgar dan ada tim yang sanggup membuat native prototyping dengan cepat ya boleh langsung KICK N RUSH.

Tools untuk membuat Native Prototyping?
Jujur saja saya kurang begitu paham, kalau produknya website ya sudah pasti bisa menggunakan html, css dan javascript. Kalau untuk tools saya baru mencoba Framer.

Adapun berbagai keuntungan dan kekurangan dari metode native prototyping adalah sebagai berikut:

Pros:

• Superb Realistic
  Tidak perlu dijelaskan lagi, sudah pasti sangat mirip dengan final produk.

Cons:

• More Costly
  Perlu ektra effort mengeluarkan biaya untuk membikin prototype dengan metode ini.
• Limit Creativity
  Tidak semua interaction yang diinginkan bisa di implementasikan ke dalam code dalam waktu yang singkat.
• Need More Extratime
  Setiap ada perubahan sedikit atau ketika iterasi akan membutuhkan lebih banyak waktu. Mulai dari design hingga implementasi dalam bentuk codenya.

Best Practices: Do’s and Don’ts

Do

• Selalu libatkan stakeholder atau tim yang lain.
• Test prototype ke real user yang sesuai dengan target produknya.
• Set expectations diawal.
• Mulai dengan user flow fitur/aspek yang paling krusial
• Pilih tools dan metode yang sesuai keadaan tim.
• Buat prototype dengna High-Fidelity secara realistic (sesuaiakan dengan conditional tim) sehingga users dan stakeholders tidak kecewa ketika mereka membandingkannya dengan final produk.
• Simpan templates untuk mempermudah waktu digunakan kembali di projek yang akan datang.

Don’t

• Jangan pake template “lorem ipsum” and “John Doe”. Gunakan real konten dengan konteks yang sesuai untuk di test.
• Jangan bikin prototype fitur yang tidak akan menjadi final produk.
• Tidak perlu menjadi perfectionist. Good sudah cukup. Ingat kembali tujuan dari prototype.
• Tidak perlu membuat prototype semua flow untuk di test.

Begitulah sedikit yang bisa saya bagikan. Kalau ada kekurangannya mohon dimaafkan, semua ini karena minimnya ilmu dan pengetahuan saya. Keripik pedas dan constructive feedback sangat sangat saya harapkan terimakasih.