我们如何建立一个人们真正理解的 SaaS 网站

已发表: 2021-12-31

几个月前，我和我的团队终于接受了世界各地（包括我们自己的）营销部门一直推迟的项目：我们重建了我们的网站。

然后，我们看到潜在客户增长了 93%。

很快，我们意识到我们已经破解了 SaaS 网站的公式，它可以做到不可能：它实际上让人们了解我们公司的工作。

由于我们花了几年时间才到达这里，作为营销人员，我想为您省去麻烦并分享我们的过程。

1. 消除障碍：有限的利益相关者和可靠的 MVP

任何高风险项目的最大失败是厨房里的厨师太多。

为了避免这个陷阱，我为网站的每个方面指定了一个利益相关者——一个负责设计，一个负责内容，一个负责产品。 其他人有机会提供反馈，但最终决定完全由这三个所有者做出。 即使反馈来自担任高级职位的人，这也是正确的。

此外，为了与我在营销项目规划中经常看到的极端完美主义作斗争，我们借鉴了我们的产品经验，并推动逐步发布MVP（最小可行产品）和每个页面的阶段。 这使我们能够更快地工作，但也创造了一个不断改进的机会。

记住：
  • 逆向工作——从（现实的）发布日期开始并逆向工作，以便所有团队适应时间表，而不是给出过于谨慎的估计。
  • 指定单个利益相关者——确保每个领域都有一个利益相关者，在我们的例子中，这意味着设计、内容和产品。 广泛收集反馈，但将决定限制在这些人身上。
  • 选择一个项目所有者——整个项目应该有一个所有者。 此人将负责在发生冲突（并且将会发生冲突）时做出决定。
  • 不要对完美的产品抱有期望——为每个页面创建一个 MVP，看看它会如何推动，并依靠分阶段发布。
  • 深入了解细节并快速做出反应 –使用所有分析和 UX 工具快速了解对您发布的页面的响应并对其进行迭代。

2. 重要的指标：设定目标和 KPI

我们做的第一件事就是盘点我们想要解决的问题，并为他们的改进设定目标。 我们解决了很多问题：转化率低、信息过时、设计过时、对我们的多产品产品的解释有限、没有客户页面以及定价页面不明确。

我们确定在合理的时间内完成一项彻底的工作的唯一方法是确定要处理的关键页面。 对我们来说，这意味着专注于：

  • 主页
  • 选择产品页面
  • 定价页面
  • 案例研究页面
  • 创建客户页面

这也意味着放弃我们想要处理的几个页面，以确保项目按时启动。

为了跟踪成功，我们设定了以下目标和 KPI：

  • 提高潜在客户的转化率并提高潜在客户质量
  • 提高跳出率，增加每个会话的站点和页面时间
  • 提升品牌认知度
  • 创建更好的站点导航
  • 确保我们的各种产品获得更好的曝光率
  • 增加有机流量
  • 设置易于扩展的站点基础架构

每家公司都有不同的目标，需要跟踪不同的指标，但首先选择关键页面的过程将使您在重做整个网站之前快速清晰地了解哪些有效，哪些无效。

记住：
  • 满足跨公司需求 –转化率、跳出率等指标并非万能。 从您的人力资源团队、品牌经理、销售团队和 CEO 那里寻求对网站的定性反馈。
  • A/B 测试 –是的，这似乎很明显，您可能急于发布您的新网站，但您不想摆脱任何运行良好的东西。 因此，请务必通过 A/B 测试发布所有内容并仔细查看结果。
  • 设置主要 KPI –拥有一个主要指标将帮助您在发生冲突时做出决策，在我们的案例中，它是领先的转化率。
  • 分阶段发布——一次重建整个网站是有风险的。 从省力、高价值的页面开始，然后学习和调整您的计划。
  • 构建分析基础设施——提前构建衡量基础设施，以确保您可以跟踪对每个 KPI 的影响。

3. 获得灵感：每个人都有值得学习的地方

一旦我们确定了我们的问题领域，设定了改进目标，并确定了项目的范围，我们就开始考虑布局和设计。

想一想您访问和离开了多少 SaaS 站点，但对公司的业务一无所知。 “跟客服有关系吗？ 也许电子邮件营销？” 这是我们试图避免的。 因此，我们首先确定访问者需要什么才能真正了解 Yotpo。

