UX Case Study : Coursly Mobile App

Disclaimer : Project ini merupakan bagian dari program Studi Independent Batch 3 yang diselenggarakan Kementrian Pendidikan dan Kebudayaan, dengan learning track UI/UX Design Mastery di Skilvul. Setiap isi dari konten ini murni hanya untuk tujuan pendidikan.

Introduction

Halo perkenalkan, nama saya Wastian Salwa Anugrah Ramadan seorang mahasiswa semeseter 5 yang sedang mengikuti program studi independent di Skilvul dengan learning track UI/UX Design Mastery. Disini saya akan menjelaskan bagaimana proses pengerjaan challange yang diberikan. Selamat Membaca, Terimakasih.

Latar Belakang

Pada bulan Agustus, saya memulai perjalanan pendidikan saya pada program Studi Independent yang diadakan oleh Kemendikbud di Skilvul dengan learning track UI/UX Design Mastery. Dalam 8 minggu pertama kita diberikan materi, latihan, dan sebuah challange yaitu membuat design UI/UX untuk platform mobile application dengan tema Learning Management System (Online Course). Ini berdasarkan kriteria pengguna dan permasalahan yang dialami oleh user setelah dilakukan riset kecil.

Hasil dari challange diatas yaitu sebuah aplikasi yang bernama Coursly. Sebuah platform mobile application berbasis Learning Management System (Online Course) yang diharapkan dapat menjadi solusi atas permasalahan yang dialami oleh pengguna.

Objektif

1. Memahami permasalahan yang dialami oleh pengguna pada aplikasi sebelumnya.
2. Menjadi solusi atas permasalahan yang dialami user.
3. Meningkatkan efektivitas, kegunaan, dan kepuasan bagi pengguna untuk mendapatkan pengalaman yang lebih baik lagi.
4. Mengembangkan fitur pada aplikasi agar dapat memotivasi pengguna dalam belajar.

Peranan Dalam Tim

Dalam proses pengerjaan project ini, saya bekerja secara team bersama dengan 4 rekan mentee yaitu Sharfina Erma Nurgianti, Dwi Setia Ramadani, Dwi Achmad Maulana, dan Maullidah Hasanah. Kami memiliki tanggung jawab yang sama dalam setiap pengerjaan yang dilakukan secara bertahap, dimulai dari:

1. Riset pengguna
2. Mencari Solusi ide/brainstroming
3. Pembuatan User Flow dan Wireframe
4. Pembuatan Prototype
5. Testing dan interview

Design Proccess

Pada project ini, tim menggunakan Design Thinking sebagai metode pendekatan Design Proccess disetiap tahapannya. Design Thinking dapat membantu memecahkan permasalahan yang dialami pengguna dan bisa menciptakan solusi inovatif dengan memahami pengguna dan kebutuhannya. Beberapa tahapan dalam Design Thinking yang telah dilakukan tim adalah sebagai berikut.

1-Emphatise

Pada tahap pertama dalam proses pengerjaan Design Thinking ini adalah Emphatise. Disinilah kita mencari tau pandangan dan kebutuhan dari target pengguna dengan riset sebelum mendefinisikan permasalahannya dan mencari solusi ide nya. Tetapi, dalam project ini sudah disediakan challange brief yang didalamnya mencakup informasi mengenai kebutuhan dan permasalahan pengguna, sehingga team hanya perlu mencari informasi tambahan dengan menggunakan metode Secondary Research. Hasilnya dapat diakses menggunakan link dibawah ini.

Secondary Research

2-Define

Tahap berikutnya yaitu Define, dimana kita mendefinisikan permasalahan yang dialami pengguna dengan membuat Pain Points dan How-Might We dari hasil Emphatise menggunakan FigJam pada Figma. Bersama dengan team, langkah awal yaitu membuat Pain Points. Berikut adalah hasilnya.

Dari hasil Pain Points diatas, selanjutnya kita membuat How-Might We. Fase ini merupakan jawaban atau solution idea dari pain points yang telah kita buat sebelumnya. Dengan kata lain, How-Might We berisikan action atau hal yang akan kita lakukan terhadap permasalahan yang sudah didefinisikan pada fase pain points. Hasil dari How-Might We dapat dilihat dibawah ini.

3-Ideate

Pada tahap Ideate ini, anggota team melakukan eksplorasi dengan brainstroming berdasarkan How-Might We untuk menemukan solusi ide.

-Prioritization Idea

