UI/UX Case Study : Design Thinking — Online Education Apps

15 min readOct 24, 2021

Pengenalan

Halo, saya Vivi. Seorang mahasiswa semester 7 dan sebagai bagian dari masa kelulusan saya, saya sedang magang di program “Kampus Merdeka” yang diterapkan di skilvul.com dan mengambil peran sebagai UX Designer dalam program UX Challenge Partner.

Ini adalah UI/UX Case Study pertama saya dan dalam dokumentasi ini terdapat project brief yang diberikan oleh Skilvul. Tolong dukung saya dan beri masukan untuk proses desain ini, karena tidak ada yang sempurna..

Oke langsung saja ke kasusnya..

Latar Belakang

Saya mengerjakan proyek ini secara berkelompok dengan teman-teman saya Dimas Pradipta Putra dan Muhammad Ainul Yaqin. Brief UX Challenge yang diberikan ini merupakan bagian dari materi praktik pendidikan (contoh kasus).

Tools: Figma

Durasi: +- 5 minggu

Objektif produk : platform ini lebih user friendly saat digunakan, memiliki tampilan yang menarik dan dapat meningkatkan motivasi belajar pengguna saat menggunakan platform ini.

Disclaimer

Project ini adalah bagian dari program training UI/UX yang dilaksanakan oleh Skilvul, untuk program Kampus Merdeka yang diadakan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia.

Proses Desain

Untuk design process ini , kami menggunakan design thinking. Apa itu design thinking?

Alasan saya menggunakan design thinking karena design thinking ini merupakan salah satu metode pengembangan yang saya pelajari lebih awal. Kemudian karena saya juga familiar menggunakan design thinking ini sehingga mempermudah saya dalam melakukan proses design.

Empathize

Empati dalam Design Thinking merupakan hal yang sangat penting dilakukan karena kita harus mengetahui apa yang menjadi masalah pengguna. Di sini, kami mengesampingkan proses berpikir kami dan hanya fokus mendengarkan keluhan pengguna, masalah pengguna, dan kebutuhan mereka. Dalam kasus kami, UX ini telah memberikan ringkasan proyek mereka dan inilah kasusnya.

Project Overview

Perusahaan X merupakan pemilik platform pendidikan yang menyediakan berbagai kursus online untuk mempersiapkan talenta digital di Indonesia dengan menyediakan kursus di bidang Pemrograman, Pemasaran Digital, Desain UI/UX, Manajemen Produk, dan banyak lagi. Dan perusahaan ini sudah mengalami penurunan pendapatan sejak 1 tahun lalu. Tim peneliti telah melakukan penelitian kecil yang hasilnya :

Dan untuk user lensa dan metriksnya adalah :

Umur: 18–55 tahun
Pekerjaan : Karyawan/karyawati
Bahasa : Indonesia
Level ekonomi : menengah keatas

Dikarenakan kurang detail nya informasi dan untuk menguatkan informasi tersebut, disini saya juga melakuan penelitian dengan menggunakan metode user research. User research ini adalah sebuah metode penelitian untuk bisa mengetahui apa concern user mulai dari kebutuhan, kesan mereka serta harapan mereka pada sebuah aplikasi. Beberapa metode yang bisa digunakan untuk melakukan user research adalah :

In-depth interview
Focus discussion group
Observasi
Survey offline/online

Saya disini menggunakan metode in-depth interview sebagai sarana pengumpulan informasi di user research ini. Sebelum melakukan interview, pertama saya membuat beberapa pertanyaan terkait pembelajaran online dengan menggunakan Google Spreadsheeet.

Untuk lebih jelasnya, bisa klik di link ini.

Tools yang saya gunakan dalam melakukan in-depth interview adalah Google Meet. Ketika sedang melakukan interview, saya meminta user untuk berada di ruangan dan suasana yang kondusif, lebih baik menggunakan laptop dan meminta user untuk share screen. Hal ini lebih baik untuk mengumpulkan data yang dibutuhkan. Kemudian saya mulai dengan mempertanyakan identitas dari user, kemudian buat interview berjalan seolah-olah kita telah akrab dan buat user nyaman dengan kita. Jika user nyaman, mudah untuk mereka memberikan dan menjelaskan jawaban setiap pertanyaan yang kita tanyakan. Bahkan, terkadang kita bisa mendapatkan jawaban tidak terduga dari user.

