MasakPedia : An App For Finding Food Recipes — A UX Case Study

MasakPedia App

Hal paling mendasar yang membuat saya mendesain aplikasi ini adalah ketika mulai banyaknya orang yang menjadi koki dadakan disaat pandemi seperti ini. Keharusan untuk stay di rumah dan work from home membuat ‘seorang ibu’ dan remaja perempuan (termasuk saya sendiri) mencoba berbagai macam menu masakan untuk mengisi waktu kosong dan mengisi perut selama di rumah. Tidak bisa dipungkiri, berdiam di rumah saja menjadi salah satu faktor keinginan untuk makan dan ngemil turut meningkat.

Namun, masalah klasik yang sering dialami ketika ingin memasak adalah kebingungan dalam memilih menu masakan. Apalagi karantina mandiri membuat kegiatan memasak menjadi lebih sering dilakukan dari biasanya, akibatnya ide pun semakin habis.

Tutorial masak di youtube pun sudah banyak. Namun, bagaimana bisa mencari tutorial masak ketika tidak tahu mau masak apa. Bukankah harus mengetik terlebih dahulu nama masakannya? Misalnya “Cara masak ayam rica-rica” atau bisa juga mendapatkan inspirasi dari berbagai macam sosial media seperti instagram, facebook, dan twitter. Namun, sering kali orang masih merasa kerepotan ketika mendapatkan menu masakan yang hampir sebagian dari bahan-bahannya tidak tersedia di kulkas. Sehingga mengharuskan orang untuk pergi belanja lagi hanya untuk memasak makanan tersebut. Sementara di masa pandemi ini, orang pun merasa was-was jika terlalu sering keluar rumah dan berinteraksi terlalu sering dengan orang lain.

Atas dasar permasalahan inilah saya mencoba mencari solusi bagi para pecinta masak dalam mengatasi permasalahannya dalam proses memasak. Di dalam proses mendesain aplikasi MasakPedia ini, saya mencoba menerapkan Design Thinking dimulai dari Empathize hingga Testing.

Design Thinking Framework yang Saya Gunakan

Namun, sebelum ke fase Empathize, terlebih dahulu saya mencoba menginisiasikan kebutuhan produk atau Initial Product Requirement.

Initial Product Requirement

Sebelum memulai membuat produk, hal pertama yang harus dilakukan adalah membuat hipotesis awal terhadap calon pengguna disertai dengan masalahnya dengan scope yang jelas, dapat dimengerti, dan dapat ditindaklanjuti (actionable).

Berikut ini beberapa aktivitas untuk membuat Initial Product Requirement :

  1. Menentukan Potential Persona
  2. Membuat Background Masalah
  3. Menetukan Objective/Goal Product

1. Menentukan Potential Persona

Potential Persona adalah profil fiksi berdasarkan hipotesis awal yang ditentukan berdasarkan target pengguna produk kita. Disini saya mencoba membuat profil fiksi berdasarkan target pengguna yang akan menggunakan aplikasi MasakPedia. Inilah potential persona untuk aplikasi MasakPedia yang sudah saya buat :

Potential Persona

2. Membuat Background Masalah

Setelah mendapatkan Potential Persona, saya melanjutkan dengan mengamati permasalahan mereka, mana yang harus diperbaiki, lalu menerjemahkannya dalam bentuk hipotesis atau Background Masalah.

Berdasarkan hipotesis di lapangan dan pengamatan ke beberapa pengguna yang suka memasak, sering kali mereka merasa kebingungan dalam memilih menu masakan. “Masak apa lagi hari ini?” “Apa yang mau dimasak” “Sudah bosan makan masakan yang itu-itu saja”. Hal ini mungkin terjadi akibat terlalu seringnya memasak yang dimana hampir setiap hari memasak makanan, akibatnya ide pun habis.

3. Menetukan Objective/Goal Product

Tujuan yang dimaksud disini adalah tujuan mengapa saya membuat aplikasi MasakPedia ini. Adapun tujuan utamanya adalah :

Memudahkan orang-orang yang ingin mendapatkan
rekomendasi resep masakan secara efektif, efisien,
dan nyaman.

Setelah selesai menentukan kebutuhan produk, saya mulai dengan tahap Design Thinking yang pertama, yaitu Empathize.

