線上點餐系統改版
Solution
問題分析與策略規劃
策略
操作流程混亂不順暢，使用者體驗不佳
累積多年的功能，無統一規範可循
不同時期的 UI 元件，畫面不一致
痛點
提升使用體驗：所有功能串接流程重新盤點釐清
建立完整規範 : 詳細規格定義及建立Guideline
UI 元件更換一致：重新設計新版畫面
B 端店家
“ 很容易關到瀏覽器，就全部都關掉，得重新開始，蠻擾人的 ”
-Ｊ小姐
“ 已選餐點和附加選項不清楚哪裡沒選到，點餐流程會卡住 ”
- 健康餐盒店
“ 我覺得菜單的品項顯示品項分類區分不夠明顯，品項售完標示也不夠清楚 ”
- 連鎖滷味店
“ 我覺得結帳頁面上的資訊太多了，整頁看起來有點亂 “
-彭先生
Challenge
平衡商業需求與用戶體驗
由於多種原因，重新設計是一項具有挑戰性的工作。點餐系統面臨著複雜的情境，既要服務商業客戶（B端）又要滿足消費者（C端）的需求。在緊迫的時間內，我們需要對多年來累積的各種功能進行改版，同時保持系統的正常運營，因為大量店家仍在每天使用該系統。
這次改版不僅僅是視覺風格的變更，更是為我們的客戶提供無縫體驗的關鍵。我們需要重新盤點產品的流程、視覺和結構層次，以提供使用者更流暢的點餐體驗。在業務與客服需求、技術可行性和用戶需求之間找到平衡，執行這個重新設計的項目並非易事。
So why did we do this?
整合業務、使用者與技術需求以推動系統改版
Background
改版介面提升點餐體驗
公司為新創 SaaS 餐飲系統公司，其中餐飲系統的線上點餐系統，目前已有超過 1,000 家餐廳和 12 萬名會員用戶。
隨著使用人數的增加，現有的網頁介面顯得過時，流程及操作畫面需要優化，以提升使用者體驗。我們的目標是改善介面設計，為餐廳和顧客提供更流暢的點餐體驗。
My Role
End-To-end 設計/ 制定 Design Guideline
在這個專案中，身為唯一的設計師，我負責前期與跨部門團隊共同探索需求，並與PM討論和定義使用者流程。我全面負責所有畫面的設計編排和 Prototype 製作，制定 Design Guideline 並與工程師達成共識，最終參與產品的測試與驗收，確保設計的實現符合需求和使用者期望。
業務/ 營運客服
許多現有店家反映希望改善功能，但由於當前頁面限制較多，進一步優化產品面臨困難。
使用者/ 店家
操作體驗上很多不順和卡頓的問題，頁面流程邏輯過時有點混亂。
技術
當需要在多個技術堆疊中進行擴展時，使用者體驗和技術債的積累，使得舊有的應用程式設計和架構難以有效擴展。
Problems
店家與消費者的主要問題點
Progressive Iteration and Future Development
漸進式迭代進行，目前改版的部分為 Phase 1
Phase 1
Phase 2
Phase 3
點餐流程頁面
次要功能頁面
優惠券/活動相關
06 交易明細頁
07 訂單列表頁 (訂單紀錄)
08-1 會員資料
08-2 我的錢包
08-3 我的集點卡
05-2 優惠折扣活動
08-4 優惠券
Now it’s here!
01 選擇取餐方式及分店頁
02 點餐頁
03 編輯品項規格
04 查看購物車
05 訂單確認頁
Body1, 14/150%, Regular
Body2, 12/150%, Regular
Noto Sans TC
H1, 24, Bold
H2, 20, Bold
H2.Medium 20
H3, 18, Bold
H3.Medium, 18
H4, 16, Bold
H4.Medium, 16
H5, 14, Bold
H5.Medium, 14
＃FF9664
＃505050
＃969696
＃B4B4B4
＃DCDFE6
＃FEF9F3
＃FAFAFA
＃FFEDE4
＃E8E8E8
#F3F1F1
Our Goal
重新梳理流程，調整設計並修正錯誤
歷程 Project Progress
開發階段
在專案初期，設計師與 PM 進行多次深入討論，並製作原型Prototype 進行AB test，以優化流程與畫面細節。工程師在重構系統時，同時考量維運需求，導致開發時程延長。隨後，系統在測試環境中經歷了長時間的測試，並修正了多個bug。
上線挑戰
正式上線後，團隊面臨2次緊急退版，因為大量店家反映問題，包括掃碼後無法查詢點餐頁面、點餐失敗及多時段菜單顯示異常等。隨著問題逐漸控制在可接受範圍內，團隊決定不再退版。
問題修復與驗收
研發團隊逐一修復關鍵問題，PM、設計師和 QA 團隊則持續進行驗收測試，確保所有店家能順利使用點餐系統。這一過程展現了團隊的協作精神與靈活應對能力。
成功上線與正面回饋
最終，團隊成功推出高效穩定的線上點餐系統，並獲得了廣泛的正面回饋。使用者反映畫面資訊呈現更加清晰，整體使用體驗也變得更為順暢。參與這個專案讓團隊感受到深厚的成就感，並激勵我們在未來的設計與開發中持續追求卓越。
Next Step
・ Phase 2、3 後續優化安排
・ UI 調整一致性 (其他頁面)
・ Web 版本優化 (RWD)
Insights and Takeaways
開發期間的溝通與協作
在專案啟動階段，業務部門提出了多項來自店家和顧客的系統改進需求。然而，技術部門需優先調整內部系統架構，並應對維運需求，導致專案進展受阻。為了解決這一挑戰，產品部門召開多次會議，進行跨部門協調，將點餐系統劃分為三個部分，並設定合理的上線目標，以確保各方方向一致。
作為 UI/UX 設計師，我參考多個競品，分析其優缺點，並與團隊討論如何在不改動系統流程的情況下改善使用者的問題。在此過程中，我努力平衡設計方向，以符合業務需求並提升使用者體驗，展現了我的專業能力。
主要學習與反思
這個線上點餐系統的優化計畫，強調了高效溝通和跨部門協作的重要性。在改善過時的網頁介面和操作流程中，我學會了如何平衡不同意見並適應變化。這段經歷讓我認識到，持續學習和開放的心態對提升設計品質和促進創新至關重要，將為未來專案帶來積極影響。
After
Before
Before
統一所有元件相同圓角
增加搜尋餐點功能
視覺清楚分隔
餐點分類敘述和餐點
增加店家廣告的版位
弱化非首要功能視覺，區分不同層級功能
重點企業色僅保留頁面主要任務
這頁的主要任務是點餐
點餐頁 Order Page
增加店家增加廣告版位和搜尋功能需求
並區分點餐頁的層級，簡化介面將重點顏色集中在點餐任務上，提升使用者專注力
餐點選擇頁 Meal Selection Page
調整改關閉鈕位置、明確必填項提示，並優化數量顯示位置，以提升使用者操作流暢度
揪團訂餐功能 Group Meal Order
將切頁改為原頁彈窗，並簡化標題與畫面，提升使用者安心與直覺操作
訂單確認付款 Order Confirmation and Payment
將結帳步驟優化分三步驟，引導使用者專注填寫並快速確認，並新增發票及會員資訊功能
更改關閉視窗鈕位置
明顯去區隔瀏覽器的關閉位置
避免誤按將整個瀏覽頁面關掉
拿掉繁雜線條，清爽介面顯示
加價項目也一目瞭然
整個區塊清楚提醒必填未選的品項
增加點餐順暢度
將餐點數量移置選完餐點下方
更符合使用者操作流程
Before
Before
Before
Before
After
After
After
After
額外加選配料
草本日光
Cathy
將結帳分為3個小步驟
結合 複製連結 和分享 icon 圖示化
畫面更簡潔也更直覺
將籠統標題簡化為功能標題
將原切頁改為彈窗，更能提升使用安心體驗
Cathy
大家來喝飲料
Cathy
草本日光八德店
可收合餐點功能
清楚顯示所有細項
PM
Designer
Front-end RD
Back-end RD
QA
Freesia, Aggy
Shani
River/ Yu/ Roy
Nicole/ Ian/ Anthony
Oliver/ Allan
我們會考慮店家和消費者的使用習慣，原則上不會新增大型功能
同時，針對其他店家和使用者的需求，我們也會進行優化
Design Guideline
重新建立設計規範，以提升設計一致性、增強用戶體驗，並提高開發效率和團隊協作
Interested in connecting?
Let’s talk projects, collaborations, or anything design !
Shani Lin
shanilin25@gmail.com
