昱感網頁設計.
← 回作品集列表

跟著烘豆機的溫度曲線,寫出一個賣豆子的網站

2026年7月25日

「我知道我需要一個網站,但我不想要那種『豆子+價格+加入購物車』的東西。」這是烘豆師第一次見面唯一給出的具體需求,其餘全是搖頭——不要這個、不要那個,卻說不出想要什麼。

留白比明確的規格更難處理,也更值得花時間搞懂。與其繼續逼問,我提議跟他一整天的烘豆班,從生豆進貨看到成品裝袋。

那天他在烘一批瓜地馬拉的水洗豆。烘豆機是一台有年紀的機器,運轉起來有種低沉的轟鳴,像一頭在遠處喘氣的動物。生豆下鍋之後,他幾乎沒離開機器前半步,眼睛盯著窺豆勺裡的顏色變化,手裡的筆在溫度曲線紀錄本上劃出一條又一條線,偶爾停下來,打開排氣口聞一下飄出來的煙——那個動作很短,卻很專注,像在辨認一個只有他聽得懂的訊號。

一爆聲響起的時候,整個空間突然安靜了半秒,他整個人的姿勢都變了,往前傾,眼睛沒有離開過豆子的顏色。那種緊繃感持續了將近九十秒,直到他一聲令下按了出豆鍵,豆子嘩啦啦落進冷卻盤,室內瞬間充滿一種焦糖混著堅果的香氣。他長長吐了一口氣,像剛跑完一場短跑。

出爐後他開始講這批豆子的故事——莊園在哪個海拔、今年雨季比往年早了兩週、影響了櫻桃的成熟速度、為什麼這批他決定烘淺一點,好留住原本的花香調性。整整四十分鐘,講的全是網路商店頁面上絕對不會出現的細節:不是「這支豆子有莓果香」這種罐頭形容詞,是「這批豆子的此刻」——今年、這個海拔、這場雨。

那一刻很清楚:他賣的從來不是「咖啡豆」這個品項,是某一批豆子在某個時間點的獨特狀態。做成規格化的商品列表,等於把最值錢的東西藏起來,跟一般連鎖品牌賣的東西沒有分別。

設計決策:把網站變成一本烘豆日誌

網站的資訊架構整個推翻重來。首頁不是商品陳列,是一條時間軸——「這週在烘什麼」,每一批豆子一篇短記錄,附上烘焙當天窺豆勺拍下的顏色變化與溫度曲線截圖,讀起來更像一本公開的工作筆記,而不是型錄。

每支豆子的頁面,內容順序也整個對調:最上面放的是烘焙曲線圖與產地故事,包含那句「今年雨季早了兩週」這種細節;規格表(重量、價格、購買按鈕)反而被壓到最下面,變成閱讀完故事之後的「順便」動作,而不是頁面唯一的目的。

還拿掉了電商網站幾乎必備的「熱銷排行」區塊——這裡沒有熱銷,只有這一批、那一批,賣完就是賣完,永遠不會有第二次一模一樣的東西。這個決定一開始他有點猶豫,怕少了排行榜客人不知道從何選起,後來我們用「這週精選」取代,邏輯從「別人買最多」換成「這個時間點最值得喝」。

轉換率沒有戲劇性成長,但發生了另一件事

上線之後追蹤了三個月的數據,轉換率沒有太大的波動,但客人在網站停留的時間拉長了將近一倍。客服訊息裡開始出現一種新的模式:很多人會先問某一支豆子的烘焙曲線或產地故事,聊了幾句才問怎麼買——順序整個反過來了。

烘豆師後來自己說,有個老客人留言說「感覺像在看你的日記,不是在逛商店」。這句話大概是整個案子最好的驗收標準:有些東西賣的從來不是效率,是被好好講一次的、只屬於那一批豆子的故事。