Studi Kasus UX: Skill Up (Aplikasi Pembelajaran Kursus Online)
Studi kasus UX yang saya tulis ini bertujuan untuk membagikan proses yang telah tim kami kerjakan dalam mendesain sebuah aplikasi kursus online dan juga sebagai pembelajaran saya mengenai design proses dalam pembuatan UI mulai dari proses ideate hingga testing.
Latar Belakang
Sebuah perusahaan X yang bergerak di bidang edutech sedang melakukan perombakan besar-besaran pada platform edukasinya yang meliputi tampilan dan struktur sistem. Perusahaan X merupakan pemilik platform edukasi yang memberikan berbagai macam kursus online untuk menyiapkan talenta-talenta digital di Indonesia dengan menyediakan kursus di bidang Programming, Digital Marketing, UI/UX Design, Product Management, dan masih banyak lagi. Akan tetapi, perusahaan X mengalami penurunan revenue sejak 1 tahun lalu.
Objektif
- Mengetahui permasalahan yang terjadi pada aplikasi perusahaan x sebelumnya .
- Memberikan solusi dari permasalahan yang telah ditentukan dan membuat userflow dari solusi tersebut.
- Membuat ulang aplikasi kursus online dari perusahaan x yang user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platformnya.
Peran dalam Tim
Pada penelitian aplikasi ini dalam beberapa fase saya berkolaborasi bersama 3 anggota tim lain yaitu Muhammad Hamaas Taqiyuddin, Evangelisca Trisna & Alif Syaha Pristyan. Masing-masing anggota tim kami memiliki tanggung jawab yang sama, yang meliputi:
- Mencari pokok permasalahan (Pain Points)
- Brainstorming mencari solusi dari permasalahan yang ditentukan
- Pengembangan Wireframe, UI Styleguide, UI Mockup
- Pembuatan Prototype dari UI Mockup
- melakukan Testing dari prototype yang dibuat
Design Process
Dalam proses desain ini, tim kami menggunakan metode Design Thinking sebagai pendekatan yang kami lakukan. Design Thinking sangat bermanfaat dalam memecahkan masalah yang sangat rumit dengan biaya yang murah. dalam design thinking ini kami dapat memikirkan banyak ide dalam sesi brainstroming dan ketika membuat prototype pada design thinking ini membuat dari yang paling sederhana (low-fidelity), hingga yang paling rumit (high-fidelity). Jadi kami menggunakan Design Thinking sebagai pendekatan design process karena mekanisme dalam setiap tahap desogn thinking dirancang untuk memaksimalkan setiap orang yang terlibat benar-benar keluar kreativitasnya.
1 — Empathize
Tahap pertama dalam metode Design Process yaitu tahap emphatize, dimana pada tahap ini kami mengumpulkan informasi mengenai kepuasan antarmuka dan pengalaman pengguna dalam menggunakan aplikasi yang pernah dikembangkan oleh perusahaan x. Pada tahap ini, kami tidak melakukan riset secara langsung karena informasi tersebut sudah tercantup pada challenge brief dari proyek yang diberikan oleh Perusahaan x.
2 — Define
Pada tahap ini kami mencari permasalahan utama dari problem yang sudah dijelaskan oleh perusahaan x tersebut, setelah kami mencari permasalahan tersebut kami tulis di bagian Pain Points
Setelah ditentukan Pain Points, kami mencari How-Might We atau HMW adalah sebuah tahap di mana anggota tim mengelompokkan berbagai permasalahan dengan sejenisnya, lalu kami memilih permasalah utama yang nantinya akan dikembangkan dengan teknik voting.
3 — Ideate
Tahap selanjutnya pada design thinking adalah tahap ideate. pada tahap ini saya dan tim melakukan proses brainstorming terhadap How-Might-We yang sudah kami tentukan dengan voting sebelumnya agar dapat menemukan ide solusinya.
Solution Idea
Setelah memilih HWM, kami melakukan proses brainstorm untuk menemukan ide dari HWM yang ditentukan. pada tahap ini kami mengumpulkan ide sebanyak-banyaknya yang nantinya akan diurutkan prioritasnya.
Affinity Diagram
Setelah menghasilkan ide sebanyak-banyaknya, kami mengelompokkan ide-ide tersebut ke dalam kategori yang cocok yang kami tentukan setelah melakukan brainstorming
Prioritization Idea
Pada prioritization idea ini, kategori yang ada pada affinity diagram diurutkan dari prioritas yang paling tinggi hingga paling rendah. Prioritas paling tinggi yaitu yang memiliki User Value paling tinggi dan effort paling rendah. dalam tahap ini prioritas paling tinggi ada pada tabel “YES, DO IT NOW”, prioritas selanjutnya ada pada tabel “DO NEXT”, selanjutnya yaitu “DO LAST”, dan prioritas paling rendah yaitu tabel dengan nama “LATER”. Pada tahap ini, kami hanya memiliki 3 prioritas, hanya sampau “DO LAST” saja karena ide yang kami tentukan tidak memiliki prioritas paling rendah.
Crazy 8's
Setelah menentukan prioritas, selanjutnya kami menentukan UI kasar dengan metode “Crazy 8's” dimana kami hanya punya waktu selama 8 menit dan mengerjakan 8 frame untuk menggambarkan konsep UI pada aplikasi yang nanti akan kami kerjakan sesuai dengan prioritas yang paling tinggi yang sudah kami tentikan sebelumnya. Selanjutnya kami melakukan voting dan frame yang memiliki paling banyak suara akan digunakan untuk menentukan userflow.
4 — Prototyping
Pada tahap prototyping, disini saya menggabungkan semua frame yang ada pada UI Mockup menjadi satu kesatuan system flow dengan ditambahkan beberapa animasi dalam perpindahan frame-nya yang nantinya dapat dioperasikan seperti bentuk aplikasi yang jadi secarah utuh.
Userflow
Userflow disini merupakan hasil voting dari Crazy 8’s sebelumnya. Disini kami mendapatkan 4 userflow yang memiliki paliing banyak suara diantaranya yaitu Home, Transaksi, Detail Kursus, dan Leaderboard.
Wireframing
Setelah pembuatan userflow, selanjutnya yaitu membuat sketsa kasar dari aplikasi yang akan kita buat nanti yang disebut dengan wireframing. pada tahap ini saya hanya membuat 3 frame yaitu login, register, dan home saja.
UI Styleguide
Setelah pembuatan wireframe, selanjutnya saya membuat UI Styleguide yang digunakan untuk aset komponen ketika membuat UI Mockups nanti. Hal ini dilakukan agar pengerjaan UI Mockups lebih praktis dan efektif. berikut ini merupakan beberapa UI Styleguide yang saya buat yaitu warna, tombol, dan ukuran font.
UI Mockups
Setelah melakukan pembuatan UI Styleguide, Saya membuat UI Mockups dimana pada proses ini memakan waktu yang tidak sedikit dan mengalami banyak perubahan ketika saya rasa sudah selesai. Tiap frame pada UI Mockups yang saya kerjakan ini berdasarkan pada ke-4 userflow di atas. untuk beberapa UI Mockups yang telah saya kerjakan yaitu pada gambar di bawah ini.
Prototype
Pada tahap prototyping, saya menghubungkan semua frame pada UI Mockups menjadi satu kesatuan yang urut dan dapat dioperasikan layaknya sebuah aplikasi smartphone yang telah jadi
interaksi yang ada pada UI Mockup saya menjadi sebuah kesatuan system flow. Kemudian dapat dioperasikan menggunakan figma menjadi sebuah prototipe yang interaktif sebagai berikut.
5 — UX Testing
Langkah terakhir yaitu melakukan testing. Saya telah melakukan ini kepada seseorang sebagai responden yaitu Rimba Diza Nurrohman dan menanyakan kepada responden seberapa puas dan mudahkah dalam pengoperasian prototype dalam skala 1–7 untuk menentukan Single Ease Question (SEQ). Berikut adalah User Stimulus dari UX Testing yang saya jalankan.
Respondent Criteria
- Berusia 18–25 tahun
- Pekerjaan sebagai Pelajar/Mahasiswa pada instansi apapun
- Berdomisili di seluruh wilayah Indonesia
- Memiliki kemampuan Bahasa Indonesia sebagai native language
- Memiliki tingkat pemahaman teknologi yang baik
- Sudah biasa menggunakan smartphone
Research Scenario
- Berikan salam saat bertemu dengan responden
- Perkenalkan diri dan jelaskan maksud tujuan kegiatan yang akan dilakukan
- Jelaskan alur proses kegiatan dari awal sampai akhir
- Meminta responden untuk memperkenalkan diri mulai dari Nama, Pekerjaan/Status, dan Domisili
- Melakukan wawancara berdasarkan Question List
- Menjelaskan singkat tentang aplikasi Skill Up
- Memberikan link Figma kepada responden dan minta responden untuk Share Screen
- Menjelaskan singkat tentang apa yang harus dilakukan dan cara mengoperasikan Figma Prototype oleh responden
- [TASK 1] Meminta pengguna untuk melakukan pendaftaran dan login ke dalam aplikasi (berhenti di halaman Home) dan observasi apa yang dilakukan oleh responden
- Tanyakan apakah ada kendala?
- Apakah informasi pendaftaran sudah sesuai dengan kebutuhan pengguna? Mengapa?
- [TASK 2] Meminta pengguna untuk melakukan pencarian kursus Pemrograman Java dan minta untuk melakukan transaksi hingga berhasil dan observasi apa yang dilakukan oleh responden
- Tanyakan apakah ada kendala?
- Tanyakan apakah ada bagian yang kurang jelas?
- Apakah informasi yang ditampilkan sudah memenuhi kebutuhan?
- [TASK 3] Meminta pengguna untuk melihat detail Kelas yang telah dibeli dan observasi apa yang dilakukan oleh responden
- Tanyakan apakah ada kendala?
- Tanyakan apakah tampilan aplikasi mudah dipahami?
- Apakah informasi yang ditampilkan apakah sudah sesuai dengan kebutuhan pengguna? Mengapa?
- [TASK 4] Meminta pengguna untuk melihat Leaderboard dan observasi apa yang dilakukan oleh responden
- Tanyakan apakah ada kendala?
- Apakah informasi yang ditampilkan apakah sudah sesuai dengan kebutuhan pengguna? Mengapa?
- Menanyakan tingkat kegunaan, kemudahan dan kepuasan dari responden setiap menyelesaikan alur Pendaftaran, Pencarian Kursus, dan Pembayaran dengan skala Likert
- Menanyakan tentang tingkat Single Ease Question kepada responden
- Penutup dan sampaikan terima kasih
Hasil UX Testing
Setelah melakukan UX Testing dengan responden, saya menanyakan nilai dari prototype saya dari skala 1–7 untuk menentukan Single Ease Question (SEQ) dan saya mendapat nilai 6 dimana nilai yang cukup pada sebuah prototype aplikasi
Kekurangan dalam Pengembangan UI Aplikasi
Setelah melakukan testing kepada seorang responden, aplikasi ini memiliki beberapa kekurangan, diantaranya adalah tidak ada kode invoice atau halam invoice ketika melakukan pembayaran, ketika daftar akun tidak ada halaman verifikasi email, dan tidak ada tombol back ketika masuk ke detail kelas
Kesimpulan
Pengembangan aplikasi kursus online ini belum memberikan pengalaman pengguna (UX) yang nyaman bagi beberapa pengguna. Oleh karena itu, saya mencoba mengembangkan konsep desain UI dengan tampilan yang lebih elegan dan memperbaiki kekurangan yang ada dalam aplikasi, selain itu, saya juga akan mengembangakan tampilan aplikasi ini lebih ramah ke pengguna dengan UI yang sederhana tetapi elegan.
Penutup
Pembuatan aplikasi ini merupakan ide dari seorang UI/UX pemula. jika ada kritik, pertanyaan, maupun saran bisa anda tuliskan di kolom komentar. Terima kasih, semoga apa yang saya tulis ini bermanfaat.