Jadi, kita pergi ke tahap selanjutnya…

Define

Tujuan nya adalah :

menentukan objek masalah
mengidentifikasi kebutuhan pengguna

Setelah kita mengetahui alur dan apa yang terjadi di perusahaan ini, dan telah mengumpulkan informasi penting, saatnya untuk mengkategorikan masalahnya. Pada tahap ini, kami mulai melihat apa saja yang menjadi kendala ( ide ini muncul dengan melakukan competitive analysis). Competitive analysis ini adalah menganalisa kelemahan dan kekurangan aplikasi atau platform pembelajaran online yang lain, dan masing- masing dari kami memberikan pain point yang mungkin terjadi terkait hasil penelitian tim.

Kami melakukan diskusi kecil tentang hal-hal apa yang bisa menjadi pain point untuk masalah dalam project brief. Disini tools yang kami gunakan adalah Figjam.

Pain point yang kami tuliskan yaitu :

user tidak senang dengan tampilan
susah mencari motivasi dalam belajar
platform yang berat dan rumit untuk digunakan
sulit untuk mencetak sertifikat
durasi course terlalu singkat
tidak bisa bertanya dengan mentor terkait pertanyaan yang susah
tidak bisa menuliskan feedback terkait kelas yang diambil
tidak bisa menyimpan kelas
harga nya kurang terjangkau
identitas mentor tidak jelas dan materi course yang kurang menarik

Setelah menyelesaikan diskusi dan menentukan pain point, saatnya kita melakukan tahap How Might We (HMW). Pada tahap ini, kami berdiskusi dengan waktu yang telah ditentukan dan membuat pertanyaan berdasarkan pain points yang telah kami tulis.

Terlihat di atas bahwa ada beberapa sticky note yang telah dipilih, jadi polling yang kami lakukan untuk menentukan HMW apa yang akan kami ambil untuk menyelesaikan masalah. Kami memutuskan untuk berdiskusi dan pilihan HMW yang akan diberikan solusi adalah

Bagaimana meningkatkan motivasi belajar user?

Ideate

Ada banyak teknik yang bisa kita gunakan untuk mengeksplorasi ide kita :

Brainstorming
Analogy
Brain walking
Brain writing
Mind mapping
Scamper
Worst possible idea
lainnya..

Bagian ini membutuhkan banyak diskusi karena di sinilah semua ide dicantumkan. Kami menggunakan brainstorming, memikirkan dan mendiskusikan ide-ide solusi dan kemudian mengelompokkan ide-ide tersebut. Semua ide dikeluarkan untuk menghasilkan solusi inovatif yang dapat membantu memecahkan masalah. HMW yang telah diputuskan adalah Bagaimana meningkatkan motivasi pengguna dalam belajar? Ide-ide yang ditemukan akan didasarkan pada pengguna target yang telah kami cantumkan dalam project briefing. Kami melakukan brainstorming selama +- 30 menit dan menuangkan semua ide ke figjam. Untuk sementara, kami memiliki ide bagus.

Solution Idea

Disini terlihat ada beberapa sticker yang ditempel di sticky note. Kami melakukan pengelompokkan tiap-tiap fitur sesuai kegunaannya dan benefit nya.

Affinity Diagram

Jadi biarkan ide muncul dan ditulis, saatnya untuk memecahnya menjadi beberapa bagian. Kami membaginya menjadi bagian fitur dan menamainya.

Kami mengelompokkan fitur -fitur yang kegunaannya sesuai dan benefitnya sama.

hygiene feature
reward feature
payment feature
deskripsi kelas feature
disscuss and submission feature
serta feature lain

Prioritization Idea

Setelah mengelompokkan ide dalam beberapa bagian yang sama, tahap selanjutnya kami memutuskan untuk memprioritaskan ide yang mana untuk segera di eksekusi/dibuat wireframe/low fidelity nya. Kriteria dalam memutuskan ide prioritas ini berdasarkan user value dan effort kedepannya. Dan pembagian prioritas ide dibagi menjadi 4 kategori yaitu :

