Tasarımın İtici Güçleri – Bir Web Sitesi Yeniden Tasarım Vaka Çalışması

Bir web sitesini yeniden tasarlamak için en uygun zaman ne zaman?

Modası geçmiş ve terk edilmiş görünen bir web sitesine kim rastlamadı? Çölde bırakılmış, yıllarca el değmemiş, bozuk bir kamyonun kabuğu gibi.

Web siteleri her türlü nedenden dolayı yenilenir. Ne yazık ki, birçok işletme web sitelerinin yeniden tasarlanması gerektiğinin farkında değil ve rakipleri web sitelerini geliştirerek rekabet avantajı elde ettiğinde ve sonuç olarak dönüşümlerini artırdığında geride kalıyor.

İşletmelerin sık yaptığı bir hata, web sitesi ihtiyaçlarının daha karmaşık hale gelmesi durumunda neler olabileceğini erken düşünmemeleri ve sonuç olarak, genişletmeleri gerektiğinde kendilerini zor, potansiyel olarak maliyetli bir durumda bulmalarıdır. Ek olarak, arama motoru optimizasyonu (SEO), SSL (sıralamayı ve güvenliği etkileyen) ve mobil uyumluluk (sıralamayı ve dönüşümü etkileyen) gibi önemli faktörler genellikle ihmal edilebilir.

Yeni web sitesi tasarımları genellikle, yeni bir marka bilinci oluşturma yönünün oluşturulduğu ve yeni marka pazarlamacılarının katıldığı en üstte bir liderlik değişikliği nedeniyle gerçekleşir. Şirketin web sitesini değerlendirirken, korkunç bir UX'e sahip olduğunu ve önemli miktarda arzu edilen içeriğin eksik olduğunu öğrendiklerinde dehşete düşüyorlar. Sonuç olarak, "markanın sesini" veya şirketin aradığı dönüşümleri sağlamayan, kötü bir şekilde bir araya getirilmiş bir "broşür web sitesi" olduğu sonucuna varırsak, değişim için olgunlaştığı konusunda fikir birliği vardır. Web sitesi yenileme zamanı geldi.

Bir Otomotiv Şirketi için Web Sitesi Yenilemesi

Bu otomotiv web sitesi yeniden tasarım vaka çalışmasının resmi, görevlendirilmiş bir yeniden tasarım olmadığını belirtmek önemlidir. Şirket, dijital stratejileri veya bir bütün olarak otomotiv endüstrisi hakkında içeriden bilgim yok. Sadece otomotiv endüstrisini bir web sitesi yeniden tasarım vaka çalışması için bir test vakası olarak kullanıyorum.

Bu vaka çalışmasında, Hırvat otomotiv markası Rimac Automobili için web sitesi yeniden tasarım sürecini ele alıyoruz. Rimac, basit bir araba konseptiyle başlayan ve o zamandan beri büyük bir parça imalat şirketine dönüşen bir markadır. Birçok girişim gibi şirket de sonunda farklı bir şeye dönüşen bir fikirle başladı; bu genişleme web sitesi yapısını etkiledi ve tüm kullanıcı odaklılık değişti. Pazar talebi şirketi başka bir yöne götürdü, bu nedenle web sitesinin odağının da değişmesi gerekiyordu.

Harika bir web sitesi tasarımı çözümü elde etmek için dikkate alınması gereken birçok farklı yön ve açı vardır. Önceki web tasarımcısının UX araştırması, tel çerçeveleme, prototip oluşturma ve kullanıcı testi için kaynaklara veya yeterli zamana sahip olmamasına rağmen, bir tasarımın genel kalitesi söz konusu olduğunda, en küçük erken tasarım kararları bile önemli olabilir. olumsuz yansımalar ve optimumdan daha düşük bir web sitesi kalitesi, sonuçta iki veya üç yıl içinde bir web sitesinin yeniden tasarlanmasına yol açacaktır. Bunun sonucu olarak, uzun vadede müşteriler bir web sitesi için fark ettiklerinden daha fazla para ödüyorlar. Yeni web sitesi tasarımı söz konusu olduğunda, iyi tanımlanmış içerik stratejisi ve bilgi mimarisi çok önemlidir.

