UI/UX Design Case Study: Designing Learning Management System for Mobile App — Kind Brain

Maulana Azmi
7 min readOct 15, 2022

--

Merangcang tampilan aplikasi belajar Learning Management System (LMS) yang bernama “Kind Brain” yang berguna untuk mempermudah pengguna dalam prosem pembelajaran, sehingga merasa menyenangkan saat belajar dan dapat lebih interaktif di dalam kelas. Selain itu juga akan memberikan waktu yang fleksibel menyesuaikan kesibukan pengguna, serta menekan banyak biaya karena harga yang ditawarkan relatif murah dan terjangkau.

Disclaimer : Project ini berada dibawah naungan Kementrian Pendidikan dan Kebudayaan, Kampus Merdeka, dan Skilvul. Project ini adalah project untuk belajar dan bukan project untuk bekerja.

Application Background

Kind Brain adalah aplikasi Learning Management System (LMS) yang ditujukan untuk usia 18–40 tahun yang ingin mendalami bidang IT. Adanya LMS dapat membantu meningkatkan metode pendidikan di zaman sekarang, menghemat waktu dan biaya. Aplikasi Kind Brain sendiri memiliki sistem yang efektif dan akan membantu instruktur serta administrator untuk mengelola fungsi administrasi secara lebih efisien seperti pendaftaran pengguna, konten, kalender, akses pengguna, komunikasi, sertifikasi, dan pemberitahuan.

Kind Brain juga memiliki metode dan alat bantu pembelajaran yang lebih bervariatif, karena berbasis komputer LMS dapat membantu instruktur menyediakan alat bantu belajar dengan lebih bervariasi mulai dari teks, suara, gambar, video, hingga animasi agar pembelajaran menjadi lebih menyenangkan dan tidak membosankan. Learning Management System juga berfungsi untuk memberi pengguna kemampuan untuk menggunakan fitur interaktif seperti diskusi berulir, konferensi video, dan forum diskusi.

Project Problem Statement

Pada sistem pembelajaran yang ada pada saat sekarang ini berdasarkan riset yang ada dan beberapa responden menyatakan bahwa pembelajaran saat ini cukup membosankan dan kurang menarik. Masalah biaya juga tidak bisa dibilang murah, kadang harus membayar mahal untuk dapat mengikuti suatu kursus dan juga membayar biaya operasional seperti: biaya perjalanan, biaya materi cetak, biaya bulanan sekolah.

Research Objective

  1. Memahami apa yang pengguna mau dalam proses pembelajaran agar tidak terasa membosankan dan dapat lebih interaktif di dalam kelas.
  2. Memahami waktu yang dibutuhkan pengguna agar sesuai dengan jadwal mereka dan terlihat fleksibel.
  3. Mengidentifikasi permasalahan biaya, yang mana kebanyakan pengguna keberatan pada masalah biaya ini. Dapat menghilangkan rincian-rincian biaya yang tak perlu karena dengan LMS pembelajaran dapat dilakukan dengan online atau dari rumah.

Research Methods

  • Qualitative Data (In-depth Interview)
  • Secondary Research

Key Performance Indicator (KPI)

  • Single Ease Questions (SEQ)
  • System Usability Scale (SUS)
  • Conversation Rate

Respondent Criteria

Dalam penelitian ini kami menargetkan pengguna dengan umur 18–40 tahun, yang mayoritas masih menjalani pendidikan secara konvensional seperti anak kampus serta seorang freelancer yang ingin meningkatkan skill menjadi lebih baik lagi.

Roles and Responsibilities

Peran saya dalam poject kali ini adalah untuk membuat UI Design, User Flow, Wireframe, Research Scenario, dan Record Data User. Dalam project kali ini saya dibantu dan bekerjasama dengan 4 orang teman saya yaitu: Masroy, Bunga islamiya putri, Inez Cordellia, dan Yesicha Audria.

Tools

Berikut adalah tools yang kami gunakan selama proses pembuatan desain

Tools

List of Interview Questions

  1. Boleh diceritakan tentang diri anda? (Nama, Umur, Kesibukan, dll)
  2. Menurut anda apakah LMS itu?
  3. Ada berapa jenis atau nama aplikasi LMS yang anda ketahui? (Boleh tolong sebutkan)
  4. Apakah anda pengguna aplikasi LMS?
  5. Jika iya, aplikasi apa yang anda gunakan?
  6. Bagaimana tanggapan anda mengenai aplikasi yang anda gunakan?
  7. Jika tidak, kenapa anda tidak mencoba untuk menggunakan aplikasi LMS?
  8. Menurut anda bagaimana sistem pembelajaran yang ada sekarang ini?
  9. Apakah anda setuju atau sejalan dengan sistem yang ada ini?
  10. Mengapa?
  11. Dengan aplikasi LMS yang sudah ada kebanyakan, apakah itu sudah cukup membantu dan memudahkan para pengguna?
  12. Mengapa?
  13. Menurut anda apa saja yang perlu ada di aplikasi LMS?
  14. Tolong sebutkan dan jelaskan!
  15. Menurut anda seberapa penting LMS digunakan dalam pembelajaran di masa sekarang?

Design Process Through Research Result

Proses dalam design sendiri akan dipecah menjadi beberapa bagian, yang selanjutnya dapat membantu dalam proses manufaktur yang sebenarnya. Desain proses yang sukses harus memperhitungkan kesesuaian proses dengan tujuan project secara keseluruhan. Untuk mencapai desain proses yang baik, diperlukan strategi proses yang efektif, yang berhubungan dengan item baris tunggal yang diperlukan untuk memproduksi produk akhir. Strategi proses yang efektif berkaitan dengan pengadaan bahan baku, partisipasi pelanggan, investasi teknologi, dll.

