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