我的低成本网站重新设计在 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 美元对于我现在正在经历的收益来说是一笔不错的投资。 我现在的主要问题是同时进行的项目太多，而没有足够的时间来处理每个项目。
但事情是这样的……
尽管我之前的转化率很好，但由于更高的转化率而带来的销售额净增长可能会胜过我今年计划实施的其他流量建设工作。
如果要从中吸取教训，那就是提高网站的转化率将增加所有其他流量来源的销售额。
您的电子商务业务的基础始于您的平台，在您专注于建立流量之前，让您的所有鸭子就位非常重要。