Mendesain Aplikasi Lentera Ilmu — UX Case Study

7 min readOct 11, 2022

Disclaimer, karya yang saya buat adalah bagian dari program Skilvul Kampus Merdeka UI/UX Design dan saya bukan bagian dari pihak Challenge Partner

Latar Belakang

Aplikasi mobile adalah aplikasi yang memungkinkan pengguna melakukan aktivitas kapan saja dan dimana saja. Pada era Society 5.0 ini juga aktivitas seperti membayar tagihan, membeli barang keperluan rumah, sampai dengan kursus sudah bisa dilakukan dimana saja. Walaupun di era digital ini semua bisa dilakukan secara mobile, tetapi berdasarkan survey UNICEF 66% pelajar mengaku tidak nyaman belajar secara daring. Banyak faktor yang menyebabkannya seperti kurang fokus saat mendengarkan materi, cara penyampaian guru atau dosen yang disamakan seperti saat berada di sekolah, dan banyak hal lainnya.

Pembelajaran secara daring seharusnya memiliki cara tersendiri tanpa mengesampingkan porsi materi agar para pelajar atau mahasiswa bisa memahami apa yang disampaikan. Kemunculan edutech (kursus online) menjadi salah satu solusi untuk membuat pelajar atau mahasiswa ketika ingin menambah skill atau kemampuan ketika mereka merasa kurang mendapat apa yang mereka ingin kuasai di sekolah maupun di kampus. Maka dari itu kehadiran “Lentera Ilmu” diharapkan dapat membantu mengurangi beban yang dikeluhkan dan meningkatkan semangat belajar mereka yang ingin selalu bersaing pada era Society 5.0.

Identifikasi Masalah

Terdapat sebuah perusahaan X mengalami penurunan revenue sejak 1 tahun lalu dan tim riset telah melakukan riset kecil dimana hasilnya sebagai berikut :

User tidak senang dengan tampilan
Platform nya rumit untuk digunakan
Loading yang sangat lama
Susah mencari motivasi untuk belajar

Dengan hasil riset ini, Perusahaan X ingin merombak total platform nya dengan tujuan untuk lebih menjadi user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platform nya.

Objektif

Membuat learning path yang baik agar user lebih disiplin dan berkomitmen untuk menyelesaikan course.
Memotivasi user untuk lebih giat dan semangat belajar.
Membuat user nyaman untuk menggunakan aplikasi, dari mulai fitur sampai tampilan dari aplikasi.

Peran dalam Tim

Sebagai UI/UX Designer saya berkolaborasi dengan 3 orang yang sangat luar biasa yaitu Dwi Mukti Irawan, Syifa Qatrunnada, Qurrotoul Uyyun. Kami memiliki pembagian tugas yang berbeda — beda setiap tahapannya, tetapi kami juga selalu saling backup ketika salah satu dari kami mengalami kendala.

Design Process

Challenge kali ini kami menggunakan metode Design Thinking sebagai pendekatan dari Design Process yang kami lakukan. Sebelum itu kita harus mengetahui tentang apa yang dimaksud Design Thinking. Design Thinking adalah metode inovasi dari Human-Centered Design yang digunakan desainer untuk memenuhi kebutuhan pengguna sampai kelayakan strategi dan bisnis untuk mengubahnya menjadi peluang pasar dan penilaian dari pengguna (Tim Brown — 2008). Design Thinking memiliki beberapa tahapan yaitu Empathize, Define, Ideate, Prototype, dan Testing.

Empathize

Tahapan yang pertama yaitu Empathize yang bertujuan untuk membantu desainer dalam mencari tahu pandangan dan kebutuhan dari user dengan research sebelumnya mendefinisikan problem statement dan melakukan ideation. Berdasarkan research dengan metode kualitatif yang telah dilakukan, hasil yang didapat sebagai berikut.

User tidak senang dengan tampilan
Platform rumit untuk digunakan
Loading yang sangat lama
Susah mencari motivasi untuk belajar

Define

Pada tahap Define ini bertujuan untuk mendefinisikan permasalahan user dari hasil Empathize dan membuat How-Might We sebagai opportunity (peluang). Berikut ini adalah hasil dari Pain Points yang telah kami dapatkan.

Gambar di atas merupakan hasil yang didapatkan setelah brainstorming bersama tim. Beberapa sticky notes di atas merupakan Pain Points dari keluhan pengguna. Lalu Pain Points dikelompokkan untuk menjadi prioritas pemecahan permasalahan pengguna.

Hasil Brainstorming Prioritas Pain Points

Gambar di atas merupakan hasil yang didapatkan setelah brainstorming bersama tim. Beberapa sticky notes di atas merupakan beberapa How-Might We dari beberapa Pain Points.

Ideate

Tahapan selanjutnya yaitu tahap Ideate yaitu memulai brainstorming ide berdasarkan How-Might We dan brainstorming ide solusi yang akan diberikan. Berikut merupakan Solution Idea yang telah kami dapatkan.

Gambar diatas merupakan hasil yang didapatkan setelah brainstorming bersama tim. Terdapat hasil How-Might We dan beberapa sticky notes tersebut merupakan Solution Idea yang telah kami dapatkan. Terdapat juga stiker untuk mengelompokan level prioritas dari pengerjaan Solution Idea.

Hasil pengelompokkan prioritas Solution Idea

Gambar di atas merupakan Affinity Diagram untuk menentukan level prioritas Solution Idea setelah melakukan brainstorming oleh tim. Dikelompokkan dari yang harus segera dilakukan sampai dilakukan terakhir berdasarkan level usaha dan level value.