Setelah menemukan solusi ide berdasarkan How-Might We, selanjutnya membuat priotization idea sesuai dengan How-Might We yang sudah di vote oleh setiap anggota. Ini bertujuan untuk memprioritaskan ide yang akan dibuat berdasarkan value dan effort serta terbagi menjadi 4 yaitu “Yes, Do it now”, “Do it latter”, “Do last”, “Latter”.

-User Flow

Selanjutnya, saya dan team mulai masuk ke tahap pembuatan User Flow. Apa itu User Flow? Jadi User Flow merupakan diagram atau langkah-langkah yang harus dilakukan pengguna dalam menyelesaikan task. Disini masing-masing anggota membuat satu flow untuk setiap fitur. Hasilnya kita mendapatkan beberapa flow untuk Register, Login, Menu Home, Proses Pembelajaran, dan Transaksi Pembayaran. Berikut adalah beberapa User Flow yang dibuat oleh team.

-Wireframe

Setelah User Flow dibuat, tahap selanjutnya adalah membuat wireframe berdasarkan User Flow. Wireframe ini digunakan untuk mempresentasikan informasi dalam interface, selain itu juga untuk mempercepat proses ideation. Dan ini adalah beberapa hasil dari wireframe yang sudah dibuat oleh team.

4-Prototype

Pada tahapan ini, team terlebih dahulu mempersiapkan beberapa hal seperti pembuatan Styleguide Design System dan UI versi HiFi (High Fidelity) yang akan dijelaskan pada tahap dibawah ini.

-UI Styleguiude

Sebelum masuk ke tahap pembuatan UI-nya, tim terlebih dahulu mempersiapkan pembuatan Atomic Design System untuk mempermudah dalam pengerjaan HiFi dari UI-nya selain itu juga mempercepat proses kerja antara Designer dan Developer. Dalam Atomic Design System tim tidak hanya membuat Color Style dan Typography, tapi juga komponen yang akan digunakan nanti seperti Button, Input Field, Select Field, Checkbox, Avatar, Card, Tabbing, dan lainnya yang bisa dilihat pada gambar berikut.

-Mockup UI

Setelah Atomic Design System sudah dibuat, maka selanjutnya adalah tahap pembuatan HiFi Ui-nya berdasarkan wireframe yang sudah kita buat. Berikut adalah beberapa hasil HiFi dari UI yang telah team kerjakan.

Lalu tahapan yang paling rumit namun menyenangkan adalah membuat prototype nya agar clickable. Disini bertujuan agar desain UI yang telah kita buat bisa digunakan untuk mencoba dan mensimulasikan solusi desain yang telah dibuat oleh team. Melalui beberapa kali revisi, team mendapat hasil akhir yang cukup memuaskan dari simulasi ini. Anda dapat mencobanya disini.

Prototype Coursly

5-Testing

Tahapan terakhir yang team lakukan adalah testing. Hal ini bertujuan untuk mendapatkan feedback dari respoden/pengguna mengenai hasil design UI menggunakan metode In-Depth Interview. Team memulai dengan membuat Stimulus User Research yang didalamnya terdapat 4 bagian seperti Research Objective, Responden Criteria, Question List, dan Research Scenario.

-Research Objective

1. Memahami kebutuhan dan keinginan pengguna dalam mengikuti pembelajaran online.
2. Mengetahui pengalaman responden ketika mengakses pembelajaran menggunakan aplikasi Coursly
3. Mengetahui bagaimana penilaian tingkat efektivitas kegunaan, dan kepuasan untuk aplikasi Coursly baik itu sesuai task yang diberikan maupun secara keseluruhan
4. Mengetahui penilaian untuk hasil prototype dari aplikasi Coursly
5. Mendapatkan feedback dari responden untuk aplikasi Coursly

-Responden Criteria

1. Berusia 17–27 tahun
2. Berstatus sebagai Pelajar / Mahasiswa / Fresh Graduate / Karyawan
3. Berdomisili di seluruh wilayah Indonesia.
4. Memiliki kemampuan Bahasa Indonesia sebagai native language.
5. Memiliki kemampuan berkomunikasi yang baik.
6. Memiliki pengetahuan mengenai perkembangan teknologi saat ini.
7. Mempunyai pengalaman dalam melakukan pembelajaran secara Online.
8. Mempunyai kemampuan untuk memberikan penilaian terhadap objek.

-Question List

