我們如何建立一個人們真正理解的 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 測試一切。

如果您想了解更多有關我們網站重新設計的信息，或者如果您對我在這裡寫的內容有任何疑問，請隨時與這里聯系。 我很樂意聊天。 :)