DE{CODE}：站点监控：产品、用户体验设计与研究的交叉点

当您发现您的网站或您客户的网站已关闭时……您的客户难道不讨厌吗？ 不要再被蒙蔽了双眼！ 与 WP Engine 高级产品经理 Bryan Smith、UX 副研究员 Kate Meyer 和高级产品设计师 Kameron Fehrmann 一起了解 WP Engine 的站点监控解决方案，这使这个问题成为过去。 在本次会议中，您将详细了解站点监控的工作原理以及用户体验设计、用户体验研究和开发的交叉点如何结合在一起以确保产品市场契合。

会议幻灯片

全文抄本

布莱恩·史密斯：大家好。 我的名字是布莱恩·史密斯。 我是 WP Engine 的产品经理。 非常感谢今天加入我们。 我们在这里与您讨论站点监控、产品、用户体验设计和研究的交集。 今天加入我的是我们的用户体验研究人员之一 Kate Meyer 和我们的产品设计师之一 Kameron Fehrmann。 在下一张幻灯片中，我将与您讨论什么是站点监控。 所以我们刚刚发布了这个新产品。 这称为“现场监控”。 它可作为 WP Engine 客户的附加组件使用。 有了它，您将能够监控与您的帐户关联的任何站点环境。 如果我们在网站或平台上看到任何类型的中断，我们会告诉您。

接下来，我将快速介绍一下我们的议程。 因此，我将回顾一下该产品，并为您提供概述和技术深入研究。 但在我们这样做之前，我要把它传递给 Kate Meyer，告诉我们一些关于我们是如何得到这个产品的。 她将介绍我们使用过的一些用户研究技术。 然后她会把它交给 Kameron，Kameron 将负责我们的产品设计和迭代。 然后我将通过产品概述和深入的技术研究来结束这一点。 交给你了，凯特。

凯特迈耶：好的。 谢谢，布莱恩，我是凯特。 我是 WP Engine 的用户体验研究员，目前专注于改进我们的网站建设产品。 所以 Bryan 向我们展示了我们现在拥有的这个伟大的新产品。 但是我们怎么会在这里呢？ 我想回到我们时间表的开头，并展示我们如何使用设计思维让我们在短短几个月内从了解用户的基本信息到产品发布。 我将专注于我们流程的研究方面，并与您分享如何实施这些实践，无论您的角色是什么，即使您的团队中没有用户体验研究员。

正如我提到的，我们在这个项目中使用了这三个阶段的设计思维。 设计思维是一个行业标准框架。 这本质上是一种以用户为中心的解决问题的方法。 我将在这里将我们的工作分解为这三个阶段。 去年夏天，我们不仅想了解如何修复 WP Engine 用户门户的问题，还想了解如何将其提升到一个新的水平。

因此，为了解决这个问题，我们使用了生成性研究。 这是以采访我们的各种用户的形式进行的。 我们向他们询问了一组预先写好的问题，对所有用户都是相同的问题，只是为了了解他们的工作、目标、挑战等。 如果面试过程让您觉得不知所措，您也可以使用调查工具来达到同样的目的。 实际上，我们将 SurveyMonkey 与访谈一起用作获取反馈的另一种方式。

在这个阶段的研究中，我们发现非常有趣的是，尽管用户的角色不同，但他们实际上有很多共同的目标和痛点。 这是一个非常值得一看的模式。 实际上，我们确实希望看到不同类型用户之间的这些相似之处，因为这有助于我们确定工作范围。 在进行这些访谈和调查时，我们开始注意到托管网站环境中的一些共同主题。

我们一直听到的两个目标是只需要一个工具来监控和维护网站，并在客户和网站访问者发现任何错误之前发现问题。 但是，一个常见的痛点是我们的用户门户目前无法让用户实现这些目标。 实际上，这位机构老板总结得很好，他说：“如果我能在客户看到之前解决问题，那就太棒了。 我不想接到那些客户的电话，‘哦，嘿，你猜怎么着？ 我去了我的网站。 它不在那里。 今天你在做什么？'”

一旦您在收到用户的来信时看到这些常见主题一次又一次地出现，那么您就知道是时候构思了。 我们知道我们需要改进用户门户以帮助用户主动管理他们的站点。 而且我们还知道，我们的工程团队可以利用合作伙伴的技术来解决用户痛点的一个方面，那就是通过正常运行时间监控。

