Sinaui — Studi kasus UX untuk aplikasi pembelajaran

Arbi Hernowo
5 min readMar 25, 2021

--

Projek ini lahir ketika saya mengikuti bootcamp UI/UX dari Sanbercode. Penggarapan projek berlangsung selama 2 minggu, dimana saya bertugas sebagai UX designer dan UI designer. Tantangan dalam projek ini adalah membuat platform yang dapat memberikan pembelajaran terbaik bagi calon UX designer.

Langkah Pertama, mengasumsikan siapa target user dan Kebutuhannya

Untuk mengakomodir semua asumsi mengenai produk, saya menggunakan Product Vision Board.

Product Vision Board

Saya mengasumsikan target user dari platform yang akan dibuat adalah mahasiswa atau masyarakat umum yang mempunyai keinginan untuk belajar UX Design. Mereka membutuhkan platform yang mudah diakses dan memiliki materi yang bagus. Selain itu, mereka juga membutuhkan forum untuk saling berbagi kesulitan yang dihadapi serta terdapat juga mentor yang dapat membantu mereka.

Validasi Asumsi

Saya melakukan riset kualitatif dengan mewawancarai 2 partisipan. Partisipan adalah mahasiswa tingkat akhir yang memiliki keinginan untuk belajar UX Design. Wawancara tersebut menghasilkan beberapa poin dan insight tentang produk yang diinginkan pengguna. Poin-poin yang didapatkan pada user research tersebut, kemudian dikelompokkan menggunakan affinity diagram.

Affinity Diagram

Setelah poin-poin dikelompokkan, ditemukan bahwa kebutuhan user adalah sebagai berikut:

  1. Menginginkan platform yang dapat diakses menggunakan smartphone
  2. Terdapat mentor yang mendampingi siswa
  3. Menyediakan forum untuk diskusi antar peserta

Sedangkan pain points yang ditemukan meliputi:

  1. Tempat belajar yang berkualitas tidak bisa dijangkau secara biaya
  2. Terlalu banyak teori
  3. Kurikulum dan materi yang ditawarkan tidak runut

User Persona

Untuk menggambarkan kebutuhan dan karakteristik dari target user, saya menggunakan user persona. User persona dibutuhkan agar hasil desain tidak melenceng dari target user.

User Persona

Perancangan Solusi

Setelah asumsi divalidasi melalui user research, maka selanjutnya adalah perancangan solusi. Perancangan solusi dilakukan berdasarkan insight yang ditemukan pada saat user research. Solusi akan mengakomodir kebutuhan, pain points, dan karakteristik target user.

Pencil Sketch

Pencil sketch atau corat-coret sketsa pada medium kertas menggunakan pensil dilakukan sebelum perancangan secara digital. Pencil sketch membantu penggalian ide lebih cepat dan menghasilkan banyak variasi.

Pencil Sketch

Wireframe

Hasil dari pencil sketch kemudian dieksekusi secara digital. Pada tahap ini, desain belum diberi sentuhan warna dan elemen belum terlalu detail. Hal ini berguna agar desain dapat dikerjakan lebih cepat, dan mendapatkan feedback yang lebih cepat pula. Berikut adalah beberapa wireframe yang saya buat:

Wireframe

High-Fidelity Mockup

Setelah selesai dalam merancang wireframe, kemudian dilanjutkan menambahkan detail elemen dan warna. Berikut adalah beberapa high-fidelity mockup dari platform pembelajaran UX design:

Registrasi

Pada proses registrasi, user dapat memilih antara mendaftar menggunakan akun Sinaui atau menggunakan akun Facebook/Google. Ketika user dapat mendaftar menggunakan akun Facebook/Google, maka proses registrasi akan menjadi lebih cepat dan mudah.

Splash Screen, Login, dan Sign Up

Home dan Notifikasi

Halaman Home menampilkan beberapa fitur seperti:

  • Search: User dapat mencari kelas yang ia inginkan dengan lebih cepat.
  • My Course: User dapat mengakses kelas yang sudah atau sedang diikuti.
  • Explore Category: Terdapat kategorisasi kelas, sehingga user dapat mencari kelas berdasarkan kategori.
  • Popular: User mendapatkan rekomendasikan kelas yang sedang populer.
  • Notifikasi: Halaman notifikasi akan muncul ketika user men-tap bell icon. User akan menerima notifikasi ketika user lain merespon post yang dibuat oleh user.
Home dan notifikasi

Akses Kelas

User dapat mengakses kelas setelah melakukan pendaftaran kelas. Kemudian user akan disuguhkan beberapa bab materi. Pada detail materi, user akan diberikan materi berupa artikel maupun video pembelajaran.

Class Detail

Community

Untuk mengakomodir kebutuhan user dalam berbagi informasi atau masalah yang dihadapi, disediakan fitur Community. Pada fitur ini, user dapat membuat post, merespon post user lain, dan saling berinteraksi dalam sebuah post.

Community

Halaman Lain

Selain beberapa halaman diatas, terdapat juga beberapa halaman lain seperti:

  • Halaman Settings: Pada halaman ini user dapat mengatur data personal, melihat sertifikat, hingga membaca FAQ.
  • Halaman Personal Data: Pada halaman ini user dapat mengatur nama, tempat & tanggal lahir, foto profil, dan bio.
  • Halaman Bookmark: Halaman ini digunakan untuk mengakses beberapa materi yang sebelumnya telah di-bookmark oleh user.
  • Halaman Explore Category: Halaman ini akan muncul ketika user men-tap “see all” di halaman Home.
Settings and Bookmark

Prototyping

Setelah high-fidelity mockup sudah dikerjakan, selanjutnya dibuat prototyping agar lebih menyerupai aplikasi asli. Sehingga akan membantu ketika dilakukan user testing.

Prototype dari design ini dapat diakses di sini.

Hal yang Saya Pelajari

Perancangan aplikasi ini jauh dari sempurna, masih banyak yang bisa ditingkatkan lagi. Mulai dari riset pada tahap awal, mungkin selanjutnya bisa mengajak 5 partisipan untuk user interview, atau menambahkan riset kuantitatif. Sehingga insight yang didapatkan akan bertambah.

Sekian case study kali ini. Ini merupkan case study pertama saya, saran dan masukkan tentu sangat saya tunggu. Terima kasih telah meluangkan waktu untuk membaca :)

--

--