Niagahoster Homepage: UX Analysis & Redesign

Latar Belakang

Niagahoster adalah perusahaan penyedia web hosting dan nama domain yang telah berdiri sejak 2014. Perusahaan yang berkantor di Yogyakarta ini dikenal berorientasi pada nilai customer obsession dan result driven.

Kedua nilai tersebut membantu Niagahoster berkembang pesat hingga memiliki lebih dari 52.000 pelanggan dalam kurun waktu 6 tahun.

Tantangan

Secara umum, halaman utama website Niagahoster telah memuat informasi perusahaan secara lengkap. Akan tetapi, masih ada informasi di beberapa bagian yang kurang jelas. Permasalahan utamanya terletak pada struktur konten dan alur informasi. Struktur dan konten inilah yang nantinya menjadi fokus utama analisis serta perancangan yang saya lakukan.

Proses Desain

Setidaknya ada empat langkah yang saya jalankan dalam melakukan proses desain.

1. Analisis Homepage — berkaitan dengan arsitektur informasi & konten

2. Wawancara pengguna website & penyusunan gagasan

3. Perancangan arsitektur informasi & konten

4. Pembuatan wireframe dan user interface

Arsitektur Informasi: Keadaan Saat Ini

Penyusunan arsitektur informasi adalah langkah paling penting agar dapat berkomunikasi secara efektif dengan pengguna atau pengunjung website.

Seperti namanya, arsitektur informasi berkaitan dengan informasi dan konten halaman website.

Agar lebih memahami susunan informasi halaman utama website Niagahoster, saya membuat coretan wireframe berdasarkan halaman yang sudah ada.

Harapannya, saya dapat memahami bagaimana struktur peletakan informasi & konten pada halaman website.

Setelah menyusun wireframe, saya membaginya ke dalam 11 kartu berdasarkan informasi yang ada dalam halaman website utama.

Saya juga memasukkan 1 kartu tambahan yang berasal dari halaman lain untuk keperluan pengetesan.

Wawancara Pengunjung Website

Wawancara merupakan langkah penting untuk memahami bagaimana pengunjung menerima informasi yang dipaparkan pada halaman website. Selain itu, wawancara juga dapat digunakan untuk mengetahui mental model para pengunjung.

Harapannya, saya bisa mendapatkan wawasan tambahan terkait gambaran rancangan akhir.

Tujuan Wawancara

1. Memahami persepsi & tujuan pengunjung

2. Revisi arsitektur informasi

3. Evaluasi halaman website saat ini

4. Mendapatkan gambaran rancangan halaman versi baru

Pertanyaan Pendahuluan

Saya mewawancarai 5 pengunjung website dengan latar belakang pernah bekerja di perusahaan IT atau industri yang berkaitan dengan industri internet. Hasil analisisnya adalah sebagai berikut.

Hasil Analisis Halaman Utama Website Niagahoster

Card Sorting Session

Selama proses ini, saya mengevaluasi dan menyusun ulang bagian informasi pada halaman website. Saya meminta 5 peserta wawancara untuk mengurutkan bagian informasi dari yang paling penting hingga kurang penting.

Selama pelaksanaan, saya menggunakan card sorting tools secara remote.

Wawasan Menarik

Setelah sesi wawancara dan penyusunan informasi, saya mendiskusikan layanan web hosting dan nama domain dengan para peserta. Dari langkah ini, saya mendapatkan tambahan wawasan yang nantinya sangat berguna bagi pengembangan rancangan halaman website.

Berikut adalah beberapa pernyataan menarik yang muncul selama diskusi.

“Saya berharap website dapat menjelaskan rincian produk, tidak sebatas penjelasan paket saja”

“Mengapa promo terkesan menipu? Terutama karena adanya hitung mundur. Saya perhatikan, timer akan muncul lagi sehari setelah promo berakhir. Promo yang dimaksud juga tidak jelas karena tidak menunjukkan jumlah”

“Bagaimana cara mencari nama domain di halaman utama? Saya tidak bisa menemukannya”

Penyusunan Ulang Arsitektur Informasi

Setelah mendapatkan informasi dari wawancara dan card sorting, saya mulai menyusun ulang konten berdasarkan kebutuhan partisipan.

Implementasi Desain

Pada bagian ini, saya mengimplementasikan arsitektur informasi yang telah disesuaikan ke dalam desain halaman website versi baru. Sebagai awalan, saya membuat coretan gambar rancangan terlebih dahulu.

Coretan gambar rancangan, meskipun tidak sempurna, memberikan kesempatan bagi saya untuk berkreasi. Berdasarkan coretan tersebut, saya mengembangkan halaman website versi digital low fidelity wireframe.

Tentu, semua pertimbangan saya ambil dari hasil wawancara dan penyusunan arsitektur informasi.

Desain User Interface

Langkah terakhir adalah membuat design versi high fidelity. Saya ingin menunjukkan bagaimana ide berikut seluruh pertimbangan hasil riset dapat diterapkan ke dalam bentuk visual.

Soal preferensi desain, saya memilih gaya clean. Gaya ini saya rasa sesuai dengan karakter brand Niagahoster, sederhana dan berkesan profesional.

Lihat tampilannya di bawah ini.

Desain mockup dapat dilihat di tautan berikut ini.

Retrospeksi

Dalam studi kasus ini, saya menitikberatkan fokus pada wawancara dan sesi card sorting. Kedua cara tersebut sangat efektif dalam mengumpulkan informasi dari partisipan. Apabila informasi sudah didapatkan, proses pembuatan wireframe dan mockup dapat berjalan dengan lancar.

Studi kasus ini belum mencakup beberapa langkah lanjutan dari segi pengembangan desain UI. Jika dilanjutkan, saya rasa masih banyak yang bisa digali dari pengunjung website.

Beberapa hal yang nantinya mungkin dapat dilakukan:

• Pengetesan halaman utama website versi baru
• Eksplorasi negative experience dari sudut pandang pengguna

• Membuat alur aliran pengunjung tiap halaman website Niagahoster