所以在这一点上，我们真的很容易直接投入并立即开始构建一些东西。 但是，如果您想第一次构建正确的东西，那么在此阶段仍然获得用户反馈和输入很重要。 在这个阶段让整个团队参与也非常重要。

您确实想提出一些很棒的想法，但您还需要确保您的想法是可行的，并且它们仍然符合您的用户真正需要的东西。 因此，在此阶段，我们的设计师与工程团队合作提出了一个想法，并确保其在现场监控方面的可行性。 然后与产品经理和设计师一起，我计划进行一些概念测试，以便我们可以将我们的想法展示给用户。

概念测试是一种研究，可以帮助您了解您的想法是否符合用户的期望和需求。 所以我们向他们展示我们的想法并向他们提出问题。 在这种特殊情况下，我们使用了中间填充 LE 模型，就像您在此处左侧看到的那样，这是设计师在工程团队的帮助下创建的。 但这类研究的妙处在于，你可以展示一些简单的东西，就像用笔在纸上做的那样。 它甚至不必看起来不错。

这种技术真的很棒，因为它可以让您的用户专注于想法而不是视觉呈现。 再一次，在这个阶段，我们真的很想知道你的想法是否朝着正确的方向发展。 另一方面，您不必向数十或数百人展示它。 您可以使用最少五名参与者进行此类研究，因为到那时，您应该开始在他们对您的想法的反应中看到一些共同的主题。

因此，在我们的概念测试期间，我们了解到用户的期望与我们对该产品的计划是一致的。 因此，这使我们处于开始构建它的有利位置。 不过，我们仍然想收集反馈，所以我们决定进行封闭测试。 这看起来像是让一些用户选择加入，将功能添加到他们的帐户，然后在他们使用新功能的整个过程中询问他们的反馈。 因此，让这一小群用户访问该产品是测试产品可用性、解决错误以及了解如何在产品发布给所有人之前更好地满足他们期望的一种非常好的方式的用户。

所以 Kameron 将从这里继续讲故事。 但在我们结束研究之前，我确实想总结一下我希望你从我的故事中学到的东西。 同样，这个框架可以帮助您从了解用户需求到构建新产品。 您团队中的任何人都可以通过各种方法在项目的任何和所有阶段向您的用户学习。 当您将用户置于构建的中心时，这就是您将如何确保您的产品对用户而言尽可能轻松，并为您自己带来竞争优势。 谢谢。 卡梅隆。

KAMERON FEHRMANN ：非常感谢，Kate。 嘿，你们大家。 我是卡梅伦。 我是 WP Engine 的高级产品设计师。 我还使用构建器工具和我们的电子商务产品，今天我非常高兴能与大家讨论站点监控。 所以这就是我们在时间轴上所处的位置。 我们已经完成，完成了我们的生成研究，完成了一些概念测试，现在我们已经发布了测试版。 我们确实进行了一项调查，表明我们正在倾听人们的意见，这实际上是我进入该项目的目的。

我很快就赶上了以前的研究。 凯特和布莱恩在这方面发挥了重要作用。 老实说，如果我们还没有在设计和研究、产品和工程之间建立一些合作节奏，事情就不会那么顺利。 所以他们是让我赶上中间速度的好伙伴。 我知道你们中的一些人可能了解在机构生活中工作的情况。 我们知道这个基础对我们的测试版来说有点不错，但我们还想用它做更多的事情。

所以我们在发布测试版后进行了快速跟进，以进一步改进设计。 首先，我们从我们的 WP Engine 状态开始。 我们从用户那里听说，他们不太确定他们遇到的中断是由于他们内部所做的事情造成的，还是坦率地说，这是他们无法控制的 WP Engine 问题。 所以我们为人们添加了这个状态，这样他们就可以真正看到，嘿，WP Engine 正在发生一些事情。 是我们，不是你，反之亦然。

我们还添加了用于监控的添加、删除或暂停功能。 这基本上是人们添加或删除监视器然后在需要时暂停监视的一种方式，它只是人们更多地定制他们的体验的一种方式。 最后，正如您在这里看到的，我们发现了相当严重的中断。 我们希望确保人们能够清楚地看到他们网站上发生的事情，并与人们进行明确的交流。 这也是我们听到的，他们希望能够看到他们的中断并尽快解决问题。

这是我们开始测试版和发布之前结束的前后情况。 如您所见，存在一些相当大的差异。 我们特别关注专栏。 我们从人们那里听说，他们不太了解这些列是什么，它们的用途是什么，或者它们中的任何东西是什么意思。

