Waste4Change Mobile Web Redesign— Case Study

Mobile Web Redesign Case Study by Gustafiande

Halo, perkenalkan saya Gustaf, mungkin ini adalah tulisan panjang pertama saya. Jadi disclaimer dulu, harap dimaklumi jika masih banyak terdapat kesalahan penulisan. Tentunya saya sangat berterima kasih jika ada feedback dari pembaca.

Oke, jadi ini adalah case study redesign mobile webnya Waste4Change. Proyek ini merupakan bagian dari UI/UX Training Program yang diadakan oleh Kementerian Komunikasi dan Informatika (Digital Talent Scholarship) dengan Skilvul dan Waste4Change sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak professional oleh Waste4Change. Saya mengikuti untuk mempertajam skill saya. Sebelum mengikuti program ini saya sudah beberapa kali melakukan explorasi UI design, bisa dikunjungi di akun Dribbble saya.

Latar Belakang

Di disklaimer diatas saya sudah menjelaskan bahwa ini adalah case study redesign website Waste4Change. Namun, kenapa saya memilih waste4change sebagai challange partner yang websitenya akan saya redesign? sebelum memulai membahas case study ini, saya ingin mengajak untuk mengingat lagi, kapan terakhir kali kita berfikir tentang “kemana limbah sampah yang kita hasilkan akan dibuang? apakah secara mutlak tidak bisa didaur ulang? bagaimana kita membuang sampah secara bertanggung jawab?”. Pemikiran itulah yang membuat saya tertarik untuk mencoba ikut mencari solusi dari permasalan Waste4Change. Tentunya dalam ranah UI/UX Design.

Dalam pembuatan redesign ini pihak Waste4Change sudah menyediakan briefnya. Dalam brief ini W4C menyediakan data mulai dari permasalahan yang ingin diselesaikan, target user, dan fitur yang ingin dibuat. Berikut adalah brief dari W4C:

Brief Waste 4 Change

Peran Dalam Tim

Saya mengerjakan challange ini dengan dua anggota tim, Wan Razaq & Iqbal L. Bahroin. Kami memiliki tanggung jawab yang sama dalam challange ini. Menggunakan design thinking sebagai design process. Saling berkomunikasi dan berdiskusi untuk melakukan define sampai user testing untuk meredesign user experience dan user interface dari mobile web milik Waste4Change.

Design Process

Photo by Alvaro Reyes on Unsplash

Dalam kasus ini kami menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Alasan kami menggunakannya adalah karena proses yang tidak linier, jadi kita tetap bisa mereview proses kita sebelumnya. Selain itu design thinking memungkinkan kami untuk menemukan solusi dengan mempertimbangkan desirability, visibility, dan viability. Tahapannya adalah empathize, define, ideate, prototype, dan test.

1. Empathize

Ini adalah tahapan untuk mencari tau apa yang dirasakan user saat menggunakan website. Saat mengikuti challange ini, Waste4Change sudah menyediakan brief hasil risetnya. Dan menghasilkan permasalahan dari user berupa:

• User yang bingung cara menggunakan web apps
• User 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.

2. Define

Pada tahap ini kami mengolah hasil dari tahap empathize. Kami melakukan brainstorming dan mendefinisikan permasalahan-permasalahan user dengan cara, masing-masing anggota menuliskan pain point yang dirasakan user.

Pain point — Define

Setelah selesai mendefinisikan permasalahan user dalam bentuk pain point, selanjutnya kita merumuskan How Might We. How might we sendiri bertujuan untuk mencari fokus poin yang bisa menyelesaikan permasalahan-permasalahan user. Kami masing masing merumuskun how might we. Lalu kami mengelompokkan HMW yang identik untuk digabungkan yang selanjutnya akan dilakukan voting. Setiap anggota mempunyai 3 stiker untuk ditempelkan pada how might we yang menurutnya mampu menyelesaikan masalah user. Setelah dilakukan voting, hasilnya adalah seperti berikut:

How Might We — Define

How-Might We: Meningkatkan motivasi user dalam kepedulian terhadap lingkungan dan membuat user merasa menjadi pahlawan lingkungan

3. Ideate