Di fase ini saya mulai mengumpulkan dan mendapatkan pemahaman yang lebih mendalam dengan pengguna melalui beberapa aktivitas berikut :

  1. Melakukan In-Depth Interview
  2. Memvalidasi Mental Model dan Menentukan Persona
  3. Memvalidasi Masalah (Problem)
  4. Memetakan Temuan Ke Dalam User Journey Map

1. Melakukan In-Depth Interview

Berdasarkan background masalah yang sudah saya buat, selanjutnya saya mencoba memvalidasi masalah tersebut kepada beberapa orang yang kriterianya sesuai dengan potential persona yang sebelumnya sudah saya buat pula. Metode yang saya gunakan ini adalah salah satu metode yang paling umum digunakan, yaitu interview. Dikarenakan kondisi yang tidak memungkinkan untuk bertatap muka langsung kepada para partisipan, maka saya melakukannya melalui fitur voice note whatsapp. Saya tidak menelpon atau video call karena beberapa partisipan saya tidak memungkinkan untuk mengobrol dalam beberapa waktu dikarenakan kesibukan, itulah sebabnya saya memilih voice note karena partisipan bebas menentukan kapan mereka bisa menjawab pertanyaan saya.

Ada beberapa pertanyaan mendasar yang saya ajukan, yaitu :

1. Hal apa yang memicu anda mencari resep masakan
terlebih dahulu ketika ingin memasak?

2. Apa yang anda lakukan ketika hendak mencari resep
masakan itu?

3. Apa yang anda harapkan ketika melakukan hal
tersebut? (mencari resep di internet)

4. Apa yang ingin anda berikan dan dapatkan ketika hal
yang anda harapkan itu tercapai?

Selanjutnya, saya mulai menanyakan kendala mereka ketika hendak memasak. Dan beginilah pertanyaan saya :

Pernakah Anda ketika sudah mencari resep dari
platform (internet) namun tidak jadi memasak bukan karena
malas tapi karena suatu hal lainnya? Tolong ceritakan

Dari pertanyaan diatas, saya mendapatkan beberapa jawaban, salah satunya yang membuat saya ingin bertanya lebih lanjut adalah ketika beberapa partisipan menceritakan bahwa mereka membuang bahan makanan yang mereka simpan karena sudah kadaluwarsa akibat terlalu lama disimpan. Dan inilah pertanyaan lanjutan saya :

Anda mengatakan bahwa Anda membuang bahan makanan karena terlalu lama tidak terpakai yang akibatnya kadaluwarsa. Memangnya kenapa bahan tersebut tidak Anda gunakan? Apakah Anda bingung menentukan makanan apa yang dapat dimasak dari bahan-bahan yang sudah
Anda miliki? Tolong jelaskan.

2. Memvalidasi Mental Model dan Menentukan Persona

Setelah mendapatkan beberapa insight dari partisipan, saya memvalidasi Mental Model dan Persona ke dalam bentuk Hook Model. Mental Model itu sendiri adalah tindakan atau tingkah laku, proses berfikir, dan cara tiap-tiap persona melakukan sesuatu atau berinteraksi dengan sesuatu di dunia nyata. Mental Model ini akan membantu dalam menemukan solusi desain.

Hook Model Tiap Persona

3. Memvalidasi Masalah (Problem)

Setelah menggali mental model tiap persona dan masalah yang dihadapi, saya menyatukan mental model yang serupa pada tiap persona menjadi satu bentuk hook model canvas dan selanjutnya memetakan masalah yang tervalidasi dalam bentuk tabel.

Hook Model Canvas
Masalah Pengguna yang Tervalidasi

4. Memetakan Temuan Ke Dalam User Journey Map

Setelah memetakan mental model pengguna ke dalam bentuk hook model dan memvalidasi masalah dalam bentuk tabel, saya membuat User Journey Map. User Journey Map sendiri adalah alur yang mungkin akan dilalui pengguna saat hendak menggunakan suatu produk atau layanan.

Berikut User Journey Map yang sudah saya buat berdasarkan persona dan masalah sebelumnya :

User Journey Map

Fase Define adalah fase dimana kita mendefinisikan kebutuhan pengguna dengan cara mengubah masalah yang telah tervalidasi di fase Empathize menjadi sebuah tantangan atau pernyataan yang bisa ditindaklanjuti (actionable statement) menggunakan metode How Might We (HMW) challenge.