因此，我们使中断状态更加清晰，说明是否存在中断以及这意味着什么。 然后我们还添加了一些更具操作性的链接。 我们添加了中断的定义，然后添加了指向有关站点监控的支持文章的链接，以便人们可以根据需要查找更多信息。

我们做的另一件事是将其与我们的内部设计系统更紧密地联系起来。 作为设计师和开发人员，能够从一种组件库中提取出来真是太棒了，这样我们就可以让我们的工作流程更快。 如果您还没有正在使用的设计系统，我强烈推荐一个。 它们只会让您的工作流程变得更加轻松，并且让一切进行得更快。 因此，由于这个设计系统，我们能够非常快速地从您在左侧看到的内容转到右侧。

这就是我们在测试版中工作时的工作流程，迭代的样子。 所以我们开始了。 我们放开了。 通过我们的调查，我从用户那里得到了反馈，也从从事该产品的开发人员那里得到了反馈。 我做了一些设计更改。 我会和三合会谈谈。 我们之间可能会有一些反馈，然后我会把它交给开发人员。 他们可能会有一些反馈。 我们可能会进行一些讨论，然后我们会发布测试版，然后循环会重新开始。

所以只是在这里签到，我们已经完成，发布到测试版。 我们在我们的测试版调查中听取了人们的意见。 现在，我们已准备好开始使用警报并让这种体验继续下去。 所以提醒，我们知道人们想要提醒，需要提醒。 这是我们从用户那里听到的非常重要的事情，这将使监控对他们来说更有价值。

我们还知道，用户希望在问题对他们的客户造成问题之前得到通知，就像您在我们的报价中听到的那样。 他们不想接到客户的电话，说他们的网站有问题或中断，而他们自己实际上并不知道。 这不好。

关于此的另一件事是，我们实际上为这项工作增加了两个开发团队，因为我们希望能够满足我们的发布时间表。 你看到的那个周期变得非常重要，因为有更多的团队。 更多的人手使工作更轻松，但也会使事情变得更复杂。 但幸运的是，我们能够为他们的节奏处理好这一点。 我们必须通过警报弄清楚的是我们想要使用的渠道。

我们从用户那里听到的主要是电子邮件是他们首选的渠道，而不是 Slack 或 SMS，因此我们决定首先坚持使用电子邮件。 然后我们不得不从那里开始考虑所有不同的电子邮件场景。 我们希望确保我们的消息传递对人们而言非常清晰且可操作，以便他们能够在收到警报时尽快理解并采取行动。

我们必须考虑的另一件事是，当有人注册警报时，我们要确保我们确认他们已订阅。 这只是用户体验的最佳实践。 然后在另一端，确保取消订阅功能对人们来说实际上是无缝的，而且考虑到所有因素，这是一种非常简单和良好的体验。 所以，是的，我们进行了更多的用户测试，并为此做了更多的研究。 就像我说的那样，我们真的很想确保消息传递是可以理解和可操作的。

因此，这又是测试前后的并排对比。 这里没有太多疯狂的差异。 首先，我们从用户那里听说他们想知道具体的错误是什么，他们想要更多的信息，所以这就是我们试图给他们的。 我们试图向他们提供错误代码和我们可以提供的任何更多信息，并稍微澄清一下内容。 在此之后，老实说，这只是为了发布而努力的问题。 老实说，我只想强调我谈到的一些关键要点以及我们在整个项目中拥有的这些关键协作点。

首先，三合会运营模式对我们来说非常重要。 再一次，设计和研究、产品和工程团队齐心协力推出了这款产品。 我们会经常在设计、研究、工程方面进行同步和接触。 我们会提出问题，合作。

我们甚至建立了自己的 Slack 频道。 我确实认识到并不是每个人都能或能够做到这一点，但在设计和产品之间建立协作关系非常重要。 它们对于确保您在创建产品时在企业或机构级别具有一致性和责任感非常关键。

我要提到的另一件事是设计和研究有着如此密切的合作关系。 我知道不是每个人都与设计师或研究人员一起工作，但如果你愿意，你仍然可以成为用户体验的倡导者。 有很多 UX 小组提供了很好的资源和最佳实践，所以你仍然可以成为可用性倡导者，即使这不是你的主要角色或者你不经常做的事情。

我要提到的另一件事实际上是与发展的伙伴关系。 我与该项目的所有开发团队密切合作。 我经常发现自己来找他们，问我是否为创造设计或其他东西而疯狂，他们总是非常乐于与我合作，并提供各种见解，提出问题。

