Case Study UI/UX Design: Redesign Aplikasi Simaster Universitas Gadjah Mada

Redesign Aplikasi Simaster Universitas Gadjah Mada Menjadi Lebih Efisien dan Efektif

8 min readJan 5, 2021

Introduction

Perkanalkan nama saya Arfian Cahya Dwi Setya UI / UX enthusiast yang baru saja merintis dari bidang desain grafis menjadi UI / UX Designer. Sekarang Saya adalah Mahasiswa tingkat akhir di Universitas Gadjah Mada.

Singkat cerita, saat ini Saya sedang melakukan sebuah daily UI/UX design yang bertujuan untuk melatih skill dan pengetahuan dalam hal pengembangan pembuatan aplikasi. Untuk awal-awal pembelajaran saya mencoba redesign aplikasi Simaster UGM yang selalu digunakan oleh civitas akademika ugm baik mahasiswa maupun dosen.

The Problem I’m assuming is…

Penggunaan user interface yang terlalu monoton dan tidak modern. Lalu apa jadinya jika aplikasi simaster menggunakan user interface yang lebih modern dari pada yang saat ini, dengan catatan tanpa menyampingkan kebutuhan user, pasti akan lebih keren lagi aplikasinya dan lebih enak dipandang berlama-lama. Selain itu sampai saat ini masih terdapat beberapa masalah dalam hal presensi untuk absensi pada aplikasi simaster. Padahal absensi adalah hal yang paling krusial pada perkuliahan. Namun sampai saat ini masih belum ada solusi yang tepat untuk memperbaiki masalah tersebut. Selain itu fitur notifikasi tidak bisa langsung mendirect ke tujuan dan harus membuka menu yang sangat banyak.

Dalam membuat suatu produk diperlukan suatu framework untuk menghasilkan produk yang sesuai, kali ini saya akan menggunakan framework design thinking yang terdiri dari empati, define, ideation, prototype, dan test.

Design Process

Source: The 5 Stages of Design Thinking and Specific Techniques

Empathise

Fact & Insight

Pada langkah ini Saya menggunakan review dari pengguna yang ada di Google Store yang dimana mempermudah dan mempercepat untuk menganalisi masalah yang sedang dihadapi oleh user, selain itu juga dapat mengetahui kebutuhan user yang belum ada pada aplikasi tersebut.

Sebelum mendesain tentunya kita harus melakukan proses ini terlebih dahulu agar mengetahui apakah masalah yang diasumsikan benar dirasakan oleh user. Karena asumsi saja tidak cukup, bisa saja kesulitan yang saya rasakan tidak dirasakan orang lain.

Dengan itu saya mencoba menjabarkan permasalahan yang dihadapi oleh user melalui review di google play store yang berisikan kesulitan yang dihadapi oleh user dalam menggunakan aplikasi simaster.

Kesulitan presensi menggunakan QR Code. Pada aplikasi simaster memiliki fitur untuk presensi secara onlline menggunakan qr code untuk mahasiswa. Namun saat ini terkadang presensi menggunakan scan QR Code terjadi galat bahkan tidak bisa melakukan presensi sama sekali dan harus secara manual dimasukan kembali oleh dosen. Saat ini masih blm ada fitur presensi selain QR Code untuk mahasiswa.
Notifikasi pada aplikasi kurang baik. Saat ini aplikasi simaster memiliki fitur notifikasi untuk memberitahu mahasiswa jika ada penambahan yang dilakukan oleh dosen maupun admin seperti survey dan lain lainnya. Namun saat ini notifikasi pada aplikasi terkadang muncul di homescreen hp ada juga yang tidak, selain itu kita tidak dapat mengklik notifikasi untuk mendirect secara langsung tujuan dari notifikasi itu apa yang baru saja ditambahkan atau ada informasi yang lain. Notifikasi juga tidak memberitahu beasiswa apa yang buka dan sudah ditambahkan ke aplikasi simaster.
Menu beranda yang dirasa kurang berguna. Pada menu tersebut dirasa kosong hanya ada informasi mengenai akun dan notifikasi
User interface yang kurang modern. Pada aplikasi simaster saat ini user interface yang digunakan sangatlah sederhana dan sudah bagus, namun terdapat beberapa menu yang mungkin dapat diperbaiki menjadi lebih baik lagi.
Menu Akun yang dirasa kurang berguna. Pada menu tersebut dirasa kosong dan mubazir dikarekan hanya ada informasi mengenai ganti grup, ganti password, perizinan notifikasi AutoStart, Sinkron Ulang, dan logout. Pada menu ini tidak ada informasi mengenai pemilik akun.

