對講機的產品原則：互聯的模塊化系統如何幫助我們專注於重要決策

八年前加入 Intercom 時，我對系統設計一無所知。

我使用高保真模型設計並展示了我的想法。 它們很快就組合在一起了，所以我認為即使是線框圖也是浪費時間，更不用說系統設計圖了。

這是探索我們產品原理的系列文章中的第二篇。 在這裡，Gustavs 討論了我們“連接的模塊化系統”的設計原則。

但是，當我與其他人分享這些設計以獲得反饋時，我們常常會被看似很小的交互設計決策所牽制，而實際上，我們只是對系統應該如何工作有不同的心理模型。

解決方案發布幾個月後，我們才知道我們在解決方案中犯了一個根本性錯誤。 因為我是在 UI 級別而不是系統級別進行設計，所以我們沒有專注於最重要的決策。

我們的首席產品官 Paul Adams 向我介紹了創建系統而不是目的地的想法。 這個想法是我們設計過程的核心部分，最初是隱含的，但後來形式化為設計原則：連接的模塊化系統。

讓我們將其分解並更詳細地查看此設計原則的每個部分。

通過系統設計專注於最重要的決策

系統設計代表了您的解決方案在概念上的工作方式——系統中的對像是什麼以及它們之間的數據如何流動？ 通常它以圖表的形式呈現。

例如，這是我們用來設計文章產品的系統設計圖。 它演示了隊友如何管理他們的幫助中心內容、用戶如何使用該內容、隊友如何在響應用戶時發送該內容，以及反饋循環如何不斷提高內容質量。 在沒有屏幕模型的干擾的情況下，我們能夠就產品的工作方式達成一致。

對講文章系統設計

通過首先關注系統而不是交互設計，您可以確保您首先討論最重要的問題，並在解決方案應該如何在高層次上協調一致，而不會被小細節所困擾。

在交互和視覺設計方面，相同的系統可以以多種不同的方式實現。 通過逐步處理系統、交互和視覺設計層，您可以確保在正確的時間給出正確的反饋。 例如，如果您尚未與系統保持一致，那麼關注視覺設計細節是沒有用的。

通過模塊化系統提高效率

通過首先設計系統，您可以專注於最重要的問題，而不會迷失在更精細的細節中。 但設計過多的系統也會導致產品難以理解且維護成本高昂。 這就是模塊化系統的用武之地。

“模塊化系統是您創建一次但在許多不同環境中重複使用的系統”

模塊化系統是您創建一次但在許多不同上下文中重用的系統。 這個想法並不新鮮，被廣泛應用於從家庭建築到標準集裝箱的各個行業，以提高效率並降低成本。

早在 1908 年，Sears Roebuck 和 Co. 在開始通過郵購目錄銷售整棟房屋時就利用了模塊化系統。 它們是預製的，建造房屋的所有必要部件都被運往美國各地的客戶。 因此，Sears 顯著降低了製造成本，並以較低的價格將節省的成本轉嫁給了客戶。

西爾斯和羅巴克目錄以 1908 年至 1940 年間的預製房屋為特色

如果您的產品有一個設計系統——一個可重用的 UI 組件和模式庫，那麼您可能已經熟悉連接的模塊化系統的概念。 設計系統可以極大地提高團隊效率和產品一致性，因為您只需設計和構建一次 UI 組件，然後在整個產品中使用它們。

模塊化可以應用於多種環境

模塊化的想法可以應用到 UI 組件之外——這裡有一個例子。

對講機客戶可以設置自動消息，以在符合特定條件時吸引客戶。 最初我們只有簡單的應用內消息和電子郵件，但隨著時間的推移，我們添加了越來越多的方式來吸引客戶，例如短信、產品導覽、橫幅等。雖然我們在 UI 中使用了相同的設計系統，但效率更高將技術能力構建為單獨的系統，因為每個系統都有細微差別。

結果，這些消息類型中的每一個都具有相似但略有不同的功能（例如，它們可以針對不同的受眾，有些具有 A/B 測試，有些具有目標等）。

跨不同系統的不同功能

它們很難維護和改進，因為每當我們想要進行有利於所有消息類型的改進時，我們都必須單獨更新它們。 從長遠來看，這讓我們放慢了腳步，限制了我們的客戶可以用他們做什麼，並使我們難以創建一個解決方案來協調他們應該如何協同工作。

為了解決這個問題，我們進行了一個項目來合理化所有這些不同的系統，並提出一個可用於所有消息類型的模塊化系統。 現在，每當我們對該系統進行改進時，所有消息類型都會自動從中受益。

一個模塊化系統為所有功能提供動力

與互聯繫統區分開來

使用模塊化系統，您可以通過擁有少量強大而靈活的系統來提高效率，但真正的魔力發生在您將這些系統連接在一起時。

Apple 能夠創造出令人驚嘆的產品的一個重要原因是它們是垂直整合的——Apple 設計自己的硬件、軟件、服務，甚至零售體驗。 通過這種方式，他們控制了整個客戶體驗，並能夠無縫集成他們的硬件和軟件，而他們的一些競爭對手只能在他們獲得的硬件的限制內工作。

蘋果的垂直整合

通過確保您的系統與產品的其餘部分連接並集成，您可以獲得類似的戰略優勢：

• 與競爭對手的差異化：獲得只有通過多個集成系統才能實現的新功能。
• 商業護城河：讓競爭對手更難復制您的解決方案，因為他們必須複製多個系統。

例如，產品導覽主要旨在幫助新客戶在註冊後加入，但由於對講機也可用於支持現有客戶，我們將其設計為也可以通過機器人、支持收件箱、橫幅發送、幫助文章和電子郵件。

僅僅為客戶支持用例構建產品導覽是不值得的，但是通過將它們連接到我們的客戶支持工具套件，我們能夠以低成本生產並為我們的客戶提供差異化的解決方案.

從系統開始

這就是連接的模塊化系統如何幫助您專注於正確的問題、提高效率並與競爭對手區分開來。

回顧我自己在 Intercom 的歷程以及我對這一原則的內化，我相信這是幫助我成為更好的設計師並幫助團隊打造成功產品的基本理念之一。

如今，每當我開始考慮新項目的解決方案時，我都會從設計系統開始。 我了解到，在早期階段關注系統，而不是跳到高保真模型，讓我們更快地討論重要決策。

您能看到自己與我們的產品設計團隊合作嗎？ 我們正在招聘——查看我們的空缺職位。