UI/UX Case Study — Skill Academy
Ruangguru bergerak di industri IT yang terfokus pada bidang pendidikan dan mempunyai produk pembelajaran online untuk berbagai macam jenjang dan pendidikan. Ruangguru mempunyai misi untuk membuat pendidikan yang berkualitas dan dapat diakses oleh semua kalangan dimanapun dan kapanpun dengan biaya yang terjangkau.
Pada studi kasus ke-tiga saya ini (studi kasus kedua), saya ingin mencoba untuk mengembangkan salah satu fitur yang terdapat di aplikasi Skill Academy, yaitu fitur Search agar dapat berfungsi dengan lebih baik lagi dalam membantu user. Berikut adalah tahapan proses design yang saya lakukan.
1. Define Problem
Requirements
Mengembangkan fitur search menjadi lebih baik dalam membantu user.
Business Goals
- Meningkatkan conversion rate halaman hasil search Skill Academy.
- Meningkatkan kepuasan pengguna.
User Goals
User menjadi lebih mudah dalam menggunkan fitur search guna mendapatkan kursus yang diinginkan.
Dikarenakan saya masih kekurangan data untuk mengetahui total user yang mempunyai kendala saat sedang menggunakan fitur search, juga masih kurangnya data untuk mengetahui kesulitan apa yang sebenarnya dihadapi oleh user jika memang ada, sehingga saya mencoba untuk melakukan survey kepada pengguna aplikasi Skill Academy, untuk mendalami apa sebenarnya yang dirasakan oleh user ketika menggunakan fitur search sehingga mendapatkan insight dari hasil survey tersebut.
2. Discover
Sebelum masuk ke tahap penyusunan solusi, saya ingin mencoba terlebih dahulu memahami problem utama apa yang dialami oleh user ketika menggunakan halaman search. Kemudian ekspektasi apa yang mereka harapkan ketika menggunakan halaman search, sehingga kita dapat lebih tepat dalam menyusun suatu solusi dalam menyelesaikan permasalahan tersebut. Berikut adalah hasil survey yang telah saya olah dan dapatkan.
Survey
Survey dilakukan terhadap 22 partisipan, total ada sebanyak 15 partisipan yang telah menggunakan aplikasi Skill Academy, dan dari ke 15 partisipan tersebut, ada sebanyak 12 partisipan yang sudah pernah menggunakan fitur search pada aplikasi Skill Academy.
Berikut adalah beberapa pertanyaan inti yang saya ajukan:
- Bagaimana pengalaman Anda saat sedang menggunakan fitur search di aplikasi Skill Academy?
- Apa yang anda rasakan dari sisi tampilan/layouting fitur tersebut?
- Apa yang menurut anda dapat dikembangkan dari fitur tersebut?
Profil User
Usia
20 sampai 29 tahun (17 Partisipan)
30 sampai 40 tahun (5 Partisipan)
Pekerjaan
Karyawan Swasta, Wirausahawan
Key Insights
Berikut beberapa tanggapan user dari hasil survey yang dilakukan, mengenai apa yang mereka hadapi dan rasakan saat sedang menggunakan fitur search, yaitu:
- Biasanya fitur search itu terdapat filter yg memudahkan penggunannya mencari sesuatu, dan lebih tidak memakan banyak waktu jika kelas yg dicari tidak ada.
- Saat menggunakan fitur search, connecting cukup lama.
- Agak bingung mencari keyword untuk kursus yg diinginkan.
- Saya mencoba mencari informasi course yang saya inginkan tapi beberapa kali saya typo dalam menulis, sehingga hasilnya tidak ada, jadi pencariannya harus menggunakan bahasa yang benar dan jelas.
- Saat searching tidak ada recommendation keywords lain.
(Kelima poin tersebut adalah tanggapan dari user)
Feedback User
Berikut beberapa Masukan user terhadap hal apa yang dapat dikembangkan dari fitur search, yaitu:
- Adanya kategori/pengelompokan kursus.
- Rekomendasi topik yang sering dicari, related topik dari keyword yang dimasukkan, suggestion ketika typo dalam penulisan.
- Diberi filter search/ada autofill saat sedang mengetik sesuatu.
- Rekomendasi related keyword pada field.
- Muncul keywords yang bervariatif, bukan satu keywords saja.
- Fitur search secara fungsional sudah cukup baik, dan cukup terlihat karena warnanya kontras dengan sekitarnya, hanya saja terlihat terlalu ramai dan mepet.
- Variasi tampilan nya.
- Lebih clean lagi page nya karena terlihat terlalu banyak content.
- Memberikan saran berdasarkan peminatan.
- Langsung menampilkan list yg berhubungan dengan kata yang dicari.
Problem Statement
Bagaimana cara kita untuk mempermudah user dalam menggunakan fitur search? Berikut beberapa poin yang dapat disimpulkan berdasarkan tanggapan dari user:
- Bagaimana cara membimbing user untuk memilih kata kunci yang umum/biasa digunakan?
- Bagaimana meminimalisir kesalahan user dalam memasukan kata kunci pencarian?
- Bagaimana cara memberi pilihan/opsi kursus tambahan kepada user?
Apakah kita perlu mengumpulkan data lainnya?
Competitive Analysis
Sebelum melanjutkan ke tahap perancangan flow dan wireframe, saya akan melakukan benchamarking terhadap platform kursus online lainnya yang sering digunakan oleh user, berdasarkan hasil dari survey, saya mendapatkan informasi bahwa user juga menggunakan udemy dan coursera untuk melakukan pembelajaran online, maka saya akan memulai benchmark terhadap kedua aplikasi tersebut.
Coursera dan Udemy, merupakan aplikasi pembelajaran online yang sudah mempunyai banyak pengguna, disini saya akan mengamati seperti apa tampilan fitur search nya, dari halaman awal, lalu tampilan ketika user melakukan pencarian, dan yang terakhir adalah halaman hasil pencarian.
Berikut adalah hasil dari benchmarking terhadap dua aplikasi tersebut:
3. Ideation
Dari hasil wawancara dan benchmarking terhadap platform kursus lainnya, saya mendapatkan gambaran, apa saja kesulitan yang sebenarnya dialami oleh user ketika menggunakan fitur search dan apa saja yang dapat dikembangkan dari fitur search tersebut agar lebih memudahkan user.
Akan ada 4 hal fokus utama yang akan dilakukan, yaitu :
- Menampilkan search history / popular search / course category pada tampilan awal search.
- Memberikan suggestion / autofill / recomendation keyword ketika user mulai mengetik pada search bar.
- Enhancement UI (result page).
- Menambahkan fitur feedback.
Existing User Flow
Gambar dibawah merupakan flow search yang ada pada aplikasi saat ini. Dari flow tersebut akan saya coba kembangkan kembali dengan menambahkan beberapa solusi baru disetiap proses nya. Pada saat user masuk di halaman pencarian pertama kali, saat sedang proses mencari, dan ketika mendapatkan/tidak mendapatkan hasil pencarian.
Proposed User Flow
Gambar bawah merupakan flow search yang coba saya usulkan untuk skenario ketika user mendapatkan hasil yang dia cari ataupun tidak mendapatkan hasil pencarian. Pada halaman awal search user dapat melihat beberapa pilihan yang ditawarkan, lalu terdapat autofill/suggestion saat user mulai mengetik di searchbar, dan user juga dapat memberikan feedback tentang pengalaman dia selama menggunakan fitur search (optional).
Data sudah terkumpul, Userflow sudah dirancang, selanjutnya adalah… Wireframing!
4. Design
Wireframe
Setelah kita selesai mengumpulkan banyak informasi, melakukan survey, kemudian benchmarking, membuat ide, merancang userflow, maka langkah berikutnya adalah membuat desain UI, tetapi sebelum kita masuk ke high-fidelity design nya, sebaiknya kita melakukan perancangan awal dahulu, yaitu dengan membuat wireframe seperti dibawah ini.
Wireframe terdiri dari 5 halaman inti, yaitu :
- Halaman awal search
- Halaman ketika user mulai memasukan kata pencarian (suggestion)
- Halaman hasil pencarian (success)
- Halaman hasil pencarian (no result)
- Halaman user feedback
Pembuatan wireframe menjadi tahap yang menarik, dikarenakan kita dapat memvisualisikan insight yang kita dapat dari user kedalam sebuah tampilan.
Lalu seperti apa tampilan high-fidelity design nya?
High Fidelity
Challange
- Bagaimana cara untuk memudahkan user dalam melakukan pencarian ketika pertama kali masuk kedalam halaman search?
Solutions
- Pada halaman ini saya mencoba untuk menawarkan kepada user beberapa opsi sebelum user dapat memulai pencarian kursus yang diinginkan, yaitu dengan memperlihatkan pencarian sebelumnya, pencarian yang sedang populer, dan kategori kursus yang ada di Skill Academy.
Challange
- Bagaimana cara membimbing user untuk memilih kata kunci yang umum/biasa digunakan?
Solutions
- Disini saya mencoba untuk memberikan solusi dengan menampilkan suggestion/autofill berdasarkan karakter yang dimasukan oleh user.
- Terdapat dua tipe suggestion yang akan ditampilkan, yaitu suggestion yang berkaitan dengan judul atau tema dari suatu kursus, yang kedua dicari berdasarkan nama pengajar, sehingga user mendapatkan pilihan lebih ketika melakukan pencarian, apakah user ingin mencari berdasarkan tema/judul kursus atau melalui nama pengajar.
Challange
- Bagaimana cara mengembangkan result page agar menjadi lebih nyaman lagi saat digunakan oleh user?
Solutions
- Solusi pertama adalah dengan memasukan filter dan sort kedalam button yang akan tetap sticky ketika halaman di scroll kebawah.
- Saya melakukan perubahan susunan elemen serta warna pada card yang ditampilkan, dengan menggunakan warna yang lebih light dibanding dengan backgroundnya untuk lebih menampilkan kesan timbul dan memperjelas hirarki komponen di halaman tersebut. Kemudian penyusunan ulang konten didalam card sehingga lebih mudah untuk dibaca seacara cepat ketika user ingin membandingkan satu card terhadap card lainnya.
- Pada section kursus populer, saya menambahkan card yang terpotong dan indikator urutan card dibawahnya, agar user lebih menyadari bahwa card tersebut dapat di swipe secara horizontal.
- Terakhir saya menambahkan section feedback pada footer halaman.
Challange
- Bagaimana agar user dapat info yang lebih menarik ketika hasil pencariannya tidak dapat ditemukan?
Solutions
- Pada halaman ini saya tidak merubah copy text yang disediakan karena sudah informatif sekali, namun disini saya melakukan pengembangan terhadap illustrasi yang ditampilkan agar menjadi lebih menarik.
- Pada section kursus populer, saya menambahkan card yang terpotong dan indikator urutan card dibawahnya, agar user lebih menyadari bahwa card tersebut dapat di swipe secara horizontal.
- Terakhir saya menambahkan section feedback pada footer halaman.
Challange
- Bagaimana cara agar user dapat langsung memberikan kritik dan saran terhadap fitur search?
Solutions
- Saya mencoba untuk menambahkan halaman feedback, agar user dapat dengan langsung memberikan keluhan jika memang merasa tidak terbantu dengan fitur search ini, ataupun user dapat memberikan saran untuk membantu Skill Academy dalam mengembangkan fitur search menjadi lebih baik lagi.
Demikian hasil dari proses desain yang telah saya lakukan, dari proses pertama yaitu defining main problem, melakukan survey terhadap pengguna, benchmarking terhadap aplikasi serupa, menyusun user flow, membuat wireframe, sampai dengan mengembangkannya menjadi final mockup.
Mohon maaf apabila masih terdapat kekurangan didalam proses pembuatan solusi ini, namun solusi ini masih dapat dikembangkan nantinya dengan terus melakukan iterasi terhadap pengguna. Sehingga dapat memberikan pengalaman yang lebih baik lagi kepada pengguna ketika menggunakan aplikasi Skill Academy. Semoga ada manfaat yang dapat diambil dari case study saya ini. See you on the next case study!
Studi kasus lainnya:
Follow my account :
