Redesign Website Var Express
Problem & Brief
Website varexpress.id menggunakan wordpress sehingga memiliki tampilan yang standar dan terbatas dalam mengubah tampilan desain. Fitur plugin di wordpress juga terbatas sehingga klien ingin redesign website menjadi custom dengan tambahan fitur cek resi dan hitung biaya import yang friendly dan mudah digunakan. Namun saat website pindah dari wordpress ke custom tidak merubah SEO yang sudah diterapkan di website varexpress.id.
Contoh acuan dan referensi yang diberikan klien adalah website natindo express merupakan competitor dari varexpress. Namun varexpress ingin tampil beda dan lebih bagus dari website natindo express dengan tampilan lebih berwarna dan mudah digunakan dalam versi Desktop maupun versi mobile.
Sitemap
Berikut adalah daftar halaman website, button fitur hitung biaya dan fitur cek resi yang ditampilkan di website. Total ada 10 halaman yang digunakan termasuk halaman cek resi. Untuk halaman blog masih menggunakan wordpress karena sudah di setting untuk SEO dan lebih mudah untuk digunakan klien.
Style Guide & Visual design
Memilih warna dan jenis font yang digunakan. Untuk tahap pertama saya menggunakan warna dari logo yaitu biru dan oren namun dari pihak klien tidak ingin menggunakan warna biru, lalu warna apa yang cocok untuk menemani warna oren? saya memilih warna merah karena memiliki arti kehangatan, dinamis dan menarik pusat perhatian.
Warna merah juga cocok jika di kombinasikan dengan warna oren mulai dari gradient merah dan oren maupun perpaduan warna keduanya. Disini saya memilih warna merah smooth untuk primary colors. Jenis font saya memilih perpaduan antara Lato dan Open Sans yang memiliki karakteristik keterbacaan yang sangat baik.
Setelah menentukan warna dan jenis font selanjutnya adalah membuat wireframing yaitu membuat layout dan kerangka website di setiap halaman sebagai gambaran visual. selain membuat wireframe saya juga mencari gambar dan icon yang cocok untuk website varexpress.id di bidang logistik.
Results Design & Testing
Desain yang pertama kali saya buat adalah versi desktop. setelah semua desain halaman website disetujui klien, tahap berikutnya adalah menyesuaikan ke versi mobile dengan memperhatikan urutan komponen, jarak dan spasi agar nyaman untuk digunakan baik versi mobile android maupun IOS.
Selanjutnya saya membuat prototype untuk menguji konsep yang sudah dibuat dan mengimplementasikan fungsi tersebut seperti cek resi, button hitung biaya, dan form fitur hitung biaya import untuk memberikan gambaran fungsi di website nanti. Setelah semuanya selesai dan disetujui klien maka akan langsung diserahkan dan dijelaskan ke frontend Developer untuk ketahapan php atau coding.
