Case Study : Upskill an Online Course platform
sebagai bagian dari tugas mingguan kami. Saya, Muhamad Fajri salah satu mahasiswa yang mengikuti program magang Kampus Merdeka yang bekerja sama dengan PT Impact Byte Technology atau Skilvul, diberikan tugas untuk membuat sebuah UX Case Study.
🤝Pengenalan Upskill
Upskill adalah sebuah platform edukasi online yang menyediakan banyak kursus mulai dari programming, digital marketing, UI/UX dan lainnya. Upskill hadir untuk menjawab tingginya permintaan akan talenta digital pada era 4.0 dan juga Upskill mencoba menjawab permasalahan terkait dengan skill gap dengan menyediakan course-course yang sesuai dengan kebutuhan industri sekarang ini.
🤯 Permasalahan
berdasarkan dari project brief yang diberikan, tim Upskill merasa terdapat permasalahan pada produknya. hal ini didukung dengan menurunya revenue untuk satu tahun terakhir. Untuk itu Tim riset Upskill melakukan sebuah riset kecil dengan hasil sebagai berikut:
🔎 Objektif
Dari hasil riset yang didapat, Tim Upskill memutuskan untuk melakukan perombakan baik UI maupun sistem aplikasinya. dengan goals sebagai berikut:
🧑👩 Target Pengguna
berikut adalah profil dari target pengguna pada platform Upskill ini
🧑🎨 Peran Dalam Tim
peran saya dalam projek kali ini adalah sebagai UI/UX Designer. pada tahapan proses Define dan Ideate (s.d Crazy 8's) saya mengerjakannya bersama dua orang teman satu tim saya, pada tahap itu kami bersama-sama mendefinisikan masalah dari hasil riset yang diberikan pada project brief untuk tahapan selanjutnya kami melakukannya secara individu.
Tim : Jamaludin YasykurUI/UX Designer & Sultan Bayu Prasetyo UI/UX Designer
Tools : Figma, Docs, Spreadsheet, ATK
waktu : ± 8 Minggu
⚙Design Process
untuk metode design process yang kami gunakan adalah Design Thinking sebagai framework yang kami gunakana untuk memecahkan masalah yang kami hadapai. Jika berbircara mengenai Design Thinking maka setidaknya ada 4 hal yang terpikirkan oleh saya :
- Empati
- Menantang asumsi melalui testing
- Iterasi
- Problem Solving
Namun untuk lebih mengerti apa itu Design Thinking mari kita lihat definisi yang diberikan oleh Tim Brown beliau adalah salah satu sosok yang mempopulerkan metode ini.
“Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” — Tim Brown, CEO of IDEO
a picture is worth a thousand words
karena kami memakai framework Design Thinking maka selanjutnya kami mengaplikasikan Tahapan-Tahapan tersebut.
1 — Empathize
Tahap ini tidak kami lakukan karena research problem sudah disediakan pada project brief challange, Jadi untuk tahapan kami lewati.
2 — Define
Define adalah tahapan pertama yang kami lakukan pada tahap ini kami mencoba mendefinisikan masalah dari hasil riset yang disediakan pada project brief. untuk mendefinisikan masalah dari hasil riset, kami membuat pain point selanjutnya diikuti dengan membuat How-Might We.
2.1 — The Pain point
Pada fase Pain point ini kami memperluas masalah yang kami dapat
berikut adalah beberapa paint point yang kami buat.
2.2 — The How-Might We
Pada fase How-Might We kami mencoba memberikan solusi secara umum seperti namanya kami berasumsi bagaimana jika solusi ini diterapkan apakah akan berhasil. untuk menentukan mana solusi yang dirasa signifikan atau tidak kami melakukan brainstorming bersama-sama kemudian diakhiri dengan melakukan voting.
Berikit ini adalah beberapa How-Might We yang telah kami buat
3 — Ideate
HMW (How-Might We) sudah didapat kemudian kami masuk ke tahapa Ideate, pada tahap ini kami mencoba untuk memperjelas solusi yang telah kami buat ketika fase HMW setelah solusi-solusi yang lebih detail sudah dibuat kami mengkelompokan solusi-solusi tersebut berdasarkan katageori tertentu.
3.1 — The solutions
berikut adalah beberapa solusi yang telah kami kembangkan berdasarkan HMW yang telah kami buat sebelumnya.
3.2 — The Affinity diagram
semua solusi yang kami buat kemudian dikategorikan menjadi beberapa kategori
setelah selesai mengkategorikan solusi. kami memprioritaskan solusi-solusi menjadi 4 bagian dengan menggunakan diagram priority matrix
3.3 — The Crazy 8's
semua solusi sudah dikategorikan dengan baik bersama-sama barulah kami membuat wireframe secara cepat melalui metode Crazy 8’s prosesnya terjadi sangat cepat dalam 8 menit kami harus membuat 8 buah wireframe untuk masing-masing individu jadi total wireframe yang kami buat berjumlah 24 buah .
3.4 — Userflow
disini kami mendefinisikan bagaimana proses bisnis terjadi mulai dari onboarding, login, sign-up, mencari kelas, melakukan transaksi hingga menantang teman.
Home flow
Detail kursus
Transaksi kelas
Tantang teman
User flow
3.5 — Low Fidelity Wireframe
setelah membuat gambaran kasar dari balpoint dan kertas kemudian kami mendesain wireframe dalam bentuk digitalnya. mungkin akan terdapat perbedaan pada bentuk wireframe kertas dengan versi digitalnya karena pada pembuatan wireframe digital terjadi beberapa iterasi desain.
3.6 — Color guide and typography
warna yang saya pilih adalah warna ungu, karena warna ungu mewakilkan kedamaian pada warna biru dan semangat dari warna merah. warna ungu pun sering diasosikan dengan kebangsawanan, kemewahan dan ambisi.
untuk font Roboto menjadi pilihan saya harapannya font ini akan memudahkan pengguna dalam memahami copy writing karena mereka sudah familiar dengan bentuk font Roboto ini.
3.7 — The UI
⚠ Disclaimer: icon,illustrasi, status bar dan mockup yang saya gunakan berasal dari beberapa sumber diantarnaya : Plugin : Iconify, Illustrationts, unsplash, Content Reels, Story set by freepik , community file : Android phone mockup by Arthur, IOS 14 UI Kit dan Brasil Icon by Craftwork. dan juga gambar-gambar yang telah saya ambil dari internet semua itu bukanlah milik saya sendiri.
Splash & onboarding screen
ini adalah screen ketika pengguna pertama kali membuka app di screen ini pengguna akan disambut dengan hangat oleh splash screen upskill dan diberikan arahan melalui onboarding screen.
Home screen
ini adalah screen utama yang menyediakan banyak informasi yang berguna bagi pengguna. Untuk lebih jelasnya bisa dilihat pada gambar dibawah ini.
Tantang teman
ini adalah salah satu fitur yang kami buat dengan adanya fitur ini diharapkan dapat menghidupkan suasana belajar agar lebih menantang dan tidak monoton.
untuk screen yang lain mungkin dapat dicoba pada prototype dibawah nanti.
4 — Prototyping
Pada tahap ini adalah pembuatan prototyping. proses perancangan animasi, easing dan interaksi dilakukan ditahap ini. untuk lebih dapat memahami dengan jelas tujuan atau hasil dari tahapan ini kalian dapat mencoba prototype yang sudah disematkan dibawah ini.
5 — Testing
setelah semua tahapan sudah dilalui mulai dari define hingga tahap prototype kemudian saya melakukan user testing dengan tujuan sebagai berikut:
metode yang saya gunakan yaitu In-depth Interview dengan metric yang dipakai yaitu Single Ease Question (SEQ) saya membuat 8 buah pertanyaan terkait dengan testing kali ini dan memberikan 4 buah task yang harus dilakukan oleh responden guna mengukur tingkat kemudahan dan kebergunaan dari solusi desain yang telah saya buat.
singkat cerita dari hasil testing yang saya dapatkan saya memperoleh nilai dengan rata-rata 5.5 / 7 dimana ini adalah nilai standar untuk lolos pengukuran SEQ.
💡 Kesimpulan
berdasarkan dari awal proses pendefinisian masalah hingga pengetesan, hingga hasil yang didapat adalah desain solusi yang saya buat suduh cukup baik bagi responden walaupun demikian saya rasa masih banyak fitur-fitur yang harus diperbaiki meningat keterbatasan sumber daya dan energi yang mungkin berpengaruh pada solusi yang telah saya buat.
Yang saya pelajari selama mengerjakan project ini
membuat solusi desain seperti ini mengajarkan saya jika desain apapun itu pasti telah melalui proses analisis dan pengambilan keputusan yang tidak sembarang. Hal seperti ini merupakan hal yang sangat baru bagi saya.
⏭ Rekomendasi selanjutnya
aplikasi Upskill ini masih memiliki banyak kekurangan diantaranya sangat terbatasnya metode pembayaran dan dari segi gamification masih sangat terbatas fitur yang ditawarkan.
Hai, Terimakasih sudah membaca tulisan ini, ini adalah UX Case Study pertama saya dan juga pertama kalinya saya mengikuti kursus online untuk bidang UI/UX. Jangan sungkan untuk memberikan feedback atau komen pada kolom komentar dibawah ini ya. Terimakasih :)