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。 感謝大家今天加入我們。 祝你有美好的一天，去檢查站點監控謝謝大家。