Amartha Emas — A UI/UX Design Project

Zakka Izzatur
7 min readMay 23, 2022

--

Selama beberapa bulan kebelakang, aku ikut satu course gratis (terima kasih Kemkominfo!) yang sangat menarik. Di course ini, aku belajar banyak tentang dunia UI/UX dan beberapa tools yang sering digunakan oleh profesional di bidang ini. Meskipun skill desainku masih kurang (dan memang gak bakat), pengalaman belajar di sini buat aku paham kalau dunia UI/UX itu tidak hanya sebatas desain aplikasi yang terlihat keren doang. Tapi juga harus memperhatikan aspek usernya.

Output dari course ini adalah satu project besar untuk mendesain UI untuk fitur baru pada platform P2P yang sudah cukup banyak dikenal, Amartha. Tulisan Medium ini didekasikan untuk menceritakan bagaimana proses aku dan timku dalam mengerjakan project ini.

Latar Belakang

Amartha adalah sebuah platform berbasis website dan aplikasi yang memungkinkan kita untuk membuat pinjaman, meminjamkan, menyimpan dan melakukan investasi.

Saat ini, Amartha ingin mengubah dan meningkatkan lini bisnis dengan menghadirkan layanan investasi berupa Investasi Emas. Layanan ini hadir untuk menjawab berbagai kebutuhan pengguna yang beragam.

Objektif

  • Membuat desain UI untuk investasi emas pada aplikasi Amartha.
  • Melakukan UX research terhadap hasil desain UI.

Peran dalam Tim

Sebagai UI/UX Designer yang berkolaborasi dengan 3 anggota tim,

Vilicha Bella, Harits Muhammad Silalahi | Desainsani, dan Reza Ramdhan.

Dalam tim ini, tanggung jawabku adalah

  1. Membuat user flow
  2. Mendesain wireframe sampai high-fidelity design
  3. Membuat prototype
  4. Melakukan user research

Design Process

Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Hal ini dilakukan untuk mendapatkan solusi yang sesuai dengan kebutuhan user.

sumber: https://www.interaction-design.org/

1 — Empathize

Pada tahap ini, yang kami lakukan adalah dengan mencoba aplikasi Amartha serta mencoba aplikasi investasi emas lain yang tersedia misalnya Tamasia, Pluang, dan Tokopedia Emas.

Aplikasi Amartha

2 — Define

Setelah melakukan proses emphatize, kami dapat merumuskan pain points yang dirasakan oleh user. Pain points adalah hal-hal tidak enak yang dirasakan user pada saat menggunakan aplikasi.

Pain Points

Lalu, daftar pain points kami olah untuk mendapatkan problem statements yang dibagi menjadi tiga bagian utama, yang sesuai dengan challenge kali ini yaitu gamifikasi, pengembangan lini bisnis baru, dan pengembangan investasi pengguna.

Problem Statements

Berdasarkan tiga kategori utama tersebut, kami berdiskusi untuk menghasilkan ide dari tiap kategori.

Hasil Diskusi Ide

Setelah menentukan beberapa ide utama untuk pengembangan fitur, kami menyusun ide-ide tersebut dalam tampilan How-Might-We (HMW), untuk mendapatkan “tujuan” yang ingin dicapai dalam melakukan research ini.

How-Might-We

3 — Ideate

Pada tahap ideate, kami melakukan diskusi untuk mendapatkan ide solusi yang dapat menjawab daftar yang terdapat pada How-Might-We.

Solution Idea

Daftar ide-ide tersebut kami kategorikan pada affinity diagram menjadi tiga kategori utama yaitu gamifikasi, experience investasi, dan edukasi

Affinity Diagram

Selanjutnya, dari daftar ide-ide tersebut, kami prioritaskan fitur-fitur mana yang harus dikerjakan terlebih dahulu

Idea Prioritization Matrix

4 — Prototyping

Dari ide-ide fitur yang telah ditentukan pada proses ideate, kami merumuskan user flow yang akan digunakan oleh user nantinya. Detail user flow dapat dilihat pada link berikut: https://www.figma.com/file/tz5ub35QZuTeNY9gzNCxHO/Kelompok-4---User-Flow-Revision?node-id=2%3A3

User Flow

Berdasarkan fitur-fitur yang sudah ditentukan, kami melakukan proses protoyping sederhana dengan melakukan proses Crazy 8. Lalu, hasil tiap orang kami diskusikan untuk mendapatkan yang terbaik.

Crazy 8

Berdasarkan desain yang telah dipilih pada Crazy 8, kami membuat wireframe untuk tiap fitur yang diperlukan.

Wireframe — 1
Wireframe — 2

Dari wireframe tersebut, kami mendapatkan komponen-komponen apa saja yang dibutuhkan untuk mendesain UI. Dengan pertimbangan tersebut, kami membuat design system dan mendesain ilustrasi yang dibutuhkan sebagai acuan desain UI high fidelity nantinya.

Design System
Icon Asset
Illustration Asset

Selanjutnya, kami membuat desain Hi-Fi (High Fidelity) dari wireframe yang sudah didesain sebelumnya. Namun, karena kami menemukan beberapa fitur tambahan yang menarik dan feasible untuk didesain, maka terdapat fitur yang sebelumnya tidak ada pada wireframe.

Pada akhirnya, fitur-fitur yang kami desain adalah:

  1. Homepage investasi emas
  2. Onboarding investasi emas
  3. Pembelian emas
  4. Penjualan emas
  5. Cetak emas
  6. Pindah portofolio emas
  7. Transfer emas
  8. Gift card
  9. Histori investasi
  10. Rapot investasi
  11. Leaderboard
  12. Misi
  13. Badge