1 — Empathize

Pada tahap pertama dilakukan analilis untuk mengetahui masalah apa saja yang user alami serta apa saja yang dibutuhkan yang dibuat secara singkat tanpa menggunakan banyak waktu. Kami mengambil referensi dari artikel yang terkait, feedbacks pengguna, serta analisis data guna mengetahui permasalahan yang ada.

Pertama kami mengambil referesi bersumberkan dari artikel yang terkait, feedbacks pengguna, serta analisis data guna mengetahui permasalahan yang ada dan dituliskan kedalam Secondary Research. Tujuannya adalah untuk mengetahui masalah apa saja yang ada pada project challenge yang kami buat secara singkat tanpa menggunakan banyak waktu.

Secondary research

Untuk melihat Secondary research selengkapnya silahkan klik disini

Pada tahap ini juga terdapat persona dari user yang berisikan masalah yang biasa ia hadapi, dan tujuan atau harapan dari user mengenai penggunaaan aplikasi LMS.

User Persona

Selanjutnya terdapat Emphaty Map yang merupakan sebuah alat visualisasi yang digunakan untuk mengartikulasikan apa yang diketahui tim produk mengenai pengguna. Empathy Map ini membantu dalam membangun pemahaman yang lebih luas mengenai aspek “mengapa” di balik kebutuhan dan keinginan pengguna.

Empathy Map

2 — Define

Pada tahap ini dilakukan pendefinisian masalah dari apa yang ada pada tahap Empathize sebelumnya, dan diimplementasikan dalam bentuk paint point. Paint Point adalah masalah spesifik yang telah dialami oleh user dalam berbagai aspek. Pada tahap ini kami telah memilah dan menentukan masalah yang user kami alami dan dibuatlah sebagi berikut.

Paint Points

Berdasarkan paint point sebelumnya, dilakukan analisis kembali mengenai kemungkinan solusi untuk permasalahan yang ada, kemudian dibuatlah How Might We untuk menghasilkan solusi kreatif dan efektif.

How Might We

3 — Ideate

Pada tahap selanjutnya dilakukan brainstorming dengan anggota tim agar dapat menemukan solusi yang efektif berdarkan hasil pada How Might We.

Solution Idea

Selanjutnya dapat dilakukan pengelompokkan data yang dikumpulkan selama penelitian atau ide yang dihasilkan selama Brainstorming yang data diambil dari Solution Idea. Solusi tersebut dikelompokan berdasarkan tema dan hubungannya kedalam Affinity Diagram.

Affinity Diagram

Setelah dibuatkan solusi dan solusi-solusi tersebut dikelompokan berdasarkan tema dan hubungannya, barulah dibuat Prioritization Idea. Hal tersebut berguna untuk membuat keputusan dengan mempersempit pilihan serta membandingkan pilihan secara sistematis melalui pemilihan, penimbangan, dan penerapan kriteria.

Prioritization Idea

Selanjutnya kami membuat design tampilan dengan waktu yang sikat yaitu 8 menit dengan menggunakan metode Crazy 8's.

Crazy 8's

4 — Implementation

Selanjutnya terdapat tahap Implementation, pada tahap ini dilakukan beberapa kegiatan diantaranya: membuat User Flow, Wireframe, UI Style Guide, dan Prototyping.

User Flow

User Flow merupakan sebuah serangkaian tugas atau langkah yang perlu pengguna lalui dari awal hingga akhir untuk dapat menjalankan suatu fungsi atau fitur. Berikut User Flow untuk design aplikasi yang kami buat.

User Flow

Wireframe

Setelah selesai membuat User Flow, barlulah masuk ketahap pembuatan kerangka tampilan atau Wireframe. Wireframe sendiri merupakan sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.

Wireframe

UI Style Guide

Selanjutnya adalah pembuatan UI Style Guide yang berupa dokumen berisi aturan-aturan tertentu dalam mendesain suatu user interface. Fungsinya agar dapat menyeragamkan pemembuatan suatu design menjadi konsisten sehingga dapat menciptakan user experience yang bagus dan juga dapat mencapai tujuan project secara optimal.

UI Asset
Color Style

Prototyping

Pada tahap ini dilakukan pengimplementasian ide-ide yang telah dibuat ke dalam tampilan antarmuka yang interaktif. Tujuan pembuatan Prototyping adalah untuk mengembangkan rancangan atau model produk sampai menjadi produk final yang bisa memenuhi kebutuhan serta keinginan user.

Prototyping

5 — Testing

Selanjutnya terdapat tahap ujicoba yang dilakukan menggunakan metode In-Depth Interview dan Usability Testing, dimana pada tahap tersebut kami jadi mengetahui apa yang user butuhkan dan rasakan saat mencoba aplikasi buatan kami. Kami menginterview 4 orang user yang berbeda dan berhasil mendapatkan jawaban serta pendapat dari mereka masing-masing.

Single Ease Question
Sistem Usability Metric
Report Testing

Kesimpulan

Kesimpulan yang bisa didapat adalah mayoritas pengguna puas dan tertarik dengan solusi yang kami berikan, dapat dilihat dari feedback nilai yang user berikan menunjukan nilai rata-rata 91,25 dari 4 orang user yang kami interview. Terlepas dari kekurangan-kekurangan kecil yang user keluhkan dimana kekurangan tersebut lebih kepada tampilan dari aplikasi yang telah kami buat. Sangat diharapkan kedepannya aplikasi LMS dapat berkembang lebih bagus dan menarik lagi agar dapat membantu meningkatkan kualitas dan metode pendidikan sekarang ini, sehingga dapat menciptakan individu-individu yang berintelektual dan berbobot nantinya.

--

--