Redesign welcome page - sso unesa
Apps Name
SSO UNESA
Year
2022
Halo, temen-temen. Jadi ini adalah eksplorasiku dalam menyelesaikan tugas di kelas UI/UX Binar Academy. Aku melakukan redesign pada website Singke Sign On (SSO) UNESA.
Disclaimer : Ini adalah hasil eksplorasiku untuk memenuhi tugas course di Binar Academy. Here I share the process to complete this challenge. Semua pengerjaan penuh berdasarkan asumsi dan keresahan pribadiku.
Overview
SSO UNESA adalah situs yang menghimpun berbagai layanan sistem informasi untuk menunjang kegiatan di kampus. SSO berisi layanan seperti Sistem Informasi Akademik, Sistem Informasi Magang, dll.
Tampilan Welcome Page SSO UNESA saat ini
Pain Point
Setelah melihat dan menggunakan website ini aku merasa desainnya asal-asalan sebagai website resmi dari kampus. Mungkin pov mahasiswa baru akan merasa bingung saat pertama kali mengakses website ini. Berikut adalah beberapa pain points menurutku:
-
Tidak konsisten
-
Grid dan layout berantakan
-
Text styles terlalu besar dan terlalu kecil
-
Ilustrasi terlalu full
-
Warna terlalu ramai
-
Fokus user bingung dikarenakan semua elemen ingin stand out
Room for Improvement
Dari adanya pain points yang aku rasakan terdapat celah untuk melakukan improvement atau perbaikan agar experience user saat mengakses website ini menjadi lebih baik. Sehingga berikut adalah beberapa improve yang perlu dilakukan:
-
Me-redesign page tersebut agar lebih user-friendly
-
Membuat design tersebut sesuai dengan usernya yaitu generasi melek digital
-
Membuat text dan color styles agar konsisten
Benchmark
Dalam mendesain ulang, aku mencari ide desain dan referensi (benchmarking) dari beberapa situs resmi lain di internet. Seperti Binus Maya, Website Univ Gajah Mada, Website Universitas Indonesia, dan Harvard University.
Color Ideation
Dalam menentukan warna untuk mendesain tampilan welcome page, aku memakai warna dari logo UNESA dan logo SSO UNESA. Aku juga pake warna neutral untuk menyeimbangkan warna agar tidak terlalu colorful.
Primary Color
Neutral Color
Text Styles
Untuk lebih konsisten dan memudahkan developer dalam coding, aku juga membuat text styles dengan typeface "Inter" karena stylenya cocok untuk penggunaan resmi dan bisa menambah kesan milenial.
Text Stles Desktop Mode
Text Stles Mobile Mode
Prototyping
Dalam membuat ulang desain welcome page SSO UNESA semua aset aku ambil dari website asli. Lalu dalam redesign aku membuat versi desktop dan juga mobile. Ada beberapa hal yang challlenging bagi aku, karena sebelumnya aku belum pernah melakukan desain website dengan dua versi yaitu desktop dan mobile. Dari mencari dan melihat referensi ternyata tidak jauh berbeda dengan desain yang desktop namun peletakan komponen dan layout ada sedikit berbeda.
Welcome Page Desktop Mode Redesign Version
Welcome Page Mobile Mode Redesign Version
Please click the italic link below to try the prototypes.
Closing
That’s all the explanation of my case study project. Aku mendapatkan banyak insight dan wawasan baru terkait dengan how to designing desktop mode dan mobile mode, hope will be useful for me in the future. Feel free to comments, I am very open to receiving feedback and suggestions. Thank you for your time and attention to read :)
​
Thanks to:
- Kak Korniawan Prabowo as a Fasilitator in UI/UX 10 Class
- Binar Academy