Easy Mobile Learning App — UX Case Study

Yudi Tara
7 min readOct 24, 2021

--

Cover case study of UpgradeSkill App

Hi there, perkenalkan nama saya Yudi Tara, salah satu peserta program MBKM di PT Impact byte teknologi. Project ini adalah challenge pertama selama menjadi peserta magang pada program ini. Untuk memenuhi challenge pertama ini bertemakan pembuatan aplikasi pembelajaran online, yang saya beri nama UpgradeSkill. This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia.

Setiap orang memiliki passion masing-masing sesuai dengan apa yang mereka suka dan impikan. Namun pada suatu titik, mereka juga memiliki titik jenuh saat sedang mendalami bidang tertentu. Hal tersebut membuat seseorang ingin mempelajari hal lain diluar bidang mereka. Tetapi bukan hanya karena bosan saja yang menjadi salah satu faktor seseorang ingin belajar hal baru, bisa saja karena mereka hobi belajar banyak hal. Apakah kalian salah satu dari mereka?

Background

Dalam mendalami sebuah bidang, akan ada banyak tantangan yang mereka temui hingga dapat menguasai bidang tersebut. Bisa saja mereka mengalami kesulitan untuk menemukan materi atau topik yang ingin dipelajari. Anda juga akan merasa kesusahan untuk belajar dengan orang yang tepat dan berpengalaman dalam bidang tersebut. Selain itu juga anda dapat mengalami kesulitan untuk mengurutkan roadmap pembelajaran sehingga proses menimba ilmu akan lebih terstruktur dan tepat untuk dipelajari.

Ada banyak masalah yang perlu diatasi, termasuk masalah-masalah yang sudah disebutkan di atas. Saat ini ada banyak sebuah produk digital dalam bentuk aplikasi maupun website yang sedikit demi sedikit dapat membantu seseorang dalam mencari pembelajaran. Produk yang sudah dibuat pun pasti memiliki kelebihan dan kekurangan dalam pembuatan ataupun kegunaan. Pengguna produk juga memiliki pandangan mereka masing-masing, karena memiliki selera dan kemauan mereka sendiri. User juga memilih program yang lebih mudah dan lebih menarik untuk digunakan bagi user tentunya.

Pengguna yang dimaksudkan disini adalah mereka yang sudah masuk ke dunia profesional atau pengguna yang sudah memiliki pekerjaan tetap dan ingin menambah pengetahuan. Mereka sudah disibukkan dengan tanggung jawab pekerjaan yang padat, namun masih ingin belajar hal baru. Tentunya mereka membutuhkan sebuah produk digital yang dapat diakses dalam mobilitas yang tinggi, mudah digunakan, simple. Karena tipe pengguna diatas tentunya tidak ingin pusing lagi dengan hal ini.

Goals

UpgradeSkill Logo

UpgradeSkill hadir agar dapat berusaha untuk melengkapi dan melakukan improvement pada interface, pengalaman pengguna serta kekurangan yang ada pada produk sebelumnya. Goals dari project ini adalah dapat menyelesaikan masalah-masalah yang sering dialami oleh pengguna course app saat ini. Dengan hadirnya UpgradeSkill diharapkan dapat meningkatkan revenue dan pengguna bagi yang ingin belajar di luar bidang mereka. Dapat mempermudah proses belajar dan membantu memudahkan pengguna yang ingin belajar hal-hal baru.

Design Process

Dalam melakukan perancangan sebuah aplikasi UpgradeSkill saya menggunakan sebuah bantuan framework, yaitu design thinking. Mengapa menggunakan design thinking? Menurut saya metode design thinking efektif digunakan untuk untuk diterapkan dalam konteks permasalah ini. Dengan metode ini akan lahir sebuah ide-ide brilian dan inovatif yang dapat mengembangkan produk ini.

design thinking method

Empathize

Saya dan tim sudah melakukan riset sebelum melakukan design process ini. Research tersebut menggunakan metode kualitatif yakni in-depth interview. Dari hasil riset tersebut kami mendapatkan beberapa masalah yang dialami oleh user saat melakukan course online. Saya sudah merangkum beberapa permasalahan yang dialami oleh pengguna sehingga mendapatkan hasil seperti berikut:

  • Tampilan yang tidak menarik dan membosankan
  • Platform rumit untuk digunakan
  • Loading yang begitu lama
  • Tidak ada motivasi belajar saat mengakses course

User Persona

Saya sudah merangkum dari berbagai permasalahan pengguna dalam sebuah persona. Selain itu juga terdapat aktivitas yang dilakukan user dan apa yang mereka butuhkan dalam produk tersebut. Berikut adalah user persona yang dibuat:

1st user persona for upgradeskill
2nd user persona for upgradeskill

Persona diatas dapat membantu saya untuk fokus pada target user yang akan dibantu untuk mengatasi permasalahan yang dialami.

Define

Dari hasil riset yang sudah dilakukan pada tahapan empathize maka saya akan mendefinisikan kembali masalah-masalah yang dialami oleh user. Berikut adalah pains point user:

pain point of user

How-Might We

Tujuan proses How-Might We untuk membingkai berbagai permasalahan user agar dapat dipecahkan bersama agar menemukan ide-ide dan inovasi terbaik.

How-Might We process

Dari proses ini saya mendapatkan sebuah hasil bahwa aplikasi harus “Memiliki tampilan yang rapi, menarik, mudah digunakan dan dapat membuat pengguna termotivasi saat belajar serta pengguna dapat menyelesaikan pembelajaran dengan tepat waktu”.

Ideate

Brainstorming Ide

