Bir mobilya markasının web sitesini yenileme işini aldığımda karşımda tuhaf bir durum vardı: ürünler gerçekten güzeldi ama site bunu ekranda hiç hissettiremiyordu. Final Mobilya gibi görselliğin baş rolde olduğu bir markada en büyük sorun da buydu; site markanın kalitesini yansıtmıyordu. Bu yazıda o yenileme sürecini, yol boyunca verdiğim kararlarla birlikte anlatacağım.
Amacım genel geçer bir 'şöyle yapılır' anlatısı değil. Gerçek bir projede neyle karşılaştım, neyi neden değiştirdim, teslimden sonra siteyi ayakta tutmak için ne yaptım, bunları paylaşacağım. Çünkü mobilya gibi görsel bir işte site yenilemenin önemli kısmı çoğu zaman detaylarda saklı.
Özet: bu yazıdan çıkaracakların
- Görsel odaklı mobilya sitesinde ürün fotoğrafları öne, metin arkaya alınmalı.
- Kategori yapısı sadeleşince ziyaretçi aradığı koleksiyona üç tıkta ulaşabiliyor.
- Görselleri doğru boyuta indirip modern formatlara geçmek hızı güzellikten ödün vermeden artırıyor.
- Kod bilmeyen ekibin ürün ekleyebildiği sade panel siteyi güncel tutuyor.
İşe başlarken tablo neydi, sorun neredeydi
İşe her zamanki gibi başladım ve siteyi bir müşteri gibi kullanmayı denedim. Telefonumdan bir koltuk modeli ararken ilk dikkatimi çeken açılış hızı oldu. Ana sayfa yüklenene kadar ekranda uzun süre bomboş beyaz bir alan duruyordu. Bu işte ilk birkaç saniye çok önemli; insan koltuğu daha görmeden sıkılıp çıkıyor.
İkinci büyük sorun mobil deneyimdi. Ziyaretçilerin çoğu telefondan geliyordu ama site masaüstü için tasarlanmış, mobile sonradan sıkıştırılmıştı. Menüler küçücük, butonlara basmak zor, ürün görselleri ekranın dışına taşıyordu. Kategori yapısı da dağınıktı; aynı ürün grubu farklı isimlerle birkaç yerde geçiyor, ziyaretçi aradığı koleksiyonu bulmakta zorlanıyordu.
Bir de tasarımın kendisi markanın kalite algısını taşımıyordu. Ürünler premium ama sitenin genel havası eski ve sıkışıktı. Bir markanın showroom'una girdiğinizde hissettiğiniz ferahlığı ekranda da hissetmeniz gerekir; burada o duygu yoktu.
Yaklaşımım: ürünü merkeze alan sade bir kurgu
Mobilya sitesinde asıl kahraman metin değil, görselin kendisi. O yüzden tasarımı ürün fotoğraflarının nefes alabileceği şekilde kurdum: bol beyaz alan, büyük ve net görseller, gözü yormayan bir düzen. Ziyaretçi bir koleksiyona girince önce ürünü görsün, açıklama ve teknik detay ikinci planda kalsın istedim.
Kategori ve koleksiyon yapısını da baştan sadeleştirdim. Marka ekibiyle oturup ürünleri ziyaretçinin kafasındaki mantığa göre grupladık; 'oturma grupları', 'yatak odası', 'yemek odası' gibi net başlıklar altında topladık. Derdim, birinin üç tıklamada aradığı ürüne ulaşabilmesiydi.
Tasarımı mobil öncelikli kurdum. Yani önce telefonda kusursuz çalışsın, sonra büyük ekrana genişlesin; tersi değil. Trafiğin büyük kısmının mobilden geldiği bir markada bu yaklaşım tek başına ciddi fark yaratıyor.
- Ferah, görsel odaklı bir düzen; ürün fotoğrafları önde, metin arkada.
- Sadeleştirilmiş koleksiyon ve kategori yapısı, aradığını üç tıkta bulacak şekilde.
- Önce telefonda kusursuz çalışan, sonra masaüstüne genişleyen bir kurgu.
- Renk, tipografi ve boşlukların showroom hissini taşıdığı tutarlı bir marka dili.
Hız ve görsel optimizasyonu: güzellik yavaşlık getirmesin
Görsel odaklı bir sitenin en büyük riski, ağır fotoğraflar yüzünden yavaş açılması. Marka bana yüksek çözünürlüklü, olduğu gibi konunca sayfayı boğan görseller verdi. Ben de her görseli web için doğru boyuta indirdim, modern görsel formatlarına geçtim ve ekranda görünene kadar alttaki görsellerin yüklenmesini erteledim.
Bunun yanında arka planda çalışan gereksiz eklentileri ve ağır scriptleri temizledim. WordPress tarafında önbellekleme kurdum; böylece aynı sayfayı tekrar açan ziyaretçi çok daha hızlı bir deneyim yaşadı. Sonuçta site, görsellikten hiç ödün vermeden gözle görülür biçimde hızlandı.
Ekibin kod bilmeden yönetebileceği bir panel
Benim için iyi bir teslim, müşterinin her ürün değişikliğinde bana dönmek zorunda kalmadığı sitedir. Marka ekibi yazılımcı değildi; yeni bir koleksiyon geldiğinde onu kendileri ekleyebilmeliydi. Bu yüzden yönetim panelini olabildiğince sade tuttum.
Ürün eklemeyi, görsel yüklemeyi ve kategori düzenlemeyi teknik bilgi istemeyecek hale getirdim. Ekibe kısa bir kullanım kılavuzu hazırladım, sonra birlikte deneme yaptık. Amaç sitenin canlı ve güncel kalmasıydı; çünkü mobilyada güncel olmayan koleksiyon, kapalı vitrin gibi.
- Teknik bilgi istemeyen bir ürün ekleme ve düzenleme akışı.
- Panele yüklenen görsellerin otomatik olarak doğru boyuta gelmesi.
- Ekibe özel kısa bir kullanım rehberi ve birlikte yaptığımız deneme oturumu.
Teslim sonrası: site canlı bir şey
Bir siteyi teslim etmek işin sonu değil. Yenileme sonrası birkaç hafta boyunca siteyi izledim; hangi sayfa nasıl davranıyor, mobilde takılan bir yer var mı diye baktım. Küçük ayarlarla deneyimi biraz daha oturttum.
Ayrıca düzenli bir bakım kurdum: yazılım güncellemeleri, yedekleme, performans kontrolleri. Bir web sitesi bakımı yapılmadığında zamanla yavaşlıyor ve güvenlik açıkları oluşuyor. Ben bu tarafı işin ayrılmaz bir parçası olarak görüyorum, çünkü asıl değer sitenin uzun vadede sağlıklı kalmasında.
