UX CASE STUDY : REDESIGNING CROWDE WEBSITE

Wafi Ariqo
9 min readDec 11, 2021

Hello Everyone! Kali ini saya akan kembali menceritakan bagaimana design proses pengerjaan project ui design yang saya buat bersama tim sebagai final project dari kegiatan Skilvul Virtual Internship yaitu meredesign tampilan ui pada website Crowde. Pada proses pengerjaan final project ui design ini tentu tidak terlepas pula dari arahan dan bimbingan oleh mentor dalam kegiatan Skilvul Virtual Internship ini.

(Disclaimer) Final project ini merupakan bagian dari program pelatihan UI/UX Design yang diselenggarakan oleh Kampus Merdeka bersama Skilvul dalam kegiatan Magang Kampus Merdeka. Crowde merupakan Challenge Partner yang tergabung dalam kegiatan Skilvul Virtual Internship ini dan memiliki peran dalam memberikan tantangan secara real case untuk membantu peserta SVI mengembangkan skill dan keterampilan UI/UX Design. Saya tidak bekerja untuk atau dikontrak secara profesional oleh Crowde.

Overview

Setelah melaksanakan pelatihan UI/UX Design yang diselenggarakan oleh Skilvul dalam kegiatan pemagangan bersama Kampus Merdeka selama 2 bulan, para peserta Skilvul Virtual Internship diharuskan untuk mengerjakan UX Case Study dari final project yang dipilih. Di sini saya memilih challenge dari challenge partner Crowde untuk memenuhi kewajiban dalam mengerjakan final project ini.

Rincian Case Study Challenge Partner :

Task : Desain ulang tampilan ui website Crowde dengan tampilan ui yang lebih sederhana serta menyediakan informasi yang jelas untuk semua target user Crowde.

Durasi Pengerjaan : Oktober — Desember 2021

Tools : Figma, Adobe Illustrator

Latar Belakang

Crowde hadir sebagai platform P2P Lending untuk mendukung petani melalui Gerakan Rakyat Petani (GARAP) dengan memberikan pemodalan pertanian dan inovasi teknologi pada sektor budidaya cabai, padi, dan jagung. Tujuannya adalah memfokuskan komoditas utama yang memiliki tingkat demand paling tinggi.

Selain itu, Crowde juga berperan sebagai penghubung antara petani dengan investor serta platform yang mengintegrasikan seluruh ekosistem pertanian dari pemasok hingga pelanggan melalui teknologi. CROWDE percaya bahwa di sini semua bisa memberikan dampak kepada kesejahteraan bersama, terutama para petani di seluruh Indonesia.

Untuk mendukung apa yang menjadi tujuan dan impian dari Crowde itu sendiri, terdapat beberapa hal yang memerlukan pengembangkan di dalam website Crowde dan menjadi fokus utama dalam pengerjaan final project kali ini, yaitu :

Memastikan produk yang dibuat mudah untuk digunakan dan dijangkau oleh user, dengan mempertimbangkan :

  • Keterbatasan pengguna yang kecakapan dalam penggunaannya teknologinya masih rendah,
  • Keterbatasan dalam mengakses informasi dan akses ke internet itu sendiri (Paket Data Internet).

Objective

  1. Membuat alur user flow yang mudah dipahami oleh user,
  2. Membuat tampilan UI website menjadi lebih ringan,
  3. Merapikan arsitektur informasi di dalam website sehingga memudahkan user dalam mengakses informasi,
  4. Mengubah penggunaan gaya bahasa pada informasi yang tersedia agar mudah dimengerti oleh user.

Peran Dalam Tim

Pada pengerjaan project ini, saya dibantu oleh 2 orang anggota tim saya yang diantaranya yaitu ada Femi Yuniar dan Safrido Ahmad Perdana. Di sini saya memiliki tanggung jawab sebagai Lead UI/UX Design, dibantu dengan Femi Yuniar yang memiliki tanggung jawab sebagai UX Writer, dan Safrido Ahmad Pernada memegang tanggung jawab dalam hal Research & Development. UI Design yang telah dibuat, mengikuti alur user flow yang sebelumnya sudah ditentukan bersama.

Design Process

Dalam mengerjakan project challenge partner ini, terdapat design proses dari awal hingga akhir yang kami lakukan, di mana pada design proses ini kami menggunakan metode design thingking. Design thinking sendiri merupakan proses dalam memecahkan suatu permasalahan dengan menggunakan pendekatan solusi yang praktis dan kreatif, di mana pendekatan solusi ini menekankan pada sisi user sebagai pengguna dari produk yang ditawarkan. Terdapat 5 tahap pada proses design thinking ini diantaranya Empathize, Define, Ideate, Prototype, dan Testing.

Design Process

1. Empathize

