UI/UX Case Study: Redesain WebApp Waste4Change
Disclaimer:
Project ini merupakan program UI/UX Bootcamp Skilvul yang bekerjasama dengan DTS KOMINFO Indonesia dan Waste4Change sebagai Challenge Partners. Saya tidak bekerja atau terikat oleh kontrak profesional dengan Waste4Change.
Halo!
Sebagai seorang Data Scientist, mungkin agak sedikit menyimpang kenapa mengikuti kelas desain yang pada pekerjaan nyatanya jarang / bahkan tidak digunakan. Jadi, karena saya suka mempelajari hal baru, kebetulan beberapa tahun terakhir ini saya tertarik dengan yang namanya product design, jadi saya mencoba berkenalan dengan para UI/UX diluar sana untuk belajar dari mereka serta mengikuti berbagai course online dan kebetulan ada program dari DTS Kominfo terkait bootcamp gratis yang bekerja sama dengan skilvul yang diadakan selama 3 bulan. Di program ini saya memilih mengambil case “daur ulang sampah” oleh waste4change karena saya tertarik dengan topik “lingkungan”.
Pada kesempatan kali ini saya ingin memperkenalkan hasil project yang telah dikerjakan oleh kelompok kami (uix-32–4) yaitu saya (Syarifah Rosita Dewi), Widya Septi Nurdieni, Muthia Bella Savira, dan Gita Nabila Putri dengan bimbingan dari kak Andiastika Intan Pratiwi Hasan (Tika) selaku mentor dari kelas 32.
Project Timeline: Sekitar 3 bulan (Maret — Mei) dan dilaksanakan sesi mentoring setiap sabtu.
Tools: Figma (Figjam, Design File), Google Docs, Google Spreadsheet, Zoom, Google Classroom, Discord
♻️Waste4Change
Waste4Change merupakan sebuah perusahaan yang memberikan solusi untuk pengolahan limbah yang bertanggung jawab. Hadir pertama kali pada tahun 2014 yang berawal dari diskusi dua perusahaan di bidang persampahan. Dengan Waste4Change, kita bisa memanfaatkan berbagai layanan seperti consult, campaign, collect dan create.
🦾Challenge
W4C ingin agar semakin berkurangnya user yang bertanya cara menggunakan web apps dan kesulitan dalam pengiriman paket karena adanya trouble pada integrasi API yang terkadang juga dapat disebabkan oleh adanya miskomunikasi dalam flow dan copywriting pada page tersebut.
👩🏻🦱Target Pengguna
Gender : Wanita
Umur : 25–40 tahun
Profesi : Ibu Rumah Tangga
Geografis : Jawa
🤝🏻Peran Tim
Dalam mengerjakan project ini, dari awal kami melakukannya secara bersama-sama dan membagi tugas secara rata dari mulai design proces sampai bagian prototyping.
🎨Design Process
Dalam studi kasus ini, kami menggunakan design thinking sebagai cara dalam merancang sebuah solusi design. Design thinking merupakan proses berulang yang menggunakan pendekatan yang berpusat pada manusia untuk menciptakan inovasi dalam suatu desain produk.
1. Emphatize
Untuk memulai keseluruhan proses, maka kami perlu memahami terlebih dahulu masalah dan target pengguna sesuai kriteria berikut:
a. Ibu rumah tangga dengan range umur 25–40 tahun.
b. Tinggal di Indonesia khususnya pulau Jawa.
c. Peduli terhadap isu lingkungan
d. Hobi membaca dan bercocok tanam serta dapat memilah sampah.
Selain itu pada tahap ini kami juga melakukan AMA dengan challenge partner, analisis website yang saat ini digunakan oleh challenge partner, serta analisis kompetitor dari website/aplikasi serupa yang bertujuan untuk mengetahui keinginan user dan memvalidasi permasalahan yang ada.
2. Define
a. Paint Points
Pada paint points, setelah mengumpulkan informasi pada tahap sebelumnya, kami mendefinisikan berbagai masalah yang ada.
b. How-Might-We
Setelah mengidentifikasi poin-poin masalah, kami mendiskusikan kembali permasalahan-permasalahan tersebut dan mulai melakukan voting. Dari hasil voting terbanyak pada How-Might-We akan dijadikan solusi kedepannya.
Dari how-might-we dapat diambil kesimpulan bahwa:
- Membuat platform yang dapat memotivasi masyarakat dalam daur ulang
- Meningkatkan minat untuk melakukan daur ulang sampah
- Menambahkan fitur “how-to” untuk mengetahui bagaimana aplikasi ini bekerja
- Menambahkan fitur gamification / challenge yang bisa ditukarkan dengan reward poin agar masyarakat semakin semangat untuk mendaur ulang sampah.
3. Ideate
a. Solution Idea
Pada tahap ini, kami melakukan brainstorming sebanyak mungkin terkait solusi yang ada dari hasil ide pertanyaan how-might-we sebelumnya.
b. Affinity Diagram
Setelah mendapatkan ide-ide tersebut, lalu kami mengelompokkan ide-ide tersebut berdasarkan kategori untuk mempermudah dan tetap fokus dalam merancang sebuah solusi.
c. Prioritization Idea
Setelah mengelompokkan ide, kemudian kami memutuskan menulis tingkat prioritas berdasarkan kemungkinan yang bisa kami kerjakan bersama. Selain itu juga membantu kami fokus pada fitur mana yang perlu kami kerjakan terlebih dahulu.
d. Crazy 8’s
Tahap terakhir adalah Crazy 8’s yaitu kegiatan menggambar 8 desain wireframe dalam 8 menit.
4. Prototyping
Pada tahap prototyping ini, kami melakukan pembagian tugas agar pekerjaan menjadi lebih ringan dan cepat, dengan fokus seperti berikut:
- Onboarding, Notifikasi, How-To oleh Widya.
- Profile, Setting, Challenge oleh Syarifah.
- Kirim Sampah, Halaman Transaksi oleh Muthia.
- Artikel, Penukaran Poin oleh Gita.
a. User Flow
Sebelum kami mulai mendesain, kami perlu menetapkan user flow untuk setiap fitur yang sudah terbagi, sebagai berikut:
b. Wireframe
Selanjutnya adalah membuat wireframe yaitu membuat struktur aplikasi secara kasar berdasarkan ide yang ada untuk menggambarkan dan memudahkan desain kita nantinya.
c. UI Style Guide
Selanjutnya, kami membagi tugas dalam membuat UI Style Guide / Design System agar desain yang dibuat nantinya lebih konsisten dengan menggunakan colour desain sesuai dari challenge partner.
d. Design Interface
e. Prototype
Selanjutnya adalah membuat interaksi dalam memudahkan proses testing oleh user.
5. Testing
Tahap terakhir dari UX Study Case ini adalah melakukan testing kepada 2 responden yang memenuhi kriteria pengguna guna mengetahui apakah aplikasi yang kita buat sudah memenuhi kebutuhan user atau belum. Metode yang digunakan adalah In-Depth Interview dan Usability Testing dengan melakukan 4 Task sebagai berikut:
- Task 1 : Pendaftaran
- Task 2 : Penyetoran Sampah
- Task 3 : Halaman Transaksi
- Task 4 : Penukaran Poin
Dengan alur pembagian seperti berikut:
Berikut beberapa feedback dari responden yaitu:
- Pada halaman penyetoran sampah perlu ditambahkan terkait biaya ongkir sebelum proses pengiriman sampah dan dijelaskan nominal biaya ongkir dari pengiriman sampah tersebut.
- Pada popup transaksi berhasil, dapat ditambahkan kalimat “terimakasih” atau sejenisnya.
- Aplikasi simple dan mudah dipahami, ada fitur how to yang memudahkan para ibu rumah tangga dalam menggunakan aplikasinya.
- Fitur penukaran yang menarik tapi mungkin perlu ditambahkan voucher belanja dll.
Sebelum wawancara berakhir, kami meminta responden untuk mengisi formulir SUS untuk mendapatkan validasi secara kuantitatif. Setelah menghitung skor SUS, kami mendapatkan skor total 76,25. Skor ini menunjukkan bahwa solusi desain yang kami usulkan menjanjikan.
👩🏻💻Kesimpulan
Dari hasil in-depth interview dan usability testing pada prototype Waste4Change yang kami redesain, kami mendapat skala penilaian B (Good) dimana responden sudah merasa puas terhadap tampilan dan aplikasi ini. Dengan penambahan beberapa fitur seperti how to, poin rewards, dan tracking sampah yang menjawab challenge pada tugas ini yaitu “mengurangi miskomunikasi pada saat user menggunakan aplikasi Waste4Change” karena sudah adanya cara untuk menggunakan aplikasi tersebut. Serta, untuk fitur poin rewards dapat memotivasi ibu rumah tangga dalam memilah dan mengirim sampah secara rutin agar mengurangi sampah-sampah yang belum tersusun rapi.
💫Apa selanjutnya — ?
Untuk selanjutnya, kami harus fokus memperbaiki kekurangan dari iterasi atau feedback sebelumnya seperti penambahan keterangan biaya ongkir dan desain popup terimakasih setelah melakukan transaksi. Karena idealnya testing dilakukan oleh minimal 5 orang (responden), maka kami perlu melakukan testing kembali kepada 3 orang selanjutnya.
Terimakasih sudah membaca artikel ini! 😊Jangan lupa untuk claps!
