Redesign Web Kampus Insitut Teknologi Telkom Surabaya
Sebelumnya, terima kasih telah diberi kesempatan belajar banyak di Institut Teknologi Telkom Surabaya ini, apalagi desain saya langsung diimplementasikan, langsung di develop, sesuatu yang sangat diidamkan oleh para entry level seperti saya, suatu kehormatan yang amat besar bagi saya. Terima kasih, ITTS!
Introduction
Hai, dalam artikel ini aku ingin membahas sedikit apa yang sudah aku lakukan selama magang di salah satu kampus swasta di Indonesia, Institut Teknologi Telkom Surabaya. Aku ditempatkan di unit Pusat Teknologi Informasi atau bagian IT dari kampus tersebut. Salah satu tugas yang aku kerjakan disana adalah mendesain ulang (redesign) website kampus utama. Berhubung di tempat saya magang ini belum ada desainer web atau UI/UX Designer, aku mengerjakannya sendiri sehingga dalam proses tersebut tentunya membutuhkan kolaborasi yang kuat dengan developer beserta tim konten. Proses redesign berlangsung selama 2 bulan.
Overview
Institut Teknologi Telkom Surabaya, dibawah naungan Yayasan Pendidikan Telkom berdiri sejak tahun 2018, sehingga masuk dalam kategori kampus baru yang masih dalam tahap pengembangan. Website utama yang akan di desain ulang ini tentunya dibuat agar lebih menarik lebih banyak para calon mahasiswa untuk mendaftar ke kampus.
Role: UI/UX Designer
Scope: User Research, analysis, wireframing, mock-up, design system, prototyping, and usability testing.
Timeline: 2 months (May — June)
Tools: Figma, FigmaJam, Zoom, Spreadsheet
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 implementation
1. 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 berkurang
- On 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 pendaftaran
2. Define
Salah 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.
3. 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.
4. 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/
Sekian Case Study Redesign Website Kampus IT Telkom Surabaya kali ini,
Kalau ada yang membingungkan atau kurang jelas tolong beri komentar ya.. Komentar kamu dalam artikel ku ini akan sangat membantu dalam pembuatan artikel selanjutnya. Dan kalau kamu puas dengan artikel ini, boleh banget buat klik like ❤ dan share 🙌
Terima kasih :)
Numpang iklan~ Monggo mampir, follow, like, comment, and share ya.. tinggal di klik aja kok 👌
Hatur tengkyuu~