Beginilah hasil ketika saya mengubah masalah tersebut menjadi sebuah tantangan :

How Might We

Dari tantangan yang telah didefinisikan tersebut, barulah saya mendapatkan ide untuk solusi desain atas permasalahan yang dihadapi pengguna.

Pada fase ini saya mulai merancang solusi desain berdasarkan tantangan How Might We yang telah dibuat, dan beginilah hasilnya :

Ide Solusi Desain

User Flow

Setelah menentukan solusi desain, saya membuat User Flow yang menggambarkan proses atau langkah-langkah yang dilakukan oleh pengguna untuk mencapai tujuan mereka di dalam produk ini (MasakPedia). Berikut adalah alur yang saya buat untuk pengguna agar mencapai tujuannya :

Langkah 1 — User membuka aplikasi.

Langkah 2 — User bisa memasukkan nama resep atau bahan-bahan
yang ia punya.

Langkah 3 — User bisa melihat daftar resep yang sesuai dengan
kriteria pencariannya, dan juga user bisa melakukan filter atau
penyaringan berdasarkan harga bahan atau budget dan durasi
yang dibutuhkan untuk memasak.

Langkah 4 — User bisa melihat detail resep.

Langkah 5 — User bisa menyimpan resep tersebut sehingga user
dapat melihatnya ulang jika diperlukan atau dapat langsung
menonton tutorialnya.

User Flow

On-Boarding & Create An Account

Ini adalah tampilan awal ketika pengguna pertama kali membuka aplikasi MasakPedia. Dalam On-Boarding ini, aplikasi akan menjelaskan keuntungan apa saja yang mungkin bisa didapatkan pengguna jika menggunakan aplikasi MasakPedia ini. Selanjutnya, seperti aplikasi pada umumnya, pengguna dapat membuat akun, login, ataupun login sebagai “guest”. Saya membuat opsi login sebagai guest karena bisa saja pengguna hanya ingin melihat-lihat dan mencari resep tanpa interaksi lanjutan seperti menyimpan resep, membagikan resep, dan berinteraksi dengan pengguna lain. Namun, disini saya hanya membuat halaman untuk membuat akun.

Home

Ini adalah tampilan awal ketika pengguna berhasil membuat akun atau login di aplikasi MasakPedia (screen paling kiri). Di halaman ini, pengguna disuguhkan dengan berbagai macam konten, seperti resep paling populer yang bisa discroll horizontal, kategori masakan, dan pada bagian atas pengguna bisa mencari langsung resep masakan yang ia inginkan. Selanjutnya, apabila pengguna scroll ke bawah, maka akan muncul berbagai macam resep masakan dari pengguna lain (screen di tengah). Konten resep masakan yang muncul di halaman ini adalah berdasarkan ketertarikan pengguna pada jenis masakan, yang bisa diambil polanya dari resep yang pengguna cari, simpan, dan lihat. Setelah mendapatkan berbagai macam resep masakan dari pengguna lain, pengguna juga bisa melihat detail resep tersebut (screen paling kanan).

Search By Recipes

Pada bagian atas halaman Home, ada Search Bar yang bisa digunakan oleh pengguna untuk mencari resep masakan berdasarkan nama masakan itu sendiri. Disini saya mengambil contoh resep ayam lada hitam. Ketika pengguna mencari resep menggunakan Search Bar tersebut, maka pengguna akan dibawa ke halaman pencarian (screen paling kiri). Di halaman ini pengguna bisa melihat pencarian terakhirnya dan juga pencarian terpopuler. Setelah berhasil memasukkan resep yang ingin dicari, aplikasi akan menampilkan resep yang sesuai dan pengguna pun bisa memilih sendiri resep mana yang ingin ia lihat lebih lanjut.

Search By Ingredients

Berbeda dengan pencarian melalu serach bar di halaman Home, pada tampilan ini pengguna dapat mencari resep berdasarkan bahan yang di-input. Disini saya memasukkan cokelat, tepung terigu, dan kayu manis. Selanjutnya aplikasi akan menampilkan hasil pencarian dengan jenis masakan yang membutuhkan ketiga jenis bahan tersebut.

Recipes Detail & User Profile

