Stripe 花一年改首頁：那些被砍掉的版本、自製的波浪工具，與派翠克．科里森的決策現場

本文整理自《Y Combinator Startup Podcast》Design Review 系列 2026 年 4 月 22 日播出的單集，YC 合夥人亞倫．艾普斯坦（Aaron Epstein）訪問 Stripe 設計總監凱蒂．蒂爾（Katie Dill），談 stripe.com 在 2026 年初上線的全新版本是怎麼一步一步做出來的。本篇聚焦在前半段的改版工法，後半段「對抗向平庸的引力」的設計哲學另寫一篇。

{{< youtube ypzNhwpmOD4 >}}

{{< apple-podcast "tw/podcast/stripe-head-of-design-katie-dill-breaks-down-their/id1236907421?i=1000763073781" >}}

---

一個視覺還行的首頁，為什麼要砍掉重來

stripe.com 的上一版首頁是 2020 年上線的，一直用到 2026 年初。在矽谷的網路世界裡，六年是一個漫長的時間，多數同等規模的公司大概兩三年就會改版一次。蒂爾在訪談裡先承認一件事：那個舊版「視覺上其實還沒過時」，2020 年那一版的色彩、漸層波浪、排版邏輯，放到 2026 年看仍然算得上專業。如果只看視覺老化這個指標，這個改版根本不需要做。

但她接著解釋為什麼還是非改不可：問題不出在視覺，問題出在「故事」。Stripe 在 2020 年的時候本質上還是一家支付公司，整個首頁的敘事架構是圍繞著「我們處理你的付款」這條主線在說的。六年過去，Stripe 已經從一家支付公司長成了一家「網路時代的金融基礎設施」公司。它現在做訂閱計費、做用量計費（Forbes AI 50 裡有超過 78% 的公司用 Stripe 處理推論成本和使用者用量的計費）、做稅務、做收入認列、做平台金流（Shopify 整個資金清算就是跑在 Stripe 上）、做穩定幣、做實體 Terminal。

這個業務擴張的副作用在舊首頁上看得到。每多一條產品線，舊的首頁就被多塞一個區塊上去，整個頁面越來越長，每多一個區塊敘事的清晰度就被稀釋一次。這個狀態她形容是「故事在被埋進細節裡」。一個訪客滑到第三屏的時候已經搞不清楚 Stripe 到底是一家什麼公司，因為前三屏給他看了支付、訂閱、稅務、跨境匯款四條完全不同的線。

更具體的設計語言也撐不住了。舊版那個有名的漸層波浪、12 度傾斜的色塊、字體階層，一開始是為了支付這條主線設計的，現在要讓它撐起 30 條產品線的視覺一致性會崩潰。團隊評估之後得到一個結論：這不是調整或微改可以解的，必須整套重新想。

派翠克．科里森的框架：網站是你的宣言

當改版這件事的方向定了，下一個問題是：要往哪改？這時候 Stripe 共同創辦人暨執行長派翠克．科里森（Patrick Collison）在內部丟了一個問題給設計團隊，這個問題後來變成整個改版的北極星：「那網站到底是給什麼用的？」

這個問題乍聽之下有點故意，但它逼著團隊回到第一原理思考。如果只把首頁當「介紹我們產品的入口」，那設計就會變成資訊架構的最佳化問題：把 30 條產品線排好、放上 CTA、附上社會認證，做完。但派翠克自己提出的答案是：「網站是你的宣言。」（A website is your manifesto.）你選擇在視覺上、文字上、互動上呈現什麼、不呈現什麼，那個選擇本身就在告訴使用者你是誰、你重視什麼、你不在乎什麼。

這個框架把整個改版的標準拉到一個更高的位置。你選了哪些字體、用了哪些顏色、什麼樣的細節你願意磨到最後一個像素、什麼樣的細節你選擇放掉，這些決定加總起來會傳遞一個關於這家公司本質的訊號。對 Stripe 來說，這個訊號要傳遞的是「我們是值得整個網路時代信任的金融基礎設施」這件事。任何一個鬆掉的細節都會破壞這個訊號。

