Kekuatan Penggerak Desain – Studi Kasus Desain Ulang Situs Web

Kapan waktu yang paling tepat untuk melakukan redesign website?

Siapa yang tidak menemukan situs web yang terlihat ketinggalan jaman dan ditinggalkan? Seperti cangkang truk rusak yang ditinggalkan di padang pasir, jelas tak tersentuh selama bertahun-tahun.

Situs web diubah karena berbagai alasan. Sayangnya, banyak bisnis tidak menyadari bahwa situs web mereka memerlukan desain ulang, dan tertinggal saat pesaing memperoleh keunggulan kompetitif dengan meningkatkan situs mereka, sebagai hasilnya meningkatkan konversi mereka.

Kesalahan yang sering dilakukan bisnis adalah tidak mempertimbangkan sejak awal apa yang mungkin terjadi jika kebutuhan situs web mereka menjadi lebih kompleks, dan sebagai akibatnya, menemukan diri mereka dalam situasi yang sulit dan berpotensi mahal ketika mereka perlu mengembangkannya. Selain itu, faktor penting seperti pengoptimalan mesin telusur (SEO), SSL (yang memengaruhi peringkat dan keamanan), dan keramahan seluler (yang memengaruhi peringkat dan konversi) seringkali dapat diabaikan.

Desain situs web baru sering kali terjadi karena perubahan kepemimpinan di bagian atas di mana arah merek baru dilembagakan dan orang-orang pemasaran merek baru bergabung. Mengevaluasi situs web perusahaan, mereka ngeri mengetahuinya memiliki UX yang buruk dan menemukan bahwa sejumlah besar konten yang diinginkan hilang. Sampai pada kesimpulan, ini hanyalah "situs web brosur" yang disatukan dengan buruk yang tidak memberikan "suara merek" atau konversi yang dicari perusahaan, konsensusnya adalah bahwa itu matang untuk perubahan. Saatnya perombakan situs web.

Perubahan Situs Web untuk Perusahaan Otomotif

Penting untuk disebutkan bahwa studi kasus desain ulang situs web otomotif ini bukanlah desain ulang resmi yang ditugaskan. Saya tidak memiliki informasi orang dalam tentang perusahaan, strategi digital mereka, atau industri otomotif secara keseluruhan. Saya hanya menggunakan industri otomotif sebagai kasus uji untuk studi kasus desain ulang situs web.

Dalam studi kasus ini kami menelusuri proses desain ulang situs web untuk merek otomotif Kroasia, Rimac Automobili. Rimac adalah merek yang dimulai dengan konsep mobil sederhana, dan sejak itu berkembang menjadi perusahaan manufaktur komponen besar. Seperti banyak perusahaan rintisan, perusahaan memulai dengan ide yang akhirnya berkembang menjadi sesuatu yang berbeda; perluasan ini memengaruhi struktur situs web, dan seluruh fokus pengguna berubah. Permintaan pasar membawa perusahaan ke arah lain, sehingga fokus situs web juga perlu diubah.

Ada banyak aspek dan sudut pandang yang berbeda untuk dipertimbangkan untuk mencapai solusi desain situs web yang hebat. Terlepas dari kenyataan bahwa desainer web sebelumnya mungkin tidak memiliki sumber daya, atau cukup waktu untuk penelitian UX, wireframing, prototyping, dan pengujian pengguna, dalam hal kualitas keseluruhan desain, bahkan keputusan desain awal terkecil pun dapat memiliki pengaruh yang signifikan. dampak negatif, dan kualitas situs web yang kurang optimal pada akhirnya akan menyebabkan desain ulang situs web dalam dua atau tiga tahun. Hasilnya adalah, dalam jangka panjang, klien membayar lebih untuk sebuah situs web daripada yang mereka sadari. Strategi konten dan arsitektur informasi yang terdefinisi dengan baik sangat penting dalam hal desain situs web baru.

