Redesign Zenius Mobile Apps — an UI/UX Case Study #2

Redesign aplikasi Zenius

Sudah hampir 4 tahun yang lalu saya mulai menggunakan aplikasi Zenius ini, meski dulu belum ada versi mobile-nya. Menggunakan layanan Zenius, jika dirasakan dari isi kontennya, sangat berguna sekali.

Sesuai dari visi dan misi Zenius itu sendiri, benar-benar membuat cara berpikir saya lebih saintifik dan konseptual. Sehingga yang awalnya saya belajar menggunakan cara hafalan, berubah menjadi pemahaman konsep.

Buat yang belum tahu mengenai aplikasi Zenius. Zenius adalah platform edukasi yang menyediakan video pembelajaran sekolah mulai dari SD sampai SMA. Pembahasan yang berfokus kepada konsep menjadi salah satu keunggulan Zenius.

Tapi baru-baru ini, ketika baru saja ada aplikasi Zenius versi mobile, saya jadi tertarik untuk menggunakan aplikasi Zenius sebagai studi kasus UI/UX kedua saya.

Design Process

Rangkaian Design Process untuk Redesign

Emphatize

Persona

Pertama-tama saya memulai dengan membuat persona untuk aplikasi Zenius. Saya memilih salah satu persona yang dirasa punya urgensi paling penting untuk menggunakan aplikasi Zenius yaitu sebagai berikut.

Persona Aplikasi Zenius

Fact & Insight

Pada langkah kedua di emphatize ini, saya mulai dengan mencari fakta dan wawasan seputar aplikasi Zenius berdasarkan pengalaman saya. Berikut adalah wawasan seputar aplikasi Zenius yang menurut saya bermasalah dan bisa diperbaiki nantinya :

• Kesulitan membedakan jenis konten pada history (riwayat). Pada aplikasi Zenius, kita memang bisa melihat mengenai riwayat dari konten-konten yang telah kita tonton. Jenis konten tersebut dibagi dua yaitu Materi dan Soal. Masalahnya pada riwayat ini tidak bisa membedakan (tidak ada filter) untuk memisahkan mana yang materi dan mana yang soal. Sehingga pengguna harus melakukan scroll dengan waktu yang lebih lama.
• Tidak ada kolom pencarian pada menu beranda. Hal yang pertama kali dilakukan pengguna ketika pertama kali membuka aplikasi Zenius adalah ingin belajar, entah itu untuk menonton video materi maupun mengerjakan soal.
• Tombol ‘previous’ dan ‘next’ ketika mengerjakan latihan soal terlalu kecil sehingga sulit dijangkau. Sesuai dengan Hukum Fitts’s, lebih baik tombol memiliki ukuran dan jarak yang pas serta sesuai. Sedangkan pada latihan soal di aplikasi Zenius, tombol ‘Previous’ (sebelumnya) dan ‘Next’ (Selanjutnya) terlalu kecil serta sulit dijangkau karena berada di atas.
• Tidak bisa menandai mana materi yang merasa belum dikuasai oleh pengguna. Aplikasi Zenius berorientasi pada pemahaman dan konsep, untuk itulah perlu pengguna perlu memahami materi yang sudah ditonton. Meski begitu, ada pengguna yang bisa jadi masih belum paham dan untuk itulah sangat memerlukan fitur yang bisa menandai mana materi yang belum dipahami. Menurut salah satu Usability Heuristic, yaitu Recognition rather than recall, kita lebih baik membuat pengguna seminimal mungkin menggunakan memori ingatan mereka. (fitur ini sangat berguna ketika pengguna keluar dari aplikasi Zenius, entah karena selesai belajar atau ada urusan lain, penandai membantunya mengingat mana materi yang belum paham. Sesuai salah satu dari Usability Heuristic yaitu Recognition rather than recall.)
• Masih ada opsi jawaban pada pembahasan soal. Ketika membahas soal, opsi untuk memilih jawaban masih ada. Padahal di sisi lain, pada bagian atas, sudah ada keterangan jawaban yang dipilih oleh pengguna ketika masih mengerjakan soal tersebut. Selain boros ruang, tentu hal ini membingungkan pengguna.
• Menu navigasi ‘search’ yang dirasa kurang berguna. Pada menu tersebut hanya berisi kolom pencarian saja. Dan isi di bawahnya benar-benar kosong.
• Tidak bisa membuat prioritas atau perencanaan terkait konten yang akan dipelajarinya. Untuk menghadapi ujian, biasanya ada banyak sekali materi-materi yang perlu dipelajari. Kadang ada beberapa materi yang sudah dipahami, kadang ada materi yangbelum dipahami. Untuk itulah sangat penting membuat prioritas belajar agar semakin siap menghadapi ujian secara maksimal.

Affinity Diagram

Affinity Diagram pada aplikasi Zenius

Problem Statement

Dari affinity diagram yang telah dijabarkan di atas, maka bisa ditarik kesimpulan berupa 7 Problem Statement :

1. Pengguna tidak merasakan kegunaan yang signifikan pada menu navigasi ‘search’.
2. Pengguna tidak bisa memakai fitur kolom pencarian pada menu beranda.
3. Pengguna sulit menjangkau tombol ‘Previous’ dan ‘Next’ ketika mengerjakan latihan soal karena terlalu kecil.
4. Pengguna masih menemukan adanya opsi jawaban pada pembahasan soal.
5. Pengguna tidak bisa menandai mana materi yang merasa belum dikuasainya.
6. Pengguna tidak bisa membuat prioritas atau perencanaan terkait konten yang akan dipelajarinya.
7. Kesulitan membedakan jenis konten pada history (riwayat).

