StudyMe App — UI/UX Case Study
Disclaimer
Project ini dilakukan sesuai dengan arahan dan di bawah pengawasan yang diberikan oleh Skilvul sebagai bagian dari Program “Kampus Merdeka 2022: UI/UX Design Mastery” yang diselenggarakan oleh Skilvul X kemendikbud
Hallo teman-teman 👋. Saya ingin berbagi tentang apa yang saya lakukan bersama kelompok saya di skilvul kampus merdeka ini dengan mengerjakan UX Challange yang di sediakan oleh pihak skilvul saya bersama kelompok ditugaskan untuk menyelesaikan ux challange yang dapat menyelesaikan masalah berdasarkan kebutuhan.
Latar Belakang
Sebuah perusahaan X 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.
Objektif
- Mencari tahu apa yang dibutuhkan oleh pengguna terkait online course
- Mencari tahu hal apakah dari sisi UI udah bagus dan memenuhi kebutuhan user
- Mencari tahu kendala di proses pembelajaran pada saat kuis dan lain lain
- Mengetahui apa kesulitan saat melakukan pembayaran
- Mencari tahu apakah fitur voucher sama poin menjadi semangat belajar online
Peran Dalam Tim
Ini merupakan project kolaborasi bersama, dalam pengerjaan project challenge kelas UIUX Mastery Skilvul ini saya bekerja sama dalam tim yang berjumlah 4 orang terdiri dari saya Farhan Muhammad, Alim Amalia, Wahyu Nur A, Martalisa. Dalam membuat solusi desain ini, kami memiliki tanggung jawab yang sama sebagai UX Research dan UI Designer, seperti:
- Melakukan penelitian untuk tahap define dan ideate untuk membuat List of Pain Point, How-Might We, Solution Idea, dan Prioritization Idea,
- Membuat User Flow, Wireframe, dan UI Style Guide.
- Membuat Hi-Fi design dan Prototype.
- Serta yang terakhir adalah melakukan Usability Test.
Design Process
Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. Karena memecahkan masalah yang rumit itu butuh proses nah disini saya dengan kelompok mengunakan metode design thinking ini karena yang di ajarkan di dalam kelas yaitu metode design thinking
Design thinking merupakan sebuah metode yang digunakan untuk mengembangkan solusi dari suatu permasalahan yang kompleks dengan menggabungkan fokus kekhawatiran, minat, dan human values ke dalam suatu proses desain (Brown, 2009). Design Thinking sering diterapkan di berbagai bidang, terutama bidang kreatif. Proses Design Thinking yang telah kami lakukan terdiri dari:
1 — Empathize
Tahap pertama adalah tahap Empathize. Di tahap ini kami mencoba untuk mendapatkan pemahaman terhadap permasalahan dengan melakukan observasi berdasarkan sudut pandang dan target pengguna yang menjadi subjek dari permasalahan.
2 — Define
Pada tahap define, kami mengumpulkan semua informasi yang telah diperoleh dari tahap Empathize, kemudian melakukan observasi untuk mengetahui apa saja yang dibutuhkan oleh pengguna.
Pain Points
Setelah melakukan research kemudian kami merumuskan pain points, atau ringkasan sederhananya ringkasan dari masalah yang dihadapi pengguna. Berikut di bawah ini pain poin yang telah kita kumpulkan.
How-Might We
Setelah dapat pain poinnya kita membingkai ulang pertanyaan sehingga jawaban yang diharapkan muncul adalah berupa langkah-langkah aksi yang kongkrit. Dengan menggunakan pendekatan ‘Bagaimana’, diharapkan dapat memotivasi kita untuk aktif mencari solusi dari HMW. Berikut beberapa How-Might We hasil brainstorming dari kami:
- HMW: Bagaimana user bisa belajar tanpa internet?
- HMW: membuat user dapat melakukan pembayaran dengan mudah?
- HMW : Membuat user ketika belajar fokus ke pembelajaran?
Ideate
Pada tahap ini, kami melakukan brainstorming ide-ide solusi berdasarkan hasil How-Might We, dimana masing-masing anggota tim memberikan solusi yang dapat menyelesaikan masalah yang telah disampaikan pada tahap Pain Points.
Solution Idea
Berdasarkan hasil How-Might We terdapat beberapa ide solusi yang kami hasilkan diantaranya:
Prioritization Idea
Selanjutnya ide-ide Berdasarkan hasil diskusi kami mendapatkan beberapa fitur MVP dimana dari sisi user value itu bagus dan dari sisi effort pengerjaan low, diantaranya adalah:
- Fitur gamifikasi/reward setelah menyelesaikan materi kelas Kita menyelesaikan kelas dan dapat poin reward
- fitur reward setelah materi selesai
point skill
sertifikat kelas - Fitur katalog materi pembelajaran, Fitur diskusi bareng mentor dan temen temen belajar
- Menyediakan beberapa materi pembelajaran gratis
Prototyping
Selanjutnya kami dan kelompok melakukan ide atau solution yang udah kita brainstroming lanjut membuat prototype untuk membuat ide lebih nyata. Untuk melakukan aktivitas ini, kami mulai membuat user flow terlebih dahulu.
Wireframe
Setelah membuat user flow, kami melanjutkan untuk mockup atau wireframe di Figma. Wireframe merupakan blueprint dari sebuah arsitektur. Konsep wireframe hanya bertujuan untuk menyampaikan susunan, layout, navigasi, struktur, dan organisasi konten. Wireframe biasanya hanya bergambar hitam putih saja dan menekankan pada isi dari konten yang akan dibuat. serta mempercepat dalam proses ide. Berikut adalah wireframe untuk study me
Design System
Untuk memudahkan dalam pengerjaan dan user interface memiliki komponen yang konsisten, kami membuat sebuah design system. Berikut adalah design system yang kami buat untuk digunakan pada desain high-fidelity dari project ini.
High-Fidelity
Setelah menyelesaikan tahap user flow, wireframe, dan design system, langkah selanjutnya adalah membuat desain high-fidelity menggunakan design system yang telah kita buat sebelumnya.
Prototype
Setelah desain High-Fidelity semua halaman selesai, langkah selanjutnya adalah membuat Prototype. Desain High-Fidelity kemudian diurutkan berdasarkan alur yang akan diikuti oleh pengguna untuk menyelesaikan sebuah task.
Link Prototype
Test
Untuk mendapatkan insight secara langsung dari pengguna dan juga mengukur kesuksesan dari solusi desain yang telah kami kerjakan, kami melakukan In-depth Interview dan Usability Testing kepada 2 orang pengguna Skilvul.
Research Date: Oktober, 2022
SEQ (Single Ease Question) merupakan salah satu Post Task Questionnaire yang digunakan dalam menilai tingkat kemudahan pada suatu fitur produk berdasarkan pengalaman user dengan menggunakan satu pertanyaan saja.
Hasil Feedback dari user
- Udah sesuai informasi yang tampilkan ini udah sesuai buat user karena di situ ada verifikasi email ada saran di password buat di kasih keterangan karakter pasword berapa max
- Tampilan home udah sesuai bagi user karena ada kelas kategori kelas populer dan setelah beli pun ada kelas saya di tampilkan
- Fitur pembayaran dan diskon udah sesuai dan membantu banget
Link record
Kesimpulan
Kesimpulannya disini kami telah melaksanakan tugas dari skilvul x Kampus Merdeka kami mengerjakan projects di atas dengan metode design thinking yang dimana mulai dari tahap research empathy sampai test telah kami jalani tapi disini kami masih harus banyak belajar lagi dan explore lagi tentang UIUX Design. terimakasih semuanya mohon maaf bila ada kata-kata yang mejingung atau yang lain.
