Case Study: Redesign Waste4Change’s Mobile Web

Disclaimer! 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.

Intro

Hi👋 nama saya Nurulita. Dalam tulisan ini, saya akan membagikan sedikit cerita mengenai proses perancangan ulang UI/UX situs Waste4Change dengan versi mobile web dimana case study ini dibuat sebagai pemenuhan nilai tugas di dalam program magang pada pelatihan UI/UX yang difasilitasi oleh Kemkominfo dan Skilvul.

Untuk menyelesaikan hingga tahap akhir, di sini saya berperan sebagai UI/UX Designer bersama kedua rekan dalam tim saya yaitu Asmuran dan Muhammad Abdurrohman. Di setiap tahapnya kami menyelesaikan secara bersama-sama atau tidak ada pembagian tugas yang cukup spesifik dalam project ini.

Okay, langsung saja berikut pembahasannya!

Latar Belakang

Waste4Change adalah perusahaan sosial yang memfasilitasi masyarakat, baik dalam lingkup individu maupun yang tergabung dalam perusahaan untuk memberikan solusi terhadap permasalahan sampah yang dihasilkan. Prinsip yang dimiliki oleh Waste4Change ialah prinsip perubahan perilaku dan pengelolaan yang bertanggung jawab dengan misi untuk mewujudkan masyarakat Indonesia agar bertanggung jawab atas sampahnya.

Mengutip dari situs resmi Kementerian Kehutanan dan Lingkungan Hidup, pada tahun 2020 Menteri Lingkungan Hidup dan Kehutanan, Siti Nurbaya mengakui bahwa tantangan persoalan sampah di Indonesia masih sangat besar. Ia menuturkan bahwa dalam setahun sekitar 67,8 juta ton sampah ditimbulkan, dan akan terus bertambah seiring pertumbuhan jumlah penduduk.

Adapun pada hasil kesadaran manajemen sampah Waste4Change pada tahun 2019, terdapat beberapa isu manajemen sampah yang paling meresahkan di masyarakat, antara lain:

  • Rendahnya tingkat daur ulang sampah
  • Bahaya mikroplastik
  • Kondisi Tempat Pembuangan Akhir (TPA) yang penuh
  • Tingginya jumlah sampah organik yang dihasilkan dibandingkan jenis sampah
  • Praktik pembakaran/penguburan sampah ilegal.

Pada survey ini terdapat hasil 92,8% masyarakat yang mengharapkan adanya sistem manajemen sampah yang lebih baik di Indonesia.

Hasil Survei Kesadaran Manajemen Sampah Waste4Change 2019 (Source: waste4change.com)

Maka dengan hal tersebut dapat kita simpulkan bahwa kehadiran Waste4Change cukup memiliki peran besar untuk menjadi solusi terhadap salah satu permasalah besar terkait lingkungan khususnya di Indonesia.

Saat ini Waste4Change telah memiliki situs resmi di waste4change.com, melalui situs tersebut pengguna dapat mengikuti program-program pengiriman sampah yang telah disediakan oleh Waste4Change seperti salah satunya adalah program Send Your Waste (SYW) yang mana program ini dapat membantu masyarakat dalam pengolahan sampah yang dihasilkan dengan cara mengirim sampah yang sebelumnya telah memasuki tahap pemilahan terlebih dahulu.

Pada tampilan situs waste4change kini sudah memiliki tampilan yang cukup baik. Namun, ketika kami melakukan pengujian situs di beberapa alur ada beberapa hal yang kami rasa janggal seperti pada flow ketika pengguna baru mulai memasuki landing page hingga di tahap pengiriman sampah. Oleh karena itu, kami mencoba untuk melakukan perbaikan di beberapa flow pada situs tersebut.

Design Process dengan Design Thinking

Untuk mencapai tahap hasil yang lebih optimal kami menerapkan design thinking sebagai design process. Menurut Tim Brown, Executive Chair of IDEO dalam situs designthinking.ideo.com

Design thinking adalah pendekatan inovasi yang berpusat pada manusia dengan menggunakan cara berpikir dan teknik-teknik desainer untuk mempertemukan kebutuhan desainer dengan hal yang memungkinkan secara teknologi serta hal yang bisa dijadikan sebagai kesuksesan sebuah bisnis.

Alasan kami menggunakan design thinking adalah karena melalui design thinking proses perancangan tidak hanya fokus berpusat kepada pengguna produk namun secara lebih luas mencakup kepada manusia pada umumnya.

Illustration stage of design thinking by Nurulita | Icon by Iconify

Adapun tahapan pada design thinking meliputi empathize, ideate, prototyping, define, dan testing. Di mana tahapan ini bersifat iterative atau dapat dilakukan lebih dari 1 kali.

1 — Empathize

Tahap empathize adalah tahap awal yang kita lakukan ketika melakukan design thinking. Di sini kita mulai memahami keinginan, dan tujuan ketika menggunakan sebuah produk.

Dalam kesempatan kali ini, kami mencoba melakukan tahap empathize dengan cara saling mendiskusikan situs Waste4Change yang ada saat ini dan memposisikan diri kami masing-masing sebagai pengguna yang akan menggunakan produk. Sehingga kami memperoleh pain points sebagai berikut:

