如何重新设计Hubspot的网站加倍转换率

在入站时，我们推出了Hubspot.com的一个重大迭代。从那时起，我们一直在监控性能，运行实验和收集大量数据。

我们现在可以自信地说结果在于，我们有一些大学学习与您分享。让我们来吧。

与Hubspot的大多数主要项目一样，这一个人始于引人注目的数据，这些数据指出了我们网站的几大机会。

虽然我们始终迭代Hubspot.com，但我们倾向于每年推动一个或两个主要迭代，这是由这些增量学习的高潮。在这种情况下，我们专注于：

用户体验

hubspot.com遭遇了我喜欢的电话设计债务。这就是在运行一堆实验时会发生的事情，并且该网站在定量上表现良好，但使用它的经验并不是那么大。

设计模式可能不一致，导航流可能感觉不连贯，站点的关键部分可能最终看起来像是事后才想到的(这是因为它们确实是事后想到的)。当这种情况发生时，您必须重构您的站点，并在整个设计中扩展您的经验，创建一个更新的和一致的体验。

换算

通过从本网站的个人实验中应用学习，我们知道我们能够以有意义的方式增加转换，并为CRO努力建立强大的基础。实验结果不应该孤立生活;他们需要在团队和设计中分发，我们已经准备好以一个重要的方式与这个项目很重要。但也许更重要的是，我们的产品正在发生变化。

多产品，国际化和可访问性

在2016年之前，我们知道我们将推出Hubspot增长堆栈，其中包括我们所有产品的免费版本。这意味着我们的转换流程将从根本上变化 - 不仅适用于美国客户，而且为全球各地的每个集中用户用户提供。重新评估我们如何介绍我们的产品，并将用户带入其中，这是一个令人难以置信的机会。

最终，我们将完全重新思考我们对Hubspot.com的方法。初始审核表明，这需要在Hubspot.com上重构或重新设计大约70个关键页面。并且，它都需要在3个月内发生，及时在入境时发布。

但我们并没有根据一些数据和几个亨舍语开始如此雄心勃勃和资源密集型项目;我们仍然需要用Live MVP证明概念（最低可行的产品），并确保是正确的事情。

概念验证

几天后，马修巴比我默默地推出了Hubspot销售的MVP。我们希望看到我们采用我们拥有的所有数据，假设和狂野的想法并将它们放入单一设计的情况下会发生什么。

我正在谈论插图，大滴阴影与模拟景深，颜色打破了我们的风格指南，新的CSS动画，用完全不同的语音复制，非典型的CTA - 你命名它。我们把它全部放在那里，没有禁止禁止。

看看MVP的设计。

它工作。转换率超过控制率超过20％用户测试支持我们的新方法。这是一个很好的指标，我们将从重新思考的Hubspot.com中受益，因此我们决定继续进行该项目。

可预测的是，在项目推出后进一步测试中，我们也发现了我们做了很多问题（我对那些丢阴影有点太强烈）。事实证明，这就是为什么两个无赖不能决定整个公司的设计方向raybet电子竞技。但我们在这里并不追求完美——我们会在之后引入合适的团队后追求完美。这一次，我们只是想证明一个想法，我们做到了。

开球

我们形成了一个小的“SWAT队”，他们将在项目中的专业领域进行自主权。这包括CRO，SEO，复制，数据分析，设计，开发，产品研究和项目管理。

然后选择三名行政利益攸关方进行最终呼吁批准和重大决定。这可能听起来像很多人，但对于一家拥有超过1500名员工的公共公司，它非常精益。raybet电子竞技专家提示:在大公司中，保持团队的小型和集中可以帮助避免范围蔓延。

研究

在设计任何东西之前，我们更深入研究，扩大了我们已经拥有的见解。这始于对我们的转换流程的全面审计。

每个产品都有多个独特的流程，其中一些流程比其他流程复杂得多(从3个步骤到7个步骤不等)。转换流程较少、转换流程中步骤较少的产品，其转换速度将比更复杂的产品高出2至3倍。

