UI/UX Case Study: SiBer, Learning App

Disclaimer
Aplikasi ini merupakan bentuk tugas dari kegiatan Kampus Merdeka Studi Independen Bersertifikat bersama Skilvul Tech4Impact dengan bidang UI/UX Design Mastery.

Background Story

SiBer merupakan aplikasi yang menyediakan berbagai kursus online untuk mempersiapkan talenta digital dengan menawarkan kursus pemrograman, pemasaran digital, desain UI/UX, manajemen produk, dll. Namun, SiBer telah mengalami penurunan selama 1 tahun. Setelah melakukan penelitian kecil, terdapat hasil sebagai berikut:

1. User tidak menyukai aplikasi
2. Aplikasi rumit untuk digunakan
3. Loading sangat lama
4. Susahnya mencari motivasi dan semangat untuk belajar

Berdasarkan hasil penelitian diatas, SiBer ingin mengubah total aplikasinya dengan tujuan agar lebih user-friendly dengan tampilan yang lebih menarik dan dapat meningkatkan motivasi dan semangat belajar ketika menggunakan aplikasi tersebut.

Target Pengguna Aplikasi
Target pada aplikasi ini yaitu umur dari user sekitar 18–55 tahun, berprofesi sebagai Karyawan/Karyawati dengan level ekonomi menengah ke atas, dan dapat mengakses aplikasi tersebut dengan bahasa Indonesia.

Objective

Tujuan dari dibuatnya aplikasi ini adalah sebagai bentuk tugas dari kegiatan Kampus Merdeka Studi Independen Bersertifikat bersama Skilvul #Tech4Impact.

Design Thinking

• Define Stage
  Pada tahap ini merupakan tahap mengumpulkan informasi terkait apa saja yang membuat user tidak tertarik menggunakan aplikasi dalam bentuk Pain Points.

• Ideate Stage
  Setelah mengerjakan Pain Points pada Define Stage, lanjut membuat Solution Idea dan Priorization Idea seperti ada pada gambar dibawah.

Design Process

• User flow
  Sebelum memulai membuat desain dari aplikasi, kita perlu membuat userflow. Userflow merupakan diagram yang menjelaskan alur dari sebuah aplikasi yang digunakan oleh user. Pada gambar dibawah merupakan salah satu contoh dari userflow pada edit profile.

• Wireframe
  Pada tahap ini merupakan bentuk dari penggambaran desain aplikasi secara kasar berdasarkan Solution Idea yang sudah dikerjakan sebelumnya. Gambar dibawah merupakan wireframe dari halaman Edit Profile yang dibuat langsung di Figma.

• Design Systems
  Setelah selesai membuat Wireframe, dilanjut membuat Design Systems yang merupakan kumpulan dari komponen yang dapat digunakan secara berulang kali dengan aturan yang jelas sehingga dapat ‘dirangkai’ menjadi sebuah produk. Pada gambar dibawah merupakan Design Systems pada aplikasi SiBer.

• UI Design
  Setelah Design Systems sudah selesai dibuat, maka tahap berikutnya adalah UI Design. Pada tahap ini, kita menyempurnakan hasil gambaran dari Wireframe dengan menggunakan Design Systems yang sudah dibuat. Gambar dibawah merupakan salah satu contoh dari UI Design pada Edit Profile di aplikasi SiBer.

• Prototype
  Tahapan terakhir pada Design Process ialah Prototype. Prototype sendiri adalah bentuk 1:1 dari tampilan produk yang akan di-develop namun belum nyata. Dibuatnya Prototype ialah sebagai simulasi dari solusi desain yang sudah dibuat. Dibawah ini merupakan hasil dari Prototype pada aplikasi SiBer dari mulai Login & Register hingga Sharing Section.

Stimulus User Research

Pada langkah ini, kami menggunakan metode In-Depth Interview & Usability Testing.

Research Objective

1. Mendapatkan insight dari user tentang simulasi produk melalui prototype.
2. Mengidentifikasi kesulitan menyelesaikan task bagi user.
3. Mencari tahu apakah informasi yang diberikan mudah dipahami dan sesuai dengan kebutuhan user serta mengetahui bagian mana yang perlu diperbaiki.

Respondent Criteria

1. Berusia 18–24 tahun.
2. Pekerjaan sebagai Mahasiswa/Jobseekers pada instansi apapun.
3. Berdomisili di seluruh wilayah Indonesia.
4. Pernah menggunakan platform edukasi/pembelajaran.
5. Menggunakan handphone berbasis Android/IOS.

List of Question

1. Bisakah anda memperkenalkan diri? Mulai dari Nama, Pekerjaan, dan Usia?
2. Apakah anda pernah menggunakan aplikasi pembelajaran secara online? Jika pernah, menggunakan aplikasi apa?
3. Seberapa sering kamu menggunakan aplikasi pembelajaran tersebut?
4. Apa alasan anda menggunakan aplikasi pembelajaran tersebut?
5. Apa saja kelebihan dan kekurangan aplikasi pembelajaran yang kamu gunakan sebelumnya?

Research Scenario

1. Memberi salam dan memperkenalkan diri.
2. Melakukan sesi interview berdasarkan pertanyaan yang sudah dibuat pada List of Questions kepada partisipan.
3. Menjelaskan secara singkat mengenai SiBer kepada partisipan.
4. Mempersilahkan partisipan untuk mencoba prototype yang sudah diberikan berupa link Figma dan memberikan task yang harus dilakukan.
5. Menanyakan partisipan mengenai tingkat kegunaan, kemudahan, dan kepuasan setelah menyelesaikan task yang diberikan dengan skala Likert.
6. Menanyakan tentang tingkat Single Ease Question kepada partisipan.
7. Menutup interview dan mengucapkan terimakasih.

Testing Results

Setelah selesai melakukan Stimulus User Research, dibuatlah hasil dari testing yang sudah dilakukan oleh partisipan.

Interview Results

1. Partisipan merasa cukup puas menggunakan aplikasi SiBer walau sedikit kebingungan dengan beberapa hal.
2. Tidak terdapat kendala pada saat menyelesaikan task namun ada beberapa bagian yang membuatnya sedikit bingung.
3. Partisipan memberikan masukan seperti mengganti kata activity menjadi course untuk menggambarkan pembelajaran.

Single Ease Question

Pada proses penilaian, kami menggunakan Single Ease Question agar lebih mudah memberikan nilai pada aplikasi SiBer kami dengan hasil sebagai berikut:

Kesimpulan

Dari hasil penelitian yang sudah kami lakukan, kami menyimpulkan bahwa aplikasi SiBer masih memiliki kekurangan dalam beberapa hal kecil yang perlu kami perbaiki. Namun, selebihnya partisipan merasa cukup puas pada aplikasi ini.

Terimakasih kepada tim saya yang beranggotakan Claudia Reyna Simanjuntak, Muhammad Fiqri Widiyantoro, dan Rafi Paturama yang sudah membantu menyelesaikan tugas ini dengan baik dan kompak. Tidak lupa juga saya ucapkan terimakasih kepada kak Darma Paramarta sebagai mentor yang sudah membantu memberikan masukan dan saran pada tugas ini.