Redesign Shoesmart Website User Interface
--
Defining a Problem
Kebayang ga sih ketika kalian ngelihat sebuah visual website tapi ngerasa ada yang aneh tapi ga ngerti itu apa? Yup disini saya coba mendefinisikan sebuah masalah yang menurut saya “ada” tapi mungkin bisa saja menurut orang awam itu adalah hal yang biasa saja. So let’s start the process.
Proses ini saya awali dengan melakukan beberapa interview dengan rekan kerja dan kenalan saya untuk mengetahui apakah hal tersebut perlu diperbaiki. Dalam studinya saya membagi hal tersebut menjadi beberapa kasus seperti dibawah ini.
Case 1 — Landing page
Dalam sebuah landing page, sudah jadi hal yang paten kalau informasi dan tujuan yang disampaikan harus sangat jelas dan mudah dimengerti. Dalam kasus ini, saya melihat bahwa ada indikasi sebuah informasi bahwa akan ada diskon untuk ramadhan hingga 90%. Tapi apakah informasi itu sudah jelas dan mudah dimengerti? Apakah posisi CTA button sudah benar diletakkan pada posisi tersebut?
Case 2 — Grafis promo
Pada kasus kedua, poin permasalahannya sama yaitu ada pada visual hirarki desain tersebut, penataan terhadap informasi promo dan CTA button yang terlalu jauh membuat user terlalu lama mencerna proses informasi karena pada beberapa penilitian menyebutkan bahwa user tidak membaca sebuah website, melainkan mereka hanya scanning. Lalu apa maksud hal tersebut? Sabar, nanti kita bahas dibawah ya!
Case 3 —Katalog produk
Dalam kasus ini, layering warna putih yang menumpuk membuat visualnya jadi kurang terlihat, baik untuk background dengan tulisan new, maupun background dengan grafis katalog.
Case 4 —Halaman katalog produk
Pada kasus ini, pada beberapa kasus terkait experience user disimpulkan bahwa penggunaan list berlebihan menjadi hal yang tidak baik apabila hal tersebut dihadapkan dengan sebuah keputusan yang tidak tepat. Untuk menimalisir hal tersebut seharusnya dilakukan A/B testing untuk mengetahui mana menurut user yang lebih baik.
Case 5 — User flow dalam filtering produk
Pada kasus ini, ketika user menggunakan fitur filtering produk userflow original website ini adalah
user memilih parameter filtering > web loading untuk proses pencarian > produk muncul
Dalam hal ini ketika proses loading web sangat lama akan membuat sebagian user merasa jengkel, karena setiap parameter yang dipilih dia harus rela menunggu website tersebut selesai loading.
Understanding the Problem
Dalam memahami hal tersebut saya menanyakan beberapa pertanyaan terkait tentang keterbacaan hal secara visual maupun pemahaman terhadap bahasa yang digunakan. Disisi lain saya juga menanyakan bagaimana proses mereka ketika akan membeli sebuah produk terkait atau sejenis.
1. Storyboard draft
Berdasarkan beberapa informasi yang saya dapat, kecenderungan mereka ketika membeli produk terkait adalah sebagai berikut :
Dari beberapa proses tersebut saya mencoba membuat customer journey map sederhana. Dari beberapa analisa, saya memukan kecocokan bahwa beberapa user yang mengutamakan desain sebagai prioritas utamanya tetapi ketika budget harganya tidak dalam range kemampuan user, user memilih untuk menyimpannya di keranjang belanja dengan bayangan bahwa suatu saat akan membelinya. Dari hal tersebut, ada pengaruh pada parameter harga yang menurut beberapa orang akan lebih membuat mereka nyaman apabila mereka bisa menentukan range harga dari produk tersebut.
2. Visual hierarchy
Ada hal yang harus diperhatikan ketika membuat sebuah desain ui terutama pada visual hirarki sebuah desain. Entah itu terkait dengan ukuran, warna, kontras warna, alignment, proximity, maupun whitespace. Pada beberapa kasus diatas, sangatlah jelas penggunaan elemen visual ini kurang maksimal sehingga membuat user sedikit terganggu dengan tatanan visualnya. Sedikit contoh pada case 1-landing page, tatanan typography mungkin memiliki kesan ingin terlihat elegan dan modern tetapi hal tersebut jika tidak diperhatikan lebih baik akan membuat user sedikit sulit membaca bahasa visual yang disampaikan karena dalam hal ini alignment dari typographynya tidak konsisten sehingga membuat mata sedikit lama untuk menangkap infromasi yang ingin disampaikan.
3. Z-shaped pattern for web content
Pada beberapa literatur yang saya temukan, mereka memiliki anggapan yang hampir sama, yaitu
“user don’t read, they scan”
Secara tidak langsung mata seseorang bergerak dari kiri ke kanan ketika mereka membaca konten sebuah web, maka dari situ muncul beberapa pattern reading seperti z-shaped dan f-shaped, dimana pada z-shaped fokus mata user bergerak dari kiri ke kanan, kemudian bergerak ke sisi bawah kiri lalu lanjut ke kanan lagi secara berulang. Dan hal tersebut banyak ditemukan ketika mereka melihat sebuah landing page dari sebuah website.
Sayangnya pada landing page Shoesmart tidak menerapkan prinsip-prinsip tersebut sehingga akan membuat hasilnya jad kurang optimal.
Recapture the point
Case 1 — Landing page
Pada landing page ini, saya berusaha tidak merubah banyak hal. Karena poin saya disini ingin menunjukkan bagaimana visual hirarki pada sebuah landing page akan terlihat lebih baik apabila disusun menjadi demikian.
Sesuai dengan teori z-shaped pattern, saya ingin menggiring mata user untuk melihat produk utama terlebih dahulu (nomer 1) kemudian dilanjut dengan informasi dan tujuan dari landing page ini : yaitu promo ramadhan (nomer 2) dan kemudian menggiring user untuk melihat CTA button (nomer 3). Sehingga, secara tidak langsung akan mendapatkan informasi yang runtut dan mudah terbaca informasinya oleh user.
Case 2 — Grafis promo
Pada bagian ini, saya menambahkan CTA button yang terlihat kontras dan posisi yang konsisten dengan tujuan agar user semakin familiar dengan letak dan posisi button yang diinginkan (pada bagian ARTA dan Easy Walk).
Approach lain untuk memperjelas harga bisa dilakukan tanpa harus memberi penanda garis hitam seperti desain pada awalnya, melainkan bisa menggunakan beberapa elemen desain lain seperti tebal tipis font ataupun sebuah kotak untuk memperjelas elemen harga tersebut.
Case 3 — Katalog produk
Ada beberapa hal yang perlu diperhatikan terkait dengan tulisan “new” dan “diskon” pada desain sebelumnya, karena penggunaan warna background putih membuat informasinya kurang terbaca oleh mata, tidak ada penekanan secara visual yang membuat hal tersebut menjadi pembeda.
Pada beberapa kasus juga penggunaan background putih pada katalog membuat visual produk sendiri kurang terlihat seperti pada gambar dibawah, oleh sebab itu seharusnya penggunaan background putih dihindari agar bentukan dari produknya terlihat jelas.
Dari kedua hal tersebut desain yang saya buat seperti gambar dibawah ini
Case 4 & 5— Halaman katalog produk
- Hal yang perlu disoroti pada desain lama adalah penggunaan kolom list yang terlalu panjang. Dalam kaidahnya kolom list checkboxes sebaiknya digunakan secara efisien agar user tidak kebingungan jika dihadapkan dengan berbagai pilihan. Alangkah lebih baik apabila hal tersebut diurutkan berdasarkan opsi mana yang lebih sering dikunjungi oleh user dan dijadikan 3–5 list teratas. Ketika user merasa apa yang dicari belum ditemukan, lebih baik menggunakan 1 klik untuk melihat opsi lain yang ada (lihat lainnya) daripada harus scrolling panjang dengan mencari pilihan lain.
- Disisi lain, user memiliki kecenderungan dalam memilih sebuah brand dengan selalu mencari tahu brand tersebut sebelum membelinya. Hal tersebut membuat penggunaan list checkboxes pada kolom brand sangatlah tidak efisien sehingga lebih baik dibuat desain dengan mode pencarian.
- Untuk kolom urutkan, saya membuatnya seperti pada gambar, dengan acuan bahwa kolom ini adalah kolom utama yang dicari oleh user karena terkait dengan harga, produk baru maupun produk populer.
- Pada poin 4 ini terkait dengan flow dari website dan seharusnya untuk mempersingkat waktu tunggu user, biarkan user memilih beberapa parameter filter terlebih dahulu kemudian website memuat apa yang dicari oleh user, sehingga muncul button terapkan filter dan reset pada desain tersebut.
New user interface
Pada poin ini akan saya tunjukkan beberapa hal yang telah saya desain ulang dari website Shoesmart.
Penutup
Proses redesain ini tentunya masih memiliki beberapa hal yang bisa dikembangkan lagi dengan proses yang lebih baik lagi. Beberapa poin yang saya sebutkan berdasarkan literasi yang saya pahami dan dari sample riset dari beberapa user potensial. Selebihnya terimakasih banyak telah membaca artikel ini, feel free to discuss anything with me that related to this matter.
I hope you enjoy my process. Thankyou for reading.
#uiuxcasestudy #uiuxindonesia