Ketika pengguna melihat detail resep, maka pengguna akan dibawa ke halaman yang menyajikan informasi lengkap mengenai resep masakan tersebut, mulai dari bahan-bahan yang dibutuhkan, video tutorial, dan langkah-langkah memasak dalam bentuk foto yang bisa di-scroll secara horizontal (screen tengah). Selain itu, pengguna juga bisa menyimpan resep tersebut agar bisa dilihat ulang jika dibutuhkan, memberikan like, dan membagikannya ke orang lain. Pengguna juga bisa membagikan hasil kreasi masakannya terhadap resep orang lain melalui fitur “Recook”.

Sedangkan pada halaman profil, pengguna bisa melihat mengenai profil dirinya sendiri termasuk “My Recipes” untuk melihat daftar resep masakan miliknya sendiri yang telah ia bagikan, “My List” yaitu resep dari pengguna lain yang telah disimpan oleh pengguna sendiri, dan “My Recook” yaitu resep yang sudah dibuat oleh pengguna dari resep pengguna lain. Di halaman ini pengguna juga bisa menambahkan lagi resep dengan meng-klik tombol “plus” di pojok kanan bawah.

Silahkan klik link di bawah ini jika ingin mencoba prototype dari aplikasi ini

https://www.figma.com/proto/TwHJJrUKu6XMy1hy3mR6qR/MasakPedia-App?node-id=4%3A2&viewport=1035%2C-1900%2C1&scaling=scale-down

Fase lima adalah fase terakhir dalam Design Thinking. Pada fase ini saya melakukan uji coba prototype kepada pengguna yang kriterianya disesuaikan dengan Potential Persona yang sudah saya buat pada tahap Initial Product Requirement. Tujuan saya melakukan uji coba prototype ini adalah untuk melihat apakah ada kendala yang dirasakan oleh pengguna ketika menggunakan aplikasi MasakPedia ini dan juga untuk melihat bagaimana impresi awal mereka terhadap solusi design yang saya tawarkan.

Untuk melakukan uji coba ini saya menggunakan Maze Design dengan menguji kepada lima orang tester yang diberikan situasi, konteks, dan skenario yang dibuat mirip dengan realita yang akan dihadapi oleh pengguna jika menggunakan aplikasi MasakPedia ini.

Search By Recipes

Dalam uji coba ini saya membuat task kepada pengguna agar mereka mencari resep “Ayam Lada Hitam” dan beginilah hasil uji coba tersebut :

Hasil Uji Coba Search By Recipes

Dari hasil heatmap di atas terlihat bahwa pengguna berhasil menyelesaikan task yang diberikan. Hanya saja pengguna agak sedikit bingung di awal ketika menggunakan menu search bar karena bisa terlihat masih banyak tanda merah di bagian kategori. Namun hal ini bisa jadi karena saya juga meminta agar pengguna meng-eksplor halaman Home agar mereka bisa melihat konten di bawah ketika halaman di-scroll. Hal ini menjadi pelajaran bagi saya jika ingin melakukan uji coba lagi, maka setiap task sebaiknya dipisah agar lebih jelas. Lalu pada screen selanjutnya masih banyak pula tanda merah pada search bar, disini saya bisa melihat kebingungan pengguna yang mengira untuk mengetik harus meng-klik search bar lagi padahal bisa langsung dilakukan dengan menekan keyboard. Hal ini juga menjadi pelajaran bagi saya bahwa untuk ke depan jika mendesain halaman seperti ini lagi sebaiknya pada form “ketikan” terdapat garis ketik sebagai indikasi bahwa pengguna tinggal menekan keyboard.

Setelah menyelesaikan misi, saya bertanya pada pengguna mengenai kemudahan dalam menyelesaikan misi dan beginilah hasilnya :

Penilaian Uji Coba Search By Recipes

Search By Ingredients

Sama halnya dengan misi sebelumnya, disini saya juga memberikan task kepada pengguna untuk mencari resep dengan memasukkan bahan lalu memilih “Churros” untuk melihat detail resep. Beginilah hasilnya :

Hasil Uji Coba Search By Ingredients