太好了。 我们有一种非常好的合作关系。 所以我会说，如果您正在与设计师合作，请不要犹豫，亲自动手并与他们合作。 我们喜欢与愿意坐在那里了解我们正在努力解决的问题并共同努力实现共同目标的开发人员合作。

另一件事是，我实际上确实让自己参与了这些团队拥有的许多敏捷仪式和节奏。 因此，能够坐下来，积压改进或冲刺计划并提出问题，让他们在开发工作的背景下向我提问是非常有价值的。 最后但同样重要的是，异步协作。 这真的很关键。 我们是一家全球性公司。 我们的团队遍布全球，我们都很忙。

因此，能够跨团队创建专门的 Slack 渠道供我们所有人协作非常关键。 凯特和我可以发布有关研究和设计的信息。 我们可以获得反馈，提出问题，而无需等待审查或会议。 我想我只是想指出，情况不一定要完美——完美，对不起，我们才能合作。 您可以异步执行。 您无需等待会议。 为了把事情做好，不必每件事都完全正确。 那是我的时间。 非常感谢大家。 布莱恩，我会让你把它拿走并谈谈我们的产品概述。

布莱恩·史密斯： 非常感谢，卡梅伦。 好的。 正如承诺的那样，我将跳入产品概述，然后我们将在结束之前进行技术深入研究。 所以站点监控和门户。 对于那些添加附加组件的人，他们将有权访问新的门户页面。 这称为“现场监控”。 从这个页面，您可以添加监视器、暂停和删除。 Kameron 稍微提到了这一点，但这是您从中执行此操作的页面。

此外，在此页面上，您还可以查看所选日期范围内的中断、正常运行时间和平均响应时间。 当我们检测到中断时，您还可以链接到特定于站点的错误日志，因此所有这些都可以从此页面进行。 还将有指向“警报首选项”页面的链接，我们稍后将在此处进行介绍。

好的。 所以我想快速进入视频，然后我们将跳回到幻灯片，但这将是该页面在门户中的外观的实际演示演练。 只有一件事需要指出，它是在您从 Kameron 看到的一些图像之前记录的。 所以我们正在更新这个。 不要把它当成它看起来的样子，但它是您将在门户网站中看到的一个很好的近似值。

菜单。 您会看到一个站点监控链接。 我们将在此处拉出此页面，您会看到我有一个我正在监视的所有站点环境的列表。 我可以看到那些响应时间以及当前受监控的所有响应时间的列表。 我单击了顶部的 WP Engine 状态链接，然后将我带到了这个 WP Engine 状态页面。 Kameron 早些时候也提到了这一点，但那是可用的。

当我单击“添加监视器”按钮时，只需单击一下即可轻松完成。 我想说这是该产品和集成的重要组成部分，您可以轻松地暂停、删除或配置监视器。 在这里，我正在暂停监视器。 您会看到那里弹出一个小的“恢复”按钮。 是的。 如果我点击 Resume，它就会取消暂停。

请记住，暂停实际上只是阻止 ping 监视器实际 ping 站点。 因此，无论何时暂停，它实际上都不会发送该 ping。 在这里，我们要删除一个监视器。 您会看到一个确认屏幕。 因为当您确实删除其中一个监视器时，它实际上会删除与之关联的所有相关中断历史记录。 所以请记住这一点。

这就是门户中的页面。 好的。 现在要跳回幻灯片，和大家谈谈电子邮件提醒，所以有几个不同的模板。 Kameron 早些时候提到过这一点，但我将在这里进行更深入的探讨。 因此，一旦您选择了电子邮件提醒，您将收到一个看起来像这样的电子邮件模板，表明您现在已经订阅了您网站的监控警报。 它将为您提供指向我们的支持中心文章的链接，该文章将为您提供有关该产品如何工作的更多信息。 在底部，有一个指向我刚刚向您展示的站点监控页面的链接。

好的。 因此，当我们检测到您的站点出现中断时，您会收到一封如下所示的电子邮件。 当我们检测到中断时，它将具有站点名称。 它还将显示 WP Engine 状态。 现在，此状态很重要，因为它会向您显示托管平台平台的当前状态。 因此，如果这看起来不错，但您仍然收到这封电子邮件，则表明实际上存在特定于站点的问题。

