UI/UX Case Study: Re-Design CROWDE Platform

Monifaar
7 min readNov 28, 2021

--

Desclaimer: “This project is part of the UI/UX training program implemented by Skilvul (must be linked to Skilvul.com), for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Crowde is the Challenge Partner. I am not working for nor contracted professionally by Crowde.”

Overview

Indonesia, sebagai negara agraria, menggantungkan pertumbuhan ekonominya pada industri pertanian, namun ironisnya 78% petani rumah tangga yang aktif di Indonesia tidak memenuhi persyaratan permodalan bank.

Belum lagi tantangan sektor pertanian berupa penetrasi interkoneksi dengan teknologi untuk menjadikan ekosistem yang berkelanjutan, berkurangnya regenerasi petani aktif yang 65% sekarang berusia di atas 60 tahun, dan naiknya tingkat pengangguran di desa sehingga menimbulkan kesenjangan 2x lipat daripada di kota. Dengan keadaan ini, impian Indonesia menjadi lumbung pangan dunia pada tahun 2045 sangat sulit untuk direalisasikan tanpa perubahan.

Sumber: Liputan6.com

Untuk menjawab tantangan tersebut, kita butuh menciptakan kesempatan agar petani kecil dan menengah bisa mengembangkan bisnis serta menerapkan idenya dibarengi dengan usaha memupuk kepercayaan masyarakat terhadap sektor pertanian.

Bersama CROWDE, kita bisa mewujudkan kenaikan taraf hidup dan pertumbuhan ekonomi di Indonesia secara inklusif. Mulai tanamkan kebaikan, sekarang.

Target Pengguna Aplikasi

  • Gender: Pria dan Wanita
  • Umur: 30–55 tahun
  • Profesi: Pengusaha, Melanjutkan usaha orang tua
  • Geografis: Pedesaan terutama Subang, Bogor dan Sukabumi
  • Pernah dan bisa membuka/mengoperasikan website

Research Object

Sumber: Flaticon.com
  1. Mencari tahu tingkat kemudahan dari adanya dropdown navigasi bar pada pilihan pemodal
  2. Mencari tahu tingkat kemudahan memilih bahasa yang digunakan
  3. Mencari tahu tingkat kebutuhan dari logo OJK dan AFPI
  4. Mencari tahu tingkat kemudahan alur pengajuan peminjaman
  5. Mencari tahu tingkat kebutuhan pernyataan “Data yang telah diisikan pada formulir merupakan data yang benar. Data tersebut hanya digunakan untuk kepentingan pengajuan peminjaman dan tidak akan diseberluaskan”
  6. Mencari tahu tingkat kegunaan dari banner iklan
  7. Mencari tahu tingkat kebutuhan cara mengajukan peminjaman
  8. Mencari tahu tingkat kebutuhan cerita dari orang yang pernah melakukan peminjaman
  9. Mencari tahu tingkat kegunaan transparansi dari pendanaan yang sedang dilaksanakan
  10. Mencari tahu tingkat kebutuhan dari kalender kegiatan
  11. Mencari tahu tingkat kepuasan UI halaman Home
  12. Mencari tahu tingkat kemudahan button bergabung dan button login yang bersebelahan pada halaman pemodal
  13. Mencari tahu tingkat kegunaan dari pemaparan keuntungan sebagai pemodal
  14. Mencari tahu tingkat kebutuhan dari penjelasan jenis pemodalan pada Crowde
  15. Mencari tahu tingkat kebutuhan cara menjadi pemodal
  16. Mencari tahu tingkat kepuasan UI halaman Pemodal
  17. Mencari tahu tingkat kegunaan dari pemaparan keuntungan sebagai peminjam
  18. Mencari tahu tingkat kebutuhan syarat dan ketentuan menjadi peminjam
  19. Mencari tahu tingkat kepuasaan UI halaman Peminjam
  20. Mencari tahu tingkat kegunaan penjelasan mengenai Crowde
  21. Mencari tahu tingkat kebutuhan adanya riwayat tahunan Crowde
  22. Mencari tahu tingkat pemahaman mengenai Crowde yang ada pada halaman Tentang Kami
  23. Mencari tahu tingkat kepuasaan UI halaman Tentang Kami
  24. Mencari tahu tingkat kemudahan dalam menghubungi pihak Crowde
  25. Mencari tahu tingkat kepuasaan UI halaman Kontak Kami
  26. Mencari tahu tingkat kemudahan scroll bar
  27. Mencari tahu tingkat kegunaan button help (?)

Teamwork

Proses pengerjaan UX design mulai dari design thingking sampai tahap interview user, terdapat campur tangan teman-teman tim yang terdiri dari tiga orang yaitu Matthew Richard Arianto Arianto, Ismah Puteri Zulfi, dan Monifa Arini (saya sendiri) bertanggung jawab dalam hal berikut:

  • Tahap Define: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap Ideate: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap Crazy 8’s: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap User Flow: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap Wireframe: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap UI Styleguide: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap UI Design: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)
  • Tahap Interview dan Record Data: Matthew Richard Arianto, Ismah Puteri Zulfi, Monifa Arini (Saya Sendiri)

Design Process

Sumber: Kompasiana.com

1 — Empathize