蒂爾講到這裡時用了一個很有畫面的說法：「我們花了好幾個月的時間在探索，看了很多版本都喜歡，但我們會說『不是這個』、『我們還沒準備好穿這件衣服穿六年』。」「穿六年的衣服」這個比喻是她常用的決策測試。當你知道一個設計上線之後會代表這家公司六年，你就不會用「夠好了先這樣」的心態結案。Stripe 內部沒有客戶 deadline，這次改版完全是「為了我們自己」做的，所以團隊有條件等到對的那個版本出現才出手。

這份「為了自己」的奢侈，在大多數團隊身上根本不存在。多數網站改版都是因為要趕一個產品發布、要配合一波行銷活動、要回應一個競爭對手的動作。在那些壓力下，「夠好了先這樣」是必然的選擇。Stripe 願意用這樣的方法做這件事，本身就是它願意把整個品牌資產押在「設計卓越」這個身分上的證明。

全球 GDP 計數器：那個只有 Stripe 能放的數字

新首頁正中央保留了原本的標題：「Financial infrastructure to grow your revenue.」這句話一個字都沒改。她解釋這個保留是刻意的：當業務在快速擴張，定錨用的標題反而要穩定，這樣才不會讓既有客戶感到陌生。

但標題下面換上了一個全新的元素：一個即時跳動的計數器，顯示「全球 GDP 中有多少比例正在 Stripe 上跑」。這個數字會以「十億分之一」（billionth）為單位即時更新，肉眼看著它一直在跳。整段選擇背後的決策邏輯值得拆開來看。

第一個考量是：這個數字幾乎沒有別家公司能放。能在自己首頁正上方放「全球 GDP 的 X% 跑在我們身上」這種數字的公司，全世界大概只有兩三家。對訪客來說，這是一個瞬間建立信任感的訊號，比任何客戶 logo 牆都有效。第二個考量是「billionth」這個單位本身的訊息。當你選擇把更新單位定到十億分之一，你就在告訴使用者：我們的規模大到這個量級的變動才有意義。這個選擇暗示了 Stripe 處理任何規模的業務都不會吃力。

第三個考量是這個元素的「動態感」。一個靜態數字的衝擊力遠不如一個正在跳動的數字。看著螢幕上的數字一秒一秒跳，使用者會在生理層面感受到這套基礎設施正在運轉、正在處理交易、正在創造價值。這個感受是文字描述沒辦法做到的，要靠互動細節傳遞。

從這個小小的計數器可以看出整個改版的標準是怎麼設定的。一個元素要被放上去，要同時滿足「在邏輯上有資訊量」、「在情感上有衝擊力」、「在訊號上有獨特性」這三個條件。多數公司只會考慮第一個，然後加一點第二個。把三個都考慮齊全是這次 Stripe 首頁的典型做法。

Bento 區塊：為什麼這個格子贏過 accordion 和 scrolly-telling

整個新首頁裡最被討論的區塊叫 Bento，是一個格子狀的版面，用 6 個方格呈現 Stripe 旗下幾十項產品中的代表。每個方格都有自己的主視覺，文字極少，點下去會出現一個 overlay 的 modal 詳細介紹那個產品，使用者不需要離開首頁就能展開看細節。

這個 Bento 的設計不是一蹴可幾的，蒂爾在訪談裡花了一段講團隊砍掉的版本。第一個被否決的方案是「把所有產品擠進一個畫面」，這個版本的問題是視覺密度太高、文字過多，使用者一眼看過去只看到密密麻麻的字，反而不會記得任何一個產品。

第二個被否決的方案是「捲動式分段敘事」（scrolly-telling），讓使用者邊往下捲邊看每一個產品依序展開。這個方案在動畫上很漂亮，但實際測試時發現太慢了。一個來看 stripe.com 的人多數是想快速確認「Stripe 能不能解決我的問題」，捲動式敘事強迫他用 Stripe 想要的節奏接收資訊，這在第一次造訪的場景裡會讓使用者失去耐心。

第三個被否決、也是最讓團隊意外的方案是 accordion（手風琴折疊）。這個設計讓每一個產品折起來只顯示標題，使用者點開之後才看到細節。表面上這是節省畫面空間的好辦法，但使用者測試的結果完全打臉設計團隊：人不會去點。她在訪談裡用了一個很實用的觀察：「我們以為使用者會點開展開，結果他們就盯著折起來的那一行看，然後直接離開。」更糟的是 accordion 折起來的那一行只能放一個短標題，當你硬要在那裡放「end-to-end 經營你的市集」這種需要解釋的概念時，沒有人看得懂這在說什麼。

