iCHEF
持續迭代線上點餐網站，強化消費者點餐體驗品質
專案期間
2022/5 - Present（持續迭代中）
專案團隊
專案經理 *1
產品設計師 *3
軟體工程師 *3（前端、後端、iOS）
我的角色
產品設計師，負責：問卷結果分析、流程與介面設計、利害關係人溝通
專案背景
iCHEF 是一間餐飲科技公司，於 2020 年 5 月疫情期間推出「雲端餐廳」服務，讓店家可以在禁止內用的嚴峻情況下，還能透過自己的線上點餐網站，有持續且穩定的收入來源。功能推出兩年後，iCHEF 總店家數仍約有 14.3% 的活躍雲端餐廳店家（每個月至少有 1 筆訂單）。
在雲端餐廳的功能基礎（外帶、外送、內用掃碼）陸續建置完成後，我們為了提供店家更直覺順暢的線上與線下體驗整合，在 2022 年 5 月執行完整的消費者端體驗研究，並展開一系列優化專案，期待能協助店家更好地服務消費者，也提升店家使用雲端餐廳的比例。
商業目標
我們希望能透過強化消費者端的體驗，提升雲端餐廳（包含：外帶外送、內用掃碼）線上結帳金額 (GMV)，而主要的產品指標分別為「活躍店家數」和「信用卡營業額」，因為後者將會為我們帶來較高的分潤金額。和 2022 年 5 月相比，2023 年 5 月的成長數據如下：
除了消費者端體驗，同時也有產品團隊負責滿足店家端的需求，再加上餐飲缺工潮，店家採用內用掃碼的比例越來越高，成功的推高 iCHEF 營收。
活躍店家數成長百分比
+
%
外帶外送
+
%
內用掃碼
信用卡營業額成長百分比
+
%
外帶外送
+
%
內用掃碼
使用者研究
從問卷調查獲取洞察
了解雲端餐廳的消費者痛點分佈
為了了解消費者在雲端餐廳「外帶/外送」與「內用掃碼」的使用者旅程以及會遭遇到的主要痛點，我們選擇用「問卷調查」的方式來了解現況，不只能在短時間內以低成本的方式，搜集到較大量的量化數據，也能請消費者留下回饋，獲取更多質化建議。
問卷設計
我們希望可以使用品質佳且價格合理的問卷工具，且要能有不同回答題型，以及便於匯出，因此選擇 Survey Cake 來製作問卷。而針對問卷設計，我們也制定了三個原則：
主軸明確
讓消費者了解：問卷是評價 iCHEF點餐體驗，而非「餐廳用餐體驗」
為了避免消費者被餐廳的菜色或服務影響填答有效性，我們要明確點出問卷目的和主軸。以「Google 預訂」滿意度調查為例，文案看不出來要針對餐廳用餐體驗或是預定體驗來回答。
利於分析
搜集量化和質化回饋，並記錄店家資訊
題型以必填的「選項」為主，再搭配選填的「文字輸入」，此外也會請前端工程師將每間雲端餐廳的 Store ID 自動帶入問卷，我們才能了解消費者的滿意度是否被店家的菜單結構影響。
利於填答
消費者能夠有效率的完成填答
我們會確保問卷長度適中，蒐集雲端餐廳使用者旅程中「關鍵行為」的滿意度，避免消費者放棄填寫問卷。
問卷內容
經過多次內部易用性測試，我們確保最終版的問卷可以讓填答者理解此問卷是針對「訂餐網站操作體驗」進行調查，也能了解每個問題的題意，且能在平均 30 秒左右完成。
填寫問卷
我們選擇在送出訂單後的「訂單狀態」頁面，跳出填寫問卷的提示，因為此時消費者已經點完餐、走過完整的點餐體驗，有較高的回饋意願，也能給予更全面的回饋。
問卷上線後的一個月，我們一共蒐集到 6000+ 份問卷！有了足夠的資料量，我們開始檢視滿意度分佈和回饋。
份
外帶外送問卷
份
內用掃碼問卷
使用者旅程
將問卷回饋以標籤分類
把主要痛點整理為使用者旅程圖
滿意度分析
整理完痛點後，我們再跟量化數據對照，分別列出「外帶外送、內用掃碼」中，消費者前三個不滿意的環節，而兩者皆集中在「調整餐點、選擇餐點」上，這也是消費者主要產生痛點的環節。
外帶外送問卷
1
在購物車檢查、調整餐點：普通以下佔 22.3%
2
選擇餐點內容與數量：普通以下佔 17.4%
3
內用掃碼問卷
1
在購物車檢查、調整餐點：普通以下佔 18.9%
2
選擇餐點內容與數量：普通以下佔 16%
3
開發順序
儘管觀察到的痛點數量不少，但時間和人力資源有限，因此我們需要安排合理的需求優先次序。除了判斷是否會直接影響消費者結帳外，也會考量影響易用性的程度。另外雖然問卷沒有提及視覺用色，但我們也希望能提升視覺愉悅度（例如符合不同品牌調性）。
為了避免作品集篇幅過長，以下僅呈現由我負責執行的亮點專案
優化項目 1
原先雲端餐廳並沒有載具欄位，若消費者選擇使用線上結帳，必須向店家索取紙本發票，或是要選擇到現場付款，再請店家用 iCHEF POS 掃描載具（如下圖）。為了提升線上結帳的轉換率以及分潤營收金額，我們在 2022 年 6 月首先進行載具欄位的優化。
店家可以在後台開啟載具欄位
我在後台「雲端餐廳 > 結帳相關設定 > 統一編號」toggle 的下方，新增了「載具條碼」toggle，讓有提供電子發票的店家，可以選擇是否要讓消費者輸入載具條碼。
消費者可以在雲端餐廳輸入載具
雲端餐廳購物車頁的「發票資訊」區塊，從僅有「統一編號」的輸入欄位，改變為消費者可以勾選發票是否要存入載具，或是要打統一編號。
店家接單並結帳時，自動帶入載具資料
若店家接受了一張消費者有輸入載具的訂單，當店家結帳時，會看到載具條碼欄位已經預先帶入好載具資料，不必再自行手動輸入，或是進行掃碼，加速結帳流程。
成功提升線上結帳轉換率
功能在 2022 年 10 月上線後的兩個月，我們觀察到有輸入載具的消費者，使用線上結帳的比例確實比沒有輸入載具的消費者高，成功的減少線上結帳的阻力。
+
%
外帶外送 線上結帳
+
%
內用掃碼 線上結帳
優化項目 2
部分消費者在特定店家的雲端餐廳下訂外帶外送時，會希望可以快速選購過去點過的商品，因此我在首頁規劃了「再點一次」的區塊，預設顯示上筆訂單中的 5 種品項（從數據得知，有 87.3% 消費者一次選購 0~5 種品項），若上筆訂單有大於 5 種品項，其餘品項則會收合起來。
若消費者有登入會員，也能在「會員專區 > 我的訂單」查看歷史訂單，點擊「再點一次」後，就能一鍵把訂單中的商品和訂單備註，直接帶入購物車。
有些歷史訂單中的品項，可能已經與店家現況菜單不符，為了避免影響店家出餐（例如：選購到已經下架的品項），我們將會自動移除異動商品。發生以下情況時，我們將會把商品視為異動商品：
1
刪除或停售，例如：店家把「鄉村風味套餐」從後台刪除，或暫時停售。
2
更改名稱，例如：店家把「鄉村風味套餐」更名為「澳式皇后早午餐」。
3
優化項目 3
在問卷結果中，消費者提到最多的問題之一，就是雲端餐廳沒有商品圖片，或是圖片過小、看不清楚餐點細節。由於我們需要額外的資源和時間探索要如何激勵店家拍攝及上傳圖片，因此先針對「有上傳部分商品圖片」的雲端餐廳進行優化。除了新增格狀模式外，我也調整了：
1
增強「商品分類」被選中的樣式的對比度：原先的樣式會讓消費者看不清楚目前所在的分類區域。
2
商品敘述由最多一行改為兩行：若店家沒有上傳圖片，消費者可以透過較完整的敘述瞭解商品細節。
3
在「列表/格狀」切換元件的迭代過程中，我嘗試了填滿頁面寬度的 segmented control，以及固定於頁面底部的按鈕版本，不過都會把這個動作的層級拉得太高（切換檢視模式並非消費者的主要目的），因此最後選擇加上「菜單」二字，讓右側較小面積的切換元件可以達到視覺平衡。
消費者點擊商品後，商品內頁也會根據首頁的「列表/格狀」模式，呈現對應的排版。因為消費者在首頁的主要目的是探索與評估，所以格狀模式為兩欄。而進入商品內頁後，需要快速選擇完餐點的相關選項，所以格狀模式為三欄，避免頁面過長。
以商品列表為例，需要考量到「有沒有圖片、有沒有敘述、有沒有優惠、有沒有被選中、有沒有售完」等情境，要把所有的狀態都盤點出來，才知道 UI 具不具備足夠的彈性。
優化項目 4
2022 年 12 月，我們已經完成了影響結帳和易用性的主要優化，因此我和另外兩位設計師一同進行雲端餐廳的視覺翻新，包含「定義視覺語言、設計原則和風格、品牌用色」等內容，並製作為提案簡報。很可惜的是，當時因為有其他和商業目標更直接相關的專案需要執行，因此視覺翻新的專案被暫停了整整一年。
2024 年 4 月，星宇航空貴賓室 GALACTIC Lounge 採用 iCHEF 雲端餐廳內用掃碼點餐，董事長提出希望雲端餐廳能夠符合星宇的品牌調性（如下圖，預設配色和實際場景具有強烈衝突感），為了維繫與星宇的合作關係和行銷價值，我們重啟了視覺翻新專案，並著重於新增不同主題色。不只是滿足星宇的需求，未來也能為所有雲端餐廳店家帶來效益。
在提案簡報中，我們給予了三種不同的配色方案，而星宇航空最終選擇暗色系的「耀石灰」方案，由於此配色未來也會讓其他店家使用，我們需要微調配色，避免直接使用星宇品牌色票。
制定主題色設計原則
在進一步調整色票以前，我先制定了三個原則。
1
易讀性：色彩配置通過對比度檢測，能清楚閱讀重要資訊。
2
擴充和協作：讓設計師有明確的用色邏輯和定義可依循。
3
使用 Figma Plugin 測試對比度
我選擇用 Figma Plugin "Stark" 進行對比度測試，在淺色主題上的標準是 AA 級（對比度達 4.5:1）、在深色主題上的標準是 AAA 級（對比度達 7:1），因為如果深色主題採用 AA 級標準，視覺上會看起來較混濁，對比度仍略顯不足。
制定完色票後，我在雲端餐廳的 Design System 新增 18 個 Variables，並將所有的元件都套用 Variables，如此一來，設計師可以在 Figma 輕鬆地切換不同主題色，工程師也能查看每個 Variables 對應的色票。我也撰寫了 Variables 的用途和範例，讓設計師了解如何應用。
套用新的主題色以後，雲端餐廳散發出了完全不一樣的氣質！更能延續線下的品牌印象，除了以下 4 個主要頁面以外，我一共整理了 206 個雲端餐廳頁面，將元件和資訊全部套用 Variables。
目前我們僅開放讓 Key Account（大品牌客戶，如星宇）套用此主題色，未來我們也會持續擴充不同的色系，並讓所有店家都能在後台自行選用主題色。
團隊影響力
專案之餘，也致力提升設計團隊協作與品質
除了關注專案的目標和執行狀況以外，我也會在意團隊的設計流程、其他設計師的能力品質，因此我在擔任其中一位 Mentor 後，不只帶領對方成長，同時期待能提升整體設計團隊的效能。
協助 Mentee 成長
從這一系列專案開始，我學習如何規劃與切分任務，並將合適的任務分配給對應的設計師，透過引導帶領對方成長、達成職涯目標。
成立設計系統委員會
因為專案需要頻繁調整與新增設計系統元件，我們在 2022 年 9 月成立了設計系統委員會，成員需負責維護元件和 review 元件申請。
發起 Figma 小學堂
為了提升設計團隊的工作效率，我主動在專案告一段落後（2023 年 1 月）發起兩堂 Figma 內訓課程，並自行籌備教材以及練習題。
夥伴回饋
感謝相互信任的專案團隊
能夠遇到工作步調、設計價值觀相近的產品經理非常幸運，讓我得以在專案探索初期，就能和產品經理密集溝通和對焦方向。也很感謝我的 Team Lead 願意將具有挑戰性、能見度高的專案給我執行，讓我可以展現更多系統性設計思維，這都要仰賴彼此深厚的信任基礎！
謝謝 Kat 都會提前跟我討論規格、畫出 wireflow，讓規格在 PM 的產品需求文件 review 階段就能視覺化、前面規劃的節奏可以高速進行，提前確認方向。
產品經理
謝謝 Kat 自告奮勇接下了雲端餐廳主題色的專案，成果很美，而且還順勢推動了設計團隊使用 Figma Variables 新功能，非常方便。
設計 Team Lead
感謝 Kat 漂亮又詳細的 Figma，對規格盤點的很詳細，各個情境的處理也都有列出來，討論起來都更有效率了呢！