我们创建了一个电子表格，从 150 多个其他网站收集灵感，记录我们喜欢和不喜欢每个网站的内容，最重要的是，记录我们是否了解公司的业务。 我们查看了像 CTA 按钮一样精细的元素，或者像总体布局、视觉效果或语气一样广泛的元素。

在大多数情况下，我们查看了我们不熟悉的公司的网站，因此我们对公司的了解测试将是真实的。

记住：
  • 不要错过您的第一印象——不要忘记在您第一次访问网站时做笔记。 第一印象至关重要，正如他们所说，您不会有第二次机会。
  • 列一个清单——你可以向每个人学习。 创建一个网站列表以获取灵感。 一些网站会有很棒的设计，一些很棒的缩微，还有一些很棒的导航。
  • 接受不熟悉的事物——主要查看您不认识的公司，看看他们的网站是否清楚地传达了他们所做的事情。

4. 什么是先，设计还是内容？

我们的产品具有超强的视觉效果，以至于访问者甚至无需阅读一个字就应该能够理解产品的 70%。 这不仅仅是关于找到正确的标语——而是关于展示而不是讲述。

了解折叠上方呈现的视觉效果对于吸引用户注意力至关重要，我们使用这个空间来展示我们产品的实际模型。 我们没有让内容主导设计，而是采取了相反的方法，以设计为主导，让内容与我们工作室的愿景保持一致。

我们出色的内容营销人员 Mel 使用设计优先的框架来完善网站的内容策略，并深入了解对潜在客户最重要的事情：Yotpo 如何帮助他们。 她进行研究是为了充分了解电子商务行业和典型的痛点。 然后，她以一种快速、易于阅读的格式构建了解决方案，以补充设计结构，同时还提示用户采取可操作的步骤以了解有关我们产品的更多信息。

结果是直截了当、价值至上的内容，忠于 Yotpo 的性格和帮助品牌取得成功的使命。

记住：
  • 让内容遵循设计——如果你的内容团队足够强大，可以直截了当，从设计开始，让他们根据字数限制写作。 这是一个挑战，但它也是简化消息传递的练习。
  • 了解描述您的产品的最佳方式——如果您的产品在视觉上很吸引人，请使用大量模型和展示设计来突出它。
  • 保持有趣——这似乎很明显，但人们常常忘记这是每一页上最重要的不动产。 对你在那里展示的内容进行额外的思考。

5. 幕后：定价页面

页面目标：

让我们的定价易于理解对我们来说很重要。 我们选择将我们的高级计划归为一个保护伞，而我们的免费计划归为另一个保护伞。 这样，对我们的付费订阅感兴趣的访问者可以轻松地与销售人员联系以了解更多信息，而对免费计划感兴趣的访问者可以立即开始。 我们还希望包含详细的常见问题解答，以解决访问者可能遇到的任何问题。

我们才华横溢的设计工作室——尤其是我们的艺术总监 Shiri 和高级产品设计师 Eliko——实现了这些目标并与他们一起努力。 在本节和接下来的节中，他们将解释新网站上每个关键页面背后的设计策略。

设计策略：

由于目标是让人们了解并点击计划，我们将它们设为最高层级。 背景被有意创造得更柔和更轻，以免分散计划框的注意力。 尽管如此，我们还是以背景为契机，用渐变阴影和微妙的几何形状来代表 Yotpo 的品牌。 这种为适应定价页面的目标而开发的总体结构被证明是网站上其他页面的真正有效的基础。

6. 幕后：产品页面

页面目标：

重新设计中包含的每个产品页面，即评论和评级和视觉营销，都需要以人们可以在几秒钟内理解的方式解释超级复杂产品的所有功能。 不仅如此，我们还想展示每个产品的不同用例。 例如，在 Reviews & Ratings 页面上，这意味着解释从内容生成如何工作到与 Google 和 Facebook 集成的所有方面。 虽然页面又长又全面，但它的文字很轻，视觉效果很重。

设计策略：

我们很快确定，我们产品的实际模型将是让访问者了解他们如何工作的最简单方法。 虽然我们最初想使用视频，但我们坚持使用 MVP，以便按时发布页面的第一个版本。

根据我们从设计定价页面中学到的知识，我们知道要使背景更亮、更安静，同时将重点放在模型上，尤其是折叠上方的模型。 模型也以简化的设计语言完成，以使其易于理解。