Affinity Diagram

Problem Statement

Dari affinity diagram yang telah dijabarkan di atas, maka bisa ditarik kesimpulan berupa 5 Problem Statement:

Pengguna merasakan kesulitan presensi menggunakan QR Code
Pengguna mersakan notifikasi yang kurang interaktif pada aplikasi
Pengguna tidak merasakan kegunaan yang signifikan pada menu beranda
Pengguna merasakan user interfacenya tidak terlalu modern.
Pengguna tidak merasakan kegunaan yang signifikan pada menu Akun.

Design Mandate

Setelah menetapkan Problem Statement, saya membuat Design Mandate. Buat yang belum mengerti maksud dari Design Mandate ini, mungkin akan saya jelaskan sekilas. Jadi Design Mandate inilah yang menjadi pondasi tujuan dalam melakukan redesign nantinya. Berikut adalah Design Mandate pada studi kasus aplikasi Simaster UGM:

Menambahkan fitur memasukkan code sebagai cadangan presensi menggunakan QR Code.
Merubah fitur notifikasi menjadi lebih interaktif dan menambahkan gruping pada setiap notifikasi
Mengubah menu beranda menjadi menu yang lebih bermakna dan berguna.
Menggubah beberapa desain user interface menjadi lebih modern tanpa mengurangi kebutuhan user yang sudah ada.
Mengubah menu akun enjadi menu yang lebih bermakna dan berguna.

Define

How Might We (HMW)

How Might We ini adalah proses memberikan pertanyaan “bagaimana jika..?” sehingga membuka jalan untuk solusi yang akan diberikan nantinya. Dan juga solusi tersebut menjadi lebih terarah dan reasonable. Berikut adalah hasil dari proses How Might We (HMW) saya pada aplikasi Simaster:

Menambahkan fitur presensi menggunakan kode sebagai backup jika tidak dapat melakukan presensi menggunakan QR Code.
Memisahkan notifikasi dari beranda, mengkelompokkan setiap notifikasi yang ada seperti notifikasi untuk kelas, survey, dan informasi-informasi lainnya, dan membuat notifikasi menjadi lebih interaktif.
Mengganti menu beranda yang nantinya berisi informasi terkait menu yang tersedia pada aplikasi simaster
Menggubah beberapa desain yang ada menjadi lebih modern
Mengganti menu akun yang akan berisi informasi dari pemilik akun tersebut

Ideation

Wireframing and Low Fidelity

Gambar rangka adalah pengembangan termudah dan termurah. Ini akan membantu sebelum mengerjakan lebih dalam desain hi-fi. Dalam pembuatan wireframe, saya hanya membuatnya di secarik kertas untuk menentukan flow dan apa saja informasi yang akan ditampilkan pada tiap halaman. Jadi di figma saya langsung membuat low fidelity-nya untuk menyusun konten, informasi, dan sekaligus copywriting.

Perlu diketahui, Bahwa hasil hi-finya akan lumayan berbeda dengan yang desain lo-finya, mulai dari letak informasi, letak button, dan lain-lain. Namun untuk informasi dan tujuan dibuatnya halamannya tersebut tetap sama dengan lo-fi.

Prototype

Pada langkah ini saya melakukan 2 tahap pelaksanaan yaitu:

User Interface
Prototype & Interaction

UI Design

Pada tahap UI Design ini saya membuatnya dengan aplikasi berbasis website yaitu Figma. Dan berikut adalah hasil Prototype dari aplikasi simaster yang saya buat :

Beranda