Pain points
  1. CTA pada landing page membingungkan, seperti terdapat tab perusahaan dan individu
  2. Pick Up sampah belum tersedia
  3. Alur user untuk mengirimkan sampah terlalu panjang dan susah dimengerti
  4. Terlalu banyak navigasi
  5. Belum adanya menu pencarian
  6. Fitur redeem point tidak ada penjelasan singkat bagi calon user
  7. Drop point yang berbeda-beda tiap program
  8. Kurang user friendly dalam fitur-fitur penggunaan serta fungsinya sebagai solusi pengelola sampah.
  9. Web kurang responsive diakses di handphone
  10. Banyak sub-sub menu yang membingungkan

2 — Define

Setelah melakukan empathize, pada tahap kedua yang dilakukan dalam proses design thinking adalah define. Di tahap ini, informasi atau permasalahan yang telah didapatkan pada tahap empathize mulai didefinisikan dan dikembangkan. Untuk memudahkan pada tahap ini kita merumuskannya ke dalam bentuk How-Might We dan di sini kami mendiskusikan dan melakukan voting untuk mencari inti permasalahan yang kami rasa paling penting untuk ditindak lanjuti pada tahap-tahap setelahnya. Berikut hasil How-Might We yang kita dapatkan:

How-might we

Objective

Dari hasil tersebut terdapat 2 saran How-Might We dengan hasil voting yang sama. Maka dengan itu kami memutuskan keduanya merupakan objektif yang akan kami buatkan solusinya, yaitu:

Menyederhanakan landing page dan mempermudah alur send your waste

3 — Ideate

Tahap ideate adalah tahap dimana semua ide dihasilkan dan ditampung sebagai solusi untuk mengatasi permasalahan yang sebelumnya ditentukan. Di tahap ini kami kembali mendiskusikan dengan teknik brainstorming melalui Figma. Berikut hasil solution idea yang kami coba berikan:

Solution idea

Berikutnya kami mencoba mengelompokkan ide-ide atau solusi yang sekiranya memiliki hubungan yang sama ke ke dalam Affinity Diagram.

Affinity diagram

Berdasarkan affinity diagram tersebut beberapa ide kami pilih untuk menjadi prioritas dikerjakan saat ini. Adapun solusi yang kami utamakan untuk dikerjakan saat ini antara lain:

  • Pencarian lokasi drop point di sekitar kita.
  • Integrasi dengan jasa pengiriman.
  • Simulasi perhitungan point .
  • Contact us.
  • FAQ.
  • Fitur login/sign up.
  • Penjelasan singkat tentang change4waste pada landing page.
  • Fitur testimonial.
  • Penukaran sampah dengan beragam produk di gital sprti token listrik, pulsa, PDAM, BPJS, dll.
  • Produk Waste4Change pada landing page.
Prioritization idea

Selain tahap mengumpulkan ide-ide di dalam sticky note, pada tahap ideate juga kita dapat membuat wireframe untuk memudahkan proses perancangan high-fidelity prototype. Namun sebelum itu kami terlebih dulu menentukan flow mengenai fokus apa saja terkait solusi yang akan kami buat.

User Flow

Adapun flow yang kami lakukan di sini berfokus pada 3 hal yaitu:

  1. Alur login/pendaftaran

2. Alur pengiriman sampah reguler untuk individu (SYW reguler)

3. Alur pengiriman sampah sponsor untuk individu (SYW sponsored)

4. Alur redeem poin dari hasil pengiriman sampah sponsor

Low-Fidelity Prototype

Setelah itu, sebelum melakukan perancangan wireframe secara langsung sebelumnya kami juga melakukan crazy’s 8 guna mengumpulkan ide ke gambaran kasar wireframe.

Ketika tahap pembuatan low-fidelity atau wireframe tersebut kami turut menjabarkan informasi apa saja yang akan berada pada tiap-tiap tampilan, sehingga dengan adanya informasi ini kita dapat lebih cepat mengimplementasikan informasi-informasi yang ada ke dalam layout.

Wireframe

4— Prototyping

Prototyping adalah tahap di mana semua ide dan solusi yang dirancang telah diimplementasikan ke dalam desain produk yang sebelum dilakukan development akan diuji terlebih dahulu oleh pengguna secara langsung.

Di tahap ini, terdapat 4 hal yang kami lakukan:

  • Mencari referensi dari situs Waste4Change saat ini, seperti warna, jenis font, dan lain-lain untuk mempertahankan;
  • Membuat UI kit atau komponen untuk mempercepat proses pembuatan high-fidelity maupun ketika terjadi perubahan;
  • Membuat UI Design;
  • Mengimplementasikan prototype ke dalam UI Design.

Hasil UI Design

Berikut beberapa hasil dari UI Design yang telah kami buat,

Landing Page

Sebagaimana objektif yang telah kami tentukan, pertama-tama kami membuat tampilan landing page agar nantinya mudah dipahami oleh orang awam.

Landing page saat Ini

