7 adımda bir “re-design” sürecinin anatomisi

2. Proje “brief”leri

Projeye girip odaklanmadan önce herkesin fikir sahibi olup özümsemesi için bir proje brief’i yazdım ve bunu sürekli güncel tutarak projedeki herkesin güncel durumundan haberdar olmalarını sağladım.

Bir proje brief’i aşağıdaki sorulara cevap vermeli;

• Neyi başarmayı amaçlıyoruz?
• Bu projenin başarılı olup olmadığını nasıl bileceğiz?
• Ne yapmamız gerekiyor?
• Bunu neden yapmamız gerekiyor?
• Olması gerekenler nelerdir?
• Bunu kimin için yapıyoruz?
• Bunu nasıl bilecekler?
• Proje takımında kimler olmalı?
• Teslim tarihimiz nedir?

3. Rekabet analizi

Başka kimlerin bu alanda olduğuna ve neler yaptığına bakmak istedik; bu işe de bir rakip listesi oluşturarak başladım. Sonra e-ticaret alanı dışındaki hedef kitlemize hizmet veren işletmeleri de listeye dahil ettim.

Rakiplerin güçlü yanlarını, zayıf taraflarını, fırsatlarını ve dikkat çekmek istediğimiz alanları ve kaçınmak istediğimiz özelliklerini karşılaştırdık.

4. Bilgi mimarisi

Bilgi mimarisi, bir içerik düzenleme uygulamasıdır; tüketimi ve anlaşılırlığı kolay bir yöntemdir. Web tasarımında Bilgi Mimarisi şeması, bir websitenin tüm ekranları arasındaki ilişkileri eşleştirerek size websitenizin bileşenlerine, öğelerine yukarıdan bir bakış imkanı sunar.

Eski websitemizin ekranları arasındaki ilişkilerini gösteren bir bilgi mimarisi şeması çizmeye karar verdim. Değişiklikleri güncellemeyi önermeden önce içeriği, amaçları ve trafiği geliştirdim. Çizmiş olduğum Bilgi Mimarisi şeması, projenin kapsamını tanımlamamıza yardımcı oldu ve tüm sayfalarını yazarken, tasarlarken ve kodlarken bir kontrol listesi işlevi görme özelliğine de sahip oldu.

5. Wireframe

Yeniden tasarım süresince problemleri düşünmek ve fikirlere onay almak için wireframe’ler kullandım. Bazılarını peçetelere çizip, yüz yüze paylaştım. Bazılarını ise geleneksel yollardan ziyade bazı araçlar yardımıyla hazırlayıp çevrimiçi dijital kopyalar olarak paylaştım.

Beklenmedik bir wireframe bonusu: Wireframe’ler size içerik yazmada da yardımcı olurlar. Sadece bir içeriği yazılı olarak belirtmek görselleştirme konusunda size zorluk yaşattırabilir fakat içeriği wireframe’e yansıttığınızda sayfanın akışı ve içerikler arasındaki bağlantı konusunda size mutlaka daha anlamlı hale gelecektir.

6. İlham verici örnekler

İlham verici örnekler, yeni tasarımın nasıl görüneceğine dair vizyonumu geliştirmeme epey yardımcı oldular ve hatta proje takımından daha önce projeye girmemi sağladılar.

Pinterest’i kullanarak topladığım örnekleri tek bir board içinde toplayıp kaybolmaktansa navigasyon, animasyon ve tipografi gibi spesifik alanlarda farklı board’lar yarattım.

Araştırma süresince bulduklarımı Illustrator’da çizdim; kelimeleri, görselleri ve renkleri reklam gibi görünen bir şeyde birleştirdim. Illustrator’da yer alan tüm aynı tasarım elemanları yarattığım eskizlerde de yer aldılar fakat yerleşimleri ve görünüşleri eskizden eskize değişiklik gösterdiler.

7. “Mockup”lar ve prototipler

Eğer ki wireframe’ler ya da web tasarımları kağıt üzerinde basılı haldelerse bir çok insanın dikkatini çok iyi çekemeyebiliyor. Bir tasarımı ekran üzerinde göstermek tabii ki iyi fikir ama tasarımı izleyicilerin gözünden görmek her zaman en iyi yol olacaktır.

Wireframe sürecinin erken zamanlarda interaktif mock-up’lar geliştirmeye başladım ve bunları website’nin tamamı kodlanana kadar hem müşteri hem de proje takımı ile paylaştım.

Paylaşmış olduğum mock-up’ları deneyimleyenlerden ne hissettiklerini, ne düşündüklerini benimle paylaşmalarını istedim. Aldığım geribildirimler projeyi finalize ederken sorunlu bölgeleri tespit etmemde ve tasarımda doğru yolda olmamda bana ışık oldular.

Yeniden tasarım süreçleri için bazı kuruluşlar belirli bir düzene bağlı olarak çalışsalar da, Shopify Plus’un yeniden tasarım sürecinde bizim için bu 7 adımın etkili olduğunu söyleyebilirim. İş akışınıza bağlı bir strateji kurmak, başarılı bir yeniden tasarım sürecinin önemli bir parçasıdır.