Yes, do it now -> bagian ini yang akan diutamakan dibuat rancangan desain nya terlebih dahulu.
Do next -> bagian ini akan dilakukan setelah bagian yang diutamakan untuk dikerjakan telah sukses dan sesuai dengan kebutuhan user.
Do last -> bagian ini adalah bagian fitur yang bisa ditambahkan terakhir nanti.
Later -> bagian ini adalah fitur update yang mungkin perlu ditambahkan untuk membuat aplikasi semakin mudah untuk digunakan. Penambahan beberapa fitur dan update fitur-fitur yang ada di bagian “yes, do it now”.

Bagian yang akan diprioritaskan dibuat terlebih dahulu adalah kategori “yes, do it now”, karena di dalamnya terdapat hal-hal inti yang menjadi penopang awal dari aplikasi. Bagian tersebut adalah

membuat leaderboard
membuat profile dari mentor yang mengajar
membuat promo kelas ketika mendaftar
memberikan deskripsi kelas dengan jelas mulai dari tools hingga silabus materi
memberikan sertifikat
membuat grup belajar kelas

Crazy 8's

Selesai mengelompokkan ide, kami mulai melakukan pembuatan low fidelity dalam bentuk Crazy 8’s. Pembuatan Crazy 8’s sendiri hanya membutuhkan sebuah kertas HVS yang telah dilipat menjadi 8 bagian ( inilah mengapa disebut 8’s) dan pensil. Jangan lupa siapkan penghapus. Crazy 8’s dilakukan selamat 8 menit. Jadi 1 menit hanya untuk menghasilkan 1 gambar. Mengapa 1 menit? Karena biasanya otak manusia bisa menggambar sesuatu ide secara efektif pada saat waktu terburu-buru. Saatnya mulai menggambar…

Saat menggambar Crazy 8’s keluarkan ide-ide terbaik kalian. Nah setelah itu, masing-masing dari anggota tim akan melakukan voting terkait gambar fitur yang menurut mereka sesuai. Setelah di dapatkan hasil dari voting, kami mulai membuat user flow.

Mengapa? Karena case ini belum memiliki alur perjalanan user ( user flow), maka disini kami menentukan alur perjalanannya user ketika akan mencoba aplikasi tersebut. Penentuan alur ini juga diikuti dengan fitur yang wajib ada di dalam aplikasi beserta 1 fitur tambahan dari ide kelompok yang dibuat di akhir.

Dari business feature ini akan ditambah dengan salah satu ide tambahan yang telah kami voting yaitu membuat fitur Leaderboard. Leaderboard ini diharapkan bisa meningkatkan motivasi pembelajaran siswa/mahasiswa/umum dalam mempelajari bidang yang ingin mereka dalami.

User Flow

User Flow adalah langkah-langkah yang diaplikasikan dalam bentuk sebuah sketch atau wireframe yang dilakukan user dalam menyelesaikan sebuah task. Bentuknya adalah diagram alur. User flow dibagi menjadi 3 jenis yaitu:

Task flow -> biasanya hanya untuk 1 user dengan 1 task
Wire flow -> berbentuk wireframe dengan memiliki flow arah panah
User flow -> berbentuk flowchart

Kami menggunakan user flow dalam membuat alur perjalanan user di aplikasi ini.

Seperti yang kita lihat, untuk bentuk flowchart ini dibagi menjadi 3 shapes yaitu :

lingkaran -> menandakan awal/akhir dari sebuah flow
persegi -> menentukan tahapan yang dilalui user
belah ketupat -> menandakan suatu kondisi ‘if”, apa yang terjadi jika user melakukan task ini atau gagal melakukan task ini.

Prototype

What is prototype?

Tujuan dari pembuatan prototype ini adalah :

produk benar-benar bagus sebelum dibuat oleh developer
user bisa melihat bentuk dan flow dari aplikasi tanpa instalasi terlebih dahulu
mendapatkan user feedback agar ketika di develop dan launch sudah sesuai dengan user need.

