Redesain UI- Kalender Akademik “AIS Mobile App”

Pada kesempatan kali ini saya ingin berbagi tentang pengalaman saya melakukan redesain terhadap interface aplikasi mobile. Kalender Akademik merupakan salah satu fitur ada pada aplikasi AIS mobile UIN Jakarta. Kegiatan ini saya lakukan bersama teman-teman komunitas Rumah UX.

Buat catatan isu tentang tampilan UI nya

Setelah menentukan fitur atau aplikasi yanga kan diredesain. kita akan membuat daftar isu tentang tampilan interface yang terdapat pada aplikasi tersebut, saya sarankan untuk membuat sebanyak mungkin. dan berdasarkan hasil pengamatan saya,

tampilan UI kalender akademik

isu UI pada tampilan awal kalender akademik adalah :

1. isi konten pada fitur tidak merepresentasikan judulnya, tittle fitur ini adalah kalender, namun ketika dibuka isinya terlihat seperti sebuah daftar yang tidak beraturan
2. font tulisan terlalu kaku dan warnanya terlihat monoton
3. telalu banyak tulisan sehingga terkesan penuh dan tidak bisa fokus pada informasi yang tertera
4. jadwal berantakan dan banyak yang sudah tidak berlaku lagi, itu agak membingungkan

Jika sudah membuat list terhadap isu-isu UI yang telah di dapat. Selanjutnya kita akan melakukan interview dengan partner feedback.

Interview dengan partner feedback

Pada tahap ini kita melakukan sesi QnA dengan user lainnya yang disebut partner feedback, karena tahapan ini bertujuan untuk mendapatkan informasi dari perspektif yang berbeda sebagai timbal balik kita dalam melakukan redesain.

Kita bisa membuat beberapa pertanyaan mengenai interface yang akan di redesain, dan akan lebih baik jika pertanyaan yang dibuat bisa mendukung isu UI yang sebelumnya. Tetapi sediakan juga pertanyaan yang bisa mendorong pemikiran lain dari partner feedback kita, jadi mereka bisa bebas berimajinasi sehingga kita bisa mendapatkan informasi dari perspektif yang berbeda untuk melakukan redesain.

Berikut adalah pertanyaan yang saya ajukan kepada partner saya serta feedback yang saya dapatkan darinya:

1. Apakah kamu merasa nyaman dengan tampilan UI kalender akademik ini?jelaskan pendapatmu?
2. menurutkamu apakah perlu adanya visualisasi yang lebih baik dari tulisan ini?
3. Apakah kamu bingung dengan tampilan desain kalender akademik?
4. Menurut kamu bagaimana seharusnya tampilan ini agar lebih baik?

Dan jawaban dari partner feedback saya sebagai berikut :

1. Saya merasa tidak nyaman atau terganggu dengan tampilan UI nya karena harus melakukan scroll sehingga tidak efisien, desainnya akan lebih baik jika dibuat semacam button menu per jenjang akademik.
2. Seharusnya jadwal yang sudah selesai sebaiknya dihilangkan atau diberi keterangan lain, dan jadwal dibuat urut.
3. warna tampilan lebih baik dibedakan agar tidak terlalu membingungkan

Desain Wireframe

Setelah mendapat feedback dari partner saya. kemudian saya memulai untuk redesain dalam bentuk wireframe.

wireframe untuk redesain yang pertama

penjelasan tentang desain yang saya buat:

• kalender akademik : judul tampilan
• button menu: fitur untuk mempermudah pencarian jadwal yang dipisah dengan jenjang pendidikan masing-masing
• kalender: saya terfikir untuk membuat desain ini dengan adanya fitur kalender yaitu dengan mengubah tampilannya tampak seperti dengan judulnya dengan beberapa penanda pada hari-hari penting seperti jadwal Ujian, Wisuda, dll (dengan asumsi jadwal dalam kalender harus terintegrasi dengan data mahasiswa sesuai dengan jenjang dan semesternya)

untuk menilai apakan desain kita sudah efektif atau belum baik kita harus melakukan validasi kepada user hal ini untuk meminimalisir kesalahan usability yang bisa terjadi jika desain yang baru pada sebuah produk diimplementasika kepada user. ada dua tipe dalam melakukan testing yaitu guerilla testing (melakukan testing kepada user secara acak) dan segmented testing (menentukan ciri-ciri user yang bisa menjadi subjek testing desain yang kita buat) , dan hal ini akan kita lakukan dengan partner feedback kita.

Dari wireframe yang saya buat diatas saya mendapat feedback sebagai berikut

“desainnya sudah terlihat lebih baik namun masih harus ada yang perlu diperbaiki, seperti penambahan keterangan pada button menu yang dibuat dan mungkin dikalendernya bisa ditambahkan fitur keterangan untuk memperjelas jadwalnya”

kemudian saya membuat desain wireframe setelah mendapat feedback dari user.

tampilan wireframe setelah diberi feedback

dengan feedback yang saya dapat, saya melakukan beberapa perbaikan sesuai dengan feedback yang saya dapat dan menambahkan menu bar mengingat kalender akademik ini adalah sub-menu yang terdapat pada informasi, lalu saya membuat desain UInya dengan AdobeXD.

Demikian redesain yang saya lakukan, semoga bisa bermanfaat. terima kasih

nb : if you have any suggestion please leave comment below thanks