Redesign Binar Academy App — UX Case Study
Studi kasus ini bertujuan untuk membagikan proses yang saya dengan tim lakukan dalam mendesain ulang sebuah aplikasi, dimulai dari proses riset hingga validasi kepada pengguna. Adapun studi kasus ini merupakan challenge yang dikerjakan dari kelas UI/UX Design di Binar Academy, dengan bimbingan dari fasilitator yaitu kak Gloria Christiana Maria, yang juga merupakan seorang Lead UI/UX Engineer.
Challenge ini dilakukan bersama dengan 3 orang dalam tim yang beranggotakan yaitu
- Nadia Adilina — Scrum Master & UI/UX Designer
- Hielman Nur Addin — Product Owner & UI/UX Designer
- Dimounitif Nelaspaba (Saya) — UI/UX Designer
- Muhammad Rivaldi Abraham Lionard Setiadi — UI/UX Designer
Goals dari case study ini adalah membantu pengguna untuk memenuhi kebutuhannya dengan aplikasi Binar Academy dan membuat desain antarmuka pengguna yang mudah dipahami pengguna.
Impact yang ingin diberikan jika desain antarmuka ini diimplementasikan adalah memudahkan pengguna terutama student Binar untuk mengakses materi kelas serta kebutuhan lainnya untuk mendukung aktivitas selama mengikuti kelas di Binar. Tentunya dengan tata letak informasi yang lebih mudah diakses pada desain baru.
Overview
Binar Academy App merupakan platform yang dapat digunakan untuk mempelajari bidang teknologi dengan mengakses materi seperti UI / UX Research & Design, Fullstack Web, Android Engineering, dan Product Management dengan 3 level yaitu Silver, Gold, dan Platinum.
Sprint Timeline
Sebelum sprint dimulai, berikut timeline dalam pengerjaan challenge.
Stage 1: Understand
Pada tahap ini, kami menggunakan asumsi untuk menentukan kebutuhan dan wawasan pengguna sebagai student dari Binar Academy
Board Tasking
Sebagai student sekaligus pengguna Aplikasi Binar Academy, kami melakukan brainstorming terkait masalah dan ide-ide baru yang dapat dimunculkan dalam aplikasi ini untuk membantu kebutuhan student saat mengambil kelas di Binar Academy. Di bawah ini adalah poin-poin penting dan ide-ide baru yang kami analisis.
Point of View (POV)
POV digunakan untuk memberikan panduan yang berfokus pada kebutuhan dan temuan terkait pengguna
Pernyataan yang dapat diartikulasikan dari POV:
“Student Binar Academy membutuhkan kemudahan untuk mengikuti kelas di Binar Academy karena kesulitan mencari akses reading material, pengumpulan challenge, tidak mengetahui jadwal penting pengumpulan deadline challenge, sering lupa untuk absensi, dan ingin mendapat insight lain dari teman-teman lintas bidang student Binar Academy.”
How-Might-We (HMW)
Proses pengambilan keputusan atau strategi yang akan diterapkan dapat dilakukan dengan menggunakan pertanyaan How-might-we dari POV.
Stage 2: Define
Berikutnya, kami mendefinisikan konteks dan fokus terkait hasil yang diinginkan dari solusi potensial.
Business Model Canvas
Model bisnis dari Binar Academy yang digunakan sebagai perancangan strategi UX untuk suatu produk
Persona
Nah, berikut persona yang menjadi representasi dari pengguna kami!
User Journey
Berikutnya kami menyusun user journey sebagai visualisasi langkah-langkah yang dapat dilalui pengguna untuk mencapai tujuannya. Dengan adanya user journey, kami dapat menganalisis pain points yang pengguna rasakan ketika menggunakan aplikasi dan solusi yang dapat diberikan untuk mengatasi hal tersebut.
Stage 3: Sketch
Pada tahap ini, setiap individu dalam tim mencari inspirasi dan berbagi ide untuk menghasilkan solusi desain.
Crazy 8's
Dilakukan pembuatan sketsa kasar untuk mengumpulkan delapan ide yang berbeda, tujuannya tim kami melakukannya untuk menghasilkan berbagai macam solusi.
Stage 4: Decide
Berikutnya, kami menyelesaikan ide konsep dari hasil penggambaran sketsa kasar yang akan dieksekusi pada tahap prototype.
User Stories
Dari sebanyak 28 user stories yang dianalisis bersama, kami memilih 15 user stories yang akan dikembangkan pada solusi desain.
Information Architecture
Dari sketsa kasar yang telah dibuat, selanjutnya kami menyusun ide pemetaan seluruh fitur dan konten pada desain baru aplikasi Binar Academy.
Kemudian setelah fitur dan konten pada desain baru Aplikasi Binar Academy tersusun, proses selanjutnya yaitu menyusun alur penggunaan aplikasi dalam bentuk flowchart.
Flowchart
Merepresentasikan langkah-langkah dalam penggunaan aplikasi secara berurutan.
Flow 1 dengan goals yaitu memilih jadwal kelas dan fasilitator
Flow 2 dengan goals yaitu membaca reading material
Flow 3 dengan goals yaitu mengisi presensi dan feedback untuk fasilitator setelah selesai kelas
Flow 4 dengan goals yaitu melihat detail informasi terkait challenge
Flow 5 dengan goals yaitu berdiskusi terkait topik tertentu pada forum diskusi
Wireframe
Berdasarkan user stories, IA dan flowchart, kami merancang tampilan wireframe untuk mendapatkan gambaran tentang konten dan fitur apa saja yang akan diisi. Tools yang saya gunakan untuk membuat wireframe yaitu Figma.
Stage 5: Prototype
Pada tahap ini, saya akan mendesain blueprint yang akan digunakan untuk testing dari ide solusi yang dibuat.
Storyboard
Kami menggunakan storyboard untuk memetakan bagian-bagian yang perlu dibuat pada prototype serta langkah-langkah yang akan divalidasi kepada pengguna.
UI Design
Tools yang digunakan untuk membuat high fidelity adalah Figma. Berikut adalah hasil high fidelity dari keseluruhan halaman dengan penjelasannya beserta perbandingan dengan desain lama Binar Academy App.
Beranda
Di halaman Beranda, pengguna dapat memilih fasilitator untuk kelas yang diikuti dan mendapatkan reminder jadwal kelas mendatang pada desain baru. Selain itu, pada desain baru pengguna juga dapat mengakses kelas kursus lainnya pada level Silver untuk membantu pengguna yang penasaran mempelajari materi awal ataupun berminat untuk mengikuti kelas kursus lainnya.
Terdapat perbedaan desain lama dan baru, dimana progress membaca reading material pada desain baru diberikan tambahan keterangan topik dan durasi waktu yang dibutuhkan untuk diselesaikan membaca reading material.
Pilih Kelas dan Fasilitator
Halaman ini akan muncul ketika pengguna meng-klik tombol “Pilih fasilitator” pada halaman awal Beranda.
Pada halaman ini, pengguna dapat memilih jadwal kelas dan fasilitator yang diinginkan pada kelas bootcamp. Dalam memilih fasilitator, pengguna juga dapat mengetahui background pekerjaan dari fasilitator.
Reading Material
Di halaman ini, pengguna dapat mengakses reading material yang berisi materi-materi terkait kelas bootcamp yang diambil. Level Silver dapat diakses oleh umum, sedangkan level Gold dan Platinum hanya dapat diakses oleh student Binar Academy.
Berikutnya, saat pengguna memilih salah satu topik pada reading material akan muncul halaman yang berisi materi-materi dari topik tersebut. Jika desain lama hanya dapat mem-bookmark halaman materi, sedangkan pada desain baru juga dapat memperbesar-memperkecil tulisan, melihat detail dari istilah asing, dan menambahkan catatan.
Halaman ini berisi halaman dari reading material yang di-bookmark oleh pengguna. Tujuannya agar saat pengguna ingin membaca kembali salah satu materi, pengguna tidak kesulitan untuk mencarinya lagi karena telah tersimpan di daftar bookmark.
Presensi Kelas
Pada menu Kelas Saya, pengguna dapat memilih untuk mengisi presensi dengan meng-klik salah satu tanggal pada kalender jadwal kelas. Berikutnya setelah kelas berakhir, pengguna dapat mengisi presensi dengan meng-klik salah satu tombol pilihan “Hadir” atau “Tidak”.
Tujuan presensi melalui aplikasi agar student Binar Academy tidak terlewat untuk mengisi presensi ketika selesai kelas, dikarenakan presensi yang sebelumnya dilakukan menggunakan google form membuat student seringkali lupa atau terlambat mengisi.
Feedback Kelas
Apabila pengguna hadir dalam kelas, pengguna akan dimintai untuk mengisi feedback kelas yang terkait dengan metode pembelajaran di kelas, penilaian terhadap fasilitator, dan materi yang diberikan selama kelas.
Setelah selesai mengisi presensi feedback, pengguna dapat melihat riwayat total kehadiran sehingga student Binar dapat men-tracking absensi agar tidak melebihi batas minimum kehadiran di kelas.
Challenge
Jika febelumnya student Binar mendapatkan informasi terkait challenge melalui grup kelas bootcamp, tetapi kebanyakan student terus bertanya berulang-ulang terkait deadline, link pengumpulan, dan poin-poin yang perlu dikerjakan pada challenge. Pada halaman ini, pengguna dapat melihat informasi terkait deadline pengumpulan, link pengumpulan, bagian yang perlu dikerjakan, dan detail dari challenge atau penugasan yang diberikan setiap chapter.
Forum Diskusi
Pada menu Forum Diskusi, pengguna dapat membicarakan topik tertentu dengan antar student Binar lainnya. Forum ini tidak terbatas pada kelas bootcamp yang diikuti, semisal student UI/UX juga dapat melihat forum diskusi dari Fullstack Web. Dengan adanya forum diskusi ini, harapannya antar student Binar dapat lebih aktif sharing ilmu, bertukar pikiran, maupun meminta feedback dari case study atau project yang dikerjakan.
Prototype
Selanjutnya kami melakukan proses prototyping, dengan menyambungkan setiap halaman terkait sesuai dengan flow sehingga terbentuk interaksi antar halaman pada desain. Prototype ini akan digunakan untuk validasi kepada pengguna, adapun prototype dapat diakses pada link berikut ini.
Stage 6: Validate
Tahap validasi dilakukan dengan menggunakan usability testing untuk memvalidasi solusi desain yang telah dibuat, menemukan ide baru untuk diterapkan selama proses pengembangan, serta memahami preferensi dan perilaku dari pengguna.
- Kriteria Partisipan: Student Binar Academy (aktif) dan pernah menggunakan aplikasi Binar Academy
- Cara: Remote Moderated Testing
- Teknik: Retrospective Probing (RP) — digunakan agar pengguna merasa nyaman saat mengerjakan task dan pertanyaan kepada partisipan terkait task yang telah diselesaikan akan dilakukan setiap partisipan telah selesai mengerjakan 1 task
Metric Testing
Metrik yang digunakan untuk penilaian dan pengukuran hasil testing:
- Completion Rate untuk mengukur tingkat penyelesaian task.
- Time Based Efficiency untuk mengukur waktu yang dibutuhkan oleh pengguna untuk menyelesaikan task dengan sukses.
- Overall Relative Efficiency diukur dari pengguna yang berhasil menyelesaikan task kaitannya dengan total waktu yang dibutuhkan oleh semua pengguna.
- System Usability Scale (SUS) untuk mengetahui tingkat usability dari aplikasi.
- Metode Grid digunakan untuk mengolah berbagai feedback saat testing.
Pertanyaan Saat Testing
Terdapat beberapa panduan pertanyaan yang akan kami ajukan kepada partisipan saat setiap selesai pengerjaan task.
Hasil Testing
Pada sesi testing ini, partisipan diminta untuk mengerjakan 5 task.
Berikut adalah narasi dari skenario tugas:
Setelah melihat-lihat materi gratis di Binar App kamu akhirnya tertarik dan mendaftar sebagai student Binar Academy. Setelah terdaftar, kamu kembali menggunakan aplikasi ini sebagai student untuk pertama kalinya.
Task 1 — Memilih Jadwal Kelas dan Fasilitator
Task 2 — Membaca Reading Material
Task 3 — Mengisi Presensi dan Feedback Kelas
Task 4 — Melihat Detail Challenge
Task 5 — Memberi Komentar pada Diskusi
Hasil Completion Rate
- Pada Task 4, terdapat 2 partisipan yang gagal menyelesaikan task.
Perhitungan System Usability Scale (SUS)
Hasil analisis skor SUS didapatkan nilai sebesar 8,3 dimana skor SUS dengan nilai lebih dari 80 termasuk ke dalam kategori “Acceptable”, nilai adjective ”Good”, dan mendapat predikat A. Sehingga, diperlukan perbaikan agar skor SUS desain baru Aplikasi Binar Academy setidaknya dapat masuk ke dalam kategori ”Excellent”.
Metode Grid
Apa saja permasalahan yang ditemukan? Lalu, bagaimana rekomendasi solusi yang diberikan untuk menyelesaikan masalah-nya?
Berikut permasalahan yang ditemukan pada banyak pengguna saat testing. Permasalahan dan rekomendasi akan diperbaiki pada tahap iterasi.
Iterasi Pertama
Dari beberapa temuan utama, kami kembali melakukan perbaikan sesuai dengan permasalahan utama yang ditemukan. Terdapat dua kali iterasi yang dilakukan dari proses testing.
Perbaikan Iterasi
Dari hasil testing pertama, kami melakukan perbaikan pada high-fidelity sesuai dengan temuan dan perbaikan transisi antar halaman pada prototype.
Presensi Kelas
Pada halaman ini dilakukan perbaikan pada flow untuk pengisian presensi, dimana sebelumnya presensi hanya dapat diisi jika meng-klik salah satu tanggal pada kalender, perbaikan dilakukan dengan menampilkan pop-up pada halaman Beranda agar tampak lebih eyecatching untuk pengguna.
Kelas Saya
Pada halaman ini dilakukan perbaikan tampilan reading material dan kategorisasi course pada bagian challenge, dimana diberikan gambar yang relevan dengan course pada reading material agar tampak lebih eyecatching bagi pengguna. Selain itu, perbaikan pada kategorisasi course tidak digunakan hanya untuk bagian challenge agar jika terdapat student Binar yang mengikuti 2 course bersamaan memiliki kategorisasi pada halaman Kelas Saya.
Challenge
Kemudian, pada halaman Challenge, bagian checklist diganti dengan label Aspek Penilaian. Pada halaman ini juga dilakukan pemindahan tombol “Lihat Detail Challenge” agar call-to-action lebih terlihat jelas.
Prototype Hasil Iterasi
Selanjutnya kami melakukan perbaikan prototyping dari hasil iterasi untuk divalidasi ulang kepada pengguna, adapun prototype dapat diakses pada link berikut ini.
Hasil Testing
Pada sesi testing ini, partisipan diminta untuk mengerjakan 3 task yang memiliki permasalahan pada testing sebelumnya.
Berikut adalah narasi dari skenario tugas:
Kamu adalah student baru Binar Academy, sekarang kamu sudah punya akses untuk membaca Reading Material level Gold & Platinum serta mengikuti kelas Binar App dan mengerjakan challenge.
Task 1 — Membaca Reading Material
Task 2— Mengisi Presensi dan Feedback Kelas
Task 3— Melihat Detail Challenge
Perhitungan System Usability Scale (SUS)
Hasil analisis skor SUS didapatkan nilai sebesar 7,85 termasuk ke dalam kategori “Acceptable”, nilai adjective ”Good”, dan mendapat predikat B. Dimana terdapat penurunan score SUS dengan hasil testing sebelumnya. Sehingga, diperlukan perbaikan agar skor SUS dapat masuk ke dalam kategori ”Excellent”.
Metode Grid
Apa saja permasalahan yang ditemukan? Lalu, bagaimana rekomendasi solusi yang diberikan untuk menyelesaikan masalah-nya?
Berikut permasalahan yang ditemukan pada banyak pengguna saat testing. Permasalahan dan rekomendasi akan diperbaiki pada tahap berikutnya.
- Perbaikan tampilan user interface secara keseluruhan mulai dari konsistensi icon, warna font, dan lainnya
Iterasi Kedua
Dari temuan utama, kami kembali melakukan perbaikan sesuai dengan permasalahan utama yang ditemukan.
Perbaikan Iterasi
Dari hasil testing kedua, kami melakukan perbaikan pada high-fidelity sesuai dengan temuan dan perbaikan transisi antar halaman pada prototype.
Kelas Saya
Perbaikan pada halaman ini dengan mengganti copywriting tulisan Chapter 3 menjadi Challenge 3, agar pengguna tidak salah fokus dengan label tulisannya dan berpikir bahwa itu bagian dari reading material.
Feedback Kelas
Berikutnya, perbaikan pada halaman ini dengan menambahkan tombol back agar pengguna tidak merasa frustasi karena tidak bisa kembali ke halaman sebelumnya.
Prototype Hasil Iterasi
Selanjutnya kami melakukan perbaikan prototyping dari hasil iterasi testing kedua, prototype ini akan divalidasi kembali ke pengguna untuk memvalidasi perbaikan ataupun mencari temuan baru.
Pembelajaran
Apa saja hal yang dapat kami pelajari dari project ini? Dan hal apa saja yang sekiranya dapat kami implementasikan agar proses pengembangan lebih baik?
- Melakukan empathize kepada pengguna pada tahap Understand. Pada case study ini, kami tidak melakukan in-depth-interview kepada student Binar lainnya untuk menemukan pain points atau goals, melainkan hanya menggunakan perspektif kami sebagai student Binar. Kedepannya kami akan mencoba berempati kepada student lainnya agar solusi desain sesuai dengan tujuan yang ingin dicapai.
- Memanfaatkan penggunaan Trello dengan lebih efisien. Dalam sprint ini, brainstorming yang kami lakukan terlalu lama sehingga backlog yang telah disusun pada trello dan di-attach pada setiap individu dalam tim tidak berjalan dan project lebih banyak dikerjakan bersama-sama. Jadi, pembelajaran bagi kami untuk melakukan time management lebih baik agar proses pengerjaan lebih efisien.
- Kesesuaian guidelines dalam desain. Karena pengerjaan desain juga cenderung dilakukan bersama-sama, terkadang kami melakukan kesalahan-kesalahan dalam menggunakan guidelines desain. Menjadi pembelajaran bagi kami untuk menekankan kepada setiap individu dalam tim untuk menggunakan styles desain yang telah ditentukan untuk menghindari banyaknya perbaikan.
Ada pertanyaan atau masukan terkait tulisan ini?
Saya sangat terbuka apabila Anda memiliki masukan atau saran untuk perbaikan produk atau case study ini. Silahkan tinggalkan komentar di bawah ini atau menghubungi saya melalui kontak yang saya cantumkan.
— Terima kasih telah meluangkan waktu untuk membaca tulisan ini. Enjoy! 😊
Dimounitif Nelaspaba
📧 dimounitifnelaspaba@gmail.com
Linkedin