最後勝出的 Bento 方案綜合解決了這三個失敗版本的問題。它一次顯示所有候選產品（避開了 scrolly-telling 的慢），用視覺主視覺取代文字（避開了 all-in-one 的密度問題），用 overlay modal 處理深入內容（避開了 accordion 沒人點的問題）。蒂爾形容它是「對 lean-back 使用者最仁慈的設計」，一個只想隨便看看的使用者可以用最低的力氣理解 Stripe 在做什麼。

客製波浪工具：工程團隊把設計師缺的拼圖補上

stripe.com 那個延續多年的「漸層波浪」是這次改版的另一個重點。蒂爾自己在 Stripe 待了五年，她說自己「看過所有可能的波浪解法」（every possible solution）。這個元素既是品牌資產又是設計挑戰：它要繼續承擔識別功能，但又不能跟其他元素打架。

這次新版的波浪有幾十個變數要同時調整：模糊度、顆粒感、顏色、旋轉角度、縮放比例、線條粗細、紋理。這些變數每一個都是連續的，組合起來的可能性接近無限。設計師如果用傳統的方法去比稿，每一版做出來要等工程實作後才能在真實情境裡看見效果，整個迭代週期會慢到無法收斂。

工程團隊想出來的解法是建一個內部工具，把所有這些變數都做成 sliders（滑桿），設計師可以在瀏覽器裡即時調整每一個變數，然後馬上看到波浪在真實的頁面排版裡長什麼樣子。她在訪談裡說這個工具「對我們做出對的決定來說是少不了的」。原因不只是速度，是「在真實情境裡看」這件事本身。

設計圈有一個常被講但不容易內化的道理：一個元素單獨拿出來看是一回事，把它放回頁面整體裡看又是另一回事。一個顏色單獨看很漂亮，跟旁邊的 logo 放在一起可能完全不對盤。一個波浪單獨看很有動感，跟旁邊的字體一起呈現可能會搶到字體的視覺重量。客製 sliders 工具讓設計師可以在「真實情境」裡跑數十個版本，這個能力把「比稿」這件事從一個猜謎遊戲變成一個視覺實驗室。

把這個工具的價值再往前拆一層，會發現它印證了 Stripe 的另一個設計原則：「越快讓設計進入使用者體驗的狀態越好」（get to user-experience state ASAP）。靜態的 mockup、孤立的元素、簡報上的截圖，都離真正的使用者體驗很遠。能愈早把設計放回使用者會看到的真實情境裡，設計師判斷的品質就愈高。要做到這件事，工程資源跟設計資源不能切開來看，必須一起投入。

為了 4 個數字的動畫，發布日從 12 月延到 1 月

整個改版過程有一個小決定特別能說明 Stripe 的標準。新首頁裡有一個區塊放了 4 個關於 Stripe 規模的關鍵數字（處理量、可用率之類），每一個數字都搭配一個半資料視覺化的動畫。這個動畫晚上跟白天看還會不一樣。原本的計畫是 2025 年 12 月上線，但團隊發現其中幾個動畫在切換之間還不夠順，就把整個發布日往後延到 2026 年 1 月。

「再往後推一週不會是世界末日。」她在訪談裡用很平淡的語氣講這句話，但這句話背後是一個很有壓力的選擇。網站改版這件事一旦定了上線日，後面會有公關、行銷、業務的整套配合計劃，往後延一個月不是設計團隊單方面說了就算的。

中間其實有一個妥協選項出現過：4 個動畫只上 3 個，最後那個還沒磨好的先用靜態畫面替代，下個月再補。這個方案表面上是合理的折衷，但團隊最後拒絕了。原因是這個區塊的整體訊息靠 4 個動畫一起傳遞才完整，缺一個換成靜態的會在視覺節奏上產生破口，使用者會感覺「這裡怪怪的」但又說不出來哪裡怪。這種「說不出來但感覺得到」的破口正是會傷害信任感的東西。

