UI/UX ✹ B2C ✹ iOS/Andriod App

BSKINI App

尋找企業 AI 技術發展及顧客需求的商業交集，透過市場分析、Lo-Fi Wireframe 及流程圖，以 Scrum 方式快速設計開發 AI 飲食紀錄 App。

專案背景

尋味股份有限公司致力於提供健康飲食服務，結合營養師的專業資訊，提供健康餐飲推薦的數位服務。在 2019 年，AI 技術資源加入之後，轉向發展 AI 影像輔助飲食紀錄服務。

目標用戶族群：25 ～ 45 歲的上班族，他們重視健康及體態的管理，但時間有限。
我們將透過飲食紀錄 App 幫助他們管理飲食習慣，提升健康意識，更有效率的達成體重管理目標。

專案目標

設計一款簡單、高效的飲食管理 App。

我的角色

與 PM 合作，搜集市場資訊與分析，確認產品策略；依照顧客需求規劃使用流程、進行介面設計。

  • UX research
  • User Flow
  • Wireframe
  • UI Design
成果與影響

3 個月高效設計研發

與 PM、研發團隊合作，透過快速繪製使用流程圖及 Lo-Fi Wireframe，並以 Scrum 方式進行開發，減少溝通成本與資訊落差，從產品功能定義到設計研發順利在 3 個月內完成。

建立設計元件庫，多平台設計快速完成

設計提案後，針對視覺風格建立元件庫，先依據功能與流程完成 iOS 系統完整 Mockup 後交付研發團隊進行開發；並於研發期間快速延伸完成 Android 系統設計稿。

困難與挑戰
  • 在公司的目標「發展 AI 影像辨識營養分析技術」前提下，如何找到合適的產品策略，既能符合市場使用者需求同時滿足技術發展的資源擴充？
  • 市場上飲食紀錄與管理相關產品林立，許多軟體更搭配有多元的服務，如運動管理結合的MyFitnessPal、配有真人營養師諮詢服務的 Cofit 等，如何找到合適的市場價值切入？
  • 在 AI 影像辨識紀錄尚未達到優異的表現之前，如何維持使用者良好的飲食紀錄體驗？
設計過程
#1 顧客研究
  • 二手資料研究： 透過網絡資料分析，了解上班族的飲食控管需求。
  • 親自體驗： 團隊中 3 位成員以上班族身份實際參與市售體重管理服務，如營養師的飲食計劃服務、健身房減重計畫等； 並於每日站立會議中，快速分享個人心得或遇到的困難。
#2 用戶痛點與需求分析
  • 建立個人資料過程繁瑣：
  • 體重管理重要數據包含：使用者性別、年齡、身高、體重、活動量等。在個人資料建立過程，經常會因為數據的類型不同而更換鍵盤，在不同資料欄位切換時，上下開合的鍵盤讓人煩躁。
  • 紀錄過程繁瑣：
  • 市面大型產品（如：My Fitness Pal、Fat Secret）多為外國開發，資料庫中的營養資訊為外國品牌及食品；台灣地區常見的早餐店、超商、便當店的飲食幾乎都不在資料庫中，紀錄時往往需要自行將內容拆分，逐一搜尋、更改份量並記錄。
  • 為避免遺漏紀錄內容，專業營養師都建議紀錄時拍照；但紀錄過程中附上照片會讓操作過程更冗長，實際營養資訊仍然需要手動紀錄。
  • 目標遠大容易使人放棄：
  • 健康的體重管理經常需要 1 ~ 6 個月來達成目標，如果沒有強烈的動機（如：拍婚紗）、短期內沒有成果，使用者容易萌生放棄的念頭。
  • 成功減重後仍須持之以恆的控管飲食，但長期維持經常是對人性的挑戰。
#3 產品策略

成為擁有最大台灣菜餚資料庫的服務提供者

  • 分析並建立台灣地區常見菜餚的營養資料庫。第一階段以上班族密度高的內湖區為目標，收集該區的店家菜單、菜餚影像，由營養師分析並建立專屬資料庫。
  • 透過政府資料串接，建立台灣地區餐連鎖飲業的餐飲營養資訊。
  • 建立一套食品份量計算公式，透過 AI 影像辨識技術提供照片快速紀錄功能。
#4 設計決策

基本資訊與目標

  • 將基本資料分群，透過一致的操作方式降低加速資料建立。
  • 設計「自訂計畫分段」功能，把大目標切成小階段更容易達成。
  • 提供減重前後的實際對比說明，激勵使用者。
▲ 繁雜的基本資料設定中，減少各式鍵盤上下開合的使用方式。

拍照即紀錄、並透過 Pop up 簡化紀錄過程

  • 提供 AI 影像辨識紀錄，減少多次點擊的操作，簡化紀錄流程。
  • 在 AI 影像辨識紀錄中，以 Pop up 方式提供相似品項的選單，讓使用者可以快速更改、建立紀錄。
▲ 在一定的辨識率範圍內，利用 Pop up 的方式顯示相似的辨識結果，使用戶能快速替換內容。

手動建立飲食紀錄時，利用 Tab 減少來回搜尋流程

  • Tab 的頁面架構讓使用者能在資料庫內的各種分類中快速進行切換，包含：關鍵字搜尋、品牌類別、自行新增和歷史記錄。

清晰的紀錄首頁，協助快速掌握飲食狀態

  • 直覺易懂的圖像化資訊，同時顯示個人飲食狀態和目標的關係，讓使用者在選擇餐飲時有明確的參考方向。
  • 一天中不同的時間用餐會影響人體的吸收卡路里量，因此在首頁我們規劃以不同時間區段來紀錄飲食的入口。
▲ 碳水、蛋白質、脂肪及水攝取量的百分比圖，協助使用者快速掌握當前飲食狀態，輕鬆調整餐點選項。

階段性成果展示，鼓勵使用者持續努力

  • 個人報告頁面顯示與個人有關的卡路里攝取量和體重變化。同時，用戶還能夠查看個人基本資料、倒數計時器和減肥目標計劃。
  • 以周、月、季的時間作為劃分，讓使用者可以快速了解每個時段區間的記錄狀態與身體變化。
  • 分階段的減肥目標計劃可以增加成就感，並使數據變化更加明顯。讓使用者更有信心實現他們的目標。

在計畫截止時提供重新計畫與維持的方案，協助目標達成

  • 完成計劃時，我們提供維持體重功能與建立新的減重計劃兩種方式，讓用戶能夠持續堅持飲食控制。
  • 如果未達到減重目標，則可以重置新的減重計劃。
設計文件

User Flow & Lo-Fi Wireframe

站在巨人的肩膀上，透過優化市場既有產品的流程、wireframe 的剪貼與繪製，短時間內將產品概念可視化。在白板上張貼並與工程團隊展開溝通，確保開發團隊成員認知一致。

▲ 透過既有 App 畫面剪貼、融入個人 idea 快速繪製 Wireframe
▲ 透過表格搭配 Wireframe，標註頁面功能、欄位相關資訊

Design System & Guidelines