7 Haftada Dönüşüm Oranlarını %42 Arttıran Düşük Maliyetli Web Sitesi Yeniden Tasarımım

Çevrimiçi mağazamın eksiksiz bir web sitesi tasarımını yapmak çok uzun zamandır “yapılacaklar” listemdeydi, ancak tetiği çekemedim çünkü bu asla bir öncelik değildi.

Sorun şu. Dönüşüm oranım her zaman oldukça iyi olmuştur (>%3). Ve çevrimiçi mağazam her yıl çift haneli rakamlarla büyüyor, o halde neden bu kadar sallanayım?

Ama sonra 3 ay önce bir grup diğer e-ticaret gazisi ile bir beyin toplantısına katıldım ve bunu "hotseat" sıram sırasında gündeme getirmeye karar verdim.

Selam millet. Siteyi yeniden tasarlamayı düşünüyorum, ancak mevcut dönüşüm oranım hala oldukça iyi. Hemen güncellemem gerekiyor mu? Ve bugün düzeltmem gerekmesi yeterince kötü mü sence? Bir yıl daha erteleyebilir miyim?

Aldığım yanıtları duymak dayanılmaz derecede acı vericiydi.

• Bu web sitesi 90'larda tasarlanmış gibi görünüyor. Yeniden tasarım yaptıysanız, bahse girerim dönüşüm oranında %50'lik bir artış elde edebilirsiniz. -Mike Jackness
• Kurs mu işletiyorsun? Bunu görsem senin dersine girmezdim. – Kevin Stecko
• Bunlar satın almayı , tamir etmeyi ve sonra kârla yeniden satmayı sevdiğim site türleri . – Dana Jaunzemis

Bu yorumları duymak gerçekten gururumu incitti ve savunma yapmamak için elimden geleni yaptım.

Ama beynimden döner dönmez hemen tasarımcımla iletişime geçtim, Photoshop'ta hızlı bir maket hazırladım ve onu çalıştırmaya başladım .

Uygulama sürecim oldukça basitti. Her sayfayı tek tek inceledim ve inceledim, "kabaca" nasıl görünmesini istediğimi ortaya koydum ve tasarımcımın "daha iyi görünmesi" için parçaları toplamasını sağladım.

Kendi zamanımın yaklaşık 40 saatine katkıda bulunarak yeniden tasarımın tamamlanması için yaklaşık 6 hafta bütçe ayırdım. Sitedeki her sayfa tamamen yeniden yapıldı.

Genel olarak, tarayıcı uyumluluğu ile ilgili öngörülemeyen koşullar nedeniyle proje 7 hafta sürdü (Senden nefret ediyorum IE!) ve bana 1840 dolara mal oldu .

Editörün Notu: İşte yeni siteme bir bağlantı ve eski sürümü görmek için geri dönüş makinesini kullanabilirsiniz.

Başarılı Bir E-Ticaret Mağazasını Nasıl Başlatacağınıza Dair Ücretsiz Mini Kursumu Alın

Bir e-ticaret işletmesi kurmakla ilgileniyorsanız , kendi çevrimiçi mağazanızı tamamen sıfırdan başlatmanıza yardımcı olacak kapsamlı bir kaynak paketi hazırladım. Gitmeden önce mutlaka alın!

İndirmek için buraya tıkla

Web Sitem Yeniden Tasarım Sonuçları

Aşağıdaki dönüşüm sonuçları, yalnızca Google TBM trafiği için mobil, masaüstü ve tablet içindir .

Sitem, mutlaka satışa dönüşmeyen içerik sayfalarından tonlarca trafik aldığından, karşılaştırma amacıyla hedeflenen ppc reklam trafiği için sayıları çalıştırmak en mantıklısıydı.

• Masaüstü dönüşüm oranları %46 arttı Güncellendi!
• Mobil dönüşüm oranları %21 arttı Güncellendi!
• Tablet dönüşüm oranları %25 arttı Güncellendi!

Not: Mevsimsellik ve talepteki dalgalanmalar gibi değişkenleri ortadan kaldırmak için dönüşüm oranı verilerim önceki yılla tam olarak aynı dönemle karşılaştırıldı.