訪談裡她補上一句很重要的話：「不要養成一直延期的習慣，但對一個會代表公司這麼久的東西，也不要『夠好了就上吧』。」這句話揭露了一個微妙的判斷標準：延期的成本是一次性的（公關計畫重排一次），「夠好了就上」的成本是長期性的（產品代表公司的那六年都會帶著這個破口）。當你把時間軸拉到六年，那一個月的延期就變成可以接受的代價。

派翠克．科里森的決策方式：團隊 down-select，他拍板

整個改版過程的決策結構也值得拆出來看。蒂爾形容他們的工作方式是這樣：設計團隊先把所有探索過的方案做 down-select（向下篩選），把選項收斂到「團隊覺得任何一個都可以接受」的水準，然後把這些候選方案帶去給派翠克．科里森做最後決定。

這個分工的關鍵在「team down-select」這一步。設計團隊不會把 30 個探索方案丟到創辦人桌上要他選，那等於把美感判斷的負擔丟給一個非設計專業的人。團隊先用自己的專業把那 30 個方案篩到 3 個，這 3 個都是團隊願意背書的版本，這時候再交給派翠克。她形容派翠克是一個「異常果斷、品味極佳」（exceptionally decisive and has very good taste）的決策者，給他 3 個選項他可以快速給答案。

這個結構的妙處在於它把「專業判斷」跟「品味拍板」這兩件事分得很乾淨。專業判斷是團隊的責任，包括技術可行性、視覺一致性、使用者測試結果。品味拍板是創辦人的責任，包括這個方案符不符合公司的長期身分、這個選擇傳遞出什麼樣的訊號、創辦人本人是不是「願意穿這件衣服六年」。把這兩件事混在一起會讓決策卡住，分開來反而流暢。

訪談裡她還補上一個很實在的觀察：「設計拿出來單獨看很棒的，放回真實情境裡會變成不一樣的東西。」這句話對應的是設計圈一個常被忽略的真相：一個方案在會議室的投影幕上看很驚豔，搬到實際網站環境裡可能就變平庸了。Stripe 的決策流程允許「給自己時間在真實情境裡反覆看」，創辦人不會逼著設計師當天就做決定。

我的觀察：這份「不對外的時間」是現代設計專案最稀有的奢侈品

把整集訪談的工法層面拉回到臺灣的工作場景，最值得對照的不是 Bento 這類具體做法，而是 Stripe 願意給這個專案的時間。整個改版花了一年，過程中砍掉的版本至少有四五個方向，發布日為了一個區塊延後一個月，每一個段落都允許團隊「再坐下來看一次」。這份時間是現代多數設計專案最稀有的奢侈品，比任何工具都稀有。

我自己這幾年在媒體業看過太多網站改版的案子，最常見的失敗模式不是設計師不夠強，是時間表太緊。一個改版專案排八週，第一週做需求收斂，第二三週做 wireframe，第四五週做視覺，第六七週做開發，第八週上線。這個時間表裡沒有任何一個段落允許「我們覺得不對，再回去想一個月」。結果就是上線時所有人心裡都知道這不是最好的版本，只是「來得及上線的版本」。

Stripe 的做法給了一個對照：當設計被當成公司的長期資產來管理，時間軸就不能用季度去算，要用「這個東西要代表我們幾年」去算。一個會代表公司六年的網站，多花三個月做對的事是合理的投資。一個會代表產品線兩年的介面，多花一個月磨細節是合理的投資。當你不肯給這份時間，產出的就只能是「來得及」的版本，而不是對的版本。

AI 工具理論上可以幫忙把這個時間軸壓短。今天用 v0、Cursor、Figma AI 做出可以點擊的原型，速度比兩年前快好幾倍。Stripe 那個花一年做的改版，理論上今天可以壓縮到半年甚至更短。但壓縮不是 AI 工具自動會做的，要創辦人跟團隊主動把省下來的時間「還」給設計品質這件事，而不是把省下來的時間拿去塞下一個專案。這個選擇是組織決定，不是工具決定。

對臺灣的設計、產品、工程團隊來說，Stripe 這個改版案最值得學的不是任何一個具體做法，是「給設計專案配對的時間預算」這件事。當你下次要排一個改版時間表，問自己一個問題：這個東西要代表我們幾年？把這個答案乘以一個合理的比例，那才是這個專案應該得到的時間。