My First UI/UX Challenge: The Story

Maestro Gunawan
7 min readOct 24, 2021

--

Amartha — Gold Investment Feature by Maestro Gunawan

Memasuki semester 2 tahun 2021, seorang kolega membagikan sebuah tautan kepada saya. Tautan tersebut menjadi awal perjalanan saya selama 3 bulan terakhir, mendorong diri sendiri untuk mengerjakan challenge pertama dalam dunia UI/UX Design. Melalui proses pendaftaran dan seleksi, saya mendapat kesempatan untuk mengikut program DTS-PRO dari KOMINFO, bekerja sama dengan Skilvul.com memfasilitasi ratusan profesional dalam sebuah rangkaian bootcamp ataupun pelatihan dengan tajuk UI/UX Design Mastery.

Chapter 1: The Challenge

Mengikuti setiap sesi pelatihan baik dalam bentuk video pembekalan lewat website Skilvul.com, ataupun sesi daring setiap hari Sabtu (dan Minggu untuk beberapa minggu terakhir), hal tersebut pun sudah menjadi sebuah tantangan tersendiri di tengah kesibukan pekerjaan dan keseharian.

Untuk tahap pertama dalam pemilihan studi kasus misalnya, saya bisa dikatakan “terlambat”, karena walaupun masih dalam tenggat waktu yang ditentukan, namun pilihan studi kasus sudah penuh terisi kuotanya dan hanya tersisa beberapa saja yang dapat saya pilih. Saya memutuskan untuk mengambil studi kasus yang bertajuk investasi yakni Amartha, sebuah produk peer to peer lending atau peminjaman modal usaha untuk UMKM.

Tantangan yang sesungguhnya, tantangan UI/UX Design pertama saya adalah mendesain sebuah fitur Investasi Emas yang sesuai dengan kebutuhan pengguna dan juga arahan dari Amartha. Waktu berlalu, sesi pertama pertemuan daring dimulai, maka dimulai juga proses pendakian menaiki bukit dan gunung yang bernama UI/UX Design.

Chapter 2: The Hike

Sejak awal, tujuan saya sudah jelas, ingin belajar UI/UX Design. Ingin praktek. Kenapa? Saya suka mendesain walaupun tidak bisa menggambar (dan lebih tidak bisa lagi mewarnai), intinya saya gak bakat seni. Tapi sejak topik pembahasan pertama saya yakin bahwa saya akan menikmati pendakian ini, menurut saya dalam UI/UX Design yang utama adalah proses pencarian akar masalah dan pemecahannya. Hal tersebut merupakan kemampuan dasar saya, yang saya gunakan sehari-hari dalam pekerjaan saya selama 8 tahun terakhir.

Bicara terkait dengan pencarian akar masalah dan pemecahan, dalam pendakian ini saya menggunakan metode Design Thinking. Sebuah metode yang familiar, banyak dipergunakan (mungkin) diluar sana. Saya sendiri dalam 3 tahun terakhir sudah 2 kali mengikuti workshop Design Thinking. 1 sesi sebelum pandemi COVID-19 sehingga bisa dilakukan luring, yang berikutnya dilaksanakan daring. Namun meski begitu, saya belum pernah mendapat kesempatan mengerjakan sebuah proyek nyata menggunakan metode tersebut.

Photo by Patrick Perkins on unsplash

Design Thinking sendiri terdiri dari 5 tahapan, yakni:

  1. Emphatize
  2. Define
  3. Ideate
  4. Prototype
  5. Test

Tahap pertama Emphatize, menurut saya merupakan alasan mengapa metode Design Thinking ini cocok untuk digunakan pada UI/UX Design Project, berempati dan menempatkan diri kita sebagai pengguna menjadi dasar yang penting karena dari namanya saja, User Interface dan User Experience, tentunya kita sebagai Designer harus melihat segalanya dari sudut pandang user. Namun ternyata tidak berhenti disana, perlu adanya juga keseimbangan yang baik dari sudut pandang Business User dan Developer Technology.

Mengambil contoh untuk proyek Investasi Emas Amartha ini, pertama-tama saya memahami bagaimana User Persona terlebih dahulu, bagaimana latar belakang pengguna aplikasi Amartha yang sudah terdaftar sebagai Lender alias pendana atau peminjam dana, dan bahwa ternyata setiap kali melakukan investasi, minimalnya pendana butuh 3,5 juta rupiah. Dan investasi dikembalikan berkala dalam jangka waktu hingga puluhan minggu.

Yang kedua, dari sudut pandang Business User yakni rekan-rekan yang bekerja di Amartha, khususnya di bagian Marketing, melihat bahwa adanya pola investasi para Lender yang menarik hasil investasi dan tidak menanamkan kembali. Setelah diusut, perihal minimal pendanaan 3,5 juta rupiah menjadi salah satu alasan yang mencuat. Di tahap ini rekan-rekan di Amartha tentunya mencari kira-kira produk investasi apa yang cocok untuk mengatasi masalah tersebut. Jadi memang bisa di bilang, tahapan Emphatize ini tidak benar-benar saya lakukan, dan sebagian besar info diberikan oleh Amartha di awal proyek.

Yang ketiga, terakhir tetapi tidak kalah penting, dari sisi Developer. Nah, ini sudah bicara lebih ke teknis, apakah investasi emas ini akan dibuatkan aplikasi terpisah, kemudian integrasi seperti apa yang akan dibuat dan sebagainya. Info yang diberikan kepada saya, investasi emas akan menjadi fitur baru yang ada di dalam aplikasi Amartha sekarang. Berarti harus harmonis dengan jalur investasi yang sudah ada, sinkronisasinya juga harus dijaga dalam pembuatan desainnya nanti.