我们在这里学到的很简单:我们需要巩固我们的转换流程，并大幅减少从登陆HubSpot.com到进入产品内部的步骤。

在我们简化之前和之后，请查看我们的转换流。

我们也开始关注我们在HubSpot的用户旅程。这让我们知道这些转换路径是如何在实际用户中发挥作用的，并帮助我们了解这一过程中令人困惑的领域。

人们有时候甚至不确定他们正在注册哪些产品。特别是，许多人正在努力了解Hubspot CRM和Hubspot销售如何共同努力。用户访谈与非客户，支付客户和Hubspot员工有助于确定可以改进的内容。

我没有继续这个过程，因为你的网站太昏迷了。它不会流动;这个不成立。我不能做出任何决定如何或者如果这会受益我的公司。raybet电子竞技

我们非常喜欢直接、诚实甚至非典型的反馈。所以我们牢记这一点，并对符合我们想要了解的资料的异常值和客户进行了后续采访。结合一些关于用户喜欢如何了解产品(以及什么会让他们转化)的研究，我们得到了一些非常有趣的数据。

评估软件时，您更愿意如何了解它？雷竞技苹果下载官方版

这一切都导致创建了一个新的简化转换流，在主页上和全局导航中有一个“开始”CTA。

一旦点击，它将带访问一个新的“开始”流动，他们可以选择请求Hubspot营销的演示，或为我们的三种免费产品注册。

制定了这个新的转换流程后，我们将注意力集中在以下方面39核心Hubspot.com页面。这是一个重要的发展;虽然我们最初正在看大约70页，但我们很快就能确定我们在攻击时间范围内合理地解决的最关键的页面。

内容和复制

这个项目的基石是我们使用了副本第一设计，这意味着副本会通知设计（不是另外的方式）。为了在这样一个短时间内实现这一目标，我们的文案是在串联中完成的，以确保设计支持和放大副本中规定的消息传递。

我们知道我们需要使用我们用户轻松理解的语言解释我们产品的价值的副本。我们发现我们发现访问者有时很难了解Hubspot实际销售的内容，我们还希望通过我们的副本来清除Hubspot销售软件 - 营销和销售以及免费的CRM。雷竞技苹果下载官方版

最后但并非最不重要的是，我们想展示我们的每种产品是如何单独强大的，并且在一起使用时更好，这支持我们的新增长堆栈定位。

在以前的复制与复制测试中，我们已经看到了20％的邻域的转换率增加。因此，这也是不可避免的，这也会在帮助我们击中我们的CRO目标方面发挥作用。因此，我们的新副本的定位严重依赖于我们在研究期间收集的数据，以及我们产品营销团队的指导。

我们认为高质量的研究是成功复制的主要决定因素。最好的撰稿人也是伟大的研究人员。

评估设计

在为项目准备了适当的背景后，我们回到了MVP，并开始考虑它将如何影响我们的新设计方向。从结构上看，我们知道这个设计非常坚固。但我们也需要确保一切看起来都是正确的。

事实是，美学可能是一个难以实现的事情，以及衡量更困难的事情。通常，我们会陷入主观辩论，而不是我们个人认为最好的。但是，如果我们重新定位我们对美学的思考，我们可以非常接近客观地测量它们。

主要区别是：最好的美学解释什么用户考虑比利益相关者认为美丽的更美丽。这是我们可以衡量的东西。

所以我们使用我们的探索性设计(看看它是如何运行的)，我们当前的设计(获得一些基准)，以及我们所欣赏的设计(看看我们真正渴望的是什么)启动了定性测试。我们知道我们走在正确的道路上，但我们热爱的一些东西必须离开:

插图

尽管我们内部喜欢在设计中使用插图的想法，但它们在用户中测试得并不好。我们尝试了一系列不同的风格、配色方案和角色。最终，用户无法就说明方向达成一致。

有些人爱他们，其他人认为他们是幼稚和不专业的。因此，我们从设计中删除了插图，计划在未来的迭代中运行它们周围的一些测试。