Dari hasil uji coba di atas terlihat bahwa pengguna berhasil menyelesaikan misi yang diberikan. Namun, dari hasil terlihat bahwa pengguna banyak yang missclick. Oleh sebab itu saya akan memberikan beberapa poin yang harus dikembangkan :

  1. Pada screen pertama terlihat bahwa pengguna kesulitan menggunakan form yang ada dikarenakan ukuran form yang kekecilan. Hal ini jadi pembelajaran bagi saya untuk memperbesar lagi ukuran form sehingga pengguna tidak akan kesulitan.
  2. Pada screen kedua terlihat bahwa permasalahan yang dihadapi pengguna sama dengan uji coba misi sebelumnya yaitu pengguna tidak langsung menekan keyboard dikarenakan tidak adanya “garis ketik” sebagai indikasi bahwa pengguna tidak perlu lagi meng-klik form.
  3. Pada screen ketiga terlihat banyak sekali tanda merah yang menandakan bahwa pengguna kebingungan dengan isi form yang ada. Disini saya menyadari bahwa task yang saya berikan kurang jelas. Saya hanya meminta pengguna untuk mencari resep dengan memasukkan bahan yang ada. Padahal, bisa saja setiap bahan yang dimasukkan pengguna berbeda-beda. Seharusnya saya berikan keterangan bahan apa saja yang harus mereka input. Selain itu dikarenakan pada halaman ini saya menggunakan animasi text field membuat pengguna sedikit bingung hasil yang mereka peroleh tidak sesuai dengan bahan yang mereka masukkan.
  4. Screen empat menunjukkan bahwa masih ada pengguna yang mencoba menghapus bahan yang tertulis di form.

Setelah menyelesaikan misi, saya bertanya lagi pada pengguna mengenai kemudahan dalam menyelesaikan misi ini dan beginilah hasilnya :

Penilaian Uji Coba Search By Ingredients

Kesimpulan

Setelah saya melakukan uji coba kepada lima orang pengguna, saya mendapatkan pembelajaran dan masukan dari pengguna berdasarkan apa yang mereka alami. Berikut ialah ringkasan mengenai uji coba ini :

  1. Semua pengguna berhasil menyelesaikan task meskipun sedikit kesulitan
  2. Setelah saya tinjau kembali dengan lima orang pengguna tersebut ternyata empat diantaranya mengira bahwa prototype ini adalah desain final layaknya aplikasi yang telah launching. Itulah sebabnya banyak diantara mereka yang mencoba menghapus teks dan meng-klik sembarang tempat ketika hal tersebut tidak berhasil. Disini saya menyadari kesalahan saya dalam melaksanakan uji coba ini. Saya kurang mengedukasi mereka tentang Usability Testing dalam ranah UI-UX dengan bahasa yang mudah dimengerti oleh orang awam. Skill komunikasi saya harus ditingkatkan lagi.
  3. Saya mendapatkan masukan dari pengguna agar dapat menyediakan opsi bahasa karena dua diantaranya sedikit kesulitan dan memakan waktu saat menjalankan prototype ini dikarenakan penggunaan Bahasa Inggris dalam aplikasi.

Akhir kata, saya menyadari betul bahwa desain yang saya buat ini masih banyak sekali kekurangannya. Ada begitu banyak hal yang perlu saya tingkatkan, mulai dari sisi UI, sisi UX, bahkan sampai skill komunikasi dengan pengguna. Namun, meskipun demikian saya merasa puas karena berhasil menyelesaikan studi kasus ini. Seperti yang kita semua tahu bahwa mendesain adalah proses yang berkelanjutan sehingga perlu diiterasi secara terus menerus guna menghasilkan solusi desain yang paling mampu mengatasi permasalahan dan menjawab kebutuhan pengguna.

Terima kasih buat teman-teman yang sudah meluangkan waktu membaca studi kasus saya ini. Ini adalah studi kasus pertama saya dan desain pertama saya juga. Saya masih belajar, oleh karena itu buat teman-teman yang ingin memberikan kritik dan saran saya sangat senang menerimanya.

*FYI, penulisan studi kasus ini saya terapkan ilmunya dari buku The Design Thinker karya mas Rizki Mardita. Terima kasih mas atas ilmunya :)

Creating a seamless path for a user to achieve their goal. My design portofolio on dribbble >> https://dribbble.com/Icharianii

Creating a seamless path for a user to achieve their goal. My design portofolio on dribbble >> https://dribbble.com/Icharianii