Büyük kurumsal web sitelerini, haber portallarını ve diğer yoğun içerikli siteleri tasarlarken, atomik tasarımın büyük bir hayranıyım, başlangıçta birden çok ekran ve öngörülemeyen durumlar için çalışacak tüm UI bileşenlerini hazırlamakla ilgili esnek bir tasarım sistemi bir projenin. Bu özel vaka çalışması büyük bir haber portalı için olmasa da, atom tasarım öğelerinden oluşan bir tasarım kitaplığı (dikkatlice düşünülmüş ve iyi tanımlanmış tasarım bileşenlerinden oluşan bir set) ile çalışmak üzere kurulursa, yine de süreci çok daha kolay hale getirecektir. sonra.

Yalnızca web sitesi uygun içerik stratejisine ve bilgi mimarisine sahip olduktan sonra, odak kullanıcı deneyimine kaydırılmalıdır. Uygun web sitesi yapısı olmadan, kullanıcı deneyimi tasarımının hiçbir etkisi yoktur. Belki ilk bakışta web sitesi güzel görünür ve iyi çalışır, ancak yeterli esneklik sağlanmazsa, bir noktada şirketin web sitesini yeniden tasarlamayı düşünmesi kaçınılmazdır.

Neden Bu Otomotiv Şirketinin Web Sitesini Yeniden Tasarlamalısınız?

Rimac Automobili genişliyor ve resmi yayınlara göre “Concept_One” adlı yeni bir konsept otomobil şimdiden üretimde. Bu hizmete alınmamış web sitesi yeniden tasarımı sırasında, web siteleri yalnızca bir otomobil sergiliyordu, “C_Two”. Görsel çeşitlilik yoktu; web sitesi iki şablondan oluşturuldu, böylece her sayfa birbirine çok benziyordu. Tasarım, C_Two otomobilinin kalitesini göstermek için fazla bir şey olmaksızın otomobilin büyük, çekici görüntülerine odaklandı; web sitesi ziyaretçilerini otomobili satın alma kararına yönlendirmek için gerekli olan temel bilgiler.

Söylediği gibi, "İlk izlenim bırakmak için asla ikinci bir şansınız olmaz." Ziyaretçileri (bu durumda çoğunlukla yüksek performanslı otomobil tutkunları olacaktır) bir milyona (USD) yakın bir fiyata araba satın almaya ikna etmek için harika tasarımın etkisini kullanmak çok önemlidir. Bu tür üst düzey web sitelerinin inanılmaz derecede yüksek bir standardı karşılaması gerekir. Bir kalite ve karizma duygusu yansıtmalı ve yüksek düzeyde satıcılığın yanı sıra çekici bir stil sunmalıdırlar.

Harika Web Sitesi Tasarımı Benzer Web Siteleri Denizinde Öne Çıkmalıdır

Otomotiv endüstrisindeki büyük bir sorun, o alandaki çoğu web sitesinin aynı görünme eğiliminde olmasıdır. Farklı renk şemaları ve kahraman resimleri dışında, neredeyse aynı web sitesi şablonunu kullanıyorlarmış gibi görünüyor.

Bir otomotiv şirketinin web sitesi tasarım kararlarının arkasında birçok faktör vardır, ancak 1 milyon dolar ile 25.000 dolarlık bir araba arasında ve bunların sunulma şekli arasında net bir ayrım yapılması gerekir.

Üst düzey otomotiv alanında, Ferrari, Lamborghini ve Aston Martin, (bence) gerçekten harika bir kullanıcı deneyimi sunmayan aşırı basit, tipik olarak kurumsal web sitelerine sahiptir.

Orta tüketici grubu (Volkswagen, Toyota, Peugeot vb.), yukarıda bahsedilen daha üst düzey örneklere çok benzer bir web sitesi içerik yapısına sahiptir. Üst sınıf ve orta sınıf tüketici otomobil markaları arasındaki en büyük fark fiyattır; bu nedenle, yüksek kaliteli otomobilleriyle Rimac'ın bu farkı yansıtmak ve pahalı markalarını sergilemek için olağanüstü bir web sitesine sahip olması beklenebilir.

Bu ultra pahalı otomobil markası web sitelerini ziyaret ederken müşteri beklentileri yüksektir; bu büyük bir finansal taahhüt ve oldukça doğal olarak, paralarının satın alabileceği en iyi arabayı aldıklarından emin olmak istiyorlar.

Rimac neden Toyota'dan daha iyidir? Web sitelerine bakıldığında, bu iki çok farklı marka arasında pek bir fark yok. Bunun web sitelerinin kalitesinden belli olması gerekmez mi?

Harika Web Sitesi Tasarımı ile Üst Düzey Araba Alıcılarını Hedefleme

Herhangi bir web sitesi, kullanıcılarını dikkate almalıdır. Bu tür bir arabanın hedef kitlesi kimdir? Ne arıyorlar?