Tahap pertama design process yang kami lakukan dengan metode design thinking ini adalah empathize. Di mana, pada tahapan ini kami mencoba untuk memahami user dengan berfokus pada apa yang mereka pikirkan, apa yang mereka inginkan, dan apa yang menjadi kebutuhan mereka dalam menggunakan suatu produk, di mana dalam hal ini yaitu website Crowde.

Secondary Research

Tahap empathize ini kami lakukan dengan menggunakan metode secondary research untuk megetahui apa yang menjadi kebutuhan user. Di mana pada metode secondary research yang kami kerjakan terdapat beberapa hal yang menjadi acuan kami dalam mendefinisikan apa yang menjadi kebutuhan user yaitu melalui competitor analysist, data analitik pemerintah, research base on related apps, dan resume sama session dengan challenge partner.

2. Define

Define stage dilakukan setelah mengumpulkan informasi-informasi hasil dari secondary research yang sebelumnya telah dilakukan di tahap empathize. Setelah informasi-informasi tersebut dikumpulkan, dilakukanlah proses observasi dan analisis untuk mengetahui apa yang dibutuhkan oleh user.

Setelah mengobservasi dan menganalisis seluruh informasi, di dapatkanlah beberapa paint points yang kami temukan yang diantaranya :

Paint Points

Dari paint points yang ada, kemudian kami menentukan How-Might We untuk mengatasi paint points, agar dapat menentukan ide solusi pada tahap berikutnya.

How-Might We

3. Ideate

Setelah mendeskripsikan paint points dan menentukan How-Might We, selanjutnya masuk pada tahap ideate. Setelah memahami dan menganalisis informasi serta paint points, selanjutnya kami mendefinisikan hasil tersebut menjadi sebuah Solution Idea dan dikelompokkan pada Affinity Diagram.

Solution Idea
Affinity Diagram

Kemudian, kami membuat Prioritization Idea untuk menentukan fokus dalam pengerjaan solusi yang ingin kami capai. Terdapat empat stage pada penentuan Prioritization Idea ini.

Prioritization Idea

Dengan telah ditentukannya paint points, kemudian How-Might We, lalu sudah mendefinisikan dan mengelompokkan Solution Idea, dan membuat Prioritization Idea, setiap anggota pada kelompok kami kemudian membuat sketsa UI Design yang disebut juga dengan istilah Crazy 8’s yaitu membuat 8 ide sketsa yang berbeda oleh setiap anggota dalam waktu 8 menit, berdasarkan pada Prioritization Idea yang telah dibuat.

Crazy 8's

Setelah semua sketsa Crazy 8’s dibuat, langkah yang dilakukan berikutnya adalah membuat User Flow. Di mana pada tahap ini, kami membuat alur proses untuk user ketika ingin mengajukan pendanaan atau peminjaman modal untuk usaha pertaniannya.

User Flow yang kami buat disesuaikan dengan targert user dari Crowde, sehingga flow yang dibuat cukup sederhana.

4. Prototyping

Setelah melakukan proses Ideate sampai pada proses pembuatan User Flow, tahap yang dilakukan selanjutnya adalah tahap Prototyping. Proses yang dikerjakan pertama kali pada tahap Prototyping ini adalah membuat Wireframe. Pembuatan Wireframe yang kami kerjakan ini dibuat dengan menggunakan aplikasi Figma.

Wireframe

Lalu, proses yang dilakukan selanjutnya adalah membuat Design System yang akan digunakan sebagai UI Styleguide kami untuk membuat UI Design High Fidelity dari proses redesign website Crowde. Beberapa Design System milik perusahaan sudah diberikan oleh Crowde agar desain dapat disesuaikan dengan profil dari Crowde itu sendiri.

Design Systems — UI Styleguide

Setelah membuat keseluruhan Design System, mulailah kami untuk membuat UI Design berbentuk High Fidelity. Namun sebelumnya, UI Design yang dibuat oleh kami berbeda dengan Wireframe yang sudah dibuat sebelumnya karena ada beberapa penyesuaian dan masukan dari mentor kami, agar desain yang dihasilkan sesuai dengan target user yang dituju.

UI Design

Dalam meredesign website Crowde ini, kami berfokus pada dua page website yaitu Landing Page dan Halaman Form Pengajuan Permodalan.

Berikut ini adalah tampilan dari Landing Page dan Halaman Form Pengajuan Permodalan sebelum di desain ulang.

Kemudian, ini merupakan tampilan Landing Page dan Halaman Form Pengajuan Permodalan setelah di desain ulang.

Fokus kami dalam meredesign halaman Landing Page adalah

  1. Membuat UI Design yang lebih konsisten dengan menggunakan gambar saja tidak dicampur dengan vector dan tata letak penempatan informasi yang disajikan,
  2. Penggunaan pada gaya bahasa yang mudah dipahami pada informasi yang disediakan,
  3. Kemudian yang terakhir adalah informasi yang disediakan. Di mana, kami harus menyediakan informasi yang dapat memberikan informasi yang jelas mengenai Crowde dan program permodalan pada Crowde sehingga mampu menimbulkan rasa Trust atau kepercayaan pada user terhadap Crowde dan mampu membuat user dapat memahami informasi yang disediakan dengan baik.