Saat mendesain situs web perusahaan besar, portal berita, dan situs konten-berat lainnya, saya adalah penggemar berat desain atom, sistem desain yang fleksibel yaitu tentang menyusun semua komponen UI yang akan berfungsi untuk banyak layar dan situasi yang tidak terduga di awal. dari sebuah proyek. Meskipun studi kasus khusus ini bukan untuk portal berita besar, namun akan membuat prosesnya jauh lebih mudah jika perpustakaan desain elemen desain atom (satu set komponen desain yang dipertimbangkan dengan cermat dan terdefinisi dengan baik) disiapkan untuk bekerja dengan nanti.

Hanya setelah situs web memiliki strategi konten dan arsitektur informasi yang sesuai, fokus akan beralih ke pengalaman pengguna. Tanpa struktur situs web yang tepat, desain pengalaman pengguna tidak memiliki potensi. Mungkin pada pandangan pertama situs web terlihat bagus dan berfungsi dengan baik, tetapi jika fleksibilitas tidak cukup, tidak dapat dihindari bahwa pada titik tertentu perusahaan perlu mempertimbangkan desain ulang situs web.

Mengapa Mendesain Ulang Website Perusahaan Otomotif Ini?

Rimac Automobili sedang berkembang, dan menurut posting resmi, mobil konsep baru yang disebut "Concept_One" sudah dalam produksi. Pada saat mendesain ulang situs web yang tidak ditugaskan ini, situs web mereka hanya memamerkan satu mobil, "C_Two." Tidak ada variasi visual—situs web dibuat dari dua templat sehingga setiap halaman terlihat sangat mirip. Desainnya difokuskan pada gambar mobil yang besar dan menarik tanpa banyak hal lain untuk menggambarkan kualitas mobil C_Two —informasi penting yang diperlukan untuk mengarahkan pengunjung situs web ke keputusan untuk membeli mobil.

Seperti kata pepatah, "Anda tidak pernah mendapatkan kesempatan kedua untuk membuat kesan pertama." Sangat penting untuk menggunakan dampak desain yang hebat untuk secara efektif membujuk pengunjung (yang, dalam hal ini sebagian besar adalah penggemar mobil performa tinggi) untuk membeli mobil seharga hampir satu juta (USD). Situs web kelas atas seperti itu harus memenuhi standar yang sangat tinggi. Mereka harus memproyeksikan rasa kualitas dan karisma, dan menawarkan tingkat keahlian menjual yang tinggi serta gaya yang menarik.

Desain Situs Web yang Hebat Harus Menonjol di Lautan Situs Web Serupa

Masalah besar dalam industri otomotif adalah sebagian besar situs web di ruang itu cenderung terlihat sama. Selain skema warna dan gambar pahlawan yang berbeda, sepertinya mereka menggunakan templat situs web yang sama.

Ada banyak faktor di balik keputusan desain situs web perusahaan otomotif, tetapi perbedaan yang jelas perlu dibuat antara mobil seharga $1 juta dan $25.000 dan cara penyajiannya.

Di ruang otomotif kelas atas, Ferrari, Lamborghini, dan Aston Martin memiliki situs web perusahaan yang terlalu sederhana dan biasanya (menurut saya) tidak benar-benar menawarkan pengalaman pengguna yang luar biasa.

Rentang konsumen menengah (Volkswagen, Toyota, Peugeot, dan sebagainya) memiliki struktur konten situs web yang sangat mirip dengan contoh kelas atas yang disebutkan di atas. Perbedaan terbesar antara merek mobil konsumen kelas atas dan kelas menengah adalah harganya—jadi orang akan berharap bahwa Rimac dengan mobil kelas atas mereka akan memiliki situs web yang luar biasa untuk mencerminkan perbedaan ini dan memamerkan merek mahal mereka.

Harapan pelanggan tinggi ketika mengunjungi situs web merek mobil yang sangat mahal ini; itu adalah komitmen finansial yang besar dan tentu saja, mereka ingin memastikan bahwa mereka mendapatkan mobil terbaik yang dapat dibeli dengan uang mereka.

Mengapa Rimac lebih baik daripada Toyota? Melihat situs web mereka, tidak ada banyak perbedaan antara dua merek yang sangat berbeda ini. Bukankah ini terlihat dari kualitas situs web mereka?

Menargetkan Pembeli Mobil Kelas Atas dengan Desain Situs Web yang Hebat

