Studi Kasus UI : Redesign platform website marketplace kurban.
Halo medium, ini adalah studi kasus kecil kecilan saya untuk membagi insight dibalik decision saya me-redesign salah satu Platform Marketplace Qurban di indonesia pada tahun 2018 lalu

Pertama tama, mari berkenalan dengan profil klien saya yaitu kandangqurban :
Kandangqurban.com adalah platform marketplace qurban yang menghubungkan Peternak dan Pengqurban dengan komitmen untuk memberikan kualitas hewan qurban yang sesuai syariat dan berkualitas.

Karena saya meredesain ulang seluruh tampilan depan website tersebut ( tidak termasuk tampilan admin ) disini saya hanya akan mencontohkan tampilan landing page website ini.
My roles..
Pada project rebranding kali ini, saya adalah single fighter dengan role sebagai Fullstack Designer ( UI UX Designer & Front end Developer ) untuk melakukan redesign pada tampilan website kandanqurban.com
Project goals / output..
Goals / Output yang diinginkan klien adalah desain situs web yang baru untuk memenuhi target pasar baru mereka, disini saya melakukan research pada beberapa website seperti sharing happines dan rumah zakat dengan mengantongi variabel yang sudah diberikan sebelumnya ( target pasar, demografi, target usia, dll )
Project tech stacks…
Karena disini role saya sebagai full stack designer, jadi saya juga menentukan tech stack yang akan dipakai untuk development front end website ini.. Disini saya memutuskan untuk menggunakan Bootstrap sebagai CSS Framework, Yarn untuk Package Manager dan Gulp untuk Task runner. Tech stack tersebut saya pilih untuk memudahkan saya dalam development front end dengan output yang ringan untuk perfomance website.
Wireframe & Lo-Fi
Maaf karena dulu kemampuan dokumentasi saya lemah, saya hanya membuat wireframe di kertas dan kertas itu telah hilang.. 😢 jadi skip saja section ini dan lanjut ke high filedity~
Hi-Fi
Berikut adalah Hi-Fi dari website kandangqurban.com

Mari kita bedah beberapa bagian dari landing page ini…
1. Above the fold

Above the fold adalah bagian dari halaman Web yang terlihat pada saat website tersebut di load / dimuat.
Pada bagian ini saya membuat sebuah header dan statistik untuk menjadi attention grabber untuk calon pembeli dengan slider dan statistiknya.
2. Benefit

Pada bagian ini saya menjelaskan lebih detail tentang benefit platform ini bagi calon pembeli kandangqurban.
3. Product Preview

Pada bagian ini, saya memberikan semacam teaser produk unggulan pada setiap kategori di dalam platform ini, jadi calon pembeli bisa melihat lihat beberapa produk unggulan di setiap kategori tanpa masuk kedalam sub-pages lainya.
Kenapa saya buat slider ? agar memudahkan user mobile pada saat scrolling dan memberi tahu user bahwa ada banyak produk di dalam kategori tersebut.
4. Partner Preview

Pada bagian ini saya memberi informasi tentang para peternak pilihan yang ada didalam platform ini, saya buat menggunakan slider agar lebih rapih dan user mobile mudah untuk navigasi dan slider ini akan jalan otomatis.
5. Testimonial & CTA

Pada bagian ini saya menampilkan testimonial pembeli dengan tujuan untuk memberi social-proof pada platform ini.
Tujuan saya memberi CTA pada akhir halaman adalah untuk memberi user keputusan final untuk menggunakan platform ini.
Setelah proses design selesai dan user interface tersebut di approve oleh klien, saya lalu melakukan slicing ( Perubahan dari desain ke kode ) dan membuat previewnya dengan Github Pages untuk di preview kepada klien.
Proses ini berlaku untuk page lainya juga…
Closing
Akhir kata, tulisan maupun desain ini masih sangat jauh dari kata sempurna, karena saya pribadi sendiri masih dalam proses belajar dan menerima segala bentuk kritik & saran yang membangun. Terimakasih sudah membaca studi kasus ini, semoga bisa memberi manfaat & insight pada pembaca.
Disclaimer : Semua tulisan studi kasus ini telah mendapat ijin dari pemilik platform sebelum diposting.