它并不特定于托管基础设施，但实际上在您的站点或您的域中有一些东西。 在此处的电子邮件内容中，它会向您显示我们看到的响应代码。 然后在底部，将有一个指向该站点监控页面的链接。 还有一个指向访问日志的链接，因为这将是您尝试诊断正在发生的事情以及为什么您会看到此中断电子邮件的下一个最佳步骤。

好的。 然后当问题解决时，您将看到另一封电子邮件，显示您的网站已备份。 中断不再发生。 我们不再检测它。 这还将告诉您哪个站点已备份。 它会告诉您该站点关闭了多长时间，并再次在底部显示链接。 底部的相同链接。

所以我提到这是一个您可以从站点监控页面和门户访问的页面。 这是您实际设置警报首选项的地方。 因此，您可以从这里启用或禁用警报通道。 您可以输入电子邮件联系人。 电子邮件联系人来自您的门户用户列表，因此您会在左侧底部看到它。 它只是一个复选框。

我们已经有了姓名和电子邮件地址。 你不必输入那个。 同样，它是从您的门户联系人中提取的。 但请在此提及，这将是一个您可以从中启用 Slack 集成的页面。 我们还没有，但它在我们的路线图上。 这是我们即将开始的工作。 所以目前，只有电子邮件提醒，但 Slack 在路线图上。

好的。 我提到我们将在这里深入了解一些技术细节，让您了解这一切在幕后是如何工作的。 因此，这一切都可以通过我们所谓的“站点监控代理”实现，这是我们的用户门户和用户在那里所做的事情以及我们的合作伙伴 New Relic 之间的中间层，我们正在使用其监控和警报 API。 所以 Site Monitoring Agent 本质上集中了 New Relic 的资源。

这是创建、更新和删除监视器以及警报的层。 它也是我们可以协调和捕获任何类型错误的地方，确保没有任何内容被意外删除。 这就是中间层，所以让我们稍微了解一下用户流中发生的一些事情。 因此，让我们来看看典型的用户流程。 因此，用户将注册。 发生的事情是对门户进行授权检查，以查看他们是否有权访问站点监控。

在他们这样做的情况下，它会检查 WP Engine 授权服务以获得该 OK。 一旦通过该检查，用户就可以从我之前在门户中向您展示的站点监控页面创建监控器。 因此，他们通过单击“添加监视器”按钮手动配置该监视器。 在幕后，它向 New Relic Synthetics API 发送请求以实际配置该监视器。

现在，当您还在门户中的该页面上时，您可以查看数据。 您可以查看历史数据。 从我们对您设置的站点执行 ping 操作所见，您还可以看到平均响应时间，链接到访问日志。 所以在这里，客户可以在该页面上查看该数据。 幕后发生的事情是我们实际上正在使用不同的 New Relic API。 这是他们的 NerdGraph API。 因此站点监控代理发送请求以检索该数据并显示它。 所有这一切都再次通过 New Relic 的 NerdGraph API 发生。

其他几个常见的用例是编辑监视器场景。 所以这可能会暂停现有的监视器，在这种情况下，代理将向 New Relic Synthetics API 发送补丁请求。 您还可以取消配置监视器。 这将从我之前向您展示的门户页面中删除监视器。 这是向该 Synthetics API 发送删除请求。 客户也可以更改配置。 也许您想更改我们要向其发送 ping 检查的域的 URL。

在这种情况下，代理会发送补丁请求来更新该监视器。 此外，用户可以取消具有站点监控的站点。 在这种情况下，我们要做的只是自动向该 Synthetics API 发送删除请求以取消配置该监视器。 或者，如果客户可能会取消其上有一堆不同站点监视器的整个帐户，则在检测到这种情况时会自动发送取消配置所有这些监视器的请求。 所以所有这些对用户流都很重要，而站点监控代理使这一切成为可能。

好的。 所以我之前提到过，但展望未来，我们肯定会计划将 Slack 整合为一个额外的警报渠道。 我们也在探索 SMS，敬请关注未来的更多新增内容。 这是我们的 V1。 我们对此感到很兴奋，我们很高兴能够在 DE{CODE} 发布它。 但这确实是 V1。 我们有很多计划。 这些只是其中的几个。 但也请继续关注更多配置选项与监控，对用户门户的更多改进，我们将继续遵循我们一直在进行的研究和设计迭代过程，这将我们带到了这一点。

因此，感谢其他主持人 Kate 和 Kameron。 感谢大家今天加入我们。 祝你有美好的一天，去检查站点监控谢谢大家。