從紀錄到行動：重新設計 MyFitnessPal 的資料視覺化與回饋機制
從紀錄到行動：重新設計 MyFitnessPal 的資料視覺化與回饋機制
從紀錄到行動：重新設計 MyFitnessPal 的資料視覺化與回饋機制
以研究為基礎的產品改版，幫助 MyFitnessPal 從單純記錄進一步支持使用者反思與行為改變
以研究為基礎的產品改版，幫助 MyFitnessPal 從單純記錄進一步支持使用者反思與行為改變
以研究為基礎的產品改版，幫助 MyFitnessPal 從單純記錄進一步支持使用者反思與行為改變
Role
Role
Role
UX Designer Lead — Led data vis and UI redesign
UX Designer Lead — Led data vis and UI redesign
UX Designer Lead — Led data vis and UI redesign
Timeline
Timeline
Timeline
Mar 2025 – May 2025
Mar 2025 – May 2025
Mar 2025 – May 2025
Team
Team
Team
3-member collaboration across research and design
3-member collaboration across research and design
3-member collaboration across research and design
Tools
Tools
Tools
Figma
Figma
Figma
1. 專案背景
1. 專案背景
本專案完成於 Personal Health Informatics & Visualization 課程中。課程主要探討 健康資料如何被蒐集、視覺化，並轉化為可行的行為回饋。與一般 UX redesign 不同，本專案的重點不在於單純改善介面，而是分析 營養追蹤應用中的資料視覺化與回饋機制，並思考如何讓健康數據更有助於使用者理解與行動。
本專案完成於 Personal Health Informatics & Visualization 課程中。課程主要探討 健康資料如何被蒐集、視覺化，並轉化為可行的行為回饋。與一般 UX redesign 不同，本專案的重點不在於單純改善介面，而是分析 營養追蹤應用中的資料視覺化與回饋機制，並思考如何讓健康數據更有助於使用者理解與行動。
在四週的時間裡，我持續使用 MyFitnessPal 來記錄每日飲食，並觀察自己的飲食模式與數據變化。
在四週的時間裡，我持續使用 MyFitnessPal 來記錄每日飲食，並觀察自己的飲食模式與數據變化。
為了系統性地評估這個產品，我採用了 Stage-Based Model of Personal Informatics Systems（Li, Dey, Forlizzi, 2010），該模型將個人資訊系統的使用過程分為五個階段：
Preparation（準備）
Collection（資料蒐集）
Integration（資料整合）
Reflection（反思）
Action（行動）
為了系統性地評估這個產品，我採用了 Stage-Based Model of Personal Informatics Systems（Li, Dey, Forlizzi, 2010），該模型將個人資訊系統的使用過程分為五個階段：
Preparation（準備）
Collection（資料蒐集）
Integration（資料整合）
Reflection（反思）
Action（行動）
透過這個模型，我不僅從介面設計的角度評估 MyFitnessPal，也將其視為一個 協助使用者理解自身健康數據並促進行為改變的系統，分析它在不同階段所提供的支持與限制。
透過這個模型，我不僅從介面設計的角度評估 MyFitnessPal，也將其視為一個 協助使用者理解自身健康數據並促進行為改變的系統，分析它在不同階段所提供的支持與限制。
1. 專案背景
本專案完成於 Personal Health Informatics & Visualization 課程中。課程主要探討 健康資料如何被蒐集、視覺化，並轉化為可行的行為回饋。與一般 UX redesign 不同，本專案的重點不在於單純改善介面，而是分析 營養追蹤應用中的資料視覺化與回饋機制，並思考如何讓健康數據更有助於使用者理解與行動。
在四週的時間裡，我持續使用 MyFitnessPal 來記錄每日飲食，並觀察自己的飲食模式與數據變化。
為了系統性地評估這個產品，我採用了 Stage-Based Model of Personal Informatics Systems（Li, Dey, Forlizzi, 2010），該模型將個人資訊系統的使用過程分為五個階段：
Preparation（準備）
Collection（資料蒐集）
Integration（資料整合）
Reflection（反思）
Action（行動）
透過這個模型，我不僅從介面設計的角度評估 MyFitnessPal，也將其視為一個 協助使用者理解自身健康數據並促進行為改變的系統，分析它在不同階段所提供的支持與限制。
專案概覽
專案概覽
在深入介紹重新設計的細節之前，先簡要說明我在這個專案中的整體思考流程：從辨識 MyFitnessPal 使用流程中的關鍵斷點，到確立設計重點與定義解決方向。這個部分提供整體的總結，而後續章節則會進一步拆解每一個設計決策的細節。
在深入介紹重新設計的細節之前，先簡要說明我在這個專案中的整體思考流程：從辨識 MyFitnessPal 使用流程中的關鍵斷點，到確立設計重點與定義解決方向。這個部分提供整體的總結，而後續章節則會進一步拆解每一個設計決策的細節。
在深入介紹重新設計的細節之前，先簡要說明我在這個專案中的整體思考流程：從辨識 MyFitnessPal 使用流程中的關鍵斷點，到確立設計重點與定義解決方向。這個部分提供整體的總結，而後續章節則會進一步拆解每一個設計決策的細節。
01 問題理解
01 問題理解
01 問題理解
我透過 Stage-Based Assessment Framework，從五個行為改變階段評估 MyFitnessPal 的使用體驗：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合）、Reflection（反思）、Action（行動）
我透過 Stage-Based Assessment Framework，從五個行為改變階段評估 MyFitnessPal 的使用體驗：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合）、Reflection（反思）、Action（行動）
我透過 Stage-Based Assessment Framework，從五個行為改變階段評估 MyFitnessPal 的使用體驗：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合）、Reflection（反思）、Action（行動）
分析結果顯示，MyFitnessPal 在 前期階段（Preparation、Collection）表現良好，但在 Reflection 與 Action 階段出現明顯斷點。使用者往往難以從紀錄的資料中獲得洞察，也不清楚應該如何調整自己的飲食習慣。
分析結果顯示，MyFitnessPal 在 前期階段（Preparation、Collection）表現良好，但在 Reflection 與 Action 階段出現明顯斷點。使用者往往難以從紀錄的資料中獲得洞察，也不清楚應該如何調整自己的飲食習慣。
分析結果顯示，MyFitnessPal 在 前期階段（Preparation、Collection）表現良好，但在 Reflection 與 Action 階段出現明顯斷點。使用者往往難以從紀錄的資料中獲得洞察，也不清楚應該如何調整自己的飲食習慣。
02 設計重點
02 設計重點
02 設計重點
為了解決這個問題，我將設計聚焦在一個核心問題：
為了解決這個問題，我將設計聚焦在一個核心問題：
為了解決這個問題，我將設計聚焦在一個核心問題：
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
03 設計策略
03 設計策略
03 設計策略
根據分析，我發現 MyFitnessPal 在以下三個面向存在持續性的問題：洞見資訊呈現不足、資料解讀缺乏彈性、回饋機制不夠具體。
根據分析，我發現 MyFitnessPal 在以下三個面向存在持續性的問題：洞見資訊呈現不足、資料解讀缺乏彈性、回饋機制不夠具體。
根據分析，我發現 MyFitnessPal 在以下三個面向存在持續性的問題：洞見資訊呈現不足、資料解讀缺乏彈性、回饋機制不夠具體。
因此，我將設計策略整理為兩個主要方向：
儀表板 (Dashboard) 重新設計：改善資料視覺化，強化反思
回饋機制 (Feedback Mechanism) 重新設計：提供更具行動導向的回饋
因此，我將設計策略整理為兩個主要方向：
儀表板 (Dashboard) 重新設計：改善資料視覺化，強化反思
回饋機制 (Feedback Mechanism) 重新設計：提供更具行動導向的回饋
因此，我將設計策略整理為兩個主要方向：
儀表板 (Dashboard) 重新設計：改善資料視覺化，強化反思
回饋機制 (Feedback Mechanism) 重新設計：提供更具行動導向的回饋
04 設計亮點
04 設計亮點
04 設計亮點
以下展示部分重新設計後的體驗。新的 Dashboard 透過更清晰的資料視覺化，幫助使用者更容易理解自己的飲食模式，進而進行反思。向下滑動可以查看專案細節，了解完整的重新設計流程與設計決策。
以下展示部分重新設計後的體驗。新的 Dashboard 透過更清晰的資料視覺化，幫助使用者更容易理解自己的飲食模式，進而進行反思。向下滑動可以查看專案細節，了解完整的重新設計流程與設計決策。
以下展示部分重新設計後的體驗。新的 Dashboard 透過更清晰的資料視覺化，幫助使用者更容易理解自己的飲食模式，進而進行反思。向下滑動可以查看專案細節，了解完整的重新設計流程與設計決策。
專案細節
專案細節
01 App 功能概覽
01 App 功能概覽
MyFitnessPal 是目前最廣泛使用的營養追蹤應用之一，以龐大的食物資料庫、條碼掃描功能，以及熱量與營養素（macro）追蹤而聞名。它同時也能與多種健身裝置與運動應用整合，讓使用者能將飲食、運動與體重管理整合在同一個系統中追蹤與管理。
MyFitnessPal 是目前最廣泛使用的營養追蹤應用之一，以龐大的食物資料庫、條碼掃描功能，以及熱量與營養素（macro）追蹤而聞名。它同時也能與多種健身裝置與運動應用整合，讓使用者能將飲食、運動與體重管理整合在同一個系統中追蹤與管理。
02 我們的使用者視角
02 我們的使用者視角
在本專案中，我們以 忙碌的研究生作為使用者情境來評估 MyFitnessPal，我們對營養學的知識有限，但有明確的健康目標，例如：
透過 均衡飲食與規律活動管理體重
提升對 飲食習慣的覺察
在不增加過多心理負擔的情況下，建立 可持續的紀錄習慣
在本專案中，我們以 忙碌的研究生作為使用者情境來評估 MyFitnessPal，我們對營養學的知識有限，但有明確的健康目標，例如：
透過 均衡飲食與規律活動管理體重
提升對 飲食習慣的覺察
在不增加過多心理負擔的情況下，建立 可持續的紀錄習慣
經過 四週的每日使用後，我們觀察到應用中有些部分表現良好，而有些部分則明顯不足。
經過 四週的每日使用後，我們觀察到應用中有些部分表現良好，而有些部分則明顯不足。
03 依據 Stage-Based Model 的評估
03 依據 Stage-Based Model 的評估
透過 Stage-Based Model of Personal Informatics Systems 的分析，我們發現 MyFitnessPal 在 早期三個階段表現良好：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合），但在 Reflection（反思）與 Action（行動）階段的支援相對不足。然而這兩個階段正是使用者需要理解數據並調整行為的關鍵。
透過 Stage-Based Model of Personal Informatics Systems 的分析，我們發現 MyFitnessPal 在 早期三個階段表現良好：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合），但在 Reflection（反思）與 Action（行動）階段的支援相對不足。然而這兩個階段正是使用者需要理解數據並調整行為的關鍵。
表現良好的部分
表現良好的部分
01
01
準備 (Preparation)
準備 (Preparation)
快速 onboarding 與預設目標設定降低使用門檻
通知提醒鼓勵紀錄，但不會過度干擾
快速 onboarding 與預設目標設定降低使用門檻
通知提醒鼓勵紀錄，但不會過度干擾
02
02
資料搜集 (Collection)
資料搜集 (Collection)
大型食物資料庫 + 條碼掃描讓搜尋快速且可靠
快捷功能（Copy Previous Meal / My Meals）減少重複輸入
手勢操作讓紀錄流程更流暢
大型食物資料庫 + 條碼掃描讓搜尋快速且可靠
快捷功能（Copy Previous Meal / My Meals）減少重複輸入
手勢操作讓紀錄流程更流暢
03
03
資料整合 (Integration)
資料整合 (Integration)
自動計算 熱量與營養素總量，並提供週／月統計
清楚區分目標、飲食與運動對整體數據的影響
自動計算 熱量與營養素總量，並提供週／月統計
清楚區分目標、飲食與運動對整體數據的影響
使用體驗出現斷點的地方
使用體驗出現斷點的地方
04
04
反思 (Reflection)
反思 (Reflection)
首頁除了基本數字外，缺乏具有洞察力的視覺化
沒有能連結不同指標（例如飲食攝取與體重變化）的圖表
使用者 難以理解飲食模式如何影響健康結果
首頁除了基本數字外，缺乏具有洞察力的視覺化
沒有能連結不同指標（例如飲食攝取與體重變化）的圖表
使用者 難以理解飲食模式如何影響健康結果
05
05
行動 (Action)
行動 (Action)
營養目標只顯示整體進度，每種食物對限制值的影響並不清楚
使用者難以判斷哪些食物應該減少或保留
缺乏將數據轉化為下一步行動建議的提示
營養目標只顯示整體進度，每種食物對限制值的影響並不清楚
使用者難以判斷哪些食物應該減少或保留
缺乏將數據轉化為下一步行動建議的提示
連結反思與行動
連結反思與行動
雖然 MyFitnessPal 在 資料紀錄方面表現優秀，但在幫助使用者理解模式並採取行動方面仍存在明顯缺口。這也促使我們提出一個關鍵問題：
雖然 MyFitnessPal 在 資料紀錄方面表現優秀，但在幫助使用者理解模式並採取行動方面仍存在明顯缺口。這也促使我們提出一個關鍵問題：
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
01 其他營養追蹤 App 如何支援 Reflection 與 Action？
01 其他營養追蹤 App 如何支援 Reflection 與 Action？
我們分析了三個競品應用 Cronometer、Lose It! 與 MyNetDiary，以了解不同產品如何透過資料視覺化與回饋機制幫助使用者理解自己的飲食模式，並採取相應的行動。雖然沒有任何一個產品完全解決這個問題，但每個應用都提供了一些值得參考的設計。
我們分析了三個競品應用 Cronometer、Lose It! 與 MyNetDiary，以了解不同產品如何透過資料視覺化與回饋機制幫助使用者理解自己的飲食模式，並採取相應的行動。雖然沒有任何一個產品完全解決這個問題，但每個應用都提供了一些值得參考的設計。
Cronometer
Cronometer
優勢
優勢
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
提供清楚的營養進度回饋
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
提供清楚的營養進度回饋
Lose It!
Lose It!
優勢
優勢
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
MyNetDiary
MyNetDiary
優勢
優勢
Dashboard 提供具洞察力的資料視覺化
Dashboard 應提供具洞察力的視覺化
Dashboard 應提供具洞察力的視覺化
首頁應能讓使用者 一眼看出重要資訊，例如營養素分佈（macro breakdown）。
MyFitnessPal: 只顯示熱量數值，缺乏整合性的圖表視覺化
其他 app: 提供營養素分佈圖，但多數仍停留在單一指標的呈現，缺乏跨指標的關聯分析
首頁應能讓使用者 一眼看出重要資訊，例如營養素分佈（macro breakdown）。
MyFitnessPal: 只顯示熱量數值，缺乏整合性的圖表視覺化
其他 app: 提供營養素分佈圖，但多數仍停留在單一指標的呈現，缺乏跨指標的關聯分析
圖表與日期範圍應具備彈性
圖表與日期範圍應具備彈性
有效的反思需要不同時間尺度的資料比較。
Lose It!: 可在 Dashboard 直接切換每日 / 每週視角
Cronometer: 在每個圖表下方提供清楚的 日期範圍選單
有效的反思需要不同時間尺度的資料比較。
Lose It!: 可在 Dashboard 直接切換每日 / 每週視角
Cronometer: 在每個圖表下方提供清楚的 日期範圍選單
3. 營養進度回饋
3. 營養進度回饋
有效的回饋應幫助使用者理解 每個食物如何影響其營養目標。
MyFitnessPal:只重複顯示每日建議（例如 stay under 192.9g carbs），但 沒有顯示單一食物對目標的影響，使用者難以判斷應該調整什麼。
Cronometer: 會 將每種食物的營養素貢獻比例與目標比較，透過視覺化顯示不平衡之處，讓使用者更容易反思並採取具體行動。
有效的回饋應幫助使用者理解 每個食物如何影響其營養目標。
MyFitnessPal:只重複顯示每日建議（例如 stay under 192.9g carbs），但 沒有顯示單一食物對目標的影響，使用者難以判斷應該調整什麼。
Cronometer: 會 將每種食物的營養素貢獻比例與目標比較，透過視覺化顯示不平衡之處，讓使用者更容易反思並採取具體行動。
02 我們的設計洞察
02 我們的設計洞察
1
1
視覺化應提供洞察，而不只是數字
視覺化應提供洞察，而不只是數字
圖表應該揭示 資料之間的關係（例如飲食攝取與體重變化），而不是單純呈現原始數據。
圖表應該揭示 資料之間的關係（例如飲食攝取與體重變化），而不是單純呈現原始數據。
2
2
圖表的日期檢視需要彈性且直覺
圖表的日期檢視需要彈性且直覺
使用者應能 直接在圖表中切換每日、每週與每月視角，讓趨勢探索更加流暢。
使用者應能 直接在圖表中切換每日、每週與每月視角，讓趨勢探索更加流暢。
3
3
回饋機制應將數據轉化為行動
回饋機制應將數據轉化為行動
回饋不應只是通用的進度條，而應該：指出過量或不足的營養素、提供調整建議，並引導使用者採取 下一步行動
回饋不應只是通用的進度條，而應該：指出過量或不足的營養素、提供調整建議，並引導使用者採取 下一步行動
從研究發現到設計方案：連結反思與行動
從研究發現到設計方案：連結反思與行動
為了解決分析中發現的三個主要痛點，本次重新設計聚焦於兩個核心方向：儀表板與回饋機制。
儀表板重新設計：將原本以紀錄為主的操作導向，轉為 以洞察為核心的反思體驗，透過更清晰的資訊結構與資料視覺化，幫助使用者理解自己的飲食模式。
回饋機制重新設計：將原始的營養數據轉化為 可行動的回饋資訊，幫助使用者在日常飲食中做出更明確的調整。
為了解決分析中發現的三個主要痛點，本次重新設計聚焦於兩個核心方向：儀表板與回饋機制。
儀表板重新設計：將原本以紀錄為主的操作導向，轉為 以洞察為核心的反思體驗，透過更清晰的資訊結構與資料視覺化，幫助使用者理解自己的飲食模式。
回饋機制重新設計：將原始的營養數據轉化為 可行動的回饋資訊，幫助使用者在日常飲食中做出更明確的調整。
01 儀表板重構：從操作導向到洞察導向
01 儀表板重構：從操作導向到洞察導向
原本的 Dashboard 主要分為兩個區塊：
Today：用於記錄每日飲食
Discover：提供其他功能入口
原本的 Dashboard 主要分為兩個區塊：
Today：用於記錄每日飲食
Discover：提供其他功能入口
雖然操作流程清楚，但幾乎 沒有提供反思與洞察的空間。因此我重新設計資訊架構，加入新的 Insights 區塊。這個區塊與 Today 互補，透過資料視覺化幫助使用者：發現趨勢、辨識飲食模式、追蹤長期進展
雖然操作流程清楚，但幾乎 沒有提供反思與洞察的空間。因此我重新設計資訊架構，加入新的 Insights 區塊。這個區塊與 Today 互補，透過資料視覺化幫助使用者：發現趨勢、辨識飲食模式、追蹤長期進展
02 將洞見視覺化：設計有架構的洞見圖表，以支持反思
02 將洞見視覺化：設計有架構的洞見圖表，以支持反思
為了讓使用者能更自然地進行反思，我將 Insights 區塊設計為一條 自我檢視路徑，引導使用者回答四個問題：(1) 我今天吃太多了嗎？ (2) 我吃了哪些東西？ (3) 這是否影響了我的體重？ (4) 是否存在某種飲食模式？
為了讓使用者能更自然地進行反思，我將 Insights 區塊設計為一條 自我檢視路徑，引導使用者回答四個問題：(1) 我今天吃太多了嗎？ (2) 我吃了哪些東西？ (3) 這是否影響了我的體重？ (4) 是否存在某種飲食模式？
每個問題都搭配適合的圖表類型：
Bar chart：比較每日熱量攝取
Stacked bar chart：呈現營養素比例
Dual-line chart：顯示飲食與體重之間的關聯
Filled line chart：呈現飲食節奏與變化
這些圖表共同 將抽象的健康數據轉化為易於理解的日常習慣故事。
每個問題都搭配適合的圖表類型：
Bar chart：比較每日熱量攝取
Stacked bar chart：呈現營養素比例
Dual-line chart：顯示飲食與體重之間的關聯
Filled line chart：呈現飲食節奏與變化
這些圖表共同 將抽象的健康數據轉化為易於理解的日常習慣故事。
除了圖表類型之外，我也針對不同圖表設計了 適合的日期檢視範圍選項：
短期視角（7 天）：用於 Macro Balance 與 Meal Rhythm，幫助使用者觀察日常模式
長期視角（週 / 雙週）：用於 Calories vs. Goal 與 Calories & Weight，幫助使用者理解長期趨勢
這種彈性的時間尺度讓使用者能在不同層級上進行反思。
除了圖表類型之外，我也針對不同圖表設計了 適合的日期檢視範圍選項：
短期視角（7 天）：用於 Macro Balance 與 Meal Rhythm，幫助使用者觀察日常模式
長期視角（週 / 雙週）：用於 Calories vs. Goal 與 Calories & Weight，幫助使用者理解長期趨勢
這種彈性的時間尺度讓使用者能在不同層級上進行反思。
03 營養回饋機制重新設計：讓數據更具行動性
03 營養回饋機制重新設計：讓數據更具行動性
MyFitnessPal 原本會在營養素超出建議時提供提醒，但這些提示主要是文字訊息，缺乏清楚的視覺提示。使用者通常 知道發生了問題，但不清楚原因與調整方式。因此我重新設計了回饋系統：
使用 progress bars 顯示每種食物對營養目標的貢獻
強調接近上限的營養素；將低風險食物保持較低視覺權重
這讓使用者能 更直覺理解哪些食物需要調整，使回饋更加具體且可行動。
MyFitnessPal 原本會在營養素超出建議時提供提醒，但這些提示主要是文字訊息，缺乏清楚的視覺提示。使用者通常 知道發生了問題，但不清楚原因與調整方式。因此我重新設計了回饋系統：
使用 progress bars 顯示每種食物對營養目標的貢獻
強調接近上限的營養素；將低風險食物保持較低視覺權重
這讓使用者能 更直覺理解哪些食物需要調整，使回饋更加具體且可行動。
透過這些重新設計，系統成功連結 Reflection 與 Action。使用者不只是在記錄飲食，而是能理解自己的飲食模式、發現健康趨勢，並根據數據做出具體調整，讓健康追蹤從單純的資料紀錄，轉變為支持行為改變的工具。
透過這些重新設計，系統成功連結 Reflection 與 Action。使用者不只是在記錄飲食，而是能理解自己的飲食模式、發現健康趨勢，並根據數據做出具體調整，讓健康追蹤從單純的資料紀錄，轉變為支持行為改變的工具。
專案細節
01 App 功能概覽
MyFitnessPal 是目前最廣泛使用的營養追蹤應用之一，以龐大的食物資料庫、條碼掃描功能，以及熱量與營養素（macro）追蹤而聞名。它同時也能與多種健身裝置與運動應用整合，讓使用者能將飲食、運動與體重管理整合在同一個系統中追蹤與管理。
02 我們的使用者視角
在本專案中，我們以 忙碌的研究生作為使用者情境來評估 MyFitnessPal，我們對營養學的知識有限，但有明確的健康目標，例如：
透過 均衡飲食與規律活動管理體重
提升對 飲食習慣的覺察
在不增加過多心理負擔的情況下，建立 可持續的紀錄習慣
經過 四週的每日使用後，我們觀察到應用中有些部分表現良好，而有些部分則明顯不足。
03 依據 Stage-Based Model 的評估
透過 Stage-Based Model of Personal Informatics Systems 的分析，我們發現 MyFitnessPal 在 早期三個階段表現良好：Preparation（準備）、Collection（資料蒐集）、Integration（資料整合），但在 Reflection（反思）與 Action（行動）階段的支援相對不足。然而這兩個階段正是使用者需要理解數據並調整行為的關鍵。
表現良好的部分
01
準備 (Preparation)
快速 onboarding 與預設目標設定降低使用門檻
通知提醒鼓勵紀錄，但不會過度干擾
02
資料搜集 (Collection)
大型食物資料庫 + 條碼掃描讓搜尋快速且可靠
快捷功能（Copy Previous Meal / My Meals）減少重複輸入
手勢操作讓紀錄流程更流暢
03
資料整合 (Integration)
自動計算 熱量與營養素總量，並提供週／月統計
清楚區分目標、飲食與運動對整體數據的影響
使用體驗出現斷點的地方
04
反思 (Reflection)
首頁除了基本數字外，缺乏具有洞察力的視覺化
沒有能連結不同指標（例如飲食攝取與體重變化）的圖表
使用者 難以理解飲食模式如何影響健康結果
05
行動 (Action)
營養目標只顯示整體進度，每種食物對限制值的影響並不清楚
使用者難以判斷哪些食物應該減少或保留
缺乏將數據轉化為下一步行動建議的提示
連結反思與行動
雖然 MyFitnessPal 在 資料紀錄方面表現優秀，但在幫助使用者理解模式並採取行動方面仍存在明顯缺口。這也促使我們提出一個關鍵問題：
如何重新設計資料視覺化與回饋機制，讓營養追蹤能更有效地支持反思與行動？
01 其他營養追蹤 App 如何支援 Reflection 與 Action？
我們分析了三個競品應用 Cronometer、Lose It! 與 MyNetDiary，以了解不同產品如何透過資料視覺化與回饋機制幫助使用者理解自己的飲食模式，並採取相應的行動。雖然沒有任何一個產品完全解決這個問題，但每個應用都提供了一些值得參考的設計。
Cronometer
優勢
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
提供清楚的營養進度回饋
Lose It!
優勢
Dashboard 提供具洞察力的資料視覺化
圖表支援彈性的日期範圍檢視
MyNetDiary
優勢
Dashboard 提供具洞察力的資料視覺化
Dashboard 應提供具洞察力的視覺化
首頁應能讓使用者 一眼看出重要資訊，例如營養素分佈（macro breakdown）。
MyFitnessPal: 只顯示熱量數值，缺乏整合性的圖表視覺化
其他 app: 提供營養素分佈圖，但多數仍停留在單一指標的呈現，缺乏跨指標的關聯分析
圖表與日期範圍應具備彈性
有效的反思需要不同時間尺度的資料比較。
Lose It!: 可在 Dashboard 直接切換每日 / 每週視角
Cronometer: 在每個圖表下方提供清楚的 日期範圍選單
3. 營養進度回饋
有效的回饋應幫助使用者理解 每個食物如何影響其營養目標。
MyFitnessPal:只重複顯示每日建議（例如 stay under 192.9g carbs），但 沒有顯示單一食物對目標的影響，使用者難以判斷應該調整什麼。
Cronometer: 會 將每種食物的營養素貢獻比例與目標比較，透過視覺化顯示不平衡之處，讓使用者更容易反思並採取具體行動。
02 我們的設計洞察
1
視覺化應提供洞察，而不只是數字
圖表應該揭示 資料之間的關係（例如飲食攝取與體重變化），而不是單純呈現原始數據。
2
圖表的日期檢視需要彈性且直覺
使用者應能 直接在圖表中切換每日、每週與每月視角，讓趨勢探索更加流暢。
3
回饋機制應將數據轉化為行動
回饋不應只是通用的進度條，而應該：指出過量或不足的營養素、提供調整建議，並引導使用者採取 下一步行動
從研究發現到設計方案：連結反思與行動
為了解決分析中發現的三個主要痛點，本次重新設計聚焦於兩個核心方向：儀表板與回饋機制。
儀表板重新設計：將原本以紀錄為主的操作導向，轉為 以洞察為核心的反思體驗，透過更清晰的資訊結構與資料視覺化，幫助使用者理解自己的飲食模式。
回饋機制重新設計：將原始的營養數據轉化為 可行動的回饋資訊，幫助使用者在日常飲食中做出更明確的調整。
01 儀表板重構：從操作導向到洞察導向
原本的 Dashboard 主要分為兩個區塊：
Today：用於記錄每日飲食
Discover：提供其他功能入口
雖然操作流程清楚，但幾乎 沒有提供反思與洞察的空間。因此我重新設計資訊架構，加入新的 Insights 區塊。這個區塊與 Today 互補，透過資料視覺化幫助使用者：發現趨勢、辨識飲食模式、追蹤長期進展
02 將洞見視覺化：設計有架構的洞見圖表，以支持反思
為了讓使用者能更自然地進行反思，我將 Insights 區塊設計為一條 自我檢視路徑，引導使用者回答四個問題：(1) 我今天吃太多了嗎？ (2) 我吃了哪些東西？ (3) 這是否影響了我的體重？ (4) 是否存在某種飲食模式？
每個問題都搭配適合的圖表類型：
Bar chart：比較每日熱量攝取
Stacked bar chart：呈現營養素比例
Dual-line chart：顯示飲食與體重之間的關聯
Filled line chart：呈現飲食節奏與變化
這些圖表共同 將抽象的健康數據轉化為易於理解的日常習慣故事。
除了圖表類型之外，我也針對不同圖表設計了 適合的日期檢視範圍選項：
短期視角（7 天）：用於 Macro Balance 與 Meal Rhythm，幫助使用者觀察日常模式
長期視角（週 / 雙週）：用於 Calories vs. Goal 與 Calories & Weight，幫助使用者理解長期趨勢
這種彈性的時間尺度讓使用者能在不同層級上進行反思。
03 營養回饋機制重新設計：讓數據更具行動性
MyFitnessPal 原本會在營養素超出建議時提供提醒，但這些提示主要是文字訊息，缺乏清楚的視覺提示。使用者通常 知道發生了問題，但不清楚原因與調整方式。因此我重新設計了回饋系統：
使用 progress bars 顯示每種食物對營養目標的貢獻
強調接近上限的營養素；將低風險食物保持較低視覺權重
這讓使用者能 更直覺理解哪些食物需要調整，使回饋更加具體且可行動。
透過這些重新設計，系統成功連結 Reflection 與 Action。使用者不只是在記錄飲食，而是能理解自己的飲食模式、發現健康趨勢，並根據數據做出具體調整，讓健康追蹤從單純的資料紀錄，轉變為支持行為改變的工具。
Reflection
Reflection
Reflection
這個專案不只是一次健康追蹤介面的重新設計，也讓我更深入理解 資料、行為與視覺化之間如何共同影響使用者的反思與決策。透過這個過程，我學會在設計時同時兼顧研究證據與使用者同理心，做出更有依據的設計選擇。
這個專案不只是一次健康追蹤介面的重新設計，也讓我更深入理解 資料、行為與視覺化之間如何共同影響使用者的反思與決策。透過這個過程，我學會在設計時同時兼顧研究證據與使用者同理心，做出更有依據的設計選擇。
這個專案不只是一次健康追蹤介面的重新設計，也讓我更深入理解 資料、行為與視覺化之間如何共同影響使用者的反思與決策。透過這個過程，我學會在設計時同時兼顧研究證據與使用者同理心，做出更有依據的設計選擇。
1
1
1
以行為模型作為設計基礎
以行為模型作為設計基礎
以行為模型作為設計基礎
使用 Stage-Based Assessment Framework，讓我不再只停留在表層的 UI 評估，而是從行為改變的角度分析每個功能如何支持使用者從覺察到行動的過程。這個框架也 讓每一個重新設計的決策都變得更有結構與目的性。
使用 Stage-Based Assessment Framework，讓我不再只停留在表層的 UI 評估，而是從行為改變的角度分析每個功能如何支持使用者從覺察到行動的過程。這個框架也 讓每一個重新設計的決策都變得更有結構與目的性。
使用 Stage-Based Assessment Framework，讓我不再只停留在表層的 UI 評估，而是從行為改變的角度分析每個功能如何支持使用者從覺察到行動的過程。這個框架也 讓每一個重新設計的決策都變得更有結構與目的性。
2
2
2
在情境與目的中設計資料視覺化
在情境與目的中設計資料視覺化
在情境與目的中設計資料視覺化
藉由這次專案，我了解到了好的資料視覺化應該從 清楚的設計目的開始。每一個圖表都應該講述一個清晰的故事，並與其使用情境相符，包含 資料本身、反思目標，以及行動裝置的呈現方式。在 資訊完整度與介面簡潔度之間取得平衡，也讓我學會如何讓視覺洞察既有意義又容易理解。
藉由這次專案，我了解到了好的資料視覺化應該從 清楚的設計目的開始。每一個圖表都應該講述一個清晰的故事，並與其使用情境相符，包含 資料本身、反思目標，以及行動裝置的呈現方式。在 資訊完整度與介面簡潔度之間取得平衡，也讓我學會如何讓視覺洞察既有意義又容易理解。
藉由這次專案，我了解到了好的資料視覺化應該從 清楚的設計目的開始。每一個圖表都應該講述一個清晰的故事，並與其使用情境相符，包含 資料本身、反思目標，以及行動裝置的呈現方式。在 資訊完整度與介面簡潔度之間取得平衡，也讓我學會如何讓視覺洞察既有意義又容易理解。
3
3
3
透過設計連結反思與行動
透過設計連結反思與行動
透過設計連結反思與行動
這個專案讓我意識到，反思本身並不足以改變行為，使用者還需要清楚的提示來知道下一步該怎麼做。透過設計 Insights 與 Feedback 兩個功能，我更清楚看到 資訊設計如何連結使用者的覺察與日常行動，讓健康追蹤不只是紀錄資料，而是真正支持行為改變。
這個專案讓我意識到，反思本身並不足以改變行為，使用者還需要清楚的提示來知道下一步該怎麼做。透過設計 Insights 與 Feedback 兩個功能，我更清楚看到 資訊設計如何連結使用者的覺察與日常行動，讓健康追蹤不只是紀錄資料，而是真正支持行為改變。
這個專案讓我意識到，反思本身並不足以改變行為，使用者還需要清楚的提示來知道下一步該怎麼做。透過設計 Insights 與 Feedback 兩個功能，我更清楚看到 資訊設計如何連結使用者的覺察與日常行動，讓健康追蹤不只是紀錄資料，而是真正支持行為改變。
其他專案
其他專案
其他專案
其他專案