Pada tahap ini kami melakukan brainstorming ide solusi yang akan diberikan berdasarkan How-might we. Saat melakukan ideasi, kami memotivasi diri sendiri agar bisa memunculkan ide-ide yang solutif.

Kami masing-masing menuliskan Ide solusi, sehingga dalam waktu singkat akan mendapatkan banyak ide. Semakin banyak orang, semakin banyak pula ide yang dapat dihasilkan.

Solution Idea — Ideate

Selanjutnya kami membuat Affinity Diagram dengan mengkategorikan setiap solusi yang ada. Kategori dibuat berdasar kedekatan dari tiap solusi. Hasilnya, terdapat kategori Gamification, Reward, Community, Pick Up, Tracking, Interface, dan Social Media Sharing.

Affinity Diagram — Ideate

Tahap selanjutnya kami membuat prioritization dari ide ide yang sudah dikategorikan. Ide-ide tersebut dimasukan ke beberapa kelompok, yaitu Yes do it now yang berarti value terhadap user tinggi dan mudah dieksekusi, Do next yang berarti memiliki value tinggi namun sulit dilakukan, Do last yang memilik value rendah namun mudah dilakukan, dan Later yang memiliki value rendah serta sulit dilakukan. Hasil dari pengelompokannya, ide ide yang sudah dihasilkan masuk di bagian Yes do it now dan Do Next.

Prioritization Idea — Prototype

Setelah mengetahui ide yang dihasilkan memiliki value tinggi, kami melakukan crazy 8. Kami mencoba menuangkan ide ide tadi ke dalam interface, secara cepat dengan sketsa.

Crazy 8 — Prototype

4. Prototype

Nah tahap inilah yang paling saya suka, tahap dimana kita menuangkan ide ide kedalam bentuk visual. Yang pertama dilakukan di tahap prototype ini kami mengembangkan ide flow dan interface dari hasil crazy 8. Hasil pengembangan disusun untuk menjadi user flow, yaitu alur pengguna dalam menggunakan product. Kami membuat dua flow, yaitu flow user saat mengirimkan paket, lalu flow user saat klaim reward.

Flow mengirim paket — prototype

Flow claim reward — prototype

Setelah kita mendapatkan user flow tadi, kita terjemahkan ke wireframe dari tiap flow pengguna. Wireframe sendiri sudah mulai memunculkan informasi apa saja yang akan ditampilkan disetiap halaman.

Wireframe — Prototype

Tahap berikutnya dari prototyping adalah menjadikan wireframe yang masih low-fidelity menjadi hi-fidelity, yaitu berupa halaman yang sudah memuat informasi, warna, typhography, icon, ilustrasi dll. Namun, sebelum mengubah low-fidelity menjadi hi-fidelity, kami membuat design system agar desain yang kami hasilkan tetap konsisten di setiap halamannya.

Design System — Prototype

setelah selesai membuat design system, kami melanjutkan dengan mengubah wireframe menjadi hi-fidelity design guidline yang sudah dibuat. Yang pertama dibuat adalah Landing page. Permasalah yang ingin diselesaikan pada Landing page adalah “User memahami isi dari website”.

Landing page dibuat dengan urutan Hero section, social proof, benefit, list program, social proof 2, FAQ, CTA 2, Contact, dan Footer.

