UX Case Study — Waste4Change Web Apps Redesign

by Yemima Sutanto as DTS PRO UIX3 Participant

Case study ini merupakan salah satu challenge yang diselenggarakan oleh Skilvul dan Waste4Change dalam sebuah training yang diselenggarakan oleh Professional Academy Digitalent Kominfo. Proses pengerjaan dilakukan selama 8 minggu (Agustus — September 2022) dan menggunakan Bahasa Indonesia.

Overview

Waste4Change adalah perusahaan yang menyediakan solusi pengelolaan sampah (waste management) secara bertanggung jawab dan terpercaya.

Problem

Waste4Change (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 kami lihat juga dapat disebabkan oleh adanya miskomunikasi dalam flow dan copywriting pada page tersebut. Hal tersebut dapat memungkinan user untuk beralih ke aplikasi/platform serupa.

Objective

1. Memudahkan user untuk menyalurkan dan mengirimkan sampah daur ulang ke mitra Waste4Change
2. Membuat dan meningkatkan fitur Recycle Landing Page, Page Pengiriman, Page Poin Rewards, Page transisi Payment/ API partner logistik pada platform Waste4Change
3. Meningkatkan dan mempertahankan jumlah user Waste4Change

Roles and Responsibility

Peran saya sebagai UX Designer, dalam sebuah tim yang beranggotakan 5 orang. Tanggung jawab saya yaitu melakukan design thinking berdasarkan latar belakang masalah yang diberikan, menjadi salah satu kontributor pembuatan design system untuk kebutuhan pembuatan UI Design, membuat wireframe dan UI design solusi pada Waste4Change dan prototyping tampilan UI Design pada Waste4Change. Tools yang digunakan yaitu Figma, Google Docs, dan Maze.

Design Process

Design Thinking Process

Metode yang digunakan dalam mengerjakan project ini adalah Design Thinking Process. Terdapat 5 tahapan dalam Design Thinking yaitu Empathise, Define, Ideate, Prototype, dan Test.

Stage 1: Empathise

Kami menggali banyak informasi untuk dipelajari dari studi analis kompetitor dan merangkum dari sesi Ask Me Anything (AMA) Session yang diadakan oleh Waste4Change x Skilvul. Dari hasil tersebut, kami mendapat challenge dari Waste4Change untuk Redesign seluruh situs web apps Waste4Change berdasarkan beberapa pain point dari pengguna.

Stage 2: Define

Setelah melakukan riset dan berdiskusi, kami merangkum dan merapikan hasilnya dalam bentuk pain point sebagai berikut.

Kemudian kami mengelompokkan jawaban sejenis menjadi beberapa kategori dalam Affinity Mapping.

Sehingga kami dapat menyimpulkan sebuah Goal yang ingin dicapai, yaitu: Memperbaiki alur pengiriman sampah pilah agar mudah dipahami dan lebih efektif agar meningkatkan jumlah pengguna.

Stage 3: Ideate

Dari pain points sebelumnya, kami mencoba untuk membuat challenge dengan How Might We sebagai berikut.

How Might We

Dari pengelompokkan tersebut, kami mengambil beberapa opsi yang cukup krusial, yang kami jadikan Priotization Idea, yaitu:

1. Yes, Do It Now (high value, low effort): membuat fitur simpan data pemesanan yang belum ke pembayaran ke keranjang, simpan info alamat dan fitur untuk capture barang yang akan dikirim.
2. Do Next (high value, high effort): menambah mitra logistik (pengiriman sampah daur ulang), menambah fitur pembayaran lain, menambah ilustrasi pada aplikasi, dan menyediakan diskon biaya pengiriman.
3. Do Later (low value, low effort): menambahkan menu portofolio untuk menampilkan hasil donasi sampah masing-masing user Waste4Change, menambahkan fitur ranking pada akun, dan membuat Opsi tampilan gelap, redup dan terang.
4. Do Last (low value, high effort): menghilangkan bagian tutorial karena sudah ada menu bantuan, melakukan penerimaan sampah yang lebih variatif, menambahkan fitur Leaderboard berdasarkan level untuk memicu lebih giat bertransaksi, dan menyediakan pilhan tipe user saat awal daftar -> reguler (monthly rutin kirim sampah) dan sekali transaksi/ocassional.

User Flow

User Flow

Setelah itu, kami mulai untuk membuat wireframe ke dalam Low Fidelity Design.

Wireframe

Stage 4: Prototype

Sebelum membuat prototype, kami berdiskusi dan membuat design system sebagai Standar untuk semua komponen desain.

Design System

Design System (Atomic & Molecule)

Adanya design system membantu kami sebagai UX Designer untuk menyelaraskan seluruh bagian dalam tampilan yang kami buat sehingga semua tampilannya memiliki format desain yang sama.

High Fidelity Design

Prototype Design

Stage 5: Test

Dalam tahap pengujian ini, kami melakukan validasi ke 5 orang menggunakan metode Usability Testing (UT) dengan detil persona sebagai berikut.

User Criteria

• Usia : 25–40 tahun
• Jenis kelamin : Laki-laki & Perempuan
• Pekerjaan : inclusive / not defined
• Domisili : Pulau Jawa (DKI-J, Banten, JaBar, JaTeng, JaTim)
• Behavior : produktif / sibuk seharian
• Habit : tidak harus sudah terbiasa memilah sampah, peduli isu lingkungan, suka menyimpan kemasan produk, suka berbelanja online

Kami menggunakan maze sebagai media UT dengan meletakkan beberapa general question dan post test interview. Seluruh partisipan menjalankan misi secara individu (unmoderated test). Hasil test yang telah dilakukan adalah sebagai berikut.

Skenario 1 : Login dengan akun email / SSO (Google account)

Skenario 2 : Kirim sampah daur ulang

Melakukan pemesanan untuk mengirim sampah daur ulang

• Mengatur alamat penjemputan
• Mengatur alamat pengiriman (lokasi drop point)

Mengisi formulir jenis sampah yang akan dikirim

Skenario 3 : Melakukan transaksi pembayaran pesanan

Post Test Interview

Setelah melakukan UT, saya memberikan tes akhir mengenai pengalaman partisipan dalam proses UT. Dari kumpulan feedback yang didapat, hasilnya yaitu sebagai berikut.

1. Mayoritas partisipan masih bingung dengan alur pemesanan
2. Desain tampilan perlu diperbaiki agar lebih jelas

Kesimpulan dan Penutup

Berdasarkan hasil Usability Testing yang telah dilakukan, kami perlu memperbaiki dan menyempurnakan antarmuka dan fungsionalitas aplikasi yang telah dibuat. Dan berdasarkan hasil post test interview yang didapat, mayoritas partisipan sangat antusias untuk menggunakan platform Waste4Change (dari skala 1–5, 2 orang memberi nilai 3, 2 orang memberi nilai 4 dan 1 orang memberi nilai 5 untuk skor antusias). Dari hasil tersebut, tampilan desain yang telah dibuat telah mencapai goal yang diharapkan sebelumnya.

Semoga case study ini bisa menggambarkan hasil akhir dari pengerjaan challenge ini. Mohon maaf untuk segala kesalahan dalam penulisan artikel ini. Terima kasih sudah membaca hingga akhir.

Penulis sangat terbuka akan kritik dan saran membangun untuk penulisan dan analisis case study kedepannya, silahkan untuk menuliskannya di kolom komentar.