模型优先设计解决了许多其他实际问题。 首先，模型本质上是移动友好的，因为它们的大小和它们以极简格式获取大量信息的能力。 一般来说，在设计时考虑到移动设备会迫使你考虑什么是必要的，什么不是，对于模型来说当然是这样。 不仅如此，随着我们产品的增长，这种格式还可以轻松扩展到未来的产品页面。

7. 幕后：客户页面

页面目标：

客户页面是我们网站的新增内容。 我们一直在寻找一种有效的方式来展示使用 Yotpo 的惊人品牌，并为我们的案例研究更新和创建一个新家。 此页面上最重要的元素是品牌徽标和我们为其发布创建的新视频案例研究。

设计策略：

我们想讲述这些品牌如何与 Yotpo 一起成长的故事，以及用户生成的内容作为一个整体的重要性。 讲述这些故事的主要部分是客户标识和视频案例研究，每个都占据了页面上的重要空间。 此外，我们构建了嵌入此页面的新案例研究模板，以尽可能灵活，以便它可以讲述每个品牌的独特故事，而不仅仅是包含千篇一律的问题和答案。

8. 幕后制作：首页

页面目标：

最重要的是，主页的目标是让访问者在向下滚动之前快速轻松地了解 Yotpo 的功能。 我们还想介绍我们的多产品产品并展示我们最大的资产——我们的客户。 最后，主页需要作为一个门户页面，让访问者好奇地了解我们的产品。

为了确保我们实现这些目标，我们让同事坐在其他 SaaS 主页前，当他们浏览页面时，我们询问他们接下来想看到什么元素。 根据他们的回答，我们了解到大多数人需要从主页获得的流程是：

公司做什么 -> 提供产品 -> 谁使用产品（客户） -> 公司提供的价值 -> 如何开始

设计策略：

我们对主页的最大挑战是立即吸引访问者的注意力。 我们的研究表明，当今许多 SaaS 网站都使用漂亮的插图来吸引访问者——但我们想要一些更实质性的东西来保持访问者的参与度。

我们使用上面概述的流程以及我们在定价和产品页面上磨练的设计语言，通过极简的模型来吸引访问者的注意力，这些模型可以立即了解 Yotpo 的作用。 然后是折叠上方的客户徽标条，然后是我们产品的快速、切中要害的概述，引导访问者访问产品页面。 随着大部分模型的出现，我们能够使用插图来支持下面的内容。

总体结果是一个页面提供了一种产品的“powershot”或鸟瞰图，鼓励访问者继续访问产品页面以了解更多信息。

我们的技术栈

我们使用了所有可以使用的工具来创建新站点并衡量结果。 这是我们的技术堆栈的一瞥：

  • 原型制作和设计 – Balsamiq、InVision、Sketch、Photoshop、Illustrator 和 After Effects
  • 分析和转换 – 漂移、VWO、Mixpanel、Amplitude、Hotjar、FullStory
  • 项目管理 – Smartsheet、Trello

在开发方面，我们的开发向导 David 与我们的设计团队合作，使网站栩栩如生。 他在整个网站中使用了可重复使用的组件，并通过在几乎所有图片中包含视网膜图像并尽可能选择 SVG（可缩放矢量图形）而不是 PNG 文件来强调清晰的视觉效果。 他还主要在 SCSS 工作，以便在开发网站时获得更多选择。

结论

重建网站是一项艰巨的任务，但是当您有一个可靠的流程时，您可以快速有效地完成它。 我们在构建该过程中学到的最重要的事情是：

  1. 任命一个项目所有者并将利益相关者保持在最低限度。
  2. 为项目定义一个现实的范围。
  3. 评估哪些页面应该被删除而不是重新设计。
  4. 设定明确的目标和 KPI。
  5. 选择单个主要 KPI。
  6. 从其他网站收集灵感。
  7. 了解最简单、最有效的方式来解释您的产品。
  8. 尽可能以设计为先导。 内容可以跟随，并且会因此变得更强大。
  9. 逐步释放。
  10. A/B 测试一切。

如果您想了解更多有关我们网站重新设计的信息，或者如果您对我在这里写的内容有任何疑问，请随时与这里联系。 我很乐意聊天。 :)