Sebelum membuat prototype, masing-masing dari kami telah memilih bagian yang akan dirancang secara sendiri-sendiri. Berikut adalah pembagian dari user flow :

Pada user flow ini, kami membaginya menjadi:

Saya ( Vivi) -> membuat wireframe dari register , login dan home
Dimas -> membuat detail course (sambungan dari home), silabus pembelajaran, form transaksi, notifikasi pembayaran gagal
Ainul -> membuat notifikasi pembayaran sukses, fitur kelas, fitur quiz, dan leaderboard

Akan tetapi perlu saya disclaimer dari awal bahwa ini adalah proses yang di lakukan pada kelompok. Ketika melakukan design secara individu nanti, masing-masing dari kami akan membuat design UI berdasarkan seluruh user flow.

Wireframe

Wireframe adalah gambaran suatu aplikasi tiap screen yang akan dikembangkan lagi menjadi visual design. Wireframe hanya memiliki 3 warna yaitu abu, putih dan hitam. Pada wireframe ada rancangan desain gambar yang isinya sudah hampir menyerupai sebuah screen dan komponen dari wireframe itu sendiri belum memiliki gambar, warna dan hanya tulisan dummy atau biasanya disebut lorem ipsum.

Setelah membagi user flow, saya mendapatkan bagian untuk membuat wireframe pada halaman register, login dan home aplikasi pembelajaran online ini.

Sebelum masuk pada tahap UI, sebelumnya saya membuat design system terlebih dahulu.

Apa itu Design System ?

Design system adalah kumpulan komponen yang akan digunakan pada sebuah UI yang memiliki kekonsistenan dan standarisasi yang jelas dan terintegrasi pada sistem. Dengan membuat design system, visual design yang akan kita buat bisa konsisten dan pengerjaan UI menjadi lebih cepat. Pembuatan design system dalam figma biasanya dibuat dan dimasukkan dalam fitur Component, disini kita bisa tinggal drag and drop saja ke screen kita.

Atomic Design

Menurut beberapa sumber, atomic design adalah sebuah metode merancang desain yang terinpirasi dari pengembangan sebuah atom menjadi molekul kemudian berubah menjadi organisme yang lebih besar. Dalam atomic design, terrdapat dasar-dasar dari pembuatan design system.

Atom Component

Pembuatan component yang paling kecil biasa dimulai dari pemilihan typography, warna apa yang digunakan, pembuatan button, dan lain-lain.

2. Molecul Component

Pada molecul component, pembuatan design system berkembang. Biasanya isi dari molecul component ini adalah penggabungan dari atom component. Berikut adalah molecul component yang saya buat untuk aplikasi ini.

3. Organism Component

Organisme ini sudah tampak seperti sebuah design system yang sebenarnya. Isi dari organism component ini misalnya header yang terdiri dari daftar menu, search bar dan tombol login.

Setelah membuat design system, maka dilanjutkan membuat UI Design berdasarkan wireframe yang sudah dibuat. Untuk keseluruhan user flow, saya hanya membuat wireframe pada bagian register, login dan home saja.

UI Design

Adalah bentuk interface desain yang sudah memiliki gambar, tulisan jelas, penggunaan component yang dipakai, penggunaan warna dan beberapa ilustrasi serta gambar untuk mempercantik tampilan. Berikut adalah hasil dari UI Design yang telah saya buat.

UI Design selesai. Kemudian saya membuat prototype berdasarkan user flow. Ini adalah live prototype yang bisa anda coba.

Prototype UI Design

Test

Akhirnya kita sudah masuk bagian akhir dari design thinking. Prototype kita sudah siap,, nah sudah tentu kita ingin tau dong bagaimana sih pendapat orang mengenai rancangan desain aplikasi yang sudah kita buat. Di bagian testing ini, kita juga akan membutuhkan user feedback agar hasil desain kita semakin user friendly dan menambah wawasan akan pemikiran user.

Metode yang saya gunakan untuk melakukan testing ini adalah user research dengan pengukuran menggunakan usability testing. User Research sudah kita lakukan pada tahap empathize. Pada tahap usability testing, ada beberapa metode yang kita lakukan untuk mengukur kebergunaan produk yaitu SEQ dan SUS Score. Metode yang saya gunakan yaitu SUS Score. SUS Score adalah kuesioner yang diberikan kepada user untuk diisi dengan nilai 1–5 dimana :