productlogic.org

Tahap kedua Define, berhubungan erat dengan tahap ketiga, Ideate. Saat praktek kedua tahapan ini, tools yang digunakan adalah Figma. Menggunakan Figma, kita dapat membuat Figjam, yang ternyata merupakan alat untuk berkolaborasi secara daring dan real time dengan anggota tim. Berdasarkan pengalaman pribadi, Figjam merupakan alat yang sangat praktis dan mudah penggunaannya. Sifatnya yang daring dan real time juga menjadikan ini sebuah fasilitas yang sesuai untuk Define dan Ideate.

Figjam: Ideate Board

Pada tahap Define, saya melakukan pengumpulan pain points sebanyak-banyaknya dan berangkat dari sana, menyimpulkan How-Might We atau bagaimana kita bisa menyelesaikan pain points tersebut. Di akhir tahapan ini akan dipilih How-Might We mana yang paling utama dan akan dibuatkan solusinya.

Berlanjut ke tahap Ideate, berdasarkan How-Might We yang dipilih, maka saya mulai melakukan pengumpulan ide-ide yang dapat diterapkan untuk mencapai How-Might We. Pada iterasi pertama, How-Might We yang saya angkat adalah bagaimana kita bisa membuat fitur investasi emas yang menarik untuk digunakan oleh Lender. Maka ide dan gagasan yang muncul di catat lagi-lagi menggunakan Figjam, diprioritaskan kemudian menggunakan metode Crazy 8 untuk membuat sketsa tangan untuk fitur investasi emas yang akan dibangun.

Crazy 8 | 8 sketches in 8 minutes.

Masuk tahap ke 4, Prototyping. Lagi-lagi menggunakan Figma sebagai alat untuk membuat wireframe. Wireframe adalah sebuah desain yang menjadi kerangka awal dari tampilan produk situs web atau dalam hal ini aplikasi mobile.

Low Fidelity Wireframing using Figma

Wireframe yang saya buat bersifat low fidelity yang artinya berupa kerangka saja, tidak detail, hitam putih, dan belum bisa melakukan interaksi. Pembuatan wireframe bertujuan untuk menghemat waktu namun dapat menghasilkan gambaran desain seperti apa yang akan dibangun. Dalam kasus tertentu dimana wireframe bisa menjadi saran konfirmasi asumsi alyout dan fitur yang akan dibangun kepada business user atau bahkan pengguna. Meski demikian langkah ini menurut saya bisa saya dilewatkan dan langsung membuat high fidelity misalnya dalam bentuk desain prototype.

High Fidelity Design using Figma

High Fidelity Design merupakan desain yang menyerupai produk akhir, dan tentu saja akan memberikan gambaran yang detail dari segi fungsi dan juga estetika. Namun effort yang diperlukan untuk membuat High Fidelity Design, tentu saja lebih banyak dibanding pembuatan Low Fidelity Design. Maka tidak ada rumus pasti apakah harus membuat Low Fidelity Design terlebih dahulu atau langsung membuat High Fidelity Design.

Tahap terakhir, Test. Pada tahapan ini saya mengadakan sesi in-depth interview dan Usability Testing. Pada tahap ini responden diminta menjawab serangkaian pertanyaan dan juga mencoba penggunaan prototype. Saya menggunakan Single Ease Question yang mendapat nilai akhir 6,5/7.

Semua saran dan kritik yang diberikan oleh responden juga dicatat dengan rinci sebagai materi pembahasan untuk peningkatan kualitas dari desain ke depan.

Tanpa terasa 10 minggu kemudian, pendakian pun hanya beberapa langkah lagi hingga menginjak puncak.

Chapter 3: The End..?

Sampai ke puncak. Akhirnya saya tiba pada realisasi bahwa ini semua bukan akhir, bahwa ternyata masih banyak puncak bukit dan gunung yang lebih tinggi lagi dalam dunia UI/UX Design ini. Namun pelajaran dan pengalaman berharga selama hampir 3 bulan ini menjadikan wawasan saya lebih luas dan menjadi motivasi untuk tidak pernah berhenti belajar dan eksplorasi.

Banyak sekali insight yang saya dapatkan melalui pendakian yang saya lalui. Saya, yang tidak memiliki pengertian dan pengalaman sama sekali di dunia Desain, khususnya UI/UX, menjadi “melek”, mata saya terbuka bahwa pengaplikasian ilmu ini bukan hanya membuat prototype, namun juga proses dan pola pikir. Saya yakin bisa mengimplementasikan insight yang saya dapatkan, dalam bidang profesional saya.

“To be inspired is great, but to inspire is an honor.” ― Stacey T. Hunt.

Pada waktunya, kita semua pasti akan dihadapkan dengan Challenge, dihadapkan dengan bukit dan gunung yang harus kita daki. Di puncak gunung ini, justru saya bisa dengan jelas melihat opsi dan jalur pendakian selanjutnya. Yang mana yang akan saya ambil? Belum ada yang tahu pasti. Time will tell.

Special Thanks

  1. DTSPRO KOMINFO
  2. Skilvul.com team dan para moderator discord
  3. Very Helpful Mentor: Luthfan Kin Gumandar, Thank you Mas!
  4. Kepada para teman-teman peserta bootcamp yang aktif sharing terkait UI/UX Design sehingga bisa dapat banyak referensi.

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 Amartha.

--

--

Maestro Gunawan
Maestro Gunawan

Written by Maestro Gunawan

Tech Enthusiast and UI/UX First-timer

No responses yet