UI/UX Case Study — Membuat Aplikasi Belajar Online

Rizky Fadillah
6 min readMay 2, 2021

--

Case Study — Rizky Fadilah

Prologue

Pada masa pandemi ini kita harus memaksimalkan kemampuan kita untuk berkembang dan mengembangkan kemampuan, Aplikasi belajar Online memudahkan untuk terus mengembangkan kemampuan skill dimasa pandemi yang terus berkelanjutan ini.

|"Sebagian orang tetap miskin ilmu karena kemampuan buruk mereka untuk tetap diam". – Ibnu Qayyim

Ruang Belajar menjadi alasan mengapa kami membuat flatfom belajar online yang dapat diakses dengan mudah untuk semua orang, agar kita tetap mendapatkan ilmu terupdate dari pemateri terbaik agar dapat terus mengembangkan kemampuan soft skill dan hard skill di masa pandemi ini menggunakan media smartphone.

Goals UI/UX Case Study

Memudahkan semua yang ingin belajar dan terus mengembangkan skill di mana saja dan kapan saja dengan menyediakan materi dan pemateri terbaik, agar tercipta kenyamanan saat belajar saat mengunakan aplikasi Ruang Belajar, maka dari itu kami membuat aplikasi belajar online agar anak muda dapat terus mengembangkan kemampuan.

Hidup adalah tentang belajar, Jika Anda berhenti belajar, maka Anda hanya menjadi penikmat masa lalu

Roles

Rizky Fadilah ( me ) — UI/UX Designer.

Suwartanti — ( UI/UX Designer untuk satu kelompok tugas yang sama )

Kelompok kami membuat UI/UX Design sebagai tugas course dari Skilvul Impactbyte & Plan Internasional yang dibimbing oleh Hafidz Noor Fauzi

Dan Erricson Hardiansyah dikerjakan selama kurang lebih 3 bulan yang diadakan tahun 2021

Design Thinking Proses

Kami ingin memecahkan masalah yang berfokus pada user sebagai pelaku utama pengguna aplikasi belajar online, kami menggunakan design thinking dalam proses pembuatan UX design

1 — Empathize

Sebelum memulai mancari solusi, kita harus mengetahui apa tujuan dari yang ingin kitatunjukan, tahap ini kita harus memosisikan sebagai penguna, berempati terhadap pengguna yang mengunakan aplikasi belajar online, lalu kita berdiskusikan untuk memecahkan masalah yang sudah kita temukan.

User Persona

dalam tahap empathize ini kita melakukan user reasecrh kepada saudara hafiz, feedback yang didapat hanya sebagai masukan, saudara hafiz ini adalah User penguna yang mengunakan aplikasi belajar daring ( online ) yang bersedia berpartisipasi untuk memberi feedback, dan ini dalah hasil dari interview kami.

user persona

materi dalam aplikasi belajar online masih terbatas

sebagai orang yang menyukai fotografer, seperti hafiz ini ingin terus mengembangkan kemampuan fotografinya, dan belum banyak aplikasi belajar online yang menyediakan materi dan pemateri yang dibawakan oleh ahlinya dalam mengajarkan fotografi.

Tidak adanya reward atau feedback ketika belajar ataupun setelah belajar

sebagian pengguna tentunya ingin melihat hasil ketika sudah belajar? Kenapa ini diperlukan? Karena agar kita tahu sampai mana kemampuan kita berkembang setelah belajar, dan tentunya ketika ada hasil yang didapatkan setelah belajar user akan lebih termotivasi lagi untuk terus belajar.

2 — Define

Ditahap inikita harus bisa menjadikan diri sebagai user, agar dapat mencari solusi apa saja kekurangan yang ada dalam aplikasi sejenis, untuk dapat menetukan apa saja yang dibutuhkan oleh user ketika menggunakan aplikasi belajar online, tahap ini berlanjut dari user persona hingga user testing.