High Fidelity UI — Menu Utama
High Fidelity UI — Investasi Emas
High Fidelity UI — Transaksi
High Fidelity UI — Challenge & Report

Prototype UI yang kami buat dapat dicoba pada tampilan di bawah ini

Prototype UI

5 — Testing

Testing dilakukan dengan melakukan in depth interview melalui google meet dengan kriteria user berikut:

  1. Berusia 18–55 tahun
  2. Pekerjaan sebagai karyawan/karyawati pada instansi apapun
  3. Berdomisili di seluruh wilayah Indonesia
  4. Memiliki kemampuan Bahasa Indonesia sebagai native language
  5. Mempunyai artikulasi yang baik dalam berkomunikasi
  6. Tingkat ekonomi menengah ke atas
  7. Memiliki tingkat pemahaman teknologi yang baik

Pada sesi interview tersebut, dilakukan dua aktivitas utama, yaitu usability testing dan quantitative assesment.

Usability Testing

Tahap ini memiliki beberapa tujuan yaitu:

  1. Mencari tahu kebutuhan pengguna dalam melakukan investasi emas online.
  2. Mencari tahu kebiasaan pengguna dalam melakukan pembelian emas.
  3. Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses transaksi emas.

Sebelumnya, kami sudah menyiapkan dokumen Stimulus User Research (dapat diakses di sini: https://docs.google.com/document/d/1kzWqFkcmzcNWlpPF8Pme0Fgf-hFoXz25QBGxudOSy1s/edit?usp=sharing) yang digunakan sebagai acuan untuk melakukan interview.

Pada tahap ini, kami mendapatkan berbagai masukan dan temuan yang dapat digunakan untuk perbaikan desain aplikasi.

System Usability Scale

Tahap ini dilakukan untuk mendapatkan nilai kuantitatif dari desain yang telah dicoba oleh user. Pada tahap ini, ada sepuluh pertanyaan yang kami tanyakan:

  1. Saya berpikir akan menggunakan sistem ini lagi
  2. Saya merasa sistem ini rumit untuk digunakan
  3. Saya merasa sistem ini mudah digunakan
  4. Saya membutuhkan bantuan dari orang lain atau teknis dalam menggunakan sistem ini
  5. Saya merasa fitur-fitur sistem ini berjalan dengan semestinya
  6. Saya merasa ada banyak hal yang tidak konsisten (tidak serasi pada sistem ini)
  7. Saya merasa orang lain akan memhami cara menggunakan sistem ini
  8. Saya merasa sistem ini membingungkan
  9. Saya merasa tidak ada hambatan dalam menggunakan sistem ini
  10. Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini

Lalu, perhitungan kuantitatif dilakukan dengan menggunakan skala Likert (1–5) dengan ketentuan:

  1. Untuk pertanyaan nomor 1,3,5,7 dan 9, nilai untuk masing-masing item pertanyaan adalah skor yang dipilih responden minus 1.
  2. Untuk pertanyaan nomor 2,4,6,8, dan 10, nilai untuk masing-masing pertanyaan, gunakan rumus 5 -(skor yang dipilih).
  3. Jumlahkan nilai semua item dari setiap responden, lalu kalikan dengan 2.5

Berdasarkan perhitungan tersebut, hasil yang kami dapatkan adalah sebagai berikut:

Hasil SUS

Hasil yang kami dapatkan adalah 64, meskipun hasil yang didapatkan belum cukup baik, kami mendapatkan masukan yang berharga dari user. Hal ini kami jadikan acuan dalam iterasi desain.

Iterasi Desain

Perbaikan desain pertama dilakukan pada menu investasi emas. Hal ini dilakukan berdasarkan masukan user yang merasa kalau flow desain aplikasi kurang intuitif dan tidak konsisten.

Iterasi Desain — 1

Perbaikan desain kedua dilakukan pada fitur jual/beli emas. Pada bagian ini, informasi mengenai keuntungan investasi emas user dan indikator kenaikan/penurunan harga emas ditambahkan.

Iterasi Desain — 2

Perbaikan desain ketiga dilakukan pada bagian homepage. Pada bagian ini, informasi mengenai keuntungan seluruh investasi user ditambahkan dan memperbesar ikon P2P serta investasi emas.

Iterasi Desain — 3

Kesimpulan

Desain aplikasi yang kami buat sudah cukup dapat diterima oleh (calon) user. Meskipun terdapat beberapa kekurangan, tetapi hal tersebut dapat kami perbaiki dengan melakukan iterasi desain yang inputannya didapat dari user pada tahap testing. Masukan dari user sangat dibutuhkan dalam proses “penyempurnaan” sebuah fitur atau aplikasi. Meskipun sebelumnya telah melalui tahap emphatize, perspektif seorang user yang jauh lebih dalam bisa didapatkan pada tahap testing.

Seluruh proses desain UI/UX pada case ini membuatku lebih paham tentang esensi dari user centric design, yaitu menempatkan user jadi titik fokus utama dalam pengembangan aplikasi.

Satu hal yang aku sadari adalah membuat sebuah desain itu mudah. Tapi, membuat desain yang diterima oleh banyak user itu banyak tantangannya. Memang sulit, tapi menyenangkan!

Unlisted

--

--

Zakka Izzatur
Zakka Izzatur

Written by Zakka Izzatur

suka nulis impulsif, buat self reminder aja

No responses yet