Pada tahap ini saya dan tim mengeluarkan semua ide yang ada didalam kepala berdasarkan apa yang sudah dapat dihasilkan dalam tahap HMW. Berikut adalah ide yang kami dapatkan saat melakukan brainstorming:

result of brainstorming idea

Affinity Diagram

Affinity Diagram adalah sebuah cara untuk memetakan apa yang sudah ditemukan berdasarkan fungsinya. Setelah mendapatkan banyak ide diatas maka saya dan tim riset melakukan mapping untuk ide-ide yang sudah dibuat.

Affinity map process

Memprioritaskan Ide

Pada tahap memprioritaskan ide ini ada 3 kolom untuk meletakkan ide, yaitu do now, do next, do last, later. Ide yang sudah dipetakan tadi akan dimasukan ke dalam petak sesuai prioritas. Dalam melakukan tahap ini tentunya tidak dapat dilakukan sendiri dan butuh adanya diskusi antara tim. Karena pasti setiap individu memiliki pendapat masing-masing dan akan disatukan dengan cara berdiskusi bersama sehingga mendapatkan hasil di bawah ini:

Prioritizing of Idea

Designing Solution with Crazy 8

Crazy 8’s adalah sebuah metode yang digunakan untuk membuat sketsa tentang ide yang telah dibuat berdasarkan tingkat prioritas. Gambar dalam bentuk sketsa ini akan merepresentasikan ide yang ada secara abstrak. Dari tahap inilah mulai terlihat solusi dari berbagai permasalahan yang ada.

sketch with crazy 8's

Prototype

Userflow

Saya pernah membaca sebuah postingan di suatu sosial media bahwa “Membuat userflow itu sama dengan memandu pengguna untuk dapat memecahkan permasalahan”. Userflow yang saya buat berbentuk wireflow dibawah ini dalam konteks user untuk mencari course hingga transaksi berhasil.

wireflow of UpgradeSkill app

Mengapa wireflow?

Sebelum membuat wireflow saya juga membuat dalam bentuk taskflow yang lebih mudah dan tidak memerlukan banyak effort. Namun dengan wireflow maka akan lebih terlihat mudah untuk pembaca melihat flow dari aplikasi beserta dengan gambaran awal tentang desain yang dibuat.

UI Styleguide

Fungsi styleguide disini adalah agar dalam membuat desain akan lebih konsisten dan mudah bagi engineer saat deploy produk. Dalam membuat styleguide ini saya memulai dari komponen terkecil atau atomic.

UI Styleguide for UpgradeSkill

Interface

Pada tahap ini adalah proses konversi dari bentuk wireframe ke bentuk user interface atau dapat juga disebut high fidelity design. Suatu proses untuk mempercantik desain agar lebih berwarna dan menarik. Tentunya dengan memanfaatkan styleguide yang sudah saya buat sebelumnya. Berikut adalah beberapa tampilan aplikasi:

User Interface of UpgradeSkill

Test

Memasuki tahap terakhir adalah testing, yakni sebuah proses dimana solusi yang sudah ditemukan dilakukan validasi kepada user secara langsung. Apakah solusi tersebut sudah sesuai dengan pengguna atau malah menambah permasalahan dari pengguna. Jika ada yang masih tidak sesuai dengan pengguna, akan dilakukan iteration atau mengulangi serta memperbaiki solusi sesuai dengan feedback yang diberikan oleh user.

Saya melakukan usability testing aplikasi UpgradeSkill kepada 5 user mulai dari tanggal 22 Oktober 2021 hingga 23 Oktober 2021. Untuk media yang digunakan adalah zoom meeting dengan jadwal yang berbeda-beda. Oiya, Kenapa harus 5 ? user berjumlah 5 adalah minimal jumlah yang dilakukan untuk testing. Jumlah tersebut sudah mencakup 75% tingkat keefektifan dalam melakukan testing.

Research Objective

  • Mencari tahu kebutuhan dan kebiasaan user saat belajar online melalui mobile phone
  • Mencari solusi dari masalah yang dialami user saat belajar online
  • Mendapatkan feedback langsung dari pengguna
  • Mencari tahu kekurangan apa saja dalam produk
  • Mencari tahu tingkat keberhasilan dengan SEQ

Saya menggunakan SEQ atau single ease question untuk usability metrics pada project ini.

Berikut adalah tabel hasil penilaian perancangan aplikasi dengan SEQ:

table of SEQ score from user
percentage of SEQ score

Iterate

Ada beberapa feedback dari user setelah melakukan Usability Testing. Tentunya feedback ini sangat berguna untuk diolah kembali sehingga menjadi sebuah bahan yang dapat menjadi perbaikan dan mengembangkan aplikasi menjadi lebih baik lagi.

Design Again

Proses ini didapat karena adanya ketidaksesuaian antara user. Tentunya perubahan ini berdasarkan apa yang user rasakan ketika usability testing. Namun tidak semua saya ambil untuk menjadi sebuah keputusan. Berikut adalah perubahan yang saya lakukan berdasarkan saran dari user:

iterate design

Conclusion

Dari hasil usability testing yang dilakukan kepada user, dengan hasil score SEQ tersebut maka saya meyakini bahwa aplikasi UpgradeSkill layak digunakan. Mungkin hanya itu yang dapat saya ceritakan melalui case study ini, mulai dari pengenalan, design process dan hasil yang didapat. Saya belajar banyak hal saat melakukan proses ini dan mendapat banyak insight tentunya. Saran dan kritik saya butuhkan untuk proses improvement kedepannya.

Terimakasih sudah membaca case study pertama saya melalui platform ini😁

--

--