Kamu hanya bisa memahami orang jika kamu merasakannya di dalam dirimu sendiri

How Might We?

Dibawah ini adalah how might we yang telah kami temukan,

Catatan : note kuning adalah sebuah permasalahan dan note hijau adalah solusi

3 — Ideation

Membuat ide untuk memecahkan permasalahan atau mencari solusi kekurangan ketika user menggunakan aplikasi belajar online sejenis,

Target audiens utama adalah mahasiswa dan pekerja pada umur produktif 19 sampai 35tahun

Alur user flow ruang belajar yang kami buat

User Flow

4 — Prototype

Ini adalah hasil dari rancangan prototype yang telah kami buat, tampilan hanya menyerupai tampilan aslinya, untuk mendapatkan feedback ketika melakukan user testing ( ujicoba sebuah prototype untuk mendapatkan penilaian kepada user )

tapi mari kita awali apa saja persiapan aset yang dibuat didalam figma

komponen utama / asset yang dibuat

button / aset
icon

Dan berikut beberapa desain user interface (UI) kami

UI Landing Page
Registrastion
Login
Lupa kata sandi
Menu kelas
Check Out Kelas
Materi Pembelajaran
kelas dan quis
UI Menu
chat dan bantuan

5 — User Testing

User Testing

Prototype dibawah ini dapat diujicoba pengerjaan hanya di bagian inti dari tugas ( tidak semua bagian di dalam design ini dikerjakan, karna pengerjaan ini hanya contoh tapi dapat digunakan )

Hasil terakhir yaitu Testing. di sini kita dapat menilai dan meminta feedback untuk UI mobail apps yang sudah kita buat, apakah sudah sesuai dengan kebutuhan user, dan apakah sudah cukup nyaman dan mudah digunakan oleh user belajar online, ( User Testing ini diujicoba kepada user yang pernah mengunakan aplikasi belajar online sejenis )

Pada uji testing ini saya dan rekan saya melakukan user research dengan metode single ease question yaitu task questionaire yang digunakan untuk menilai tingkat kemudahan suatu fitur atau UI produk dari segi pengalaman user ketika mengunakan UI yang telah dibuat, dan ketika user pernah mengunakan aplikasi lain dan meminta pertimbangan tambahan untuk perbaikan UI / UX yang telah dibuat

Berikut adalah feedback data user testing

penilaian SEQ Question utama ini mencakup 5poin, ( Register , Login, browse, purchase, dan learn )

SEQ Question kemudahan pengunaan aplikasi

3 Matric skor dibawah ini mencakup kemudahan pengoprasian, fungsional dan tampilan design yang telah dibuat

matric skor

kesimpulan
Dari proses yang telah saya kerjakan bersama rekan saya, kami membutuhkan kan waktu yang cukup panjang mulai dari design thinking dan proses prototyping serta dia akhiri dengan user testing

berikut rangkuman hasil yang telah saya kerjakan,

Ditahap ahir testing saya mengetahui bahwa hasil kerja saya dan rekan saya belum cukup memuaskan, kenapa? karena hasil prototyping yang kami buat masih banyak kekurangan dari segi tampilan, fitur dan estetik tampilan ketika user testing aplikasi ruang belajar, dengan ini kami akan terus belajar dan memperbaiki UX design yang telah dibuat agar tercipta kenyamanan saat penggunaan aplikasi ruang belajar online.

Visual Design & Prototype= figma.com

Writing = medium.com

bootcamp learning for = zoom.com

User Testing = zoom.com

Fase pengerjaan ini dilakukan selama masa pandemi covid, dan bootcamp dilakukan secara online melalui zoom, nex UI UX designer akan saya coba dengan tema yang berbeda, waiting for other updates! Terima kasih telah membaca case study saya

Follow Me On

Instagram

Linkedln

Facebook

--

--

Rizky Fadillah

Beginner ui ux designer, learning result from inpactbyt skillvul and international plan