Disini tools yang saya gunakan yaitu Google Form dengan format pernyataan yang sesuai dengan kaidah pernyataan. Format ini bisa di sesuaikan dengan aplikasi/produk yang dirancang. Berikut 10 pernyataan yang saya buat :

Penghitungan SUS Score

Setelah user mengisi google form atau tools lain yang bisa kalian gunakan, kalkulasikan setiap data untuk mendapatkan hasil score dengan cara :

a. Untuk setiap pernyataan bernomor ganjil, kurangi 1 dari skor -> N-1

b. Untuk setiap pernyataan bernomor genap, kurangi 5 dari skor -> 5-N

Hasil akhir -> Tambahkan nilai jumlah dari setiap pernyataan ganjil dan genap, kemudian dikalikan dengan 2,5. Setelah ini, saya akan merincikan perhitungan dari data yang saya dapat sesuai dengan kalkulasi penilaian SUS Score.

Contoh :

Pada pernyataan nomor satu(ganjil), user memberikan angka 4. Jadi, perhitungannya adalah 1– 4.

Pada pernyataan nomor dua(genap), user memberikan angka 3. Jadi, perhitungannya adalah 5–3.

Lakukan sampai nomor terakhir. Jika sudah, maka hitung total dengan :

SUS SCORE = [(hasil jumlah semua pernyataan ganjil)+(hasil jumlah semua pernyataan genap)]* 2,5

Interpretasi SUS Score

Untuk mengetahui tingkat keberhasilan kita dalam membuat suatu produk atau aplikasi yang sesuai dan sudah memenuhi kebutuhan user, berikut adalah grading SUS Score nya :

Sebelumnya, saya telah membuat task scenario.Task skenario ini adalah alur yang akan dilalui/dilakukan user ketika mencoba aplikasi kita. Sebelum memulai tahap ini, saya membuat stimulus user research. Stimulus ini gunanya sebagai alur skenario kita dalam melakukan interview, usability testing dan melakukan pengisian google form. Klik ini untuk melihat stimulus user research saya.

Hasil

Setelah saya melakukan penghitungan jumlah sus score, maka di dapati bahwa aplikasi atau rancangan desain UI/UX yang saya lakukan masih belum memenuhi ekspektasi atau menyelesaikan kebutuhan user. Saya melakukan usability testing ini kepada 2 respondent dengan kriteria yang sama :

Umur : 21 & 22 tahun
Pekerjaan : Mahasiswi

Rancangan desain yang telah saya buat sedikit membuat respondent bingung, dan ketika melakukan task nya ada yang tidak sesuai dengan harapan saya. Saya juga bertanya apa kendala ketika menggunakan aplikasi ini dan rata-rata dari mereka menjawab bahwa bingung ketika menggunakan aplikasi ini karena flow yang tidak biasa mereka gunakan di aplikasi lain.

Task scenario 1 : Melakukan pendaftaran dan login pada aplikasi

Kendala : User bingung ketika ingin menggeser splash screen karena user mengira harus diklik, kemudian user bingung karena tidak menemukan register dan login yang pada umumnya terdapat di bagian awal aplikasi. Pada aplikasi saya, register dan login di taruh pada bagian setelah home.

Mengapa kami sekelompok sepakat menaruh screen register dan login setelah screen home?

Karena kita ingin membuat user melihat-lihat kelas apa yang mungkin membuat mereka tertarik untuk dipelajari tanpa harus membuat akun terlebih dahulu. Mereka juga bisa mengetahui kelas yang sedang ada promo dan kelas yang sesuai untuk user.

Task scenario 2 : Melihat kelas dan melakukan transaksi pembayaran

Kendala : 2 repondets banyak mengklik ke berbagai tempat untuk melihat bagian mana yang bisa di klik, mereka melewati bagian dari profile mentor dan langsung menuju buy now. Untuk alur transaksi pembayaran ini, user tidak mengalami masalah yang berarti.