Sebelum project UI/UX dibuat, saya bersama tim mendiskusikan terlebih dahulu apa yang menjadi topik permasalahan untuk dibahas lebih lanjut. Kemudian, masing-masing dari kami mencari sumber-sumber desain website peminjaman modal dari perusahan-perusahan yang sudah lebih dahulu terjun dalam hal tersebut. Disamping kami research website yang bergerak di bidang bisnis, beberapa masalah-masalah dalam peminjaman modal ke petani juga masih banyak yang belum terselesaikan. Maka dari itu, kami mencoba mendesain ulang dari website CRWODE untuk membantu mengurangi sekaligus menyelesaikan permasalahan yang terjadi.

Sumber: Glenn Carstens-Peters — Unsplash.com

Adapun referensi sebagai acuan dalam mendesain ulang website CROWDE yaitu Danamas, Pinjam Modal, Asa Kita, dan Modal Rakyat. Website-website tersebut sangat memberikan inspirasi dan memudahkan kami untuk melakukan desain ulang.

2 — Define

Define adalah tahap lanjutan dari proses berpikir design thinking yaitu menjelaskan masalah tersebut. Di fase ini kita mulai mengetahui apa yang menjadi hambatan bagi user dari hasil pengamatan yang kita dapatkan dari tahap empathize tadi. Tahpan di dalam define terbagi menjadi tiga, berikut gambar di bawah ini:

  1. Pain Points

Proses ini adalah langkah awal untuk mencatat atau listing beberapa masalah terkait konten ataupun fitur yang menjadi permasalahan sebagian besar pengguna.

  • tampilan awal penjelasan di home kurang menjelaskan apa maksud website
  • Pendaftaran menggunakan gform kurang efektif
  • kalender kegiatan yang ditampilkan kurang menarik perhatian

2. Affinity Diagram

Proses ini dilakukan setelah pain point untuk mempermudah designer dengan mengelompokan pain point menjadi beberapa sub problem.

  • Help and Support
  • UI Design
  • User Accessibility
  • Login and Registration
  • Peminjaman

3. How Might We

Proses ini adalah ide pertanyaan untuk menemukan solusi dari permasalahan.

  • Bagaimana agar tampilan beranda/home lebih terhighlight pada bagian yang diinginkan?
  • Bagaimana agar Crowde meningkatkan kepercayaan user?
  • Bagaimana cara membuat user tertarik untuk melakukan peminjaman?

3 — Ideate

Tahap selanjutnya adalah Ideate. Setelah memahami apa masalah pengguna terhadap pembelajaran dan menganalisis informasi-informasi sebelumnya, berikutnya yaitu menghasilkan ide-ide solutif yang dapat digunakan untuk mengatasi berbagai masalah yang sudah didefinisikan sebelumnya. Tahapan ini juga perlu dilakukan untuk menghasilkan sebanyak mungkin sudut pandang serta ide-ide baru.

Seperti yang pernah dipelajari sebelumnya, ada beberapa macam teknik menemukan ide yang dapat digunakan seperti brainstorm, brain white, scamper, mind mapping hingga worst possible idea. Setelah memilih salah satu teknik dari pemikiran di atas biasanya di akhir fase, saya dan tim memilih beberapa ide untuk diterapkan pada proses design thingking yang sedang dibuat.

Solusi-solusi di atas adalah jawaban dari proses How Might We, setelah itu dipilih berdasarkan urgensi kebutuhan user terhadap aplikasi. Voting dilakukan seperti gambar di bawah ini:

  • User Flow

Agar mempermudah pembuatan desain aplikasi selanjutnya yaitu pembuatan flow fitur-fitur yang nantinya akan menentukan desain website seperti apa yang diinginkan dan tidak membingungkan desainer dan user saat melakukan interview ke user.

  • Wireframing & Crazy 8's

Merancang desain kasar atau sketch UI nya sebelum ke tahap wireframe.

Setelah itu disempurnakan dalam bentuk wireframe yang di desain melalui figma.

  • UI Styleguide
  • UI Design

4 — Prototyping

5 — Testing

Solusi desain yang ditawarkan kepada user, sebaiknya diuji dan dicoba langsung oleh user, agar user merasakan simulasi website re-design CROWDE yang lebih real. Kami mencoba interview salah satu user untuk menggunakan prototype di figma. Bagian testing adalah hal yang sangat krusial untuk menunjang kemajuan produk yang nantinya akan dipasarkan ke masyarakat.

  • User Persona
  • Interview User

Conclusion

Dengan adanya re-desain website CROWDE bagian peminjam, pengguna dapat lebih mudah memahami alur peminjaman yang benar dan tepat, serta menemukan informasi yang lebih ter-highlight.

Dengan adanya re-desain website CROWDE bagian pemodal, pengguna dapat lebih cepat dalam melakukan proses bergabung bersama CROWDE khususnya pengguna yang tertarik dengan lowongan kerja di CROWDE.

Dari hasil interview perwakilan responden didapatkan bahwa pengguna rata-rata memiliki kepuasan terhadap kebutuhan dan kegunaan website baik dari segi tampilan, tata letak, maupun bahasa diberi penilaian 4 dari skala 1–5

Before & After (Iteration Design)

Iteration design dilakukan ketika telah melakukan wawancara bersama responden, kemudian tim design melakukan evaluasi melalui google meet dan figma untuk memperbaiki desain sesuai kebutuhan responden kami.

Referensi Design

Terima kasih bagi yang sudah membaca tulisan ini. Semoga bermanfaat dan jangan lupa untuk beri feedback di kolom komentar yah :)

--

--