UI/UX Case Study: Amartha Gold Investment Feature Challenge - Yuk MengEMAS!
Disclaimer: Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan Amartha sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh (Challenge Partner).
Seluruh merk, brand, & instansi yang digunakan hanya untuk kepentingan edukasi dan pelatihan demi menunjang final project.
Overview
Amartha adalah sebuah platform berbasis website dan aplikasi yang memungkinkan kamu untuk membuat pinjaman, meminjamkan, menyimpan dan melakukan investasi. Berdiri pada tahun 2010 sebagai microfinance yang bermisi menghubungkan pelaku usaha mikro dengan pemodal secara online. Amartha percaya kemudahan dalam mendapatkan akses permodalan untuk usaha mikro dapat berkontribusi untuk meningkatkan kualitas hidup masyarakat piramida bawah, membangun ketahanan ekonomi, dan mewujudkan keadilan sosial bagi rakyat Indonesia.
About Virtual Internship
Amartha hadir dengan konsep P2P Lending yang mempertemukan peminjam dan pemberi pinjaman melalui digital. Amartha ingin mengubah dan meningkatkan lini bisnis dengan menghadirkan layanan investasi berupa Investasi Emas. Layanan ini hadir untuk menjawab berbagai kebutuhan pengguna yang beragam.
Peserta diminta membuat sebuah desain tampilan aplikasi mobile untuk Layanan Gold Investment di aplikasi Amartha menggunakan figma sesuai dengan arahan proyek. Peserta juga diperbolehkan untuk mengeksplorasi fitur lainnya yang berkaitan dengan Gold Investment.
Problem Statement
Setelah melewati masa tenor, peminjam mengembalikan uang pinjaman beserta bagi hasil, dana tersebut menjadi dana endapan bagi pemberi pinjaman dan tidak dapat dicairkan selama 1 bulan. Researcher ingin membuat fitur investasi yang bisa memanfaatkan dana endapan guna meningkatkan potensi interest & gain dana endapan pemberi pinjaman.
Team Role
Secara keseluruhan, proses pengerjaan dilakukan bersama-sama mulai dari proses brainstorming, user research, design, prototyping, hingga usability testing, namun pada pembagian presentasi kepada stakeholder, saya mendapat bagian pemparan hasil UX Research.
Objective
- Membuat feature improvement pemanfaatan dana endapan berupa investasi emas pada aplikasi Amartha.
- Melakukan perubahan minor (redesign) pada UI aplikasi Amartha berupa layanan pendanaan mitra agar mempermudah user serta memberikan kenyamanan yang lebih saat menggunakan aplikasi Amartha.
Design Process
Design Thinking menjadi proses desain UX pilihan kami dengan mempertimbangkan keunggulan design thinking yang dapat diterapkan secara adaptif terhadap UX case yang ada, ditambah lagi metode ini cocok digunakan untuk pengembangan produk dan layanan baru, serta memperbaiki produk yang telah tersedia.
Design Thinking
Design Thinking memiliki 5 tahapan, dimana kami memulai dari define, ideate, prototype, testing, dan yang terakhir empathise, kemudian dilakukan iterasi kembali, seperti yang terlihat pada ilustrasi di bawah.
1 — Define
Pada tahap pertama ini kami melakukan pengumpulan informasi dan melakukan pemahaman Product Requirement Documentation (PRD) yang diberikan oleh Amartha, serta melakukan brainstorming berupa pain points, affinity diagram, dan How Might We (HMW) dengan menggunakan aplikasi figjam dari figma.
Pain Points
Pada pain points kami mencoba menjabarkan dari segi perspektif yang mungkin dialami oleh user terhadap hal-hal yang dapat menjadi permasalahan dari sistem yang hendak dibangun. Proses ini dikerjakan selama 20 menit untuk efisiensi waktu. Berikut adalah pain points yang dihasilkan oleh tim. Saya memiliki pandangan pain points terhadap peletakan fitur, kecemasan user, potensi crunch user, & zona nyaman user.
Affinity Diagram
Proses define selanjutnya adalah pengelompokan pain points yang telah dibuat agar lebih terorganisir. Proses ini dikerjakan selama 15 menit dan dihasilkan 8 kelompok yakni unfamiliar, design, negative mindset, resiko perusahaan, fitur keamanan, splitting asset focus, sosialisasi, dan payment, lebih jelasnya dapat dilihat dari gambar berikut.
How Might We
Proses define yang terakhir ini mencoba menjawab dengan bagaimana seharusnya kita mengatasi masalah-masalah yang ada. Per kelompok bisa memiliki satu atau lebih HMW. Proses ini dikerjakan selama 5 menit. Berikut adalah HMW yang kami hasilkan.
2 — Ideate
Pada tahap kedua ini kami memberikan solusi dari permasalahan dan langkah yang seharusnya dilakukan hingga mencoba penggambaran antara lain berupa Solution Idea, kemudian Prioritization Idea, dan Crazy 8’s dengan menggunakan aplikasi figjam dari figma.
Solution Idea
Ideate Stage ini merupakan hasil realisasi solusi pemecahan masalah yang tadi telah dikelompokkan dan diarahkan apa yang seharusnya dilakukan (HMW). Tidak ada batasan jumlah dalam memberikan solusi, pewaktuan pengerjaan selama 20 menit dan berikut hasilnya.
Prioritization Idea
Ragam solusi yang telah dibuat, selanjutnya akan dipilah secara prioritas dengan memperhatikan variabel kegunaan user dan usaha yang dikeluarkan untuk menciptakan solusi tersebut ke dalam 4 kuadran, kemudian dilakukan voting dimana per individu memiliki 2 hak suara untuk menentukan solusi mana yang paling diprioritaskan pada kuadran Yes, Do It Now karena diyakini memiliki impact terbesar dengan effort terkecil, dengan waktu 20 menit didapatkan hasil bahwa pemberian fitur grafik jual & beli emas menjadi opsi utama dan fitur impian dalam target berinvestasi menjadi opsi selanjutnya, seperti dalam gambar berikut.
Crazy 8's
Kedua solusi yang telah dipilih kemudian divisualisasikan secara cepat selama 10 menit dalam bentuk sketsa berjumlah 8 untuk meningkatkan kreativitas dan efektivitas. Berikut kumpulan hasil crazy 8’s yang telah dibuat.
Kemudian satu gambar terpilih akan diteruskan pada wireframe dan dikembangan untuk kesesuaian desain halaman lain.
3 — Prototype
Pada tahap ketiga ini, yang perlu dilakukan adalah pembuatan user flow, wireframe, UI style guide, UI Design, hingga pembuatan prototype itu sendiri. Figma merupakan satu-satunya tools yang digunakan pada tahap ini.
User Flow
Pertama-tama kami menyusun user flow dari proses ideate yang telah dibuat, user flow pendanaan mitra & investasi emas dibuat secara terpisah.
Alur pendanaan mitra adalah mulai dari halaman Homescreen hingga berhasil melakukan pendanaan terhadap salah satu mitra UMKM.
Alur dari Gold Investment sendiri dimulai dari halaman Homescreen lalu memiliki percabangan di dana endapan yaitu saving fund & gold investment di mana terdapat fitur pembelian emas, penjualan emas, dan juga pencairan dana hingga berhasil. Dari user flow yang ada kita sudah dapat menentukan kebutuhan halaman & melakukan pembagian desain.
Wireframe
Wireframe merupakan bentuk low-fidelity dari sebuah prototype design, desain halaman yang dibuat hanya mengandalkan 3 tone warna (hitam, abu-abu, & putih), bentuknya sederhana menggunakan shape.
UI Style Guide
Tahap ini merupakan tahap yang bisa dibilang cukup menyenangkan sekaligus merepotkan, karena kita membuat based rule dari design mulai dari pemilihan primary, secondary, & neutral color, text style, button, input field, status bar, icon, hingga komponen lainnya seperti slider. Tantangan tersendiri adalah dengan menerapkan auto-layout dalam pembuatan, dikarenakan belum terbiasa dan kurang memiliki tips & tricks. Pada akhirnya, UI style guide ini sangat membantu dalam konsistensi dan perubahan komponen dalam mendesain.
UI Design
Wireframe yang telah dibuat selanjutnya dapat di-upgrade menjadi high-fidelity prototype design dengan memperhatikan dan memanfaatkan kaidah dan komponen dari UI Style Guide. Bisa dibilang UI Design adalah wajah asli dari halaman yang akan tertampil pada aplikasi prototype.
Peletakan UI Design disusun sedemikian rupa untuk memudahkan dalam pembuatan prototype nantinya, dan desian sudah menunjang ilustrasi animasi yang dapat diterapkan juga. Berikut merupakan contoh bentuk UI Design yang saya buat.
Prototype
Pada tahap akhir yaitu prototype itu sendiri, UI Design yang telah disusun lalu saling dikaitkan sesuai user flow dengan interaction detail yang ada pada fitur figma prototype. Terdapat juga smart animation seperti instant, dissolve, & smart anime yang membuat prototype semakin hidup. Berikut merupakan hasil prototype gold investment yang telah kami buat dan menggunakan embed system agar dapat ditampilkan secara langsung di medium (klik fullscreen pada pojok kanan atas pada figma di bawah/ klik option scale down to fit).
Sementara untuk prototype pendanaan mitra dapat dicoba dari link berikut.
4 — Testing
Tahapan yang selanjutnya adalah testing, pada tahap ini dilakukan evaluasi ide solusi dengan melakukan interview user. Testing bisa dibilang tahap terpenting dikarenakan setiap asumsi, ide, atau redesign perlu dilakukan klarifikasi dengan pihak luar. Tools yang digunakan kali ini adalah figma, google docs, dan google spreadsheet.
Menurut Nielsen Norman jumlah ideal dari partisipan yang dibutuhkan adalah 5 orang, dikarenakan dengan jumlah tersebut masalah kegunaan berpeluang dapat ditemukan sekitar 80% dari keseluruhan masalah kegunaan. Namun karena keterbatasan waktu, Usability Testing dilakukan pada 3 user dengan harapan mampu mencakup 70% dari permasalahan penggunaan yang mungkin ditemui.
Maka dari itu, menentukan metode usability testing dan kriteria responden yang tepat merupakan hal yang penting. Kami memadukan tipe uji kualitatif dan kuantitatif karena dengan kualitatif kami mendapat suara langsung dari user, sementara kuantitatif untuk mendapat usability metrics yang menjadi salah satu kunci penyampaian desain kedepannya.
Selain itu, kami melakukan pendekatan secara moderat ketika melakukan testing, terdapat moderator yang melakukan in-depth interview berupa beberapa pertanyaan sebelum melakukan research scenario, pada research scenario moderator memberikan penjelasan mengenai aplikasi, alur dari fitur yang dibuat, dan menjelaskan penugasan yang harus dilakukan oleh user, namun ketika user melakukan pengujian prototype moderator tidak membantu selama proses pengujian agar mendapat pengalaman konteks secara natural dari user dan anggota lain melakukan pengamatan dan analisa baik dari segi mimik wajah, kursor, hingga vokal yang dikeluarkan oleh user.
Terdapat 4 penugasan yang harus dilalui oleh user yaitu:
- Pendanaan Mitra
- Pembelian Emas
- Penjualan Emas
- Pencairan Dana
Setiap keberhasilan melakukan pengujian, user akan ditanya perihal kendala dan kesesuaian informasi dengan kebutuhan pengguna serta memberikan likert scale questionnaire dengan konteks kegunaan, kemudahan, dan kepuasan dengan skala 1–5 dan memberikan penilaian secara keseluruhan dengan single ease question skala 1–7. Hasil usability metrics dapat dilihat dari bar chart berikut.
5 — Empathise
Empathise menjadi kesatuan tahap terakhir pada design thinking yang dilakukan, dari sini kami coba memahami permasalahan dan keinginan user pada tahap usability testing. Pembenahan yang akan diterapkan atau tidak berdasarkan hasil testing juga dapat diputuskan bersama. Selanjutnya proses design thinking akan terulang karena adanya improvement yang dilakukan.
Conclusion
Kesimpulan dari UI/UX Case Study yang telah berhasil dibuat adalah:
- Prototype yang dibuat telah menjawab objektivitas yang ada.
- Prototype yang dibuat tergolong cukup mudah digunakan oleh user.
- Masih perlunya proses iterasi pada perbaikan desain (minor), prototyping, dan testing.
- Perlunya marketing strategy untuk lebih meningkatkan antusias masyarakat dalam berinvestasi p2p lending dan pemanfaatan upcoming feature investasi emas digital.
Recommendation
Rekomendasi dari user yang dijadikan sebagai future works antara lain:
- Penambahan fitur hidden nominal pada total aset (telah didesain).
- Pemberian konfirmasi pada saat penjualan atau pembelian emas.
- Pemberian perbedaan informasi jenis pendanaan dalam card pada marketplace (telah diterapkan pada prototype).
Sekian artikel mengenai UI/UX Case Study pertama saya, artikel serupa dapat ditemukan pada Medium Harymukti & Putri Syifa Darmawel dengan penyampaian yang berbeda.
Feel free to Clap, Comment, & Follow me.
Thanks.