Rimac'ın arabaları yaklaşık 850.000$'a mal oldu ve sadece birkaçı üretilecek ve bu da onları "sınırlı sayıda" bir etikete hak kazanacak. Bu arabaları satın almakla ilgilenecek müşteri türünü tam olarak belirleyemesek de, çoğu müşterinin zengin seçkinlerden olacağını varsayabiliriz. Rimac'ın web sitesi bu müşterileri etkili bir şekilde hedefliyor mu?

Bilgi Mimarisini Analiz Etme

Örnek web sitemizde, ilk gezinme öğesinin “Concept_One” olduğunu görebiliyorduk (o zamanlar şirketin tek ürünüydü). Gerçek web sitesi o zamandan beri güncellendi. İkinci navigasyon öğesi şirketin evrimi, otomobilin nasıl üretildiği, üçüncü öğe ise şirketin ürün ve hizmetleridir. Dördüncü navigasyon öğesi başka bir şirket ürünüdür (Greyp elektrikli bisikletler). Son iki öğe, basın bültenlerini içeren “basın” ve haberlerinin çoğu sosyal ağlarda yayınlandığı için özellikle yararlı olmayan “blog”dur.

Diğer bir konu da, kariyer bağlantısının ikincil, daha az önemli bir gezinme öğesi olarak gizlenmesi ve şirketin muazzam genişlemesi göz önüne alındığında önemli bir konuyu temsil etmesiydi. Kullanıcıyı kurumsal kaygıların odak noktası olarak düşünürsek, çoğu şirket web sitesinde (tipik istisnalar kurumsal/son derece büyük web siteleridir) belirgin bir “kariyer” bağlantısına veya CTA'ya sahip olmanın çok önemli olduğunu görürüz.

Web Sitesi Yeniden Tasarım Süreci

Ana Sayfa Kahraman Resmi Öncesi ve Sonrası

Başlangıçta amaç, arabanın daha karanlık, daha güçlü bir versiyonunu yaratmaktı. İnternette Concept_One arabasının bazı resimlerini buldum ve biraz "Photoshop büyüsü" ile ana sayfa için ilk kahraman resmini oluşturdum. Bir sonraki fikir, bir animasyonun arabayı yavaşça ortaya çıkarması, önce arka planı, ardından arabanın ana hatlarını ve ardından tamamen işlenmiş bir görüntüydü.

Ana Sayfa Tasarımı

Ana sayfa için konsept, iki ana görsel alanı tanımlamaktı: üst navigasyon ve araba kahramanı görüntüsü. Bu kadar. Minimalist ama çarpıcı kılmak için gereksiz her şey kaldırıldı. Hızlı bir bakışta, tüm önemli şeyler görülebilir; diğer her şey site içindeki alt sayfalara taşındı.

İçerik Stratejisi ve Tasarımı

Bu tür web sitesi yenileme projeleri için sadece sitenin yapısı ve görsel estetiği değil, içeriği de tasarlamak önemlidir. Bu, web sitesinin yeniden tasarımına tabi tutulmadığı için, daha fazla deneme özgürlüğü ve kendi tasarım kararlarımızı vermemiz için tam fırsatın olduğu estetik bir esneklik sunar.

İşlem basittir:

1. Web sitesinde görünecek gövde metnini hazırlayın.
2. Bazı tasarım öğelerini (örn. hızlanma, beygir gücü ve en yüksek hız hakkında göz alıcı ayrıntılar) simgeler veya etkileşimli animasyonlar aracılığıyla iletin.

Bunu yaparak, kullanıcı arayüzünde yardımcı kelimelere ihtiyaç duyulmaz ve web sitesi ziyaretçileri için daha önemli olan alanlara dikkat çekilir.

Web Sitesi Gezinti Yeniden Tasarımı

Web sitesinin gezinme yapısı artık bir önem hiyerarşisine göre yeniden düzenlenmiştir. Navigasyondaki ilk açılır menü olarak Araçlarımız var, bu da şirketin gelecekte daha fazla araba modeli eklemesine izin verdiği için tasarım esnekliği sağlıyor.

Ana sayfadan ikincil Ürünler sayfasına anında erişim sağlamak için, verimlilik adına başka bir ürün listeleme sayfası (başka bir web sayfasında) oluşturmak yerine Ürünler ve alt kategorilerinin bir açılır alan olarak ana sayfaya dahil edilmesine ve bir parçası haline getirilmesine karar verildi. navigasyon. Aşağıdaki tasarım, ziyaretçiler navigasyonda Ürünler'i tıkladığında ana sayfada simgeler olarak oluşturulan çeşitli ürünleri göstermektedir. Ürünler altındaki ikinci seviyeleri ifade eden 3B ürün görselleştirmeleri için, iyi bilinen, standartlaştırılmış araçlar oldukları için Three.js, WebGL, Canvas ve Greensock'u tavsiye ederim.

