Redesain Web Hosting Untuk BantaiHost Web Design

Proyek ini merupakan desain ulang dan pengembangan kembali profil perusahaan website lama BantaiHost, BantaiHost adalah penyedia layanan hosting di daerah Kota Depok, Indonesia yang memberikan solusi untuk membantu para pelaku usaha UMKM & Menengah Ke Atas untuk mengonlinekan bisnis mereka melalui website ataupun media online lainya. Saat ini mereka memiliki 2 produk, yaitu layanan hosting dan domain sebagai sarana untuk para pelaku usaha bisa mengupload website mereka di internet.

Masalah

Website lama merupakan website pertama mereka sebagai sebuah startup sehingga mereka tidak mempersiapkan konten dan desainnya dengan baik. Kini seiring pertumbuhan mereka yang lebih besar, mereka perlu menunjukkan situs web mereka kepada calon klien dan investor. Jadi mereka membutuhkan struktur konten yang lebih baik dan tentunya desain yang lebih baik dan segar untuk menarik klien dan investor.

Desain Website Lama BantaiHost

Pengguna & Audiens

Seperti yang saya sebutkan di atas, tujuan utama situs ini adalah untuk memberikan informasi yang lebih baik bagi calon klien dan investor, jadi pengguna yang jelas di sini adalah klien dan investor. Namun ada juga bagian “Blog” di situs tersebut, yang berisi tentang postingan artikel yang ditulis untuk dituju kepada para pengguna dan pembaca untuk mengetahui update terkini tentang teknologi website.

Peran & Tanggung Jawab

Saya bertanggung jawab penuh atas project ini, ini adalah project Web Design, dan saya melakukan semua sendiri dari mulai proses berbicara dengan klien, mewawancarain mereka, membuat ringkasan project, membuat timeline project, proses brainstroming, wireframing, hingga tahap visual design, dll.

Ruang Lingkup & Batasan

Berhubung mereka tidak memiliki referensi desain, bahkan website lama mereka sulit untuk di lakukan riset, dikarenakan konten dan tata letak tidak jelas, sehingga saya membuat semuanya dari awal, dan mereka hanya meminta saya untuk meredesign 3 Halaman, dikarenan terkendala biaya.dan berikut halaman yang saya lakukan redesain, yaitu:

  1. Beranda
  2. Paket Hosting
  3. Blog

Proses

Persyaratan Pengumpulan

Karena saya dan klien berada di kota yang berbeda, kami memutuskan untuk memulai proyek dengan komunikasi via whatsapp. Berbicara masalah, tujuan, ruang lingkup, dan anggaran. Berikut catatan yang saya ambil setelah pertemuan tersebut:

  • Mereka menginginkan UI yang bersih, rapi, mudah dibaca dan dinavigasi
  • Warna Orange sebagai tombol CTA
  • Warna Hero Section ala kebiru-biruan
  • Kata kunci inspirasi desain : Web Hosting, Hosting Landing Page Desain, Web Hosting Modern, Web Hosting Future, Web Hosting Minimalis

Peta Situs

Karena mereka belum memiliki struktur konten, langkah pertama yang saya ambil ketika kita sepakat adalah membuat peta situs sehingga semua orang dapat melihat keseluruhan struktur situs web. Peta situs ini sangat berguna untuk melihat seberapa besar cakupannya dan juga sebagai panduan saya saat mendesain halaman. Ketika peta situs selesai, saya mengirimkannya kepada mereka untuk disetujui sebelum melanjutkan ke langkah berikutnya, wireframe.

Situs Web Inspirasi

Saya mendapat inspirasi dari klien. Sebagian besar website tersebut adalah perusahaan yang memiliki produk serupa, yaitu penyedia layanan hosting Saya menemukan beberapa visualisasi bagus tentang apa yang mereka harapkan dengan segera. Dan saya akhirnya menggunakan beberapa pendekatan tata letak dan desain dari inspirasi ini.

Inspirasi di atas kebanyakan tentang tata letak dan struktur konten. Kemudian saya mencari inspirasi saya sendiri untuk tampilan dan nuansanya. Inspirasi yang saya cari adalah website yang berlatar belakang putih, bersih, dan menggunakan warna utama biru serta CTA berwarna orange. Dan ini adalah situs web yang saya temukan.

Bingkai Gambar (Wireframing)

Setelah peta situs disetujui saya melanjutkan ke proses wireframe. Dalam wireframe ini, saya menggunakan konten sebenarnya dari mereka dan juga layout yang saya usulkan untuk menyajikan konten, sehingga mereka tahu seperti apa tampilan halamannya. Menurut saya proses wireframe ini sangat penting sehingga saya dan klien dapat fokus pada konten terlebih dahulu. Saya merancang gambar rangka untuk semua halaman.

Mereka menyetujui sebagian besar halaman di atas, dengan tanpa revisi.

Mendefinisikan Warna dan Elemen Desain

Sebelum menuju ke mockup, saya melakukan riset warna apa yang harus saya gunakan, berdasarkan branding dan apa yang dilakukan perusahaan. Saya juga membandingkannya dengan pesaing. Selain warna, saya juga meneliti elemen desain apa yang harus saya gunakan untuk halaman, dan saya menemukan ini.

Mockup (Visualiasi)

Setelah mendapat masukan tentang wireframe di file figma dan persetujuannya, saya melanjutkan ke fase mockup. Saya akhirnya menggunakan sebagian besar tata letak dari gambar rangka yang berarti mereka setuju dengan proposal desain saya. Mengisi gambar, membuat beberapa elemen desain untuk menekankan makna situs, menambahkan warna, dan menyempurnakan tata letak.

Saya memberi tahu mereka pada tahap wireframe untuk mendapatkan konten dan tata letak yang tetap. Hasilnya, pada tahap maket ini mereka tidak meminta revisi.

Ikon

Saya mendownload ikon gratis dari internet, lalu saya memodifikasi warnanya agar sesuai dengan merek BantaiHost.

Keputusan Desain

Bagian Hero Section

Saya ingin menonjolkan kelebihan dan fitur yang disediakan oleh penyedia layanan hosting, sehingga klien saat melakukan kunjungan pertama kali langsung tertarik untuk menggunakan layanan tanpa harus scroll kebawah untuk melihat fitur apa saja yang disediakan oleh penyedia layanan tersebut.

Final (Hasil Desain)

Dengan beberapa masukan dan revisi, desain akhir akhirnya selesai.