Teach Me — UI/UX Case Study

Latar Belakang

Di masa pandemi seperti sekarang ini proses pembelajaran tidak lagi dilakukan secara tatap muka namun tetap dilaksanakan secara online. Dalam pelaksanaannya belajar secara online menimbulkan beragam permasalahan bagi pelajar maupun pengajar. Salah satu masalah diantaranya yaitu kurangnya materi yang diberikan sehingga menyebabkan kurangnya pemahaman mengenai pelajaran tersebut. Namun hal itu bisa diatasi dengan menggunakan media pembelajaran khusus secara online. Pada saat ini sudah banyak media pembelajaran online yang menyediakan berbagai jenis pelajaran maupun kursus untuk mengasah skill seseorang sehingga proses pembelajaran tidak terhambat dikarenakan kurangnya pemahaman akibat kurangnya materi. Oleh karena itu pada kesempatan kali ini kami membuat suatu UX Case Study yang membahas mengenai pembuatan aplikasi Kelas Online yang dinamakan Teach Me.

Objektif

1. Mencari tahu kebutuhan pengguna dalam melakukan pembelajaran online.
2. Mencari tahu kebiasaan pengguna dalam melakukan pembelajaran online.
3. Mencari tahu tingkat kegunaan, kemudahan, dan kepuasan dari solusi ide yang ditawarkan pada alur proses pendaftaran, pembelian kelas, pencarian kelas, dan pemilihan kelas berdasarkan kategori atau kelas populer.

Peran dalam Tim

Sebagai UX Designer yang berkolaborasi dengan 2 anggota tim yaitu Irvan Trinanda dan Maslah Wibowo, tanggung jawab saya dalam tim diantaranya:

• Menyusun pain point, affinity diagram , HMW dan crazy 8’s (bersama tim)
• Membuat user flow & wireframe.
• Mendesain UI & Menyiapkan prototype.

Design Process

Photo by ids from idseducation

Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan.

1 — Empathize

Dalam tahap ini, kami melakukan In-Depth Interview terhadap responden untuk mengetahui bagaimana pendapatnya mengenai pembelajaran yang dilakukan saat pandemi dan belajar secara online. Setelah melakukan wawancarahasil yang didapatkan berupa beberapa permasalahan yang dihadapi saat menggunakan aplikasi belajar online. Beberapa permasalahan ini kami masukkan sebagai pain point untuk diproses di tahap berikutnya.

2 — Define

Pain Point

Pada tahap define, kami menuliskan beberapa masalah yang sering dialami para pengguna aplikasi kelas online kemudian mengelompokkannya kedalam affinity diagram agar memudahkan untuk membuat HMW dan memberikan solusi terhadap permasalahan tersebut.

Affinity Diagram

3 — Ideate

Solution Idea

Di tahap ini, kami mulai menyiapkan berbagai solusi untuk menyelesaikan permasalahan yang telah dikelompokkan pada tahap sebelumnya. Kemudian membuat task flow untuk masing-masing solusi yang diberikan.

• User Flow

Task Flow Home

Pada flow ini, alur yang dikerjakan pengguna cukup sederhana yaitu hanya melakukan login dan pendaftaran hingga sampai ke halaman Home.

Task Flow Detail

Pada flow ini, pengguna bertujuan untuk menuju ke halaman detail dari suatu kelas, setelah dari halaman Home ada berbagai cara untuk menuju detail suatu kelas contohnya menggunakan menu pencarian.

Task Flow Kategori

Pada flow ini, pengguna dapat mencari suatu kelas berdasarkan kategori dari kelas tersebut. Alur yang dilalui yaitu dari halaman Home kemudian memilih kategori kemudian menampilkan daftar kelas-kelas yang berdasarkan kategori tersebut. Contohnya kelas UI/UX akan berada di kategori kelas komputer.

Pada flow ini, pengguna melakukan pembelian dari suatu kelas yang ia minati, tahap yang dilakukan adalah memilih kelas, memilih metode pembayaran dan melakukan pembayaran.

• Wireframe (Lo-fi)

Tahap berikutnya adalah membuat wireframe berdasarkan user flow yang telah dipersiapkan.

• User Interface (Hi-Fi)

Berikut adalah beberapa tampilan dari UI yang telah dibuat berdasarkan wireframe dan juga mengikuti user flow yang dibuat.

4 — Prototype

Prototype ini berisi semua desain UI mengikuti semua flow yang telah dibuat.

5 — Testing

Dalam melakukan testing metode yang digunakan adalah Usability Testing. Tahap-tahap yang dilakukan dalam melakukan wawancara terhadap responden seperti berikut:

1. Meminta responden mencoba melakukan testing terhadap prototype yang telah kami persiapkan.
2. Menanyakan tentang tingkat Single Ease Question kepada responde ndari setiap flow pada prototype yang telah dicoba.

Hasil yang didapatkan dari tes adalah dari keempat flow yang dikerjakan terdapat satu flow desain yang tidak lulus tingkat Single Ease Question karena hanya mendapat skor 5/7. Oleh karena itu kami melakukan perbaikan desain dari flow tersebut berdasarkan nilai dan komentar yang telah diberikan dimana permasalahan utama nya adalah tulisan yang terlalu kecil sehingga sulit untuk dibaca. Hasil perbaikan dapat diliat pada gambar dibawah ini, dimana yang awalnya huruf terlihat terlalu kecil maka kami lakukan penyesuaian agar dapat lebih mudah dibaca.

Perubahan desain pada halaman Detail Kelas

Kesimpulan

Kelas online merupakan salah satu solusi bagi pelajar untuk mempelajari hal baru ataupun mengasah skill mereka terutama pada masa pandemi seperti saat ini. Pada UI/UX Case Study kali ini kami membuat suatu aplikasi kelas online yang dinamakan Teach Me.

Setelah melakukan interview dengan responden kami mengetahui beberapa pain point yang dihadapi pengguna kelas online saat ini. Kemudian kami memberikan solusi sesuai dengan pain point yang telah dikumpulkan.

Kami berharap dengan adanya aplikasi ini dapat membantu pengguna untuk lebih nyaman merasakan pengalaman belajar secara online.