Deny Sri Supriyono

Beberapa hari yang lalu, ada permintaan dari pemilik Shopsafe Australia untuk mendesain ulang tampilan halaman depan dan mengubah layoutnya dari table layout menjadi tableless layout.

Halaman depan yang menghiasi websitenya adalah halaman yang sama ketika website itu dibuat pada tahun 2002. Tampilan sama yang dipergunakan oleh saudara tuanya dari Inggris sejak tahun 1999. No wonder why they feel so 90’s ya? - at least for me.

Even they feel so 90’s for me, websitenya telah memberikan banyak kontribusi untuk usaha yang dilakukan sang pemilik. Itulah mengapa dia memilih untuk melakukan perubahan pada websitenya secara bertahap, dengan harapan bisa melihat statistik halaman yang sudah diubah untuk kemudian melanjutkan ke halaman lainnya jika hasilnya positif. Perubahan tampilan yang diikuti dengan penurunan kontribusi is a big no no.

Sebelumnya, beberapa perubahan sudah dimulai untuk halaman kategori dengan mengubah layout menjadi tableless dan memberikan sedikit sentuhan ke beberapa elemen desain. Kali ini adalah bagian halaman depan.

Permintaan dari klien

Berhubung website yang akan di redesign masih berhubungan erat dengan saudara-saudara lainnya, maka dia menginginkan perubahan yang tidak terlalu drastis.

Sebuah perubahan dengan tidak menghilangkan nuansa tampilan halaman lama, yang tidak akan terlalu mengagetkan bagi loyal visitor dan memberikan kesan menarik untuk pengunjung baru.

Nuansa tampilan halaman lama yang dipertahankan adalah background warna hijau, bagian header dan menu kiri dengan keleluasaan untuk mengganti jenis, ukuran dan warna font. Penempatan data juga tidak akan mengalami perubahan.

Perubahan yang akan dilakukan

Berdasarkan brief singkat yang diterima dari klien, berikut ini beberapa daftar perubahan yang akan dicoba untuk diterapkan:

• Hal pertama yang langsung terlintas di pikiran saya adalah mengganti jenis font untuk content dan daftar kategori dari Verdana menjadi Tahoma dengan ukuran lebih kecil, karena saya lihat web penuh sesak dengan ukuran text yang besar.
• Mengingat website sudah ada sejak tahun 2002, saya pikir mungkin akan menarik jika mengganti photo “3 orang” dengan photo baru yang lebih “fresh” dan menemukan beberapa image yang cocok dari web stock photo.
• Hyperlink di bagian content juga menjadi perhatian karena di layout lama ditampilkan kurang “eye catching” tanpa underline dan dengan warna yang hanya berbeda sedikit dengan content yang bukan hyperlink. Mungkin dengan membuatnya lebih tebal dan menggunakan underline, pengunjung akan lebih mudah untuk melihat hyperlink dan tertarik untuk mengetahui lebih jauh.
• Header untuk masing-masing kategori (star ratings, get the logo, your favorites, etc) juga akan menggunakan image baru yang lebih segar.

Draft yang diajukan ke klien

Setelah mendefinisikan bagian mana saja yang akan diubah dalam langkah sebelumnya, waktunya untuk membuat visualisasi sehingga klien mendapatkan gambaran perubahan yang akan kita buat dengan websitenya.

Beginilah tampilan draft yang saya ajukan ke klien. Dia suka dengan perubahan yang saya buat dengan catatan untuk tidak menggunakan image di bagian header kategori (shopping categories, worldwide, star rating, etc), hanya text biasa di atas background image.

Pada awalnya saya kurang setuju dengan ide dia. Saya sengaja menggunakan image untuk mendapatkan kesan “smooth” yang tidak didapatkan jika menggunakan text biasa. Alasan masuk akal yang kemudian saya setujui adalah supaya saya tidak perlu repot-repot untuk membuat image baru setiap ada penambahan atau perubahan segmen kategori.

Dari draft menjadi website online

Proses pengerjaannya tidak terlalu lama, karena sudah tersedia code XHTML serta CSS dari halaman yang telah dikerjakan sebelumnya, yang bisa digunakan juga di halaman ini. Saya hanya tinggal membuat beberapa class dan id tambahan yang hanya akan digunakan oleh halaman awal.

Hasil akhir tampilan bisa dilihat secara online di http://www.shopsafe.com.au

Tambahan

Dengan banyaknya batasan yang diberikan, sepertinya ini tidak bisa disebut redesign. Mungkin lebih tepat jika disebut realign, karena perubahan yang dilakukan hanya untuk membuat beberapa elemen dalam website menjadi terlihat lebih menarik dari sebelumnya.

Hal yang menarik dari redesign atau realign kali ini adalah bagaimana perubahan desain yang telah dilakukan pada halaman awal bisa membuat bounce rate dari sebuah website shopping directory seperti Shopsafe menjadi lebih kecil daripada sebelumnya.

Ada cerita menarik yang bisa di share soal redesign/realign yang pernah atau akan dilakukan? Pasti bisa jadi masukan bermanfaat untuk saya dan rekan-rekan lainnya.

Bedah web lainnya? Yuuuk.