Bununla birlikte, dönüşüm oranı farklarını ölçmenin tek doğru yolu, zaman yararına yapmadığım tasarımları bölme testi yapmaktır.

Öncelikle, bu kadar büyük bir sıçrama beklemiyordum çünkü masaüstü dönüşüm oranındaki artış beni gerçekten şok etti. Eski sitemin çalışmaya ihtiyacı olduğunu biliyordum ama bu kadar değil!

( Güncelleme: Birkaç aylık daha fazla veriden sonra, masaüstü için dönüşüm oranı artışı %46'dır)

Tablet müşterileri için, dönüşüm oranı artışı aslında %15'ten daha yüksekti çünkü piyasaya sürüldükten birkaç hafta sonra tablet uygulamasında , sonuçlarla karışan büyük bir hata buldum .

( Güncelleme: Birkaç aylık daha fazla veriden sonra, tablet için dönüşüm oranı artışı %25'tir.)

Ve mobil için, 2013'te zaten oldukça iyi bir mobil site kurmuştum, bu yüzden büyük sıçramalar beklemiyordum ama %12'si hala oldukça iyi.

( Güncelleme: Birkaç aylık daha fazla veriden sonra, mobil için dönüşüm oranı artışı %21'dir.)

Her durumda, dönüşüm oranındaki artışa rağmen, verilerin tamamı pembe değildi. Bazı nedenlerden dolayı, hemen çıkma oranı gibi yerinde ölçümlerim, pano genelinde kabaca %10 arttı .

Editörün Notu: Şu anda, siteden sol navigasyonu kaldırdığımdan şüpheleniyorum ama bunun tam olarak neden olduğunu bulmak için verileri gözden geçirmem gerekecek. Güncelleme! Bu soruna katkıda bulunan bu yeniden tasarımda birkaç tarayıcı sürümü için desteği durdurdum.

Hangi Alışveriş Sepetini Kullanıyorum?

Her yeniden tasarımda her zaman sorulan en yaygın soru…

Steve, bu ne alışveriş sepeti? Shopify mı? Yoksa BigCommerce mi?

Ve herkese, çokça değiştirilmiş eski okul açık kaynak alışveriş sepetimi hala kullandığımı söylediğimde , genellikle şok oluyorlar.

İşte mesele…

Seçtiğiniz alışveriş sepetinin, alışveriş sepetinizin veya web sitenizin görünümüyle hiçbir ilgisi yoktur . Alışveriş sepetinizin temel amacı, işlemleri gerçekleştirmek ve işleme koymaktır.

Alışveriş sepetiniz ihtiyacınız olan tüm arka uç özelliklerine sahipse , geçiş yapmanız gerekmez . Web sitenizin estetiğinin alışveriş sepeti motoruyla çok az ilgisi vardır.

Yani benimki gibi eski bir alışveriş sepetiniz olsa bile, ihtiyacınız olan tüm özelliklere sahip olduğu sürece, onu görünüşüne göre yargılamamalısınız çünkü görünüşünü her zaman değiştirebilirsiniz.

En iyi yanı, açık kaynak bir platformdaysanız, tam kontrol sizde olduğu için istediğiniz zaman kendi özelliklerinizi ekleyebilirsiniz .

Örneğin, bu sitenin yeniden tasarımı için, bu şık küçük sosyal kanıt özelliğini dükkanım için uyguladım. Temelde her 5-15 saniyede bir, sitede daha önce yapılmış bir satın alma işlemini gösteren sol alt köşede küçük bir pencere açılır.

Shopify'da aynı şeyi yapmak için bir eklenti satın alabilir ve ayda 15 ABD doları ödeyebilirsiniz. Ama aynı şeyi tekrar eden bir ücret ödemeden pompalamam kabaca 5 saatimi aldı (gerçekten 2 saat sürmeliydi ama kodlamam paslıydı).

Her neyse, bunlar kaynak koduna sahip olmanın avantajlarından sadece birkaçı. Teknik olarak yatkınsanız, açık kaynağı denemenizi tavsiye ederim.

Ancak web tasarımı hakkında bilginiz yoksa ve teknik herhangi bir şeyle uğraşmak istemiyorsanız Shopify veya BigCommerce ile gidin.

Renk Düzenini Değiştirme

Estetik açıdan sitemle ilgili en büyük şikayetlerden biri renk şemasıydı. Eski site mor ve sarıydı ve seçtiğim renk paleti siteyi eski moda gösteriyordu .

Editörün Notu: İşte yeni siteme bir bağlantı ve eski sürümü görmek için geri dönüş makinesini kullanabilirsiniz.

İronik olan şu ki, Karlı Bir Çevrimiçi Mağaza Oluşturma Kursumda aslında renk teorisi dersleri veriyorum ama 2013'te bu bilgiye sahip değildim, bu yüzden hiç uygulamaya koyma şansım olmadı .

Neyse kısacası, yeni tasarımım için tamamlayıcı renkleri seçmek için color.adobe.com adlı bir site kullandım. Görünümü ve hissi tazelemek için deniz mavisi, sıcak pembe ve sarıyı seçtim.

Neden 3 renk? Çünkü “hareket etme” ile ilgili belirli bir renk istedim. “Dikkat çekmek” için belirli bir renk istedim. Ve son olarak, siteyi "genç ve havalı" hissettirmek için parlak bir genel renk istedim.

Turkuaz benim arka plan rengim. Herhangi bir özel teklifim varsa sarı benim "dikkat" rengimdir ve sitedeki her bir işlem düğmesi için sıcak pembe kullanılır çünkü öne çıkar ve açılır.

Sitemdeki her sayfa tekil bir amaca sahip olacak şekilde tasarlanmıştır.

Ön sayfa için, insanların kişiselleştirilmiş koleksiyonumuza göz atmalarını istiyorum çünkü bu, en yüksek marjlara sahip bölüm. Kategori sayfalarında insanların bir ürüne tıklamasını istiyorum. Ve bir ürün sayfasında insanların "Sepete Ekle"ye tıklamasını istiyorum.

Dönüşümün 3 Sütunu

İnsanların kendi web sitelerini tasarlarken yaptıklarını gördüğüm büyük bir hata, Amazon.com'u kopyalamaya çalışmalarıdır . Amazon, gezegendeki en büyük e-ticaret platformudur, neden sitemi onlarınkine göre modellemeyeyim?

Her şeyden önce, Amazon'un web sitesi tasarımı çirkin, genel ve çoğu niş çevrimiçi mağaza için uygun değil . Amazon'un çirkin bir web sitesi ile kaçabilmesinin nedeni, herkesin kim olduğunu bilmesi, arayüze alışması ve zaten Amazon'a güvenmesidir.

Ancak kendi web siteniz olduğunda, bu güveni sıfırdan oluşturmalısınız çünkü kimse kim olduğunuzu bilmiyor.

Genel olarak, sitenize ilk kez giren herkes için çok önemli olan üç ana şey vardır.

Birincisi, insanlara ücretsiz kargo sunduğunuzu bildirmeniz gerekir. Amazon ve diğer büyük kutu e-ticaret mağazaları sayesinde bir tür ücretsiz gönderim teklifi artık kurs için eşit.

İkincisi, bilinmeyen bir varlık olduğunuz için müşterilere, memnun kalmazlarsa mallarını iade edebileceklerine dair güvence vermek istiyorsunuz.

Ve son olarak, yeni bir müşteriyle kurmanız gereken üçüncü şey, belki de hepsinden daha önemli olan güvendir.

Bir müşteri sitenize girerse ve sizi hiç duymadıkları için mağazanıza güvenmezse, sadece alacak ve ayrılacaktır.

Yeniden tasarımım için güveni birçok farklı şekilde uyguluyorum.

Her sayfanın başlığında ücretsiz kargo, sorunsuz iade ve telefon numaramı vurguluyorum. Düz görünümde bir telefon numarasına sahip olmak ÇOK ÖNEMLİ!

Ne zaman yeni bir butikten online alışveriş yapsam, yaptığım ilk şey iletişim sayfasına tıklayıp bir telefon numarası ve adres aramak oluyor . Ve bu öğelerden hiçbiri görüntülenmezse veya ikisinden yalnızca biri varsa, oradan alışveriş yapmayacağım.

Müşteriler, satın almalarında bir sorun olduğunda bir mağazayla iletişim kurabilmeyi ister. Sonuç olarak, bu bilgilerin mağaza saatleriniz de dahil olmak üzere her sayfada mümkün olduğunca görünür olmasını istersiniz.

“Resmi mağaza çalışma saatlerine” sahip olmak, mağazanızın daha profesyonel görünmesini de sağlar çünkü “gerçek” çalışma saatleri ile kurulmuş bir işletme gibi görünürsünüz.

Sosyal Kanıt ve Güven

Her sayfanın altına doğru, sitemin güvenilirliğine katkıda bulunan sosyal kanıt için özel bir bölümüm var.

Ne de olsa, bir sürü farklı dergide yer aldık ve Today programına çıktık, bununla övünmezsek ne anlamı var?

Sosyal kanıt/basın sözleri bölümümüz sitenin her sayfasında yer almaktadır, bu nedenle ilk seferde görmeseniz bile sonunda fark edeceksiniz.

Ayrıca bir grup müşterimizden fotoğraflarını ve basın bölümünün hemen altında görüntülenen bir referans istedim.

Bunlar, sitemizden alışveriş yapan, satın almalarından çok memnun olan ve bize çok güzel bir referans bırakmak isteyen gerçek müşterilerdir.

Belirli bir müşteri Sherri, mendillerimizi gerçekten sevdiği için sitemizden yüz elli defadan fazla satın aldı.

Ve son olarak, müşteriye memnuniyetinin ana endişemiz olduğuna dair güvence veren bazı laflar ekledim. Bir müşterinin mutsuz ayrılmasına asla izin vermeyiz. Ve bir şeyler ters giderse, tam geri ödeme sağlıyoruz.

Navigasyonu Değiştirme

Yeni sitem için navigasyonu yeniden tasarlamak, zorlandığım bir alandı. Öncelikle , sol taraftaki navigasyonun BÜYÜK bir hayranıyım . Eski tasarımımda vardı ve müşterilerim onu ​​sevdi çünkü menü her zaman görünür ve erişilebilirdi.

Bir web sayfasının sol tarafı da gözünüzün doğal olarak yöneldiği yerdir ve alışverişe başlamak için en belirgin yerdir.

Ama benim ikilemim şuydu…

Navigasyon için özel bir sol sütun ekleseydim, sitedeki diğer her şeyin küçülmesi gerekirdi.

Örneğin, tüm ürün resimlerimin önemli ölçüde azaltılması gerekecek ve bu da dönüşümleri olumsuz etkileyecektir .

Kategori resimlerim daha küçük olur ve bu da TO'yu düşürür .

Her sayfadaki laf kalabalığı daha fazla ekran alanını kaplayacak ve bu da ürünleri sayfanın daha aşağılarına itecektir .

Sonunda, en üst düzeyde, vurgulu stilde bir açılır menü ile gittim. Üst düzey bir gezinme çubuğunun güzelliği, sol gezinme çubuğuna benzer şekilde davranması, ancak aynı miktarda ekran alanını işgal etmemesidir.

Navigasyonu en üste getirerek kategori ve ürün resimlerimi %300 oranında büyütebildim ve bu da onları gerçekten öne çıkardı.

Üst düzey navigasyonu kullanmanın bir diğer avantajı, farklı kategorileri çok temiz bir şekilde ayırma yeteneğiydi.

Örneğin, artık farklı bir "Fırsatlara Göre Alışveriş Yap" kategorisine sahibim, oysa eski tasarımımda bu bölüm sol taraftaki menünün geri kalanıyla karıştırılmıştı, bu yüzden göze çarpmadı.

Ayrıca kişiselleştirilmiş ürünler, en çok satanlar, yeni gelenler, SSS sayfası, iletişim sayfası, hakkında sayfası, sepeti görüntüle ve kontrol et için özel bir bölüm ekledim.

Temel olarak, en önemli gezinme öğelerinin tümü artık herkesin görmesi için ana çubukta.

Eşsiz Değer Önerimi Vurgulamak

E-ticaret kursumda öğrettiğim önemli bir ilke, sitenizdeki her bir açılış sayfasının güçlü bir benzersiz değer teklifine sahip olması gerektiğidir .

Neden biri mağazanızdan satın almalı? Neden bir rakip değil de buradan alışveriş yapmalıyım? Cevap hemen netleşmeli.

Bu tasarım için, sitemizdeki her sayfada güçlü yönlerimizi öne ve merkeze vurgulamayı seçtim .

Örneğin, ön sayfada, değer önerimiz, açılış görüntüsünün tam içinde.

Kategori sayfalarımızda, mağazamızın neden özel olduğunu anlatmak için özel bir metin kutusu uyguladım.

Nihai hedef, bir müşteriyi ilk 5 saniye içinde neden bir rakip değil de sizden satın almaları gerektiğine ikna etmektir .

Ürün Sayfalarını Güzelleştirme

Site eleştirimden en büyük çıkarımlardan biri, ürün sayfalarımın eşit düzeyde olmamasıydı .

İşte eski tasarımdan bir ürün sayfası.

İşte aynı sayfa yeni sitemde göründüğü gibi.

Herhangi bir farklılık fark ediyor musunuz? Öncelikle, sol taraftaki çubuğu kaldırdığım için ürün görselinin boyutunu %266 oranında artırabildim .

Sadece ana resim çok daha büyük değil, aynı zamanda daha fazla "Sepete Ekle" tıklamasını teşvik etmek için ürün sayfasının öğelerini yeniden düzenledim.

Örneğin, "Sepete Ekle" düğmesinin hemen yanında , müşteriye ücretsiz kargo ve sorunsuz iade konusunda güvence veren metin kutuları bulunur .

Ayrıca, standart mı yoksa ekspres mi tercih ettiklerine ve ilgili tüm nakliye ücretlerine bağlı olarak müşteriye siparişlerini ne zaman alacaklarını dinamik olarak bildiren bir üst bağlantı da vardır.

Ayrıca , çoğu ziyaretçinin eski sitemdeki özel paylaşım düğmelerine bile bakmadığını fark ettikten sonra paylaşmayı teşvik etmek için Pinterest ve Facebook düğmelerini doğrudan görüntünün üzerine yerleştirdim .

Unutulmaması gereken bir şey de, aşağıda gösterildiği gibi resmin hemen altında Facebook ve Pinterest'te paylaşmak için başlangıçta iki büyük mavi ve kırmızı düğmem olmasıydı.

Ama sonunda onları kaldırmaya karar verdim çünkü sıcak pembe “Sepete Ekle” düğmesinden daha fazla öne çıktılar. Sonunda, bir sosyal medya paylaşımından çok "Sepete Ekle" eylemine değer veriyorum.

Son olarak, müşteriyi benzer ürünleri almaya ikna etmek için çapraz satış bölümünün boyutunu da artırdım.

Checkout'u İyileştirme

Ödeme sürecini iyileştirmek benim için büyük bir öncelik değildi çünkü eski siteyle ilgili büyük bir sorun yoktu. Ancak başlığı zaten açtığımdan, sitemde bir süredir devam eden bazı önemli sorunları düzeltmeye karar verdim.

Öncelikle, arada sırada kafası karışan ve sitemizde alışveriş yapmak için bir hesaba ihtiyaçları olup olmadığını merak eden kişilerden telefonlar alırdık . Eski sitemizde ilk ödeme sayfası böyle görünüyordu.

Bu sorunun çözümü , oturum açmayı varsayılan olarak gizlemek ve ödeme için yalnızca iki pembe düğmeyi görüntülemekti.

Ayrıca müşteriye ödemenin güvenli olduğunu ve memnuniyetinin garanti edildiğini güvence altına almak için güven logolarını daha belirgin hale getirdim.

Diğer büyük değişiklik, ödemeyi tamamen duyarlı hale getirmemdi .

Not: Shopify'daysanız, muhtemelen iyi görünümlü, duyarlı bir ödeme sürecinin nasıl göründüğünü görmüşsünüzdür.

Tekerleği yeniden icat etmek yerine, oldukça harika olduğu için Shopify'ın ödeme tasarımını temel olarak taklit ettim.

Özetle, ödeme işlemim farklı ekran boyutlarında şu anda böyle görünüyor.

Masaüstü için…

Tablet ve mobil için

Mobil Hakkında Birkaç Söz

2013'teki son site tasarımım sırasında, farklı bir alt etki alanında yaşayan masaüstü siteden tamamen ayrı bir mobil web sitesi uyguladım.

Ve hala o zaman doğru karar olduğuna inansam da, bugün kesinlikle böyle değil. Bugün, duyarlı tasarımı çok daha kolay hale getiren BootStrap gibi birçok çerçeve var.

Geçtiğimiz birkaç yıl boyunca, mobil ve masaüstü sitelerimi senkronize tutmak benim için büyük bir acı oldu, bu yüzden artık tüm platformlarda tek bir birleşik siteye sahip olmaktan mutluyum.

Duyarlı hale gelmenin en büyük dezavantajı , siteyi masaüstü, tablet ve mobil olmak üzere 3 farklı platformda kapsamlı bir şekilde test etmem gerekmesiydi. Ve her platformun içinde birden fazla tarayıcı sürümü ve üstesinden gelinmesi gereken ekran çözünürlükleri vardı.

Örneğin, Windows makineleri için IE 8, 9, 10 ve 11'i test etmem gerekti. Mac'ler için Safari 6,7 ve 8'i test etmek zorunda kaldım.

Sonunda, Tarayıcı Yığını adlı bir araç kullanarak geçen yıl sitemde kullanılan her tarayıcı için kullanılabilirlik testi yapmak için Google Analytics hesabımı inceledim.

Söylemeye gerek yok, bu süreç berbattı ve yeniden tasarımın en az sevdiğim kısmıydı :(

Her neyse, işte yeni mobil tasarımla ilgili birkaç önemli nokta. Bu satır öğelerinin çoğu oldukça standart olduğundan sizi çok fazla ayrıntıyla sıkmayacağım.

Tablette ve mobilde, menüyü daraltarak tek bir açılır menüye dönüştürdüm.

Önceki mobil siteme dayanarak, herkesin doğrudan arama çubuğuna gitme eğiliminde olduğunu keşfettim, bu nedenle arama çubuğunu mobil sitedeki her sayfanın önüne ve ortasına eklediğinizden emin oldum.

Bir telefonda ekran alanı çok daha küçük olduğundan, daha küçük ekran boyutları için sayfanın bazı "gerekli olmayan" öğelerini kaldırdım.

Pinterest Değişiklikleri

Yaptığım son değişiklik, içerik sayfalarımı tamamen yenilemem oldu. Geçmişte birçok kez bahsettiğim gibi, insanları çevrimiçi mağazamıza yönlendirmek için sanat ve zanaat sayfalarımızı kullanıyorum. Ve Pinterest bu sayfalar için büyük bir trafik kaynağıdır.

Sonuç olarak, zanaat görüntülerinin çoğunu tamamen yeniden düzenledim ve sadece Pinterest için özel uzun ve zayıf versiyonlar yaptım . Ürün fotoğraflarımız için de yepyeni görseller hazırladım.

Örneğin, Pinterest için dikdörtgen bir resim kullanmak yerine, “sabitle” düğmesine tıkladığınızda artık yüksek çözünürlüklü, uzun ve sıska bir versiyon elde edersiniz.

Çözüm

Sonuç olarak, 7 hafta ve 1840 dolar, şu anda yaşadığım kazançlar için oldukça iyi bir yatırım . Şu anki asıl sorunum, aynı anda devam eden çok fazla projem olması ve her biri üzerinde çalışmak için yeterli zamanım olmaması.

Ama olay şu…

Dönüşüm oranım daha önce iyi olsa da, daha da iyi bir dönüşüm oranı nedeniyle satışlardaki net artış, bu yıl uygulamayı planladığım diğer trafik oluşturma çabalarını büyük olasılıkla geride bırakacaktır.

Ve buradan çıkarılması gereken bir ders varsa, o da sitenizin dönüşüm oranını artırmanın, diğer tüm trafik kaynaklarınızdaki satışları artıracağıdır .

E-ticaret işinizin temeli, platformunuzla başlar ve trafik oluşturmaya odaklanmadan ÖNCE tüm ördeklerinizin yerinde olması önemlidir.