Design UI yang telah dibuat kemudian di rancang alur penggunaannya pada proses Prototyping UI Design. Untuk dapat mencoba pengalaman menggunakan protoype hasil redesign website Crowde, klik tombol di sini.

5. Testing

Tahap terakhir yang dilakukan pada proses Design Thinking dalam mengerjakan Final Project Skilvul Virtual Internship ini adalah tahap testing. Proses yang dilakukan pada tahap testing ini adalah mendapatkan feedback dari user dengan mengarahkannya untuk mencoba prototype design website Crowde yang telah dibuat.

Pada tahap testing ini kami menggunakan metode riset In-Depth Interview agar mendapatkan feedback yang mendalam dan detail dari user serta membaginya ke dalam dua sesi yaitu sesi interview dan sesi Usability Testing.

Dalam melakukan sesi interview ini, kami sebelumnya telah membuat Stimulus Research yang digunakan sebagai landasan kami dalam menjalankan tahap testing ini.

Research Objective

  1. Mencari tahu informasi apa saja yang dibutuhkan user terkait peminjaman dana pertanian,
  2. Mencari tahu apakah user dapat mengerti dan memahami informasi yang disediakan di website CROWDE,
  3. Mencari tahu apakah proses pengajuan pendanaan mudah atau sulit bagi user,
  4. Mengetahui Usability Level dan tingkat keberhasilan dari SEQ website CROWDE.

Kriteria Responden

  1. Mahasiswa / Masyarakat Umum
  2. Berusia 18–50 tahun
  3. Warga Negara Indonesia
  4. Memiliki latar belakang di bidang pertanian atau sejenisnya
  5. Pernah/tahu mengenai proses pendanaan usaha
  6. Mampu menggunakan perangkat digital (PC/Laptop)

Sesi interview dan testing ini, idealnya dilakukan dengan minimal 5 responden yang hadir. Akan tetapi, karena keterbatasan waktu dan ruang pencarian responden kami, sehingga kami hanya melakukan interview dan testing hanya kepada 1 responden saja.

Setelah mendapatkan responden pada tahap testing ini, kemudian kami melakukan sesi interview dengan menggunakan Google Meet serta melakukan Usability Testing prototype menggunakan Figma dan mengarahkan user untuk memperlihatkannya ketika sedang melakukan testing dengan mengaktifkan fitur Share Screen pada Google Meet.

Ketika melakukan sesi Usability Testing, user diminta untuk melakukan tiga task yang diberikan, diantaranya :

  1. Task 1 : Meminta user untuk mengakses Landing Page dan Membaca informasi yang terdapat di dalam nya,
  2. Task 2 : Meminta User untuk melakukan Pengajuan Pendanaan dengan mengarahkannya untuk mengklik tombol Bergabung Sekarang,
  3. Task 3 : Meminta User untuk Explore setiap page yang ada.

Hasil Testing

Setelah melakukan Usability Testing, kemudian kami mengarahkan user untuk memberikan penilaian melalui Single Ease Question (SEQ) dari rentang 1 sampai 7. Dari Single Ease Question yang diberikan, user memberikan penilaian dengan angka 5 karena masih ada beberapa hal yang menurutnya masih bisa untuk ditingkatkan lagi.

Dari penialain oleh responden ini, kami menerima feedback yang sangat berguna untuk proses iterasi kami, diantaranya adalah :

  1. Tampilan informasi sudah cukup jelas,
  2. Tata letak (layout) designn perlu dikembangkan lagi agar lebih konsisten dan rapih,
  3. Memberikan batasan atau jarak antar section informasi,
  4. Ditambahkan lagi fitur “Question Box”.

Kesimpulan

Sebagai seseorang yang memiliki peran dan tanggung jawab dalam tim menjadi Lead UI Design, saya mempelajari banyak hal mulai dari kepemimpinan, kemudian menentukan pembagian tugas dengan anggota tim lain agar design proses yang dilakukan dapat berjalan dengan baik, serta membuat keputusan-keputusan yang akan dilakukan oleh saya dan anggota tim kelompok lain kedepannya dalam proses pengerjaan final project ini. Selain itu, disini kami dilatih pula untuk dapat lebih menimbulkan rasa empati kami terhadap user.

Bagi saya pribadi, dengan melewati seluruh rangkaian kegiatan ini masih memiliki banyak kekurangan baik dari segi soft skill maupun hard skill saya dalam bidang UI/UX ini. Saya sangat terbuka bagi siapa saja yang ingin memberi feedback dan masukannya kepada saya, agar dapat menjadi bahan evaluasi bagi saya ke depannya.

Thank you for reading everyone!

Follow me on Social Media Instagram & Linkedin!

--

--