强烈的阴影和视觉处理

虽然实现最新的趋势很诱人，但事实是许多用户并不理解或欣赏这些趋势。在董事会,清洁和保守的设计表现优于他们的“设计前进”对应物更好。

确实，进行这样的测试既让人大开眼界又让人感到惭愧。我怎么强调都不为过让您的观众比自己更多地影响您的设计方向。他们提供了一个完全不同的，在许多方面，无价的视角。

线框图和原型

我们很快就开始构建我们的新设计和风格。因为我们需要创建一个真正可伸缩的设计，我们在模板层面上工作，产生每个设计的无数次迭代。

这意味着我们将来迭代时，风格可以全局更新。我首先通过创建和测试不同的线框，而才华横溢的大卫马布尔和Amelia毛巾在视觉方向上工作。您可以在此处查看此过程的示例：

Wireframe和Mockups.

全球标题，页脚和CSS

这导致了100个线框迭代那60视觉设计， 和4个完整的InVision原型。部分原因是我们不断地测试和精炼我们的设计，部分原因是我们正在致力于在并行创建复制和设计的积极性时间表上。

单击Heatmap和Deuteranopia彩色失明仿真

然后，我们通过最终转换，审美偏好和触摸任何代码之前进行设计。正如我们这样做的那样，我们同时生产了产品图像和视频等资产，以完成填充设计的内容。

视频

通过我们的研究，我们了解到65％的用户首选通过观看视频来评估软件雷竞技苹果下载官方版。对于每个主要产品概述页面，我们创建了自定义量身定制的视频。此外，我们利用自动播放MP4来展示主页上的每个产品。

Meatmaps显示视频按钮点击MVP和最终设计

我们可以在这里看到甚至在原来的MVP中，视频CTA是一个高度参与的点。随着我们生产更多的迭代和最终设计，这种趋势仍在继续。

在启动网站并跟踪视频参与和转换之间的关系后，我们发现存在视频将我们的转换率提高了300%。

发展

这是一个主要的开发事业，即使是HUBSPOT的标准。超过130页将在.com，.es，.de，.fr，.jp和.br在入站。这包括我们定价，联系页面，演示和注册流程以及国际产品页面的更新。

但更重要的是，其中130页，其中39名是Hubspot.com上的全新核心页面。这包括一个新的主页，“开始”转换流，概述每个产品的页面（总共四个），两个集成页面和每个主要功能的功能页面（总共31个）。

加上新的排版，全球风格指南元素，更快的加载时间，智能销售线，更新的实时聊天体验，全新的导航和页脚，以及一些独特的移动体验。哦，这一切都必须在克里斯托弗O'Donnell的入境主题时出现。

该团队加班费，以确保我们不仅具有平稳的发布，而且它将超出我们的观众来期望的标准。我们计划发射的130页中，他们中的每一个11月9日在主题演讲期间去了。CSS资产是减少了67%。新网站生机勃勃，生机勃勃。

结果

发布后，我们开始跟踪90种不同的转换路径。使用Hubspot Analytics的Roubst实现，Google Analytics 360和幅度，我们建立了一个仪表板，每天每天都会在网站上拉到每个密钥度量，并让我们知道我们是如何做的。允许数据运行后，我们发现：

• 我们转换率加倍Hubspot.com与我们的新品“开始”流动
• 有一个演示要求增加了35％通过总量，这是我们产品的高质量MQL
• 这是我们新的事实支持的支持演示登陆页面设计是转换好了57%比以前的设计
• 销售聊天量增加了38％和呼入量翻了一番，这意味着更多的用户会通过一些接近率非常高的渠道
• 这最终导致了一个产品注册增加27％通过总量，这将转化为更多收入和保留用户的业务

我们将该项目放在我们不断增长的确认列表中，强调用户体验和转换率优化将推动对设计的最大性能影响。

超越像素的多学科团队，不仅要了解什么他们正在设计，但是为什么他们正在设计它，准备创造最周到和最有效的解决方案。