Setiap situs web harus mempertimbangkan penggunanya. Siapa target audiens untuk jenis mobil ini? Apa yang mereka cari?

Mobil Rimac berharga sekitar $850.000, dan hanya beberapa yang akan dibuat, memenuhi syarat untuk label "edisi terbatas". Meskipun kami tidak dapat secara tepat mengidentifikasi tipe pelanggan yang akan tertarik untuk membeli mobil ini, kami dapat berasumsi bahwa sebagian besar pelanggan akan berasal dari elit kaya. Apakah situs web Rimac menargetkan pelanggan ini secara efektif?

Menganalisis Arsitektur Informasi

Di situs web contoh kami, kami dapat melihat item navigasi pertama adalah "Concept_One" (pada saat itu, itu adalah satu-satunya produk perusahaan). Situs web yang sebenarnya telah diperbarui. Item navigasi kedua adalah evolusi perusahaan, bagaimana mobil diproduksi, sedangkan item ketiga adalah produk dan layanan perusahaan. Item navigasi keempat adalah produk perusahaan lain (sepeda listrik Greyp). Dua item terakhir adalah "pers," yang berisi siaran pers, dan "blog," keduanya tidak berguna karena sebagian besar berita mereka diterbitkan di jejaring sosial.

Masalah lain adalah bahwa tautan karier disembunyikan sebagai item navigasi sekunder yang kurang penting dan, mengingat ekspansi besar perusahaan, mewakili masalah penting. Jika kami menganggap pengguna sebagai fokus perhatian perusahaan, kami akan melihat bahwa di sebagian besar situs web perusahaan (pengecualian tipikal adalah situs web perusahaan/sangat besar), sangat penting untuk memiliki tautan "karir" atau CTA yang menonjol.

Proses Desain Ulang Situs Web

Beranda Gambar Pahlawan Sebelum dan Setelah

Awalnya, tujuannya adalah untuk menciptakan versi mobil yang lebih gelap dan lebih bertenaga. Saya menemukan beberapa gambar mobil Concept_One secara online dan dengan beberapa "Photoshop magic," membuat gambar pahlawan pertama untuk beranda. Ide berikutnya adalah animasi untuk mengungkapkan mobil secara perlahan, pertama latar belakang, lalu garis besar mobil, diikuti dengan gambar yang dirender sepenuhnya.

Desain Beranda

Untuk beranda, konsepnya adalah untuk menentukan dua area visual utama: navigasi atas dan gambar pahlawan mobil. Itu dia. Untuk membuatnya minimalis namun mencolok, semua yang tidak perlu dihilangkan. Sekilas, semua hal penting terlihat—semuanya dipindahkan ke subhalaman di dalam situs.

Strategi dan Desain Konten

Untuk proyek perombakan situs web semacam itu, penting juga untuk mendesain konten, tidak hanya struktur situs dan estetika visual. Karena ini adalah desain ulang situs web tanpa komisi, ia menawarkan lebih banyak kebebasan untuk bereksperimen, serta fleksibilitas estetika di mana ada kesempatan penuh untuk membuat keputusan desain kita sendiri.

Prosesnya sederhana:

1. Siapkan body text yang akan muncul di website.
2. Komunikasikan beberapa elemen desain—misalnya, detail yang menarik tentang akselerasi, tenaga kuda, dan kecepatan tertinggi—melalui ikon atau animasi interaktif.

Dengan melakukan ini, kata tambahan tidak diperlukan di UI, dan perhatian diarahkan ke area yang lebih penting bagi pengunjung situs web.

Desain Ulang Navigasi Situs Web

Struktur navigasi situs web sekarang diatur ulang berdasarkan hierarki kepentingan. Kami memiliki Kendaraan sebagai dropdown pertama dalam navigasi, yang memberikan fleksibilitas desain karena memungkinkan perusahaan untuk menambahkan lebih banyak model mobil di masa mendatang.