Web Sitesi Yeniden Tasarımında İkincil Sayfalar

Ana Sayfanın aksine, Hakkında ve Hizmet sayfaları gibi ikincil sayfalar farklı, daha Z desenli bir kılavuz kullanır. Farklı ızgara düzeninin amacı, bu sayfaları tararken ziyaretçilere daha ilginç ve dinamik bir ortam sağlamaktır.

Ana fikir, mümkün olduğunca az metin içeren görsel minimalizmdir. İnsanlar bu tür otomotiv web sitelerine çok fazla metin okumak için değil, hızlı ve görsel olarak bilgi almak için geliyorlar. Sayfa başlıklarındaki büyük, kalın yazı tiplerinin ve farklı yazı tipi stillerinin kullanılmasının ardındaki düşünce buydu.

Bu tür "şirket broşürü" web sitesi yeniden tasarımının, hizmet yeniden tasarımından farklı olduğunu belirtmek önemlidir. Bir “şirket broşürü” web sitesi daha çok pazarlama ürünleriyle ilgilidir. Hizmet odaklı web sitesi yeniden tasarımları, tıklamaları dönüşümlere ve nihai kâra dönüştürmeye yöneliktir.

Çözüm

Tasarımcıların yan tarafta görevlendirilmemiş tasarım projelerine katılmalarının neden iyi bir fikir olduğunu öneren birkaç tasarım blogu makalesi daha var. Gerçekten harika bir proje tasarlamak istiyorsanız, bir fikir seçin (bu bir web sitesi, uygulama, kurumsal SaaS ürünü olabilir) ve bunun için bir tasarım problemini çözün.

Dribbble, dijital tasarımcıların tasarım becerilerini sergileme fırsatı buldukları, istenmeyen kavramsal yeniden tasarım projeleriyle doludur. Size dünyaya yaratıcı bir çözüm sunan harika bir tasarım sunmanın yanı sıra, "gerçek" bir ürün sorunu üzerinde çalışmak, potansiyel şirketlere ve müşterilere nasıl düşündüğünüzü, sürecinizi ve uzmanlığınızı gösterecektir.

Benim durumumda, üst düzey bir otomotiv web sitesini ele almak harika bir alıştırmaydı çünkü bu sektördeki web sitelerinin tasarımının olağanüstü yüksek bir standardı karşılaması özellikle önemlidir.

Bununla birlikte, bir uyarı: dalmadan ve tasarıma başlamadan önce, ileriye dönük olmak ve herhangi bir web sitesinin üç yıl içinde yalnızca tasarım estetiği açısından değil, içerik açısından da nasıl görünmesi gerektiğini düşünmek iyi bir fikirdir. işlev ve yapı. Yerleşik esnekliğin ciddi bir tasarım konusu olması çok önemlidir. Web sitesi veya alt sayfalar çalışırken ve ölçeklenebilirken gelecekteki taleplere uyacak şekilde küçük ince ayarlar yapmak daha kolay, daha verimli ve çok daha az acı vericidir.

Bazen potansiyel bir müşteriyi bir web sitesi yenilemesi yapmaya ikna etmek gerçekten zordur. Müşteriler genellikle kaynak, fon veya zaman eksikliği nedeniyle taahhütte bulunma konusunda isteksizdir. Yine de, istenmeyen bir web sitesi yeniden tasarımı, web sitenizin yeniden tasarım sürecini dünyaya sergilemenin harika bir yoludur. Ve kim bilir? Web sitenizin yeniden tasarımının, isteksiz bir müşteriyi, "gerçek" bir proje için yeşil ışık yakması için yeterince etkilemesi oldukça olasıdır; burada, ek bir bonus olarak, tasarımcıya ödeme yapılır!

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Web Sitesi Yeniden Tasarımının Temelleri – Bir Vaka Çalışması
• UX'in Gerçek Yatırım Getirisi: B2B Yeniden Tasarım Vaka Çalışmaları
• IKEA'yı Kutusundan Çıkarıp 1,6 Milyar Kullanıcı İçin Yeniden Tasarlamak
• Facebook'u Yeniden Tasarlayalım: Başlamanız için 10 İlham
• CrunchBase Nasıl Tasarlanmalıdır?