UI/UX Case Study: Pelajar Digital App

Aplikasi Pelajar Digital merupakan aplikasi bertema edutech yang berfokus kepada pengembangan kemampuan para penggunanya yang ingin mendalami profesi di dalam dunia teknologi. Rencananya aplikasi ini akan digunakan dalam Sistem Operasi berbasis Mobile Android.

UI/UX Case Study ini juga merupakan bagian dari Program Skilvul Kampus Merdeka UI/UX Design Batch 3–2022. Kami sebagai mahasiswa belajar UI/UX Design di Skilvul yang merupakan salah satu mitra dari program Kemendikbud ini.

Sebuah perusahaan bernama PT. Pelajar Digital yang bergerak di bidang edutech sedang melakukan perombakan besar-besaran pada platform edukasinya yang meliputi tampilan dan struktur sistem. Perusahaan X merupakan pemilik platform edukasi yang memberikan berbagai macam kursus online untuk menyiapkan talenta-talenta digital di Indonesia dengan menyediakan kursus di bidang Programming, Digital Marketing, UI/UX Design, Product Management, dan masih banyak lagi. Akan tetapi, 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
-Platformnya rumit untuk digunakan
-Loading yang sangat lama
-Susah mencari motivasi untuk belajar

Dengan hasil riset ini, Perusahaan PT. Pelajar Digital ingin merombak total platformnya dengan tujuan untuk lebih menjadi user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platformnya.
-Target Pengguna Umur : 18–55 tahun
-Profesi : Karyawan/karyawati
-Bahasa : Indonesia
-Level ekonomi : Menengah ke atas Deskripsi

Tugas UI/UX Design berdasarkan permasalahan yang dialami oleh Perusahaan PT. Pelajar Digital, buatlah desain UI/UX untuk platform Learning Management System dengan target user di atas. Berikut kriteria tugas yang diberikan.
-Tema : Learning Management System (Online Course)
-Platform : Mobile Application

Cakupan Proses Bisnis :
-Pendaftaran Akun
-Login
-Home
-Detail Kursus
-Transaksi Pembelian
-Proses Pembelajaran

~ Mencari tahu kebutuhan pengguna dalam menggunakan aplikasi edutech
~ Mencari tahu tingkat kepuasan & kemudahan pengguna dalam menggunakan aplikasi edutech
~ Mencari tahu saran dari pengguna fitur apa saja yang diinginkan dan seharusnya ada di aplikasi edutech

Saya di tim ini sebagai ketua yang bekerja sama dengan 3 anggota UI/UX Designer lainnya yaitu:
– Farah Adelia bertanggung jawab mendesain Halaman Masuk & Pendaftaran, Halaman Utama, Profil & Kelas
– Catherine Jetajones bertanggung jawab mendesain Halaman Kategori & Detail Kelas, Edit Profil
– Ferdy Fadhil Lazuardi bertanggung jawab mendesain Halaman Pengenalan, Tukar Poin & Keranjang
– Saya Hilal Shafwanto bertanggung jawab mendesain Halaman Awal, Promo, Metode & Status Pembayaran

Kelompok kami menggunakan kerangka kerja Design Thinking Process yang dimana ada beberapa tahap yang harus dilewati yaitu:

1.Empathize
Di tahap ini kami melakukan Secondary Research dimana banyak mengumpulkan data-data & informasi yang berkaitan dengan edutech. Mulai dari mencari lewat jurnal, website pemerintahan, komentar pengguna edutach di market place.

2.Define
Tahap ini kelompok kami mengumpulkan beberapa permasalahan yang sering dihadapi pengguna dalam menggunakan aplikasi edutech. Lalu kita juga mencarikan beberapa solusi yang bisa menyelesaikan masalah tersebut.

Pain Points & How- Might We

3.Ideate
Setelah semua anggota memberikan solusinya masing-masing, sekarang di tahap Ideate kami menentukan solusi yang paling tepat sasaran untuk bisa menyelesaikan permasalahan yang paling banyak sering dialami pengguna dalam memakai aplikasi edutech.

Solution Idea

Lalu memprioritaskan ide-ide yang diukur dari Usaha & Nilai dengan membagi ke dalam 4 kuadran: DO IT NOW, DO NEXT, DO LATER, DO LAST

Prioritization Idea

Sebelum membuat wireframe kami membuat User Flow terlebih dahulu untuk menyatukan visi para anggota tim bahwa alur pengguna memakai aplikasi ini diawali dari Masuk sampai Pembelajaran.

User Flow

Selanjutnya membuat Wirefame atau Low Fidelity yang belum ada warna maupun gambar untuk menjadi patokan saat membuat UI Design nanti.

Wireframe

Karena kami bekerja secara tim, Design System sangat dibutuhkan untuk mendesain UI sebuah aplikasi. Tujuan untuk menyamakan komponen-komponen desain yang mirip. Supaya desain yang kita buat bisa konsisten dari awal sampai akhir. Mulai dari Color, Text Style, Button, Input Field, Header Bar, Logo, Checkbox, Iconography, Molecule dan sebagainya

Design System

Selanjutnya membuat UI Design atau High Fidelity perhalaman mengikuti Design System yang sudah dibuat.

UI Design

4.Prototyping
Tahap prototyping kami berdiskusi alur proses jalannya aplikasi ini mulai dari Masuk, Lihat Kelas, Pembayaran dan Keluar. Menyambungkan beberapa halaman dengan beberapa fitur di Figma seperti: On Tap, After Delay, Smart Animate dan lain-lainnya.

Prototype link

Prototype setelah Usability Testing

5.Testing
Tahap testing kali ini menggunakan metode Usability Testing & In Depth Interview. Dimulai dari perkenalan, tanya jawab beberapa pertanyaan seputar edutech. Sampai mencoba prototype aplikasi Pelajar Digital juga pengguna memberi kritik dan saran.

Klik link disini untuk melihat sesi in depth interview

Klik link disini untuk melihat sesi in depth interview

  • Pengguna banyak memberi saran konsistensi harus tetap dijaga untuk membuat desain dari halaman ke halaman. Lalu kami segera memperbaiki bagian-bagian desain yang tidak konsisten tersebut
  • Pengguna menyukai perpaduan warna yang ada dalam aplikasi.
  • Nilai rata-rata yang diberikan pengguna untuk aplikasi Pelajar Digital ini antara 4–5 dari skala 1-7. Dimana 1=sangat tidak baik & 7= sangat baik. Kami

Kami sudah mendesain kembali Pelajar Digital apa saja yang masih kurang dari aplikasi kami dan melakukan prototyping ulang. Jika solusi yang kami berikan ini sudah memenuhi kebutuhan para pengguna edutech. Kami akan terus memperbarui desain kami mengikuti perkembangan teknologi saat ini yang semakin berkembang. Semoga desain yang ditawarkan kami bisa dilanjutkan ke tahap Development yang akan dikerjakan oleh programmer.

Semoga artikel ini bisa membantu & menambah wawasan Anda tentang dunia UI/UX Design. Terima kasih banyak telah menyempatkan waktu untuk membaca!!

Read the full article here

Total
0
Shares
Leave a Reply

Your email address will not be published.

Prev
Website hero section: 6 design best practices

Website hero section: 6 design best practices

Table of Contents Hide 1

Next
Create an Automated Customer Research Machine in 2 Hours

Create an Automated Customer Research Machine in 2 Hours

Table of Contents Hide ‍What to Talk to Customers AboutHow to Find Customers to

You May Also Like