Design Mandate

Setelah menetapkan Problem Statement, saya membuat Design Mandate. Buat yang belum mengerti maksud dari Design Mandate ini, mungkin akan saya jelaskan sekilas. Jadi Design Mandate inilah yang menjadi pondasi tujuan dalam melakukan redesign nantinya. Berikut adalah Design Mandate pada studi kasus aplikasi Zenius :

1. Mengubah menu navigasi ‘search’ menjadi menu yang lebih bermakna dan berguna.
2. Menyediakan fitur kolom pencarian pada menu beranda.
3. Membuat tombol ‘Previous’ dan ‘Next’ pada posisi thumb zone.
4. Membuat opsi jawaban pada pembahasan soal tidak membingungkan pengguna.
5. Memungkinkan pengguna untuk bisa menandai mana materi yang merasa belum dikuasainya.
6. Memungkinkan pengguna untuk bisa mengatur untuk konten yang akan dipelajarinya.
7. Membagi jenis konten yang ada pada history (riwayat).

Define

How Might We (HMW)

How Might We ini adalah proses memberikan pertanyaan “bagaimana jika..?” sehingga membuka jalan untuk solusi yang akan diberikan nantinya. Dan juga solusi tersebut menjadi lebih terarah dan reasonable. Berikut adalah hasil dari proses How Might We (HMW) saya pada aplikasi Zenius :

How Might We untuk aplikasi Zenius

1. Mengganti menu navigasi ‘search’ menjadi menu navigasi ‘konten’.
2. Menambahkan fitur kolom pencarian pada menu beranda.
3. Meletakkan tombol ‘Previous’ dan ‘Next’ ketika mengerjakan latihan soal pada posisi yang lebih mudah dijangkau dan membuat ukurannya cukup pas untuk pengguna.
4. Menghilangkan adanya opsi jawaban pada pembahasan soal.
5. Memungkinkan pengguna untuk bisa menandai mana materi yang merasa belum dikuasainya.
6. Memungkikan pengguna untuk bisa membuat prioritas atau perencanaan terkait konten yang akan dipelajarinya.
7. Membedakan jenis konten pada history (riwayat) dengan cara membagi dua kategori konten yaitu materi dan soal.

Crazy8

Pada tahap Crazy8 ini, saya melakukan gambaran redesign aplikasi Zenius secara kasar saja. Jadi tidak sampai detail. Dimana dalam proses Crazy8 ini saya menggambarkannya sesuai dengan hasil How Might We (HMW) yang sebelumnya sudah saya temukan. Untuk melakukan Crazy8, saya cukup melipat-lipat kertas hingga menjadi 8 bagian, lalu menggambarkannya di 8 sisi lipatan tersebut. Dan berikut adalah hasil Crazy8 yang saya kerjakan :

Crazy8 pada aplikasi Zenius

Ideate

Paper Sketch

Pada tahap paper sketch ini, saya mulai menggambar tampilan di kertas dengan lebih mendetail untuk aplikasi Zenius ini. Sebenarnya memang tidak mudah untuk menggambar secara detail berdasarkan Crazy8 yang sudah saya buat sebelumnya.

Adalah hal yang wajar apabila kita melakukan kesalahan dalam tahap ini dan harus bolak-balik mengganti kertas, entah itu karena salah menggambar, atau lupa menggambar suatu elemen di tampilan tersebut. Dan berikut adalah hasil Paper Sketch saya :

Paper Sketch aplikasi Zenius (1)

Paper Sketch aplikasi Zenius (2)

Prototype

UI Design

Pada tahap UI Design ini saya membuatnya dengan aplikasi berbasis website yaitu Figma. Dan berikut adalah hasil Prototype aplikasi Zenius yang saya buat :

Perubahan pada tampilan beranda

Perubahan pada tampilan riwayat

Perubahan pada tampilan pembahasan soal

Perubahan pada menu navigasi ‘search’ menjadi ‘konten’

Validate

Usability Testing

Untuk melakukan validasi hasil Redesign aplikasi Zenius, saya memerlukan yang namanya Usability Testing. Hasilnya mendapat feedback sebagai berikut :

• “Jadi lebih mudah mencari sesuatu.”
• “Tampilannya lebih ramah”
• “Seamless and cleaner bro..”
• “Gampang dimengerti sih, apalagi ada fitur menandai mana yang belum paham”

Kesimpulan

Zenius merupakan aplikasi edukasi salah satu yang terbesar di Indonesia (selain Quipper, Ruang Guru, dll). Mereka sudah mendapat kepercayaan yang bagus dengan meraih dana 283 miliar rupiah dari investor. Dengan begitu, harapan untuk platform pendidikan ini bisa punya dampak positif buat jutaan siswa-siswa di Indonesia, sesuai dengan visi misi Zenius. Tentu Zenius yang sekarang masih bisa terus berkembang kalau didukung dengan pengalaman pengguna yang bagus.

Dari keseluruhan yang sudah saya redesign, memang masih bisa lagi untuk terus ditingkatkan. Dimana bisa jadi saya saat ini masih memperbaiki hanya beberapa bagiannya saja.

Disclaimer : Saya tidak bekerja untuk Zenius. Saya melakukan UI/UX Case Study Redesign App ini untuk belajar dan meningkatkan kemampuan saya.