ELING UI/UX- Web & App Design

Terkait Pandemi Covid-19, Rektor Universitas Brawijaya telah mengamanatkan bahwa kegiatan Belajar di Fakultas Ilmu Komputer UB diselenggarakan secara jarak jauh hingga semester ganjil 2020/2021. Website ini memuat tentang informasi penyelenggaraan dan pelaksanaan kegiatan pembelajaran dan berbagai informasi yang terkait. Proyek ini dimaksudkan untuk tugas akhir dari mata kuliah perancangan user experience.

About The Project

Projek ini adalah bagian dari hasil evaluasi dan perancangan aplikasi ELING UB

• Team Role: Pembuatan project terdiri dari 5 orang dengan dipimpin oleh 1 ketua, adapun posisi yang ada adalah Developer, UX Researcher, UI/UX Designer, UX Designer, Marketing.

• Waktu pengerjaan : ± 12 minggu

• Pembimbing: Dr. Eng Herman Tolle

• Permasalahan: Seiring digunakannya aplikasi ELING sebagai alat untuk proses pembelajaran secara daring muncul berbagai keluhan terkait pengalaman user dalam menggunakannya. Baik keluhan dari segi tampilan yang rumit, absensi yang menyulitkan, tidak adanya notifikasi mengenai tugas ataupun deadline secara aktual dan keluhan lain yang intinya berkaitan dengan masalah user experience, maka perlunya dilakukan evaluasi untuk mengetahui permasalahan yang ada serta nantinya dapat dibuat rancangan yang bisa digunakan untuk acuan perbaikan user experience.

• Postingan asli : Klik disini

The Design Process

• Eling Sitemmap

Alur secara umum dari sitemap diatas adalah sebagai berikut:

1. Pertama user akan memasuki website https://eling.ub.ac.id/ dan akan dihadapkan halaman homepage yang berisi informasi atau pengumuman.

2. Selanjutnya user harus malakukan log in untuk mengakses fitur pembelajaran daring, jika tidak punya , pengguna bisa melakukan sign up atau menghubungi admin untuk dilakukan pendaftaran

3. Setelah masuk ke halaman dashboard user bisa melihat profile, ranking, kelas atau keluar dari akun yang user miliki untuk keamanan.

4. Jika user masih belum memiliki kelas , user diharuskan melakukan class enrolement dengan menggunakan enrolement key yang disediakan pada halaman pengumuman.

Dalam memulai pembelajaran, user masuk ke dalam kelas untuk melakukan absensi, mengakses materi pembelajaran, tugas atau menghapus kelas.

• User Journey

User journey map atau dikenal juga sebagai customer journey map merupakan sebuah tool desain yang penting untuk memahami produk atau layanan menurut perspektif pengguna. User journey map menggambarkan visualisasi langkah-langkah yang diambil pengguna untuk mencapai tujuannya

• Emphaty Map

Pada Emphaty Map ini dijelaskan terkait apa saja yang dirasakan, didengar, dilihat, dan kita bisa mengetahui secara jelas bagaimana perasaan yang dialami oleh user saat mencoba suatu aplikasi.

• HMW Question

HMW Question berisikan pertanyaan-pertanyaan singkat yang bisa dijadikan untuk bahan evaluasi perancangan dari evaluasi desain nantinya

• Rancangan Wireframe

Wireframe dibuat sebagai bentuk awal dari prototype, wireframe digunakan untuk merancang layout dari aplikasi sebelum diterapkannya aspek visual lainnya.

• Design Mockup

Mockup adalah media visual yang digunakan untuk priview sebuah konsep desain yang kemudian diberikan efek visual sehingga hasil gambar terlihat menyerupai wujud yang sbenarnya.

• Testing

1. UEQ Result : Hasil kuisioner UEQ yang diisi oleh responden dengan 6 skala pengukuran yaitu daya tarik (attractiveness), kejelasan (perspicuity), efisiensi (efficiency), ketepatan (dependabilty), stimulasi (stimulation) dan kebaruan (novelty) pada kedua rancangan prototype high fidelity pada website dan mobile apps ELING UB, memiliki nilai evaluasi yang positif. Hal tersebut dapat dilihat pada nilai rata-rata, dan stdev kedua rancangan prototype website dan mobile apps ELING UB mempunyai nilai rata-rata berkisar >0,8 sehingga menunjukkan terjadinya evaluasi positif. Kemudian dapat dilihat juga pada panah hijau di scale mean yang menandakan bahwa responden memberikan evaluasi positif pada masing-masing point pengujian di UEQ. Kemudian jika dilihat pada hasil MVI pada prototype website ELING UB ini menunjukkan hasil bahwasannya penilaian dari tiap item, prototype website Eling cenderung memiliki nilai atau hasil yang baik, tetapi tetap memiliki kelemahan dalam user experience nya yaitu kejenuhan pemakai. Sedangkan pada pengujian prototype mobile apps ELING menunjukkan hasil yang memuaskan.

2. Heuristic Evaluation Result : Pada analisis Heuristic Evaluation yang dilakukan pada website hampir semua aspek memperoleh Nilai Evaluator yang kecil / cosmetic problem sehingga dapat diselesaikan bila terdapat waktu dan sumber daya ekstra. Tetapi terdapat aspek yang memperoleh nilai minor pada Visibility if system state dan Help and Documentation sehingga memperoleh prioritas rendah untuk diselesaikan. Hal ini di sebabkan oleh tidak adanya fitur popup untuk menampilkan informasi , peringatan dan error serta tidak adanya fitur help and documentation untuk panduan pengguna. Untuk Heuristic Evaluation pada prototype mobile app hasilnya pun tidak jauh berbeda pada prototype website.

• Value Adding

Dalam proses yang telah dilakukan mulai dari tahapan paling awal hingga tahapan pengujian saran rancangan UI pada aplikasi ELING UB didapati beberapa hal yang bisa dijadikan saran atau masukan untuk menghasilkan hasil yang terbaik kedepannya :

1. Pada tahapan evaluasi dengan form heuristic terdapat beberapa poin pada aspek penilaian heuristic yang kejelasan dari maksud masih dirasa kurang, sehingga hal ini memungkinkan untuk menghasilkan penilaian buta, atau penilaian yang kurang tepat

2. Pada tahapan evaluasi juga, aktor atau expert yang berperan adalah pembuat dari desain atau prototype usulan UI pada ELING UB itu sendiri. Sehingga tingkat objektivitas nya masih diragukan.

3. Pertanyaan – pertanyaan yang ada pada kuesioner untuk mendapatkan insight atau informasi mengenai kendala yang dialami oleh pengguna aplikasi ELING UB masih kurang baik atau tepat, sehingga hasil yang didapatkan masih belum terlalu mendapatkan beberapa permasalahan yang memang benar – benar dikeluhkan oleh pengguna ELING selama ini.

4. Saran atau hasil dari evaluasi aplikasi ini juga bisa ditingkatkan apabila bisa mendapatkan informasi mengenai pendapat stakeholder. Informasi tersebut bisa didapatkan dari proses wawancara yang dilakukan.

Demo Final Project

Video ini merupakan presentasi final project mata kuliah Perancangan User Experience Kelas D. Didalam video ini berisikan pen-demo-an hasil rancangan re-design wireframe high fidelity dari aplikasi mobile serta website ELING UB.

Website dan aplikasi ELING UB adalah media pembelajaran berbasis online yang di-develop oleh Fakultas Ilmu Komputer Universitas Brawajiya, untuk menunjang pembelajaran secara online, terutama pada masa pandemi COVID-19.