Redesigning Del Institute of Technology’s website

~ Redesigning Result

Hetty Ana Thasya Sitorus
4 min readMay 11, 2020

Daftar isi

  1. Introduction
  2. Redesign

2.1. TAHAP I: EVALUASI WEBSITE IT DEL

2.1.1. Temuan

2.1.2. Rekomendasi

2.2. TAHAP II: EVALUASI WEBSITE UNIVERSITAS

2.2.1. Institut Teknologi Bandung

2.2.2. Universitas Bina Nusantara

2.2.3. Delf Institute of Technology (TU Delft)

2.2.4. Berkeley University of California

2.3. TAHAP III: MERANCANG ULANG WEBSITE IT DEL

2.3.1 Daftar Masalah dan Rekomendasi Perbaikan

2.3.2 Information Architecture

2.3.3 Prototype Baru Website IT Del

2.3.4 Usability Testing

2.3. TAHAP III: MERANCANG ULANG WEBSITE IT DEL

Pada bagian ini, perancangan ulang akan difokuskan ada halaman Beranda, Tentang Del, dan Program Pendidikan. Namun, pada bagian site map akan dipaparkan hasil desain ulang site map untuk keseluruhan halaman.

2.3.1 Daftar Masalah dan Rekomendasi Perbaikan

Daftar masalah dan rekomendasi perbaikan untuk website Institut Teknologi Del, berdasarkan hasil evaluasi website Institut Teknologi Del, antara lain:

  1. [H10T02/4] — Memperbaiki tata letak menu/susunan menu.
  2. [H06T04/3] — Penyajian informasi Fakta dan Angka langsung disajikan dalam 1 halaman (tanpa memisah-misahkannya dengan link).
  3. [H01T02/3] — Mengubah peletakan fitur Quick Access menjadi dibagian sebelah kanan halaman.
  4. [H01T01/3] — Mengubah konsep underlined pada judul yang bukan link.
  5. [H06T01/2] — Memperbaiki peletakan fitur pada sisi kanan atas halaman website sehingga sejajar.
  6. [H06T03/2] — Meminimalisir hyperlink yang berdekatan ke menu home.
  7. [H10T01/2] — Mengubah kata pencarian pada fitur pencarian sehingga menjadi lebih simple.
  8. [H10T03/2] — Menyesuaikan ukuran judul dan sub-judul sehingga perbedaannya terlihat antara judul dan sub-judul.

Beberapa dari daftar masalah yang diuraikan pada bahasan sebelumnya berfokus pada perbedaan penyajian informasi pada kedua bahasa website. Pada kesempatan ini, saya hanya akan berfokus pada halaman bahasa Indonesia.

2.3.2 Information Architecture

Information Architecture (IA) adalah ide untuk menyusun struktur umum dari sekumpulan informasi yang dimiliki. Pada bagian ini, information Architecture yang akan dipaparkan adalah Site Map, Task Flow, dan User Flow.

A. Site Map

Site Map adalah cara visual untuk menampilkan halaman yang representatif dari suatu website. Adapun Site Map Institut Teknologi Del yang telah di rancang ulang dapat dilihat pada Gambar 1.

Gambar 1 Hasil redesign Site Map website Institut Teknologi Del

Pada Site map yang telah didesain ulang, saya telah menghapus beberapa menu, mengubah sub-menu, mengubah beberapa posisi menu, dan menambahkan menu. Pada menu Tentang Del, terdapat penghapusan menu sambutan, keunggulan IT Del, dan Senat Akademik. Pada sub-menu Struktur Organisasi juga dilakukan penghapusan sub-menu level 2 dari Struktur organisasi dikarenakan informasinya akan disajikan dalam 1 halaman saja. Sedangkan pada menu Program Pendidikan dilakukan penghapusan sub-menu Kalender Akademik yang akan dipindahkan pada Beranda dan disematkan pada bagian Quick Access halaman.

B. Flow

Task Flow adalah serangkaian langkah (Flow) yang diselesaikan user untuk tugas tertentu. Sedangkan User Flow adalah jalur yang diikuti user dalam sebuah experience. Task Flow dan User Flow yang digunakan pada hasil redesign website Institut Teknologi Del, dapat dilihat pada Gambar 2.

Gambar 2. Flow mengakses halaman Struktur Organsasi pada hasil redesign website Institut IT Del

2.3.3 Prototype Baru Website IT Del

Prototype yang telah dirancang adalah protoype untuk Beranda, menu Tentang Del, dan Menu Program Pendidikan. Tampilan Beranda hasil redesign dapat dilihat pada Gambar 3 dan Gambar 4. Hasil Redesign website IT Del menggunakan 3 warna dominan yang merupakan warna dari logo Institut Teknologi Del, yaitu ungu, biru, dan putih. Sehingga secara tidak langsung menggambarkan Institut Teknologi Del dari warna yang digunakan. Layout header halaman website diubah sehingga Logo, menu, fitur Search sejajar dan satu kolom dengan Social Bar. Fitur search yang digunakan juga telah diubah sehingga minimalis. Kalender akademik yang awalnya disajikan di menu Program Pendidikan tlah dipindahkan ke halaman Beranda pada bagian Quick Access dalam bentuk Google Event Calender.

Gambar 3 Beranda hasil Redesign website IT Del (1)
Gambar 4 Beranda hasil Redesign website IT Del (2)

Testimonial pada awalnya ditampilkan pada bagian quick access, saya pindahkan menjadi disajikan pada halaman utama. Sub menu dari menu Tentang Del dan Program Pendidikan dapat dilihat pada Gambar 5.

Gambar 5 Cuplikan sub menu Tentang Del dan Program Studi

Penyajian informasi Fakta dan Angka setelah di desain ulang dapat dilihat pada Gambar 6.

Gambar 6 Cuplikan halaman Fakta dan Angka

Penulisan judul pada visi misi telah di ubah sehingga tidak seperti link dan menyesuaikan ukuran judul dan sub-judul sehingga perbedaannya terlihat antara judul dan sub-judul seperti pada Gambar 7.

Gambar 7 Cuplikan halaman visi dan misi

Untuk hasil Redesign website Institut Teknologi Del dapat diakses pada:

Referensi:

  1. R. Sianturi, “Design Principles,” 2020. [Online]. Available: https://riyanthisianturi.com/design-principles/.
  2. R. Sianturi, “Wireframe, Annotation and Prototyping,” May 2020. [Online]. Available: https://riyanthisianturi.com/wireframe-annotation-and-prototyping/.
  3. Hettyats, “Institut Teknologi Del” . [Online]. Available: https://hettyanats.wixsite.com/protoypewebsitedel

--

--