Studi Kasus UI/UX : Pinterr (Aplikasi Pendidikan)
Proses pengembangan UI/UX dari Pinterr
Penafian: “ Ini adalah proyek pribadi sebagai tugas dari Skilvul tentang menyelesaikan studi kasus pada program magang bersertifikat kampus independen. Saya tidak bekerja untuk atau dikontrak secara profesional oleh Skilvul & Pasar polis.”
pengantar
Halo! Nama saya Samsul Hanan, seorang penggila UI/UX yang baru saja beralih dari Desain Grafis ke Desain UI/UX.
Pada artikel ini, saya ingin menjelaskan proses pembuatan dan penyelesaian aplikasi Pinterr yang saya buat. Jadi aplikasi Pinterr adalah platform pendidikan (kursus online) yang digunakan untuk belajar di bidang keahlian, lebih khusus tentang teknologi.
The thing that underlies me to make this application is because I participated in a certified internship program at an independent campus organized by the Kemendikbudristek Indonesia, Then I passed the selection at Skilvul and was given a UX challenge in the form of a case study for an educational platform. Therefore, I created an application platform that I named Pinterr as my attempt to complete a UX case study.
I chose the word Pinterr because I wanted to give a brand name that was not weird and relatively quickly memorized and remembered by others people. In addition, because the word smart is inspired by the adjective, namely smart which in Indonesian means proficient (to do or do something). Example: they are good at making websites. Other definition of Pintar is clever.
The tools and methods we use in building this application are:
- Figma Software: We chose the figma tool because of its many advantages and is more suitable for use when working from home because of its cloud-based feature that can work on projects together online, and many other advantages.
here we use Figma Jam for brainstorming such as define, ideate, and also as a place to create userflow. then we use figma file to create Wirefrime LoFi, UI Mockup, and also Prototyping. - Design Thinking: In solving problems, we use Framework design thinking because this method is done with practical and creative problem solving that focuses on the user.
Problem Details
An edutech company X is undergoing a major overhaul of its educational platform which includes the appearance and structure of the system. Company X is the owner of an educational platform that provides various online courses to prepare digital talents in Indonesia by providing courses in the fields of Programming, Digital Marketing, UI/UX Design, Product Management, and many more. However, company X has experienced a decrease in revenue since 1 year ago and the research team has conducted a small research where the results are as follows.
- Users are not happy with the display
- The platform is complicated to use
- Very long loading
- It’s hard to find motivation to learn
Objective
- Improve the User Interface so that it is more friendly
- Make business flow easier
- Increase learning motivation
- Make Learning process be fun
- Maximize features
Role in the team
My role in the team is as a UI/UX Designer collaborating with 2 team members, namely brilliant hanif dan Mey Sany juvianty. In this team, my responsibility is:
- Provide development ideas at the stage of empathize, define, ideate together (Team)
- Create userflow
- Create low fidelity wireframes
- Create a high fidelity user interface
- Create prototypes
- Documenting the process in the form of a UI/UX case study
Design Process
1 — Emphatize
The purpose of Empathise is to assist designers in finding out the views & needs of their target users with research before defining problem statements and doing ideation.
Ada beberapa cara untuk mencari dan mengetahui kebutuhan target user, seperti: Menganalisis analisis data; Survei; Wawancara Mendalam (IDI); atau Focus Group Discussion (FGD).
Pada tahap ini, kita harus berempati dengan pengguna bahwa kita benar-benar peduli dan segera mencari dan memberikan solusi. pada tahap ini kami tidak melakukan IDI, FGD, atau survei, karena semua masalah sudah dibuat oleh Skilvul. Oleh karena itu, kami menggunakan data tersebut untuk melanjutkan ke tahap berikutnya.
Adapun request yang ada pada data tersebut adalah :
sebuah. Hasil penelitian:
- Pengguna tidak senang dengan tampilan
- Platformnya rumit untuk digunakan
- Loadingnya lama banget
- Susahnya mencari motivasi untuk belajar
b. Target Pengguna
- Usia: 18–55 tahun
- Profesi: Pelajar & Karyawan
- Bahasa: Indonesia
- Tingkat ekonomi: Menengah ke atas
c. Kriteria Tugas
- Tema : Sistem Manajemen Pembelajaran (Kursus Online)
- Platform: Aplikasi Seluler
- Lingkup Proses Bisnis: Pendaftaran Akun; Gabung; Rumah; Rincian Kursus; Pembelian; Proses pembelajaran.
2 — Tentukan
Pada tahap ini kita mulai mengidentifikasi dan menentukan apa saja yang menjadi kendala bagi pengguna dari hasil observasi atau survey yang kita dapatkan dari tahap empati tadi. Kemudian data tersebut dianalisis dan disintesis untuk menentukan inti masalah yang akan diidentifikasi.
Pada tahap ini, kita mendefinisikan masalah dengan mencari titik nyeri terlebih dahulu kemudian menggeneralisasi masalah pada titik nyeri dalam bentuk How-Might We.
Saat melakukan brainstorming poin rasa sakit dan mengumpulkan How Might We, kami menggunakan Fig Jam Tool.
Dari proses Define ini, berikut beberapa permasalahan yang berhasil dikumpulkan:
- Antarmuka Pengguna Tidak Ramah (UI buruk/lama)
- Alur pengguna yang rumit
- Aplikasi berat
- Tidak ada motivasi untuk belajar
- Susunan materi yang tidak menarik
- Kurikulum tidak diperbarui
- Tidak ada manfaat ketika mencapai sesuatu dalam belajar
- Pengguna kesulitan mengatur jadwal dan waktu sehingga sering lupa
- Pengguna sering melupakan aktivitas terakhir
- Pengguna kesulitan memahami karena menggunakan bahasa asing
- Proses masuk yang sulit
- Tidak ada komunitas belajar
- Tidak ada kegiatan tambahan (acara)
- Proses pembelian tidak sederhana
- Tidak ada tempat untuk menulis ringkasan
- Tidak dapat berkomunikasi dengan mentor dan teman selama jam bebas
- Kursus tidak lengkap
3 — Ide
Tahap ini merupakan tahap untuk menghasilkan ide. Kami mulai berpikir di luar kotak untuk menemukan solusi atas masalah yang dihadapi pengguna dengan melakukan brainstorming dengan tim. Semua ide akan diakomodasi untuk memecahkan masalah yang telah didefinisikan pada tahap define.
Kegiatan yang kami lakukan pada tahap ideasi adalah:
- Brainstorming berdasarkan hasil How Might We
- Membuat Aliran Pengguna
- Wirefrime Fidelitas Rendah
Ide Solusi
Solution Idea merupakan bagian dari Ideation Stage dimana pada bagian awal dari brainstorming ini, kami liar untuk mengeluarkan dan mengumpulkan semua ide yang merupakan solusi dari permasalahan pada tahap define (How Might We).
Setelah semua ide terkumpul, selanjutnya kita mengklasifikasikan semua ide tersebut ke dalam Affinity Diagram dimana pada bagian ini kita membuat definisi untuk mengelompokkan ide berdasarkan jenis dan kategorinya.
Klasifikasi yang kami buat adalah sebagai berikut:
- Visual : Untuk mengelompokkan ide-ide yang berkaitan dengan visual atau interface seperti memilih tren UI, menggunakan aset, konsep UI dan lain-lain.
- Arsitektur Sistem : Untuk ide-ide yang berkaitan dengan Sistem
- Materi: klasifikasi ini untuk menampung ide-ide yang terkait dengan materi, seperti kurikulum, informasi apa yang ada di materi dan bentuk materi (Video & PPT).
- Gamifikasi : yaitu mengelompokkan ide-ide yang berkaitan dengan permainan, hal ini bertujuan untuk meningkatkan motivasi belajar. Misalnya membuat sistem ranking seperti game online atau pemberian hadiah sehingga dapat memacu penggunanya. (hadiah bisa berupa ucapan selamat atau dengan bonus lainnya). Atau mengadakan acara sebagai pemacu belajar. Karena setiap output membutuhkan trigger yang tepat.
- Fitur Tambahan: ini adalah tempat untuk ide-ide yang berkaitan dengan fitur, seperti dalam proyek ini fitur penggantian otomatis Bot, pengingat tugas, riwayat aktivitas, Komunitas, Sistem Peringkat, Prestasi.
- Komunikasi : sebagai wadah untuk mengelompokkan ide-ide tentang komunikasi seperti mengobrol dengan teman dan mentor.
- Login & logout : klasifikasi untuk ide-ide tentang proses login, ini juga merupakan solusi dari masalah user yang kesulitan login ke aplikasi.
- Language : untuk klasifikasi yang berhubungan dengan bahasa yang akan digunakan.
Setelah ide-ide tersebut diklasifikasikan, kemudian mereka masuk ke bagian Ide Prioritas dimana klasifikasi tersebut dikelompokkan lagi berdasarkan perhitungan User value dan Effort yang dibutuhkan. Semakin tinggi Anda pergi, semakin tinggi Nilai Pengguna dan semakin Anda ke kanan, semakin besar Upaya.
Prioritas ide ini bertujuan untuk memberitahu kita klasifikasi ide mana yang akan kita kerjakan terlebih dahulu, dimana pada prioritas ide yang harus kita kerjakan terlebih dahulu adalah ide yang memiliki User Value tinggi dengan Effort yang lebih rendah sehingga waktu yang dibutuhkan lebih cepat.
Disana kita melihat “YA, LAKUKAN SEKARANG”(High User Value & Low Effort), “DO NEXT”(High User Value & High Effort), “DO LAST”(Low User Value & Low Effort), dan juga “NANTI” (Nilai Pengguna Rendah & Upaya Tinggi).
Hal terakhir yang kami lakukan setelah melewati tahap ide prioritas adalah melakukan Crazy-8s dimana pada tahap ini kami menggambar 8 layar LoFi Wirefrime menggunakan kertas untuk memvisualisasikan solusi yang kami tawarkan untuk menyelesaikan masalah dalam 8 menit.
Jika waktu menggambar telah habis, maka langkah selanjutnya adalah memilih desain wireframe mana yang akan digunakan. Untuk lebih jelasnya, inilah contoh crazy-8's.
alur pengguna
gambar rangkap
4 — Prototipe
Pada tahap ini, kami melakukan kegiatan sebagai berikut:
Membuat Panduan Gaya UI Prototipe
Mockup UI Kesetiaan Tinggi
Pada tahap ini saya menggunakan logo yang disediakan oleh Logoipsum, saya memilih logo sayap yang berdiri seperti sawah karena menurut saya filosofinya sangat cocok untuk platform pendidikan ini.
Kemudian saya menggunakan Color.eva.design, untuk menghasilkan palet warna, termasuk menghasilkan warna identitas merek.
Untuk masalah warna, saya memilih hijau, karena menurut psikologi, hijau bisa menyegarkan mata dan otak, dan ini cocok digunakan saat proses pembelajaran.
A. Panduan Gaya UI
UI Styleguide adalah dokumen yang berisi aturan-aturan untuk mendesain sebuah produk digital.
Mengapa kita harus membuat UI Styleguide, apa manfaatnya? itu adalah:
- Konsistensi pada semua halaman produk digital dapat terjaga
- Alur kerja atau performa menjadi lebih cepat (Drag & Drop)
- Desainer dapat lebih fokus membuat solusi
- Membantu Pengembang dalam mengimplementasikan desain ke dalam bentuk kode
Kapan Panduan Gaya UI layak digunakan?
- Ada banyak halaman pada produk digital, baik web maupun aplikasi
- Banyak desainer yang mengerjakan desain sebuah produk digital (Team Work)
Ada beberapa bagian dari UI Stileguide, yaitu:
- Komponen Atom
- Komponen molekul
B. UI Mockup High Fidelity
Berikut tampilan Antarmuka Pengguna:
Daftar
Kami mempermudah proses pendaftaran dengan memperhatikan Userflow yang tidak rumit ditambah dengan Antarmuka Pengguna yang Ramah. Mengapa kami menggunakan metode verifikasi email daripada OTP, karena menurut data yang kami peroleh, pendaftaran menggunakan verifikasi email lebih cepat dan dapat mengurangi kebingungan pengguna.
Kami juga meletakkan tombol di bagian bawah untuk memudahkan ibu jari pengguna meraihnya, kemudian kami menggunakan ilustrasi untuk mempercantik dan meningkatkan emosi pengguna.
Gabung
In the Login section, we offer the option of logging in using Google, Apple, and Facebook accounts, because from the data we get, it can simplify the user login process.
Then we also provide a remember me feature so that when the user has logged out and wants to log in again, the user does not need to enter the password again so that the login process is faster.
There we also offer a forgot password feature for users who forget their password, and also a register button if you don’t have an account.
If the login process is successful, we provide a green splash screen with calm illustrations to enhance the user experience.
Porgot Password
In the forgot password section, we use OTP Verification to increase the security of our users. why not a verification email? because we are aware that crimes using fishing methods are very common, therefore, to avoid this, we use OTP Verification.
Search Course
On the home page, I try to make users understand and know their needs, I put smart logos, baskets, and notifications in the header to make it easier for users to see small icons that are very useful.
Underneath there is a search bar that functions to search for courses, we provide a proportional size for the search bar in order to reduce user effort.
The sections that we display on the home page are:
- Weekly Deals
- Task Deadline Features
- Latest Activity Features
- Category
- and Package Recommendations
We strive for the UI that we offer can solve user problems. We deliberately carry the concept of e-Commerce so that users no longer need to learn the flow of this application.
We also offer discounts on certain courses to attract users, because from the data we get, Indonesian people really like discounts.
Phurchase Course
Here we want to explain that the purchase method can be done in 2 ways, namely: first by pressing the buy now button directly and secondly entering the cart first.
The difference is, if you press the buy now button, only one item is purchased, it’s different if you put it in the cart first, then we can choose which one we will checkout and can make multiple purchases at once like an e-commerce.
Why we put the buy now button as the primary button, because here we are in the scope of education, and from the research we get, online course platform users usually only buy one item to learn. Unless the selected item is a single entity.
Next we give users to enter promo code to get cheap deals. Underneath there is a checkbox which, if pressed, the user gives charity or a donation of 5 thousand rupiah to orphans.
Learning Process
We try to arrange the Material well, so that the user’s assumptions about the material are quickly understood.
We also display a progress bar to measure how many percent of the material the user has learned.
Fitur Leaderboard & Achievement
Chat & Komunitas
This chat is a solution for problems about the difficulty of contacting mentors, smart bots as a solution if you have general questions.
Then the community was created to broaden horizons and as a medium for sharing knowledge such as Pro Tips and others as well as a place to look for self-development events as an increase in learning motivation because there are prizes that are triggers.
If user win, user can add it to his Curiculum Vitae.
Its LINK PROTOTYPE & INTERACTION
Or scan QR Code:
5 — Test
User Testing
UT is useful for testing whether our application is in the form of a prototype that is understood by the user. It helps to validate our ideation result, whether it is fine or not.
In the Testing stage, I did User Research with the in-depth interview method. In-depth interview is a process in which to obtain feedback for research purposes and find out the level of usefulness, convenience and user satisfaction by means of question and answer between the interviewer and the respondent.
The results of the IDI (In Depth Interview) I put in the Single Ease Question (SQE) scale
Overall good level of satisfaction, usability and convenience, the Pinterr application gets a score of 6 out of 7.
The results are as follows:
- Tittle Button “Lanjut ke Materi Selanjutnya” does not meet the user’s assumptions.
- Plus Points:
1. UI Familiarity and friendship;
2. Icon copy or copy text on the account number to help the user;
3. The order of the material is clear.
Revision from UT
Conclusion
Aplikasi Pinterr mendapatkan respon yang baik dari responden saat melakukan Usability Testing, karena aplikasi tersebut memiliki UI yang cukup sederhana dan konsisten.
Namun, masih banyak fitur dan bagian yang perlu dilengkapi untuk menjadi aplikasi yang lebih baik lagi.
Terima kasih telah berkunjung! Semoga proses yang saya tulis di atas bisa menjadi bahan referensi bagi siapa saja yang membacanya. Anda juga dapat meninggalkan umpan balik dan komentar agar kami dapat berdiskusi dan berkembang lebih baik. Terima kasih!