Pada beranda saya merubah tampilan yang dimana terdapat informasi berupa foto,username,dan informasi mengenai NIM, fakultas dan prodi. Selain itu terdapat fitur baru yaitu informasi mengenai jumlah ujian yang sedang terlaksana, assignment yang diberikan, dan jumlah sks yang sudah diambil. Fitur tambahan yang kedua adalah adanya jadwal kuliah perhari yang akan memberkan informasi waktu, tempat, mata kuliah, dan sedang terlaksana atau belum perkuliahannya. Terakhir adanya fitur menu favorit atau menu pintas yang sering digunakan oleh user. yang berfungsi memudahkan pengguna untuk keluar masuk menu yang serung di kunjungi.

Navbar

Bagian navbar bawah adalah bagian yang paling saya suka dalam pendesaian kali ini, navbar berisi lima menu yaitu beranda, e-learning, scan, dms, dan juga akun. Untuk tombol beranda pada navbar berfungsi untuk melakukan navigasi langsung ke halaman berandam unuk e-learning akan langsung ke galaman e-learning, untuk scan akan memunculkan empat tombol baru yaitu scan untuk dosen, mahasiswa, absen menggunakan lokasi dan kode. Tombol dms yang langsung navigasi ke file file yang sudah kita upload di aplikasi simaster dan tombol akun yang akan navigasi ke hamalam profile.

Sedangkan untuk navigasi paling atas terdapat dua yaitu menu humberger dan juga notifikasi yang dimana menu humberger berfungsi untuk menampilkan menu-menu yang terdapat di aplikasi simaster sedangkan notifikasi adalah announcment atau pengumuman.

Notifikasi

Pada bagian notifikasi saya sedikit memodif tampilannya adan juga membagi notifikasi berdasarkan all items, exams, classes, dan general yang dimana masing-masing kategori mempunyai notifikasi atau announcement yang berbeda/ untuk all items akan menampilan semua notifikasi yang tersedia, exams hanya menampilkan notifikasi yang berkaitan dengan ujian, classes yang berkaitan dengan kelas mata kuliah tersebut, dan general adalah notifikasi general seperti survey dan lain lainnya.

Presensi

Pada bagian presensi saya hanya menambahkan opsi cadangan jika presensi menggunakan QR Code terjadi galat maupun gagal dalam membukan scan qr code, yaitu dengan menggunakan Pin yang dapat dimasukan pada qr scan pada bagian menu humberger. Terdapat kotak kosong untuk memasukan pin yang diberikan oleh dosen, yang bertujuan untuk memudahkan dosen maupun mahasiswa jika terjadinya galat, yang dimana dosen tidak perlu menambahkan absen secara manual lagi.

Akun

Pada halaman akun saya mengganti namanya menjadi profile yang dimana terdapat terdapat beberapa menu seperti informasi data akum data pribadi, data rekening dan yang tertera pada gambar diatas. Yang dapat memudahkan user untuk melakukan pergantian informasi akun.

Validate

Usability Testing

Untuk melakukan validasi hasil Redesign aplikasi Simaster, saya memerlukan yang namanya Usability Testing. Hasilnya mendapat feedback sebagai berikut :

“ Gampang dipake si soalnya nama sama menunya keliatan dan homenya berfungsi dengan baik”
“Enak diliat dan digunain”
“Walaupun ada fitur tambahan tidak mengurangi kemudahan dalam penggunaan aplikasinya”
“Penggunaan Pin Code untuk backup presensi sangat solutif, dikarenakan jika terdapat galat tidak memakan waktu yang lama untuk presensi”
“Menu Akunnya memiliki tujuan yang lebih baik dari sebelumnya”
“UX nya udah bagus”
“UI nya bagus juga, cuma masih agak kaku kesannya”

Kesimpulan

Dari keseluruhan yang sudah saya redesign, memang masih bisa lagi untuk terus ditingkatkan. Dimana bisa jadi saya saat ini masih memperbaiki hanya beberapa bagiannya saja. Masih terdapat beberapa bagian yang tidak saya redesign karena tidak memiliki waktu yang cukup untuk meredesign keseluruhan tampilan dari aplikasi simaster ini.