Untuk memberikan akses langsung ke halaman Produk sekunder dari beranda, diputuskan bahwa demi efisiensi daripada membuat halaman daftar produk lain (di halaman web lain) Produk dan subkategorinya dapat dimasukkan ke dalam beranda sebagai area dropdown dan dijadikan bagian dari navigasi. Desain di bawah ini menunjukkan berbagai produk yang ditampilkan sebagai ikon di beranda saat pengunjung mengklik Produk di navigasi. Untuk rendering produk 3D yang menandakan level kedua di bawah Products , saya akan merekomendasikan Three.js, WebGL, Canvas, dan Greensock karena mereka adalah alat standar yang terkenal.

Halaman Sekunder dalam Desain Ulang Situs Web

Berbeda dengan Beranda , halaman sekunder seperti halaman Tentang dan Layanan menggunakan kisi-kisi berpola Z yang berbeda. Maksud dari tata letak kisi yang berbeda adalah untuk memberikan pengunjung lingkungan yang lebih menarik dan dinamis saat memindai halaman ini.

Ide sentralnya masih minimalis visual dengan teks sesedikit mungkin. Orang tidak datang ke situs otomotif jenis ini untuk membaca banyak teks, tetapi untuk mendapatkan informasi dengan cepat dan visual. Ini adalah pemikiran di balik font besar dan tebal pada judul halaman dan penggunaan gaya font yang berbeda.

Penting untuk dicatat bahwa desain ulang situs web "brosur perusahaan" semacam ini berbeda dengan desain ulang layanan. Situs web “brosur perusahaan” lebih banyak tentang pemasaran produk. Desain ulang situs web berorientasi layanan lebih condong ke arah konversi klik menjadi konversi, dan pada akhirnya keuntungan.

Kesimpulan

Ada beberapa artikel blog desain lain di luar sana yang merekomendasikan mengapa merupakan ide bagus bagi desainer untuk terlibat dalam proyek desain sampingan. Jika Anda ingin mendesain proyek yang sangat keren, pilih sebuah ide—bisa berupa situs web, aplikasi, produk SaaS perusahaan—dan selesaikan masalah desainnya.

Dribbble penuh dengan proyek desain ulang konseptual yang tidak diminta di mana desainer digital memiliki kesempatan untuk memamerkan karya desain mereka. Selain memberi Anda desain keren yang menghadirkan solusi kreatif kepada dunia, mengerjakan masalah produk "sebenarnya" akan menunjukkan kepada calon perusahaan dan klien bagaimana Anda berpikir, proses Anda, dan keahlian Anda.

Dalam kasus saya, ini adalah latihan yang bagus untuk menangani situs web otomotif kelas atas karena sangat penting bagi desain situs web di sektor ini untuk memenuhi standar yang sangat tinggi.

Namun, peringatan: sebelum menyelam dan mulai mendesain, ada baiknya untuk melihat ke depan dan mempertimbangkan bagaimana situs web tertentu akan terlihat dalam tiga tahun, tidak hanya dari perspektif estetika desain tetapi juga dari konten, fungsi, dan struktur. Sangat penting bahwa fleksibilitas bawaan menjadi pertimbangan desain yang serius. Lebih mudah, lebih efisien, dan jauh lebih tidak menyakitkan untuk membuat penyesuaian kecil agar sesuai dengan tuntutan di masa mendatang saat situs web atau subhalaman berfungsi dan dapat diskalakan.

Terkadang, sangat sulit untuk meyakinkan klien potensial untuk melakukan perombakan situs web. Seringkali klien enggan untuk berkomitmen karena kurangnya sumber daya, dana, atau waktu. Namun demikian, desain ulang situs web yang tidak diminta adalah cara yang bagus untuk menunjukkan proses desain ulang situs web Anda kepada dunia. Dan siapa yang tahu? Sangat mungkin bahwa desain ulang situs web Anda cukup mengesankan klien yang enggan sehingga mereka memberi lampu hijau untuk proyek "nyata", di mana, sebagai bonus tambahan, perancang dibayar!

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Dasar-dasar Desain Ulang Situs Web – Studi Kasus
• ROI Sejati dari UX: Studi Kasus Desain Ulang B2B
• Mengeluarkan IKEA dari Kotaknya dan Mendesain Ulang untuk 1,6 Miliar Pengguna
• Mari Mendesain Ulang Facebook: 10 Inspirasi untuk Memulai
• Bagaimana CrunchBase Harus Dirancang