Pada hasil redesign landing page ini kami mencoba untuk lebih menyederhanakan tampilan landing page, seperti:

  • Memindahkan kolom subscribe ke bagian footer agar tidak terlalu mengganggu tampilan;
  • Memisahkan tabbing antara perusahaan dan individu ke dalam card dengan memberikan deskripsi singkat tentang masing-masing program agar pengguna dapat sedikit memahami tentang program;
  • Membuat vertical scrolling pada blog dan berita agar terlihat lebih clean;
  • Menambahkan fitur pencarian untuk memudahkan pengguna mencari informasi yang ada di website;
  • Menambahkan CTA pada bagian jumbotron bagi pengguna yang ingin langung mengikuti program;
  • Menyederhanakan informasi pada footer sehingga tidak terlalu banyak menu di bagian tersebut.
Hasil redesign bagian landing page

Navigasi Menu

Pada bagian ini, kami mencoba untuk mengubah sedikit informasi yang ada di bagian menu.

  • Menu masuk/daftar kami sarankan agar pengguna dapat login atau mendaftar terlebih dahulu sebelum melakukan pengiriman;
  • Dropdown pada menu kami hilangkan untuk mengarahkan pengguna dapat lebih mempelajari menu-menu utama;
  • Menu magang dihilangkan karena mungkin menu tersebut dapat dijadikan ke dalam satu halaman di dalam menu karir.
Hamburger menu — opened

Flow Login dan Register

Pada saat ini, alur login atau register muncul ketika pengguna baru ingin mengikuti program kemudian pengguna dapat mendaftarkan akun hanya dengan melalui nomor telepon.

Sedangkan pada design yang kami buat, agar pengguna memiliki opsi selain registrasi dengan nomor telepon kami menyarankan agar nantinya pengguna dapat mendaftarkan akun melalui email atau akun google yang sudah terhubung di dalam perangkat. Selain itu, saat mendaftarkan akun dengan mengisi data secara manual terdapat kolom lokasi, agar ketika pengguna ingin memilih progam layanan, lokasi pengguna dapat secara otomatis terdeteksi akan tetapi pengguna juga masih dapat mengubahnya.

Flow login hingga homepage

Form Pengiriman

Pada hasil redesign form bagian pertama ketika pengguna ingin mengirimkan sampah kami membuat agar terlihat lebih menjelaskan mana titik drop yang buka dan titik drop yang sedang tutup.

Form utama ketika user ingin melakukan pengiriman

Prototyping

Setelah meredesign bagian interfacenya, selanjutnya kami membuat prototyping untuk user flow yang telah kami tentukan sebelumnya. Melalui link di bawah ini, pengguna dapat mencoba hasil prototype yang kami buat.

5— Testing

Setelah proses prototyping selanjutnya, kita memasuki tahap usability testing. Testing dilakukan agar kita dapat mengetahui kesalahan dan kekurangan atas produk yang kita buat. Pada tahapan ini, kami melakukan in depth interview kepada salah satu responden untuk melakukan pengujian pada hasil redesign UI/UX yang telah kami buat.

Adapun hasilnya dari keseluruhan, dengan menggunakan Single East Question responden memberikan nilai 6,5 dari skala 1–7 atau dalam hal ini dapat disimpulkan pengguna merasa cukup mudah dengan alur yang dibuat.

Note: Single Ease Question (SEQ) merupakan salah satu Post Task Questionnaire yang digunakan dalam menilai tingkat kemudahan pada suatu fitur produk berdasarkan pengalaman user dengan menggunakan satu pertanyaan saja. (Source: budhiluhoer3.medium.com)

Selain itu, responden juga turut memberikan beberapa feedback yang di antaranya:

  • Pengguna merasa pada tahap pengiriman sampah informasi yang diberikan terkait harga masih kurang jelas misalnya belum terdapat jumlah biaya pada bagian pemilihan jasa pengiriman;
  • Pada tampilan utama SYW Sponsored, pengguna ingin diberikan pilihan mengenai kategori sponsor agar dapat mengetahui produk apa saja yang mungkin pengguna miliki dan ikuti;
  • Diadakan fitur reminder penjadwalan untuk penjemputan atau pengiriman sampah agar lebih konsisten untuk mengikuti program;
  • Metode pembayaran diharapkan lebih detail menampilkan informasinya seperti biaya satuan dan total dari berat sampah yang akan dikirimkan.

Outro

Sekian penjelasan dari saya, dalam waktu selama kurang lebih 2 bulan saya merasa senang mempunyai kesempatan untuk belajar melalui program ini. Selain mendapatkan banyak insight terkait bidang UI/UX saya juga beruntung dapat mengenal mentor serta teman-teman yang memiliki minat yang sama terkait UI/UX design🥳

Karena ini merupakan case study pertama yang saya buat mohon maaf jika masih terdapat banyak kekurangan dan kesalahan atas penjabaran yang saya berikan. Besar harapan agar kiranya teman-teman pembaca dapat memberikan kritik dan saran untuk saya dapat lebih belajar di kedepannya. Arigatou!

Share to:

Leave a Reply

Your email address will not be published.