Prototyping

Tahap selanjutnya adalah prototyping yaitu proses untuk menyusun UI menjadi sebuah flow sesuai dengan ide solusi dan membuat prototype yang dapat digunakan untuk testing. Dimulai dari membuat user flow dan wireframe lalu membuat UI mockup sampai prototyping. Berikut userflow yang telah kami buat.

Gambar di atas merupakan user dari aplikasi “Lentera Ilmu” yang dibagi menjadi 4 bagian yaitu Startup Page, Navigation Page, Transaction Page, dan Learning Page. Dilanjutkan membuat wireframe, berikut wireframe dari aplikasi “Lentera Ilmu”.

Gambar diatas merupakan seluruh wireframe dari aplikasi “Lentera Ilmu” yang dimana nanti akan dijadikan kerangka UI Mockup. Sebelum membuat UI Mockup, kita harus mempersiapkan Design System dari aplikasi “Lentera Ilmu” agar memudahkan kita membuat UI Mockup. Berikut merupakan Design System dari aplikasi “Lentera Ilmu”.

Gambar di atas merupakan design system dari aplikasi “Lentera Ilmu”. Design System digunakan untuk memudahkan kita replace element yang digunakan berulang. Setelah itu dilanjutkan membuat UI Mockup, berikut UI Mockup dari aplikasi “Lentera Ilmu”.

Gambar diatas merupakan UI Mockup dari aplikasi “Lentera Ilmu” yang dibuat dari wireframe pada proses sebelumnya. Selanjutnya akan dibuat prototype untuk bisa testing.

Prototype Aplikasi Lentera Ilmu

Testing

Tahapan Testing ini merupakan proses untuk mengevaluasi setiap ide solusi dan melakukan interview atau online survey. Untuk online survey, kami telah mencari 2 responden untuk diminta melakukan Usability Testing pada prototype aplikasi “Lentera Ilmu”.

Responden 1 :

Nama : Talenta Farah W

Umur : 23 Tahun

Domisili : Bogor

Pekerjaan : Mahasiswa

Gambar diatas merupakan kegiatan testing dengan responden 1 yang menghasilkan review sebagai berikut.

Score Single Ease Question : 6
Aplikasi sudah user friendly
Colour Pallete sebaiknya diganti karena kurang cocok untuk aplikasi edutech yang terkesan kurang tegas

Setelah mendapatkan hasil testing dari responden 1, lalu dilanjutkan testing dengan responden 2. Berikut hasil dari responden 2.

Responden 2 :

Nama : Ahmad Nur Fahmi

Umur : 22 Tahun

Domisili : Sidoarjo

Pekerjaan : Mahasiswa

Gambar diatas merupakan kegiatan testing dengan responden 2 yang menghasilkan review sebagai berikut.

Score Single Ease Question : 6
Seluruh task layout dan informasi yang diberikan sudah baik mudah dipahami
Aplikasi membuat semangat untuk belajar
Responden menyarankan untuk menambah beberapa fitur seperti hapus akun dan fitur keranjang

Setelah melakukan Usability Testing kepada 2 responden, dilanjutkan untuk review ulang aplikasi dengan saran dari responden dan membenahi aplikasi agar sesuai objektif dari aplikasi.

Kesimpulan

Berdasarkan seluruh tahapan yang telah dilakukan, maka dapat disimpulkan bahwa semangat belajar khususnya belajar online tidak hanya tumbuh dari diri masing- masing tetapi juga platform yang digunakan harus membantu dari segi visual, fitur, dan lain sebagainya.

Selakunya air yang harus ditempatkan di tempat yang bersih agar tidak keruh, sama seperti pelajar di Indonesia juga harus diberi wadah untuk mereka lebih bisa mengeksplor diri mereka

UI/UX Design yang kami telah buat sebagian besar telah memenuhi apa yang menjadi objektif kami. Tetapi, masih banyak juga hal yang perlu review ulang agar kekurangan yang dilakukan saat Usability Testing dapat dibenahi.

Rekomendasi Selanjutnya

UI/UX Design aplikasi “Lentera Ilmu” masih harus dibenahi untuk menjadikan aplikasi ini sesuai objektif yang telah ditetapkan. Mulai dari interface sampai experience semua harus direview ulang agar bisa menjadi wadah untuk pelajar di Indonesia yang haus akan ilmu bisa mengeksplor diri mereka lebih baik. Walaupun kami hanya bisa membuat UI/UX Design saja, tetapi kami harap agar UX Case Study dari saya dapat berguna bagi perusahaan edutech di Indonesia.

Sekian dari saya Yogi Krisna selaku penulis, terimakasih karna telah membaca UX Case Study saya. Mohon maaf jika masih banyak kekurangan karena ini tulisan pertama saya di Medium dan semoga bisa improve untuk kedepannya😉

Referensi

Binus University, “Design Thinking: Pengertian, Tahapan dan Contoh Penerapannya”. Diakses pada tanggal 10 Oktober 2022 dari https://www.terasacademy.com/2022/01/pendekatan-pembelajaran-design-thinking.html

Medium, “Studi Kasus UX: belajar.id — Skilvul Virtual Internship UX Challenge”. Diakses pada tanggal 11 Oktober 2022 dari https://medium.com/@yuniedebora/studi-kasus-ux-belajar-id-skilvul-virtual-internship-ux-challenge-b689802aaad5