Task scenario 3 : Course Overview

Kendala : setelah menerima notif success page, user diarahkan menuju fitur “My Class”. Setelah dari my class feature, mereka melanjutkan flow sampai pada tahap quiz. Mereka bingung karena tidak ada arah menuju quiz, namun progress bar masih menunjukkan 99% ( materi belum selesai), setelah user klik bagian materi, screen berganti menjadi quiz. Setelah menjawab quiz, user tidak mengerti akan diarahkan kemana. Setelah mengklik sembarang dan mendapat hint di prototype, baru user mengetahui arah selanjutnya.

Task scenario 4 : Leaderboard Overview

Kendala : user tidak mengalami kendala yang bearti dan flow berjalan lancar..

Dari hasil ini, saya mengalkulasikan SUS Score yang telah user isi pada Google Form dan hasilnya saya mendapat grade “E “dengan Adjective Rating “awful”,, ya sedih sebenarnya, namun bagi saya ini adalah cambuk untuk saya belajar lebih giat lagi bagaimana menjadi seorang UI/UX Designer yang baik dan memberikan solusi yang bagus untuk mereka.

Untuk hasil lebih lengkapnya, bisa klik link ini. Link ini berisikan record video interview saya dengan respondent, hasil user interview, kalkulasi sus score serta apa yang terjadi selama melakukan interview.

Apa yang dilakukan selanjutnya?

Setelah saya mendapatkan feedback dari user, saya berencana untuk melakukan redesign aplikasi saya berdasarkan hal-hal yang menjadi kendala user dan membuat flow aplikasi sesuai dengan yang biasa digunakan. Interasi design ini akan saya lakukan untuk beberapa minggu kedepan dan mudah-mudahan bisa saya tampilkan hasilnya disini.

Kesimpulan dan Penutup

Kesimpulan yang bisa didapat :

Dalam design process ada beberapa metode yang bisa digunakan. Disini saya menggunakan design thinking dan tahapannya yaitu empatize, define, ideate, prototoype dan test.
Dalam tahap empatize, kita melakukan user research (dengan alur dari stimulus user research) dengan metode in-depth interview dan mendapatkan beberapa pain point. Pain point ini mencakup kebutuhan user dan motivasi mereka.
Dalam tahap define, kita mendefinisikan pain point tersebut dan melakukan diskusi untuk menentukan HMW. Kemudian memutuskan How Might We kami adalah : Bagaimana meningkatkan kan motivasi user dalam belajar?
Dalam tahap ideate, saya dan tim melakukan brainstroming untuk menemukan ide solusi yang bisa mengatasi pertanyaan tersebut. Setelah menemukan beberapa diantaranya, kami mengelompokkan ide tersebut di affinity diagram dan membaginya di dalam kategori prioritize idea. Fitur yang diambil untuk meningkatkan motivasi ini adalah Leaderboard. Kami juga menentukan user flow yang akan dilakukan user ketika menguji coba prototype yang kami buat.
Dalam tahap prototype, kami membagi user flow menjadi beberapa bagian dan setiap bagian dibuat wireframenya. Untuk pembuatan UI Design, kami membuat desain seluruh user flow. Terlebih dahulu saya membuat wireframe, design system kemudian baru ke UI Designnya. Setelah selesai, saya menggabungkan setiap screen sesuai dengan user flow yang kami sepakati.
Dalam tahap testing, saya membuat skenario alur interview agar kita tau langkah apa yang selanjutnya harus dilakukan dan semua task bisa terpenuhi. Interview ini melibatkan 2 mahasiswa dengan menggunakan Google Meet dan Google Form. Oh iya, saya menggunakan SUS Score sebagai metode pengukuran usability testingnya.

Baiklah, mungkin itu saja dari saya.. Terimakasih untuk rekan yang telah membantu Muhammad Ainul Yaqin dan Dimas Pradipta Putra, untuk para readers mudah-mudahan bisa membantu memberikan insight dan pandangan serta ilmu.. oh ya,, aku akan sangat apresiasi jika ada feedback ataupun komentar.. terimakasih

Happy Weekend… ( clap nya jangan lupa xixixi..)