• Pada Hero section dibuat sebisa mungkin menyampaikan pesan dari website dengan jelas, karena ini merupakan bagian above the fold, yang berarti bagian yang muncul pertama kali ketika user membuka website. dibuat headline yang memperjelas pesan dari Waste4Change, yaitu menggunakan kalimat “Solusi Bijak Kelola Sampah”. Dibawah headline terdapat subheadline, yang menjelaskan secara lebih detail terkait website. Lalu ada call to action yang jelas untuk mengajak pengunjung bergabung mengikuti program. Selanjutnya ada gambar seseorang yang terihat sedang membuang sampah dengan bertanggung jawab.
• Social proof yang ditampilkan dengan bentuk pencapaian dari waste4Change. Pencapaian ini berupa jumlah user yang sudah mengikuti program dan jumlah sampah yang berhasil didaur ulang.
• Feature atau benefit berisi penjelasan tentang keuntungan apa saja yang didapat user ketika mengikuti program ini.
• List-List program untuk memperlihatkan jenis jenis program yang disediakan oleh Waste4Change. Untuk memberikan user informasi bahwa terdapat dua jenis program, dibuatlah pengelompokan program Reguler yang merupakan program utama dari Waste4Change Recycle with us dan program daur ulang bersama (sponsored) yaitu program kolaborasi antara Waste4Change dengan perusahaan lainnya. Untuk memberikan user gambaran singkat terkait program, list program dibuat dalam bentuk card yang berisi gambar dan informasi singkat.
• Social Proof kedua yanng berisikan testimoni dari user.
• FAQ (Frequently Asked Question) menampilkan beberapa pertanyaan yang sering ditanyakan user kepada Waste4Change
• Call to Action kedua bertujuan agar ketika user selesai membaca landing page dan tertarik untuk mengikuti program, user tidak perlu lagi ke halaman paling atas.
• Contact untuk menampilkan kontak dari W4C jika ada user yang ingin menanyakan hal hal yang tidak ditampilkan di landing page
• Footer bagian terakhir dari landing page berisikan info dan menu lain dari website waste4change.

Landing page — Prototype

Setelah selesai mendesain landing page, dilanjutkan dengan mendesain web appnya. Dimulai dengan Login dan Register flow.

Setelah user menekan tombol call to action dari landing page, user akan masuk ke halaman login and ragister. Tampilan pertamanya adalah logo dan tombol untuk user memilih ingin log in atau sign up. Jika memilih Sign Up, user akan diminta mengisi nama depan, nama belakang, email, dan password. Pada halaman Login, user diminta mengisi email dan password yang sudah terdaftar dalam website.

Login and Register Flow— Prototype

Bagian selanjutnya adalah flow pengiriman. Alur nya adalah user mengunjungi homepage, memilih program, detail program, detail pengiriman, pembayaran ongkir, dan terakhir notifikasi sukses.

Pengiriman barang — Prtotype

Alur selanjutnya yang didesain adalah alur redeem reward. User memilih button “Tukar poin” yang ada di homepage, lalu memilih reward yang ingin ditukarkan poin, mengisi nomer atau informasi redeem, password, lalu notifikasi sukses/gagal.

Redeem Reward — Prototype

Tidak hanya sampai pada mockup hi-fidelity, kami juga melanjutkan untuk membuat prototype, yaitu tampilan hi-fidelity yang sudah seperti website aslinya. Fungsi dari membuat prototype ini adalah untuk efisiensi saat akan melakukan Usability Testing. Kita tidak perlu menunggu pihak developer membuat MVP. Dengan menggunakan prototype kita bisa segera melakukan usability testing dan cepat mendapatkan feedback dari user untuk pengembangan produk agar nyaman dan mudah digunakan oleh user.

Prototype bisa dicoba secara interaktif disini:

5 — Testing

Tahap selanjutnya dalah testing. Ditahap ini kami melakukan uji coba prototype kepada user, tentunya user yang sesuai kriteria. yaitu:

kriteria user -Testing

Profil user — Testing

Proses interview — Testing

Berdasarkan hasil testing masih ada beberapa hasil desain yang belum sesuai dengan harapan user.

• Yang pertama adalah penggunaan headline yg belum familiar di landing page bagian “daur ulang bersana” yang lebih mudah dipahami apabila menggunakan kata “Sponsored”.
• Perlunya proses verifikasi ke email maupun handphone saat user mendaftar
• Contoh atau ilustrasi pengemasan kardus yang benar
• Icon yang lebih familiar untuk pengguna pada bagian redeem reward.

Dari keseluruhan, user memberikan 5 dari 7 untuk redesain ini. Hasil tersebut menunjukan masih ada beberapa bagian yang bisa ditingkatkan untuk mendukung pengalaman pengguna dalam menggunakan website.

Kesimpulan

Dalam mendesain sebuah produk prosesnya tidak linier, tetapi iteratif. Seperti saat kita melakukan proses redesain ini, setelah selesai melakukan prototype, ternyata masih ada feedback dari user yang bermanfaat untuk pengembangan produk berikutnya.

Terima kasih telah membaca casestudy ini. Feedback dari pembaca juga akan sangat berharga untuk perkembangan saya kedepannya.

Linkedin gustafiande

Dribbble gustafiande