Redesign UI —studi kasus ‘AIS Mobile UIN JKT’
Pada tulisan saya pertama ini, saya ingin berbagi pengalaman dan hasil mengenai praktik Re-design UI/UX yang beberapa hari kemarin telah dilakukan oleh saya dan teman-teman komunitas saya yaitu Rumah UX.
Background
Objek yang saya pilih adalah aplikasi akademik yang ada di kampus saya yaitu AIS Mobile UIN JKT pada fitur bagian informasi. Berikut tampilan awal fitur informasi :
Menentukan Asumsi dan Isu
Setelah melihat tampilan awal, saya mulai membuat asumsi dan isu dari hasil pengamatan. Berikut hasil nya :
- Kesalahan title seharusnya ‘informasi’ bukan ‘laporan’.
- Flow yang kurang efektif karena ketika mengklik menu berita dan kalender akademik menuju ke halaman berikutnya, lalu masuk ke link web lain.
- Posisi penulisan yang kurang tepat
- Menu yang disediakan masih kurang untuk fitur ‘informasi’
Melakukan wawancara awal
Karena asumsi saja belum cukup untuk menyelesaikan test case ini, maka saya juga perlu mewawancarai user/pengguna mengenai tampilan pada fitur informasi ini. Hasil wawancara sebagai berikut :
- Bagaimana warna tampilannya?
Tidak masalah, namun icon terlihat mengganggu
- Apakah ukuran dan penempatan tulisan sudah sesuai?
Kurang sesuai, mungkin bisa ditempatkan rata kiri dan diperkecil penulisannya
- Informasi apa saja yang biasanya anda butuhkan ketika menggunakan aplikasi ini?
Tata cara atau langkah — langkah tentang akademik perlu
- Apakah tampilan seperti ini membingungkan dan kurang efektif?
Ya, sangat membingungkan dan kurang efektif
Wireframe pertama
Dari isu dan wawancara yang didapat akhirnya saya mendapatkan beberapa solusi yaitu :
- Perubahan title
- Pembuatan navbar agar lebih efektif
- Penambahan fitur ‘prosedur’
- Menjadikan tampilan menjadi landing page agar tidak banyak flow
Berikut wireframe yang saya asumsikan :
Feedback
Lalu saya mendapat feedback dari user/pengguna yang sebelumnya telah saya wawancarai mengenai wireframe yang saya buat :
- Untuk bagian berita dibuat dengan bentuk trivia atau carousel saja
- Lebih satu halaman menggambarkan satu menu, misal berita hanya berita saja tidak usah landing page karena kurang efektif bila harus scroll kebawah terlalu lama
Wireframe kedua
Lalu akhirnya setelah mendapat feedback, saya membuat wirefram kedua saya menjadi seperti ini :
‘maaf, saya hanya membuat satu wireframe karena dalam praktik perkumpulan kemarin hanya diberi waktu untuk menyelesaikan satu halaman saja hehe’
Design UI
Dan ini adalah Design UI yang dibuat menggunakan tools adobe XD :
Sekian Redesign UI pertama saya yang bisa saya bagikan kepada pembaca semua. hehe terimakasy!!!