1. Mempersilahkan Anda untuk memperkenalkan diri
2. Apa profesi dan status Anda saat ini?
3. Apakah Anda pernah mengikuti kursus online?
4. Menurut Anda, seberapa penting mengikuti kursus online di masa kini?
5. Menurut Anda, media belajar apa yang tepat untuk digunakan ketika sedang mengikuti pembelajaran online?
6. Adakah hal yang membuat Anda memiliki ketertarikan untuk belajar menggunakan aplikasi pembelajaran online?
7. Seberapa sering Anda menggunakan Handphone untuk belajar?
8. Apakah proses pembelajaran dalam kursus online yang menggunakan aplikasi mobile dapat digunakan dengan mudah? Mengapa demikian?
9. Bagaimana ekspektasi Anda ketika menggunakan suatu aplikasi pembelajaran online yang belum pernah Anda coba sebelumnya?
10. Menurut Anda, apa saja yang menjadi penilaian atau poin utama ketika Anda mencoba aplikasi pembelajaran online?

-Research Scenario

1. Berikan salam saat bertemu dengan responden
2. Perkenalkan diri dan jelaskan maksud tujuan kegiatan yang akan dilakukan
3. Menjelaskan proses kegiatan yang akan dilakukan dari awal hingga akhir
4. Meminta responden untuk memperkenalkan diri mulai dari Nama, Pekerjaan/Aktivitas, dan Domisili
5. Melakukan wawancara dengan responden berdasarkan Question List diatas
6. Menjelaskan singkat tentang aplikasi Coursly
7. Memberikan link Figma atau Maze kepada responden dan minta responden untuk Share Screen
8. Menjelaskan singkat tentang apa yang harus dilakukan dan cara mengoperasikan Figma Prototype oleh responden

Setelah sesi interview dilakukan, selanjutnya meminta responden untuk menyelesaikan beberapa task yang sudah disediakan. Dalam menyelesaikan task tersebut, responden menggunakan prototype dari figma yang juga melakukan sharescreen agar team dapat melihat bagaimana cara responden menyelesaikan task.

Team menyiapkan beberapa task yang harus dikerjakan, yaitu:

[TASK 1] Meminta pengguna untuk melakukan proses pendaftaran, login, dan lupa password ke dalam aplikasi (berhenti di halaman Home) dan observasi apa yang dilakukan oleh responden

1. Tanyakan apakah ada kendala?
2. Apakah informasi pendaftaran, login, dan lupa password sudah sesuai dengan kebutuhan pengguna? Mengapa?

Berikut adalah hasil dari uji yang dilakukan pada Task 1

[TASK 2] Meminta pengguna untuk melakukan pencarian kursus UI/UX dan minta untuk melakukan transaksi hingga berhasil (berhenti di halaman Transaksi Berhasil) dan observasi apa yang dilakukan oleh responden

1. Tanyakan apakah ada kendala?
2. Untuk ukuran dan penempatan button apakah sudah sesuai atau ada kesulitan dalam melakukan proses tersebut?
3. Apakah informasi yang ditampilkan sudah memenuhi kebutuhan?

Berikut adalah hasil dari uji yang dilakukan pada Task 2

[TASK 3] Meminta pengguna untuk melihat halaman Kelas dan mencoba untuk mengikuti kelas sampai dengan mengerjakan quiz selesai. Lalu observasi apa yang dilakukan oleh responden

1. Tanyakan apakah ada kendala?
2. Apakah informasi yang ditampilkan sudah sesuai dengan kebutuhan pengguna? Mengapa?

Berikut adalah hasil dari uji yang dilakukan pada Task 3

[TASK 4] Meminta pengguna untuk melihat halaman Game dan meminta pengguna untuk memainkan Game yang tersedia (TTS Teka Teki Sulit)

1. Tanyakan kendala apakah yang pertama kali ditemui?
2. Apakah Game yang tersedia pada aplikasi menarik untuk dimainkan? Mengapa?

Berikut adalah hasil dari uji yang dilakukan pada Task 4

Setelah responden menyelesaikan task dan menjawab beberapa pertanyaan yang diberikan lalu masuk ke tahapan yang terakhir, yaitu:

1. Menanyakan tingkat kegunaan, kemudahan dan kepuasan dari responden setiap menyelesaikan alur Pendaftaran, Pencarian Kursus, dan Pembayaran dengan skala Likert
2. Menanyakan tentang tingkat Single Ease Question kepada responden
3. Penutup dan sampaikan terima kasih

Dan hasil lengkap dari tahapan testing yang telah team lakukan tercatat pada Record Data User Research. Dapat diakses melalui link dibawah ini.

Link Record Data User Research

-Hasil Testing

Dari testing yang sudah dilakukan sebelumnya, responden kami memberikan penilaian terkait Usability Testing menggunakan SEQ (Single Ease Question). Dengan skala 1–7, responden memberikan nilai 6 untuk keseluruhan tahapan testing, tingkat kegunaan, kemudahan, dan kepuasan dari hasil prototype yang telah dicoba oleh responden.