Redesign Web Kampus Insitut Teknologi Telkom Surabaya

🎨 Process

Disini saya coba mengikuti tutorial redesign yang ditulis oleh Taras Bakusevych (Product Principal di Topaz) dalam blog nya yang berjudul How to redesign, step by step guide.Berikut fase atau tahapan-tahapannya:

• Discovery — building shared understanding and empathy

• Definition — identifying key flows, challenges, and pain points

• Exploration — ideate, sketch, low-fi prototype

• Execution — iterative design, test, and implementation1.

💡Discover

Dimulai dengan memahami problem yang dirasakan oleh user secara spesifik seperti:

• Why you chose this product over other alternatives?

  User (calon mahasiswa) memilih membuka website kampus karena info yang di dapat akan lebih spesifik jika dibandingkan dengan melihat info dari sosial media yang biasanya hanya menampilkan ringkasannya saja

  
  

• What you love most about this product/flow/feature

  Info yang didapat lebih spesifik dan lebih banyak visual juga jadi lebih bisa menggambarkan isi kampus dengan jelas

  
  

• What you hate most about this product?

  User terkadang mendapat info yang kurang jelas dan berbelit-belit serta desain website yang kurang menarik sehingga berdampak pada ketertarikan calon mahasiswa untuk mendaftar berkurangOn a higher-level before touching anything, you need to know

  
  

• Who is doing What? Why and How they are doing it?

  Calon mahasiswa melakukan pencarian info kampus karena untuk menambah pengetahuan tentang kampus dengan cara membuka website, mencari info yang ingin diketahui, jika tertarik maka akan diarahkan ke halaman pendaftaran2. DefineSalah satu cara untuk melakukan empathy terhadap user yaitu dengan membuat persona. Dengan membuat persona ini, harapannya kita sebagai desainer dapat mengerti ekspetasi dan keinginan dari user.

  
  

  Adi.17 tahun

  

🕵️‍♂️ Review Competition

Analisis kompetitor dilakukan untuk mengetahui apakah ada celah diantara pesaing yang masih satu pasar. Dibawah ini adalah sedikit matriks sederhana yang saya buat yang berisi informasi inti seperti target dan fitur dari masing-masing kompetitor.

🎗️ Explore

Dengan analisis antar kompetitor yang sudah dilakukan sebelumnya, harapannya kita bisa mempelajari apa yang kita anggap menjadi standar dalam tahapan berikutnya. Di luar itu, kita juga memerlukan inspirasi yang dapat mendukung hasil analisis yang telah dilakukan. Seperti contoh dibawah ini, saya coba mencari layout website yang minimalis dan mengikuti tren.

Selanjutnya kita akan mulai mengidentifikasi area masalah pada desain existing. Mulai dari visual, bug, inkonsistensi, layout, dsb.

Setelah menemukan masalah, langkah selanjutnya yaitu mencari solusi dari setiap masalah yang telah diidentifikasi.

Setelah memperkirakan fitur atau solusi dari beberapa masalah yang telah ditemukan, saatnya membuat prioritas. Membagi fitur mana yang sekiranya lebih baik dikerjakan terlebih dahulu, mana yang lebih penting, yang kurang penting, dsb agar pengerjaan lebih efektif dan efisien.

📱Lofi Design

Fitur-fitur yang telah dipetakan mulai dirancang lewat coret-coretan, atau disebut lofi design, atau wireframe. Lofi design ini dibuat terlebih dahulu sebelum nantinya diberikan sentuhan warna dan animasi.

⏭️ Execute

Setelah membuat wireframe, uji coba, dan beberapa revisi, saatnya memberikan sentuhan warna, style yang menarik dengan tetap memprioritaskan tujuan dan nilai-nilai kampus. Dimulai dengan membuat Design System untuk asset dalam proses desain, kemudian dilanjutkan dengan membuat prototype.

Design System

Ptototype, HiFi Design

⛵ Conclusion

Finally, website sudah jadi, sudah testing juga. Saatnya melihat analisis traffic website untuk melihat kemajuan dari hasil redesign website kampus, dan inilah hasilnya!

Redesign dilakukan dari bulan Mei hingga Juni. Ada sedikit penurunan sebelumnya, tetapi pada bulan juli mulai ada peningkatan lagi. Dalam proses redesign ini tentunya tidak berjalan mulus. Ada beberapa kendala seperti proses deliver desain kepada developer yang kurang baik, perbedaan pendapat dengan para stakeholder, dan lain sebagainya, Alhamdulillah semua bisa dilalui dengan baik 🙂

Live website bisa dilihat di sini yaa👉 https://ittelkom-sby.ac.id/