我的低成本網站重新設計在 7 週內將轉化率提高了 42%
已發表: 2021-08-19對我的在線商店進行完整的網站重新設計已經在我的“待辦事項”列表上進行了很長時間，但我無法讓自己扣動扳機，因為它從來都不是優先事項。
事情是這樣的。 我的轉化率一直很好（>3%）。 而且我的在線商店每年都以兩位數的速度增長，為什麼要搖搖欲墜呢？
但後來我在 3 個月前與一群其他電子商務資深人士參加了一次策劃會議，並決定在輪到我“熱座”時提出這個問題。
嘿大家。 我正在考慮重新設計網站，但我目前的轉化率仍然不錯。 我需要立即更新嗎？ 你認為我今天需要修復它已經足夠糟糕了嗎？ 我可以再推遲一年嗎？
我收到的答案令人難以忍受。
- 這個網站看起來像是在 90 年代設計的。 如果您進行了重新設計，我敢打賭您的轉化率可以提高 50%。 – 邁克·傑克尼斯
- 你開課程？ 如果我看到這個，我就不會上你的課了。 – 凱文·斯泰科
- 這些是我喜歡購買、修復然後轉售獲利的網站類型。 – 達娜·喬恩澤米斯
聽到這些評論真的傷害了我的自尊心，我盡力不防備。
但是當我從策劃者那裡回來後，我立即聯繫了我的設計師，在 Photoshop 中快速製作了一個模型，並開始著手製作。
我的實施過程非常簡單。 我親自瀏覽並翻閱了每一頁，“大致”佈置了我想要的樣子，並讓我的設計師挑選作品以使其“看起來更好”。
我預算了大約6 週來完成重新設計，我貢獻了大約40 個小時的時間。 網站上的每個頁面都完全重做。
總體而言，由於瀏覽器兼容性的不可預見情況（我討厭你 IE！） ，該項目最終耗時 7 週，花費了我 1840 美元。
編者註：這是我的新站點的鏈接，您可以使用回溯機查看舊版本。
獲取有關如何開設成功電子商務商店的免費迷你課程
如果您有興趣開展電子商務業務，我整理了一個全面的資源包，可幫助您從頭開始開設自己的在線商店。 離開前一定要抓住它！
我的網站重新設計結果
以下轉化結果僅適用於移動設備、桌面設備和平板電腦的Google CPC 流量。
因為我的網站從不一定轉化為銷售的內容頁面獲得了大量流量，所以運行目標 ppc 廣告流量的數字對於比較目的最有意義。
- 桌面轉換率提高了 46% 已更新！
- 移動轉化率提高了 21%更新！
- 平板電腦轉化率提高了 25%更新！
注意：我的轉化率數據與上一年的同一時期進行了比較，以消除季節性和需求波動等變量。
話雖如此，衡量轉化率差異的唯一真正方法是對設計進行拆分測試，因為時間關係我沒有這樣做。
首先，桌面轉換率的提高真的讓我感到震驚，因為我沒想到會有這麼大的跳躍。 我知道我的舊網站需要工作，但不是那麼多！
（更新：經過幾個月的更多數據，桌面的轉化率增加了 46%）
對於平板電腦客戶，轉化率的增長實際上高於 15%，因為我在發布幾週後發現平板電腦實施中的一個主要錯誤與結果混合在一起。
（更新：經過幾個月的更多數據，平板電腦的轉化率增加了 25%。）
對於移動設備，我早在 2013 年就已經實現了一個相當不錯的移動站點，所以我沒有期待任何巨大的跳躍，但 12% 仍然相當不錯。
（更新：經過幾個月的更多數據，移動設備的轉化率增加了 21%。）
無論如何，儘管轉化率有所提高，但並非所有數據都是樂觀的。 出於某種原因，我的網站指標（例如跳出率）全面增加了大約 10% 。
編者註：現在，我懷疑這是因為我從站點中刪除了左側導航，但我需要篩選數據以找出發生這種情況的確切原因。 更新！ 在這次重新設計中，我停止了對導致此問題的多個瀏覽器版本的支持。
我使用的是什麼購物車？
每次重新設計時，我總是被問到的最常見問題是……
史蒂夫這是什麼購物車？ 是 Shopify？ 還是 Bigcommerce？
當我告訴每個人我仍在使用經過大量修改的老式開源購物車時，他們通常會感到震驚。
事情是這樣的……
您選擇的購物車與購物車的外觀或網站的外觀無關。 購物車的主要目的是處理交易。
如果您的購物車具有您需要的所有後端功能，那麼您不一定需要切換. 您網站的美感與購物車引擎幾乎沒有關係。
因此，即使您有一個像我一樣舊的購物車，只要它具有您需要的所有功能，您也不應該根據它的外觀來判斷它，因為您總是可以改變它的外觀。
最好的部分是，如果您在開源平台上，您可以隨時添加自己的功能，因為您擁有完全的控制權。
例如，對於這個網站的重新設計，我為我的商店實現了這個漂亮的小社交證明功能。 基本上每 5-15 秒，左下角會彈出一個小窗口，顯示之前在網站上進行的購買。
在 Shopify，你可以購買一個插件來做同樣的事情，每月支付 15 美元。 但是我花了大約 5 個小時（它真的應該花費 2 個小時，但我的編碼生疏了）才能在沒有經常性費用的情況下抽出同樣的東西。
無論如何，這些只是擁有源代碼的一些優勢。 如果您在技術上傾向於，我建議您嘗試開源。
但是，如果您對網頁設計一無所知，並且不想處理任何技術問題，那麼請選擇 Shopify 或 BigCommerce。
改變配色方案
從美學的角度來看，對我的網站最大的抱怨之一是配色方案。 舊站點是紫色和黃色，我選擇的調色板使站點看起來很老式。
編者註：這是我的新站點的鏈接，您可以使用回溯機查看舊版本。
具有諷刺意味的是，在我的 Create A Profitable Online Store Course 中，我實際上教授了色彩理論課程，但我在 2013 年沒有這些知識，所以我從來沒有機會將其付諸實踐。
簡而言之，我使用了一個名為 color.adobe.com 的網站來為我的新設計選擇互補色。 為了讓外觀和感覺煥然一新，我選擇了藍綠色、粉紅色和黃色。
為什麼是3種顏色？ 這是因為我想要一種與“採取行動”相關的特定顏色。 我想要一種特定的顏色來“引起注意”。 最後，我想要一個明亮的整體顏色，讓網站感覺“年輕而時尚”。
青色是我的背景顏色。 如果我有任何特別優惠，黃色是我的“注意”顏色，而粉紅色則用於網站上的每個操作按鈕，因為它很醒目而且很流行。
我網站上的每個頁面都設計有一個單一的目標。
對於首頁，我希望人們瀏覽我們的個性化收藏，因為它是邊距最高的部分。 在類別頁面上，我希望人們點擊產品。 在產品頁面上，我希望人們點擊“添加到購物車”。
轉換的三大支柱
我看到人們在設計自己的網站時犯的一個大錯誤是他們試圖複製 Amazon.com 。 亞馬遜是地球上最大的電子商務平台，那麼我為什麼不模仿他們的網站呢？
首先，亞馬遜的網站設計醜陋、通用，不適合大多數小眾網店。 亞馬遜能夠擺脫醜陋網站的原因是因為每個人都知道他們是誰，他們習慣了界面並且他們已經信任亞馬遜。
但是當您擁有自己的網站時，您必須從頭開始建立這種信任，因為沒有人知道您是誰。
總的來說，對於第一次登陸您網站的人來說，有三件主要的事情是至關重要的。
一，您需要讓人們知道您提供免費送貨服務。 由於亞馬遜和其他大型電子商務商店，某種免費送貨優惠現在是課程的標準。
第二，因為您是一個未知實體，您希望讓客戶放心，如果他們不滿意，他們可以退貨。
最後，您必須與新客戶建立的第三件事是信任，這可能是其中最重要的因素。
如果客戶登陸您的網站並且他們不信任您的商店，因為他們從未聽說過您，他們就會選擇離開。
對於我的重新設計，我以多種不同的方式加強信任。
在每一頁的標題中，我都強調免費送貨、無憂退貨和我的電話號碼。 清楚地看到電話號碼非常重要！
每當我在一家新精品店網上購物時，我總是做的第一件事就是點擊聯繫頁面並查找電話號碼和地址。 如果這兩個項目都沒有顯示，或者只有兩個項目中的一個，我不會在那裡購物。
客戶希望能夠在購買出現問題時聯繫商店。 因此，您希望這些信息在每個頁面上都盡可能可見，包括您的商店營業時間。
擁有“官方商店營業時間”也會讓您的商店看起來更專業，因為您看起來就像一家擁有“真實”辦公時間的老牌企業。
社會證明和信任
在每一頁的底部，我都有一個專門的社會證明部分，這有助於提高我網站的可信度。
畢竟，我們已經出現在一大堆不同的雜誌上，而且我們已經出現在今日秀上，所以如果我們不吹噓它又有什麼意義呢？
我們的社會證明/新聞提及部分位於網站的每個頁面上，因此即使您第一次沒有看到它，您最終也會注意到。
我還向我們的一些客戶詢問了他們的照片和展示在新聞部分下方的推薦。
這些是在我們網站上購物的真實客戶，對他們的購買非常滿意，並願意為我們留下非常好的推薦。
一位特定的客戶 Sherri 在我們的網站上購買了一百五十多次，因為她真的很喜歡我們的手帕。
最後，我添加了一些措辭，讓客戶放心，他們的滿意度是我們的主要關注點。 我們從不讓客戶不滿意離開。 如果出現任何問題，我們將提供全額退款。
改變導航
為我的新網站重新設計導航是我努力的一個領域。 首先，我是左側導航的超級粉絲。 我的舊設計有它，我的客戶喜歡它，因為菜單始終可見且易於訪問。
網頁的左側也是您的視線自然吸引的地方，也是最明顯的開始購物的地方。
但這是我的困境......
如果我要包含一個專門的左側導航欄，網站上的其他所有內容都必須縮小。
例如，我的所有產品圖片都需要大幅減少，這會對轉化產生負面影響。
我的類別圖像會更小，這會降低 CTR 。
每個頁面上的文字會佔用更多的屏幕空間，從而將產品推向頁面下方。
所以最終，我選擇了頂級、懸停式、下拉菜單。 頂級導航欄的美妙之處在於它的行為類似於左側導航欄，但它不佔用相同數量的屏幕空間。
通過將導航移到頂部，我能夠將我的類別和產品圖片放大 300% ，這讓它們真正流行起來。
使用頂級導航的另一個優點是能夠以非常乾淨的方式分離出不同的類別。
例如，我現在有一個獨特的“按場合購物”類別下拉菜單，而在我的舊設計中，此部分與左側菜單的其餘部分混合在一起，因此它並不突出。
我還添加了一個專門用於個性化商品、暢銷品、新品、常見問題頁面、聯繫頁面、關於頁面、查看購物車和結帳的特殊部分。
基本上，所有最重要的導航項目現在都在主欄中供大家查看。
強調我獨特的價值主張
我在電子商務課程中教授的一個重要原則是，您網站上的每個登錄頁面都必須具有強大的獨特價值主張。
為什麼有人要從您的商店購買？ 我為什麼要在這裡購物而不是競爭對手？ 答案應該馬上就清楚了。
所以對於這個設計，我選擇在我們網站的每個頁面的前面和中心強調我們的優勢。
例如，在首頁上，我們的價值主張就在初始圖像中。
在我們的類別頁面上，我實施了一個特殊的文本框來傳達我們商店的特殊之處。
最終目標是在前 5 秒內說服客戶為什麼他們應該從您而不是競爭對手那裡購買。
美化產品頁面
我的網站評論最大的收穫之一是我的產品頁面沒有達到標準。
這是舊設計的產品頁面。
這是我的新網站上的相同頁面。
你注意到任何不同了嗎？ 首先，因為我刪除了左側欄，所以我能夠將產品圖片的大小增加 266% 。
不僅主圖更大，而且我還重新排列了產品頁面的元素，以鼓勵更多的“添加到購物車”點擊。
例如，“添加到購物車”按鈕旁邊是文本框，可讓客戶放心免費送貨，無需麻煩退貨。
還有一個頂部鏈接，可以根據客戶選擇標準還是快遞以及所有相關的運費，動態地告訴客戶他們何時會收到訂單。
在註意到大多數訪問者甚至沒有查看我舊網站上的專用分享按鈕後，我還在圖像本身上直接疊加了 Pinterest 和 Facebook 按鈕以鼓勵分享。
有趣的一件事是，我最初有兩個巨大的藍色和紅色按鈕，可以在圖像下方在 Facebook 和 Pinterest 上分享，如下所示。
但最終我決定刪除它們，因為它們比粉紅色的“添加到購物車”按鈕更引人注目。 最後，與社交媒體分享相比，我更重視“添加到購物車”操作。
最後，我還增加了交叉銷售部分的大小，以吸引客戶購買類似的商品。
改進結帳
改進結帳流程對我來說並不是一個重要的優先事項，因為舊網站沒有任何嚴重問題。 但是由於我已經打開引擎蓋，我決定解決一些在我的網站上徘徊了很長一段時間的懸而未決的問題。
首先，我們時不時會接到一些人的電話，他們很困惑，想知道他們是否需要一個帳戶才能在我們的網站上購物。 這是我們舊網站上第一個結帳頁面的樣子。
解決這個問題的辦法是默認隱藏登錄，只顯示兩個粉紅色的結賬按鈕。
我還使信任徽標更加突出，以向客戶保證結帳是安全的並且他們的滿意度得到保證。
另一個主要變化是我使結帳完全響應。
注意：如果您使用的是 Shopify，那麼您可能已經看到了美觀的響應式結賬流程是什麼樣的。
因此，我沒有重新發明輪子，而是模仿 Shopify 的結賬設計，因為它非常棒。
簡而言之，這就是我的結帳現在在不同屏幕尺寸下的樣子。
對於桌面…
適用於平板電腦和手機
關於移動的幾句話
在 2013 年的最後一次網站重新設計期間，我實現了一個完全獨立的移動網站，而不是位於不同子域中的桌面網站。
雖然我當時仍然相信這是一個正確的決定，但今天絕對不是這樣。 今天，有很多框架，比如 BootStrap，它們使響應式設計變得更加容易。
在過去的幾年裡，保持我的移動和桌面站點同步一直是一個主要的痛苦，所以我很高興現在擁有一個跨所有平台的統一站點。
響應式的主要缺點是我必須在 3 個完全不同的平台（台式機、平板電腦和移動設備）上徹底測試該網站。 每個平台內都有多個瀏覽器版本和屏幕分辨率需要處理。
例如，我必須為 Windows 機器測試 IE 8、9、10 和 11。 我不得不為 Mac 測試 Safari 6,7 和 8。
最後，我通過我的 Google Analytics 帳戶使用名為 Browser Stack 的工具對過去一年在我網站上使用的每個瀏覽器執行可用性測試。
不用說，這個過程很糟糕，是我最不喜歡重新設計的部分:(
無論如何，這裡有一些關於新移動設計的亮點。 這些訂單項中的大多數都非常標準，因此我不會用太多細節讓您感到厭煩。
在平板電腦和移動設備上，我將菜單更改為折疊為單個下拉菜單。
根據我之前的移動網站，我發現每個人都傾向於直接搜索搜索欄，所以我確保將搜索欄放在移動網站的每個頁面的前面和中心。
因為手機的屏幕空間要小得多，所以我刪除了頁面的某些“非必要”元素，以獲得更小的屏幕尺寸。
Pinterest 變化
我所做的最後更改是我完全修改了我的內容頁面。 正如我過去多次提到的，我使用我們的藝術和工藝頁面將人們引導到我們的在線商店。 而 Pinterest 是這些頁面的大流量來源。
結果，我完全重新製作了大部分工藝圖像，並為 Pinterest 製作了特殊的高瘦版本。 我還為我們的產品照片製作了全新的圖像。
例如，當您點擊“pin”按鈕時，Pinterest 不再使用矩形圖像，您現在得到的是高分辨率的又高又瘦的版本。
結論
總而言之， 7 周和 1840 美元對於我現在正在經歷的收益來說是一筆不錯的投資。 我現在的主要問題是我有太多的項目同時進行，而沒有足夠的時間來處理每個項目。
但事情是這樣的……
儘管我之前的轉化率很好，但由於更高的轉化率而帶來的銷售額淨增長可能會勝過我今年計劃實施的其他流量建設工作。
如果要從中吸取教訓，那就是提高網站的轉化率將增加所有其他流量來源的銷售額。
您的電子商務業務的基礎始於您的平台，在您專注於建立流量之前，讓您的所有鴨子就位非常重要。