Waste4Change — UI/UX Design Challenge
Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika dengan Skilvul dan Waste4Change sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Waste4Change.
UI/UX Design adalah kegaitan pendidikan dan pelatihan yang diadakan oleh Kementerian Komunikasi dan Informatika (Kominfo) yaitu Digital Talent Scholarship (DTS) Professional Academy UI/UX Design melalui Skilvul. dalam pelatihannya terdapat beberapa project challenge yang ditawarkan yaitu Bank Jago, PasarPolis, Kitabisa, Waste4Change, Crowde, Skilvul, Amartha, Krealogi, dan Campaign. Diantara challenge yang ada, saya memilih Waste4Change.
Kini kepedulian masyarakat terhadap lingkungan semakin meningkat khususnya di kalangan ibu rumah tangga yang mulai mengelola sampah anorganik di rumahnya dengan cara mengirimkannya secara sukarela agar sampah yang sudah dipilah dapat diolah secara bertanggung jawab. Waste4Change merupakan sebuah perusahaan yang memberikan solusi melalui program SYW (Send Your Waste) untuk pengolahan limbah yang bertanggung jawab. Hadir pertama kali pada tahun 2014 yang berawal dari diskusi dua perusahaan di bidang persampahan. Dengan Waste4Change, kamu bisa memanfaatkan berbagai layanan seperti consult, campaign, collect dan create.
Project Overview
Masalah yang dihadapi oleh Waste4Change adalah pengguna yang sering bertanya cara menggunakan website Waste4Change dan kesulitan dalam pengiriman paket. Objektif dalam challenge Waste4Change antara lain:
- Mempermudah pengguna dalam menggunakan website mobile Waste4Change (W4C), layanan Recycle With Us (RWU), dan program Send Your Waste (SYW) baik reguler maupun sponsor.
- Memperbaiki fitur recycle landing page, pengiriman, poin rewards, dan transisi payment/API partner logistik.
Batasan dalam mengerjakan challenge ini:
- Target pengguna program SYW adalah ibu rumah tangga (IRT) yang berumur 25–40 tahun dan berdomisili di Pulau Jawa. Selain itu, pengguna merupakan IRT yang peduli terhadap isu lingkungan, memiliki kebiasaan memilah sampah, serta hobi membaca dan bercocok tanam.
- Aplikasi desain yang digunakan adalah Figma.
- Menggunakan sumber dengan lisensi gratis untuk jenis teks, ikon vektor, dan aset lainnya.
- Waktu pengerjaan desain adalah 8 minggu.
Pengerjaan project ini dilakukan secara berkelompok dan masing-masing anggota memberikan kontribusinya pada setiap tahapannya.
Metode Pengerjaan UI/UX Design
Pengerjaan project ini menggunakan “5 Phases of The Design Thinking Process”
setiap tahapannya dijelaskan sebagai berikut :
= Empathise =
Pada tahap Empathize, kami mendalami permasalahan yang mungkin dihadapi oleh pengguna dengan mengeksplorasi website W4C dan program SYW.
= Define =
Pada program SYW ini terdapat beberapa masalah yang ditemukan yaitu:
- Pengguna seringkali masih bertanya cara untuk menggunakan web apps karena kurang memahami.
- Kesulitan dalam pengiriman paket dan menentukan kategori ukuran serta berat paket sehingga adanya miskomunikasi biaya pengiriman dengan pihak logistik
- Flow dan copywriting pada beberapa halaman yang membingungkan bagi pengguna.
Pain points yang kami dapatkan dari penggunaan web waste4change dituangkan kedalam sticky note sebagai berikut :
Dari paintpoints di atas dibuatkan how-might we untuk menunjukkan bagaimana solusi yang dapat kita lakukan dari pain points di atas:
= Ideate =
Selanjutnya pada tahap Ideate, kami melakukan diskusi mengenai detail solusi yang akan dikerjakan, mengelompokkan solusi tersebut, membuat prioritas pengerjaan, serta membuat gambaran awal desain. How Might We yang kami pilih adalah mempermudah alur pengiriman dan mempermudah pengguna mengelola pesanan. Berikut adalah hasil diskusi kami.
Dari Solution Idea di atas kami menyusun fitur-fitur yang dimungkinan untuk memenuhi solusi yang ada. Fitur yang akan dikembangkan yaitu Fitur Dimensi Barang, Fitur Reward, Fitur Penjelasan, Fitur Proses Paket, dan Fitur Register/Login. Tahapan ini dibuatkan dalam Affinity Diagram sebagai berikut
Nantinya fitur-fitur ini perlu diprioritaskan untuk dibuatkan UI/UX Design-nya berdasarkan valuenya dan effort dalam pembuatannya.
Prioritas pengerjaan dibagi menjadi 4 yaitu Do It Now (1), Do Next (2), Do Last (3), dan Later (4).
- Prioritas pertama kami adalah melakukan perbaikan halaman utama W4C adalah : fitur dimensi barang untuk mempermudah estimasi ukuran barang dan hitung ongkos kirim paket; fitur registrasi/login
- Prioritas ini fitur yang akan dibuatkan adalah fitur penjelasan tentang prosedur pengiriman barang, testimoni pelanggan, lokasi, dan informasi pengelolaan sampahnya; Fitur proses paket yaitu lokasi kurir, dan status paket
- Pada prioritas ini untuk membuatkan fitur Reward untuk meningkatkan minat user
- Tidak ada fitur yang kami masukkan pada prioritas later.
Selanjutnya adalah membuat gambaran awal desain dari fitur- fitur di atas menggunakan Crazy 8’s. Crazy 8’s ini adalah sketsa ide dan solusi menggunakan kertas yang dilipat menjadu 8 bagian dan membuat sketsa dalam waktu 8 menit. Tujuannya untuk menuangkan ide sketsa yang mungkin akan digunakan untuk UI/UX Design yang akan dibuatkan. Berikut Crazy 8’s yang kami buat dan sudah di pin oleh anggota kelompok untuk menunjukkan sketsa ini kemungkinan besar akan digunakan.
= Prototype =
Tahap prototype diawali dengan membuat User Flow, kemudian dilanjutkan dengan membuat Wireframe, UI Styleguide, UI Design, sampai dengan membuat prototipe desain yang akan digunakan untuk tahap pengujian.
Kami menggunakan task flow untuk menggambarkan aliran tugas-tugas yang dilakukan pengguna karena lebih mudah dan waktu pengerjaannya lebih cepat. Berikut taskflow yang kami buatkan.
Setelah user flow disepakati, langkah selanjutnya adalah membuat wireframe. Pada wireframe ini sketsanya lebih tertata, hampir meyerupai design yang diinginkan. Wireframe ini tidak disampaikan ke user, akan tetapi menjadi pembahasan diinternal UI/UX Designer. Berikut wireframe yang telah buatkan.
Tahapan selanjutnya dari wireframe akan dibuatkan design yang lebih menyerupai asli yang akan digunakan oleh user, akan tetapi sebelum ke tahapan tersebut, kami terlebih dahulu membuat UI Styleguide. UI Styleguide digunakan untuk mempermudah sekaligus menyeragamkan tampilan, baik dari sisi warna, text, tombol, menu, atau komponen lainnya. Berikut UI Styleguide yang telah kami buatkan.
Wareframe yang telah kami buat sebelum nya ‘dipercantik’ dengan mengunakan UI Styleguide, sehingga tampilannya lebih menunjukkan bentuk yang lebih nyata ditambah dengan adanya respon dari aplikasi yang disebut sebagai Prototype. Berikut adalah cuplikan bagian prototype yang saya buat.
= Test =
Tahapan ini untuk menguji hasil UI/UX Design yang telah dibuatkan dalam bentuk prototype. Kegiatan pengujian ini dilakukan dengan metode wawancara dengan responden yang mempunyai kriteria mendekati pengguna yang dideskripsikan pada bagian Project Overview. Sebelum melakukan wawancara kami menyusun skema wawancara yang nantinya akan memuat profile user yang kita wawancarai, daftar pertanyaan yang ingin kita ajukan, serta skenario wawancaranya disusun dalam bentuk Dokumen Stimulus User Research. Pada dokumen ini juga kami akan merekam respon dari user dari UI/UX Design yang telah dibuat.
…Sesi Profiling
Responden1 sangat tertarik dengan kegiatan daur ulang sampah untuk hal baru yang punya manfaat. Responden mengetahui tentang Waste4Change pertamakali melalui instagram dan sudah pernah mengakses website Waste4Change dan program didalamnya. Hanya saja sampai sesi wawancara berlangsung responden belum menggunakan jasa Waste4Change.
Responden2 mengetahui Waste4Change pertama kali melalui instagram, akan tetapi belum pernah menggunakan programnya. Sangat antusias dengan program daur ulang dan berharap program seperti ini dapat diperluas untuk meningkatkan awareness masyarakat.
…Sesi Demo Prototype
Pada sesi ini, penggunaan prototype oleh responden kami bagi menjadi 3 area yaitu Task Progam dan Registrasi, Task Pengiriman Paket dan Transaksi, dan Task Detail Pengiriman dan Redeem Point. Dari masing-masing task ini responden memberikan review tentang kemudahan, informasi, dan kejelasan proses pada tiap tampilannya. Pada sesi ini juga responden memberikan penilai secara keseluruhan dangan skala 1–7. Nilai paling kecil yang kami terima dari responden adalah 6 dan sudah sesuai dengan ekspektasi yang kami inginkan.
…Kesimpulan
Design thinking yang telah dibuat, berdasar penilaian yang diberikan, secara umum sudah memenuhi ekspektasi kami dengan mendapatkan nilai 6 , akan tetapi terbuka untuk improvement sesuai dengan rekomendasi yang diberikan oleh responden.
…Rekomendasi
Meskipun telah mendapatkan nilai 6 dari 7, namun masih terdapat beberapa masukan dari responden yaitu:
- penyesuaian informasi pada tata cara program sponsored masih terdapat ambigu proses yang harus dilakukan respoden
- Alur penentuan drop point sebaiknya sebelum menentukan tampilan menentukan detail paket dan ekspedisi
- menambahkan exit button pada halaman lacak dan exit di redeem
…Pelajaran yang didapat
Perlu pemahaman tentang tahapan Design Thinking Process sehingga saat membuat UI/UX suatu produk dapat lebih masksimal dan lebih tertata.
Hal yang dapat saya ditingkatkan untuk proyek berikutnya adalah:
- Memperdalam materi-materi pertanyaan wawancara agar bisa lebih baik untuk mendapatkan informasi (pain points)dari user.
- Mencari referensi UI/UX Design yang sudah pernah ada untuk memperkaya ataupun menghasilkan ide-ide baru sebagai solusi dari masalah yang ada.
- Memilih responden sesuai kriteria target pengguna aplikasi menjadi sangat penting untuk mendapatkan feedback yang lebih akurat untuk penilaian UI/UX yang sudah dibuat.
Sangat banyak pengalaman yang didapatkan dari proyek UI/UX Design ini. UI Styleguide adalah hal yang paling menarik, ide untuk reuseable dan penyeragaman tampilan sangat membantu ditambah tools yang digunakan juga mendukung.
