UX Case Study: Digdigi, Platform Edukasi Daring
Hello, (aspiring) product designers!
Pada kesempatan kali ini, saya akan membagikan pengalaman saya dalam membuat desain aplikasi kursus daring yang bernama Digdigi. Disclaimer, UX Case Study ini dibuat berdasarkan UX Challenge yang diberikan oleh Skilvul sebagai tugas untuk program Skilvul Virtual Internship: UI/UX Challenge. Selamat membaca!
Tentang Proyek
Digdigi adalah platform edukasi daring 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.
Objektif
Proses desain ini dilakukan untuk membuat aplikasi yang user friendly dengan tampilan yang menarik dan dapat meningkatkan motivasi belajar ketika menggunakan platformnya.
Peran Saya
Saya membuat semua wireframe, UI styleguide, UI design, dan prototype dari aplikasi Digdigi. Dalam tahapan-tahapan awal pekerjaan, saya dibantu oleh rekan-rekan kerja di Skilvul, yaitu Yunie Debora dan Judisthira Sinaulan. Keseluruhan proses desain ini juga dilakukan di bawah pengawasan Indira Pambudy sebagai mentor.
Apa Saja yang Dilakukan?
Metodologi yang digunakan dalam pengembangan tampilan aplikasi ini adalah design thinking. Design thinking adalah pendekatan yang digunakan agar desainer berfokus kepada manusia untuk menciptakan inovasi berdasarkan kebutuhan manusia, kemampuan teknologi, dan kebutuhan bisnis (Brown, 2008). Semua tahapan bisa dilakukan sesuai kebutuhan, tidak harus berurutan.
1. Berempati dengan Pengguna
“Berfokus kepada manusia” adalah salah satu kata kunci dari definisi design thinking. Dalam hal ini, pengguna adalah manusia yang akan menjadi pemangku kepentingan dari pengembangan aplikasi ini. Oleh karena itu, desainer harus bisa memahami pengguna, dalam hal ini berempati, untuk dapat memenuhi kebutuhan pengguna.
Berdasarkan brief yang saya dapatkan dan hasil pengamatan saya sendiri, berikut adalah target pengguna Digdigi:
- Berusia 18–55 tahun
- Bekerja sebagai karyawan/karyawati
- Berdomisili di Indonesia
- Berbahasa ibu Bahasa Indonesia
- Level ekonomi menengah ke atas
- Tertarik untuk mempelajari pengetahuan digital
- Bisa mengoperasikan ponsel dengan lancar
Berikut adalah daftar masalah yang umumnya dihadapi oleh seorang pengguna ketika menggunakan aplikasi pembelajaran daring:
- User tidak senang dengan tampilan
- Platformnya rumit untuk digunakan
- Loading yang sangat lama
- Susah mencari motivasi untuk belajar
Keempat permasalahan ini akan dijadikan acuan untuk seluruh proses desain.
2. Mendefinisikan Permasalahan Pengguna
Dengan berempati dengan pengguna, desainer dapat mengetahui apa sebetulnya yang menjadi permasalahan pengguna. Meskipun terdengar mudah, tetapi tidak semua pengguna — bahkan kebanyakan pengguna — dapat menyatakan dengan jelas apa masalah yang sebetulnya ia hadapi. Dalam melakukan tahapan ini, saya dan rekan-rekan kerja membuat FigJam Board.
Pain Points
Seorang desainer harus mampu menginterpretasikan masalah pengguna dengan sederhana namun tepat. Keresahan-keresahan yang dirasakan pengguna dapat dituliskan dalam bentuk pain points yang singkat, padat, dan jelas.
How-Might-We
Berdasarkan pain points yang dikumpulkan, desainer dapat menuliskan pertanyaan dalam format “How Might We”. Dengan pertanyaan ini, desainer dapat berpikir apa yang ia bisa lakukan untuk membantu seorang pengguna. Pertanyaan-pertanyaan ini kemudian di-vote untuk mengetahui mana yang akan diprioritaskan.
3. Mencari Ide Solusi yang Bisa Dilakukan
Esensi dari keseluruhan proses ini adalah untuk memecahkan masalah yang dihadapi pengguna. Tentu saja caranya adalah dengan memberikan solusi. Dalam tahapan ini, desainer diharapkan untuk dapat menemukan ide solusi yang tepat sasaran. Tahapan ini masih akan dilakukan di FigJam Board yang sama.
Ide Solusi
Bagaimana cara mendapatkan ide-ide solusi? Dengan menjawab pertanyaan How-Might-We yang sudah dibuat sebelumnya. Satu pertanyaan How-Might-We bisa dijawab dengan banyak ide. Oleh karena itu, desainer diharapkan bisa mengumpulkan banyak solusi pada langkah ini.
Affinity Diagram
Setelah semua ide solusi dikumpulkan, saatnya mengelompokkan ide-ide tersebut. Pengelompokan ini berdasarkan kesamaan dari ide-ide solusi ini, salah satu contoh yang paling umum adalah berdasarkan fitur atau tujuan implementasinya.
Prioritization
Pada kenyataannya, proyek selalu memiliki batasan, baik dalam hal scope, time, dan cost. Tidak semua ide bisa direalisasikan. Oleh karena itu, seorang desainer juga harus bisa melakukan prioritisasi atas ide-ide solusi. Salah satu caranya adalah dengan memprioritaskan ide dengan user value tinggi namun effort yang dibutuhkan untuk implementasinya rendah.
Crazy 8's
Berdasarkan ide-ide solusi yang diprioritaskan, saya dan rekan-rekan kerja saya membuat Crazy 8’s masing-masing. Crazy 8’s adalah membuat 8 desain di selembar kertas dalam waktu 8 menit saja. Tujuannya adalah untuk mendapatkan lebih banyak masukan mengenai desain yang akan dibuat. Kami juga melakukan voting untuk ini.
User Flow
Setelah membuat Crazy 8’s, kami membuat bersama User Flow dari aplikasi. Berdasarkan hasil diskusi kami sebelumnya, kami telah menyetujui bahwa fitur Forum Diskusi sebagai bentuk usaha untuk meningkatkan interaktivitas dalam aplikasi perlu diimplementasikan. Oleh karena itu, kami menambahkan fitur ini di fitur Course.
Wireframe
Setelah membuat user flow, kami pun membuat wireframe secara individu. Pembuatan wireframe bertujuan agar desainer dapat memiliki gambaran kasar mengenai penempatan informasi pada suatu halaman di aplikasi. Wireframe cukup dibuat monokrom saja tanpa perlu adanya gambar.
4. Membuat Prototype dari Ide Solusi
Tahapan selanjutnya adalah untuk merealisasikan ide-ide solusi yang telah dibuat ke dalam high-fidelity prototype. Tujuannya adalah untuk melihat hasil dari seluruh proses desain yang telah dilakukan. Berikut adalah langkah-langkah yang saya lakukan untuk membuat prototype dari ide solusi yang saya dapatkan.
UI Styleguide
Apabila aplikasi belum memiliki UI styleguide, maka desainer harus membuatnya dari awal. UI styleguide merupakan panduan bagi desainer agar desain setiap komponen UI pada aplikasi bisa tetap konsisten meskipun dikerjakan oleh banyak desainer.
Pada UI styleguide yang saya buat, saya berusaha untuk memberi solusi atas permasalahan yang dihadapi pengguna, khususnya dalam hal membuat tampilan aplikasi yang menarik.
Palet warna yang saya gunakan dibuat berdasarkan warna semantik yang sesuai dengan warna brand Digdigi, yaitu #112A46. Pemilihan warna ini dibantu oleh Eva Design System. Saya juga telah memastikan kontras warna #112A46 dengan warna #FFFFFF (putih) agar tampilan dapat dipakai oleh semua orang dengan bantuan coolors.
Saya juga memutuskan untuk menggunakan font Open Sans untuk mengurangi waktu loading yang menjadi keresahan pengguna. Font ini memiliki load time tercepat dibanding web font lainnya yaitu 0.476 detik. Selain itu, Open Sans termasuk ke Google Font yang tidak berbayar.
Revisi User Flow
Selain untuk membuat penamaan halaman yang konsisten dalam bahasa Indonesia, langkah ini saya lakukan untuk membantu menyelesaikan permasalahan pengguna yang merasa platform rumit digunakan. Saya merombak user flow mengikuti aplikasi yang umum digunakan agar pengguna merasa familiar dan tidak kesulitan ketika memakai aplikasi.
Aplikasi yang saya jadikan contoh adalah 2 aplikasi e-commerce yang umum digunakan di Indonesia. Alur yang saya ubah adalah di bagian transaksi dengan menambahkan halaman Keranjang agar pengguna bisa menyimpan terlebih dahulu kelas yang ia akan beli.
UI Design
UI design dibuat dengan cara mengaplikasikan komponen-komponen UI styleguide ke wireframe yang telah dibuat sebelumnya. Pada kenyataannya, saya tidak membuat wireframe dari semua halaman dan langsung membuat UI design di frame kosong agar lebih cepat selesai. Namun saya mengakui bahwa dengan adanya wireframe, pembuatan UI design dapat dilakukan dengan lebih mudah.
Secara keseluruhan, sebagai desainer saya berusaha untuk membuat tampilan aplikasi yang dapat dinikmati pengguna. Saya juga membuat tampilan forum diskusi yang bertujuan untuk memotivasi pengguna untuk belajar dengan adanya komunitas. Selain itu, saya memberikan progress bar di setiap card kelas agar memotivasi pengguna untuk menyelesaikan kelas.
Prototype
Setelah UI design pada semua halaman desain diselesaikan, saatnya membuat prototype. UI design diurutkan berdasarkan flow yang akan diikuti pengguna untuk menyelesaikan suatu task. Flow ini merupakan pecahan dari user flow yang saya buat sebelumnya. Saya membagi UI design menjadi 8 flow seperti yang dapat dilihat pada gambar berikut.
5. Melakukan Pengujian dengan Pengguna
Seluruh proses desain ini dilakukan untuk dapat menyesuaikan dengan pengguna. Oleh karena itu, pengguna adalah orang yang berhak memberikan penilaian atas hasil desain ini. Saya melakukan pengujian in-depth interview dan usability testing dengan satu orang responden. Penilaian dilakukan dengan menjawab Single Ease Question.
Responden cenderung cepat dan serius dalam menyelesaikan flow dan mengeksplorasi setiap halaman seperti mengerjakan kuis. Secara keseluruhan, responden tidak mengalami masalah yang berarti. Hanya saja, responden berkali-kali mengatakan bahwa warna aplikasi mirip dengan aplikasi lain.
Dari pertanyaan SEQ, responden memberikan penilaian aplikasi Digdigi 8 dari 10.
Yang Saya Pelajari
Dari pengerjaan desain ini, saya merasa design thinking merupakan metodologi yang aman untuk digunakan karena memungkinkan adanya iterasi dan urutan tahapan yang fleksibel. Meskipun begitu, tidak ada metodologi penyelesaian yang cocok untuk semua kasus karena setiap proyek IT bersifat unik. Oleh karena itu, product designer harus tetap terbuka untuk mencoba metodologi lainnya.
Saya juga sangat menyarankan product designer untuk dapat terus mengasah kemampuan berempati dan berkolaborasi. Melalui pengerjaan proyek ini saya merasa bahwa kedua kemampuan tersebut sangat krusial di bidang ini. Dengan kemampuan berempati dan berkolaborasi yang mumpuni, proses kerja desainer dapat menjadi lebih efektif dan efisien.
Sekian dari saya, terima kasih sudah membaca sampai selesai!
Referensi
Brown, T. (2008). Design thinking. Harvard business review, 86(6), 84. Chicago
