top of page
hb_bg-1.png
​我的飲食小幫手
UI-cover-6.png
Overview

HealthBuy是一款健康飲食管理App,用戶可以「掃描」、「搜尋」食品資料庫找到該食品的營養素和成分來判斷要不要吃,以及吃多少份量才能不超過每日攝取,達到健康、瘦身的需求。

​類別

健康/飲食相關

​團隊

UI/UX Designer

Product Manger

Back-end Engineers

Android Engineers

iOS Engineers

工具

Sketch

Marvel

Photoshop

Illustrator

After Effect

Jira

Goal

對於自創料理或是在資料庫內沒找到品項的用戶們,需要有一個可以自行新增飲食資料的功能,幫助記錄每日飲食。

想解決新用戶在操作上的使用引導。我將每一個操作步驟設計成簡單的動畫,一步步告訴用戶怎麼操作App,幫助用戶更快上手。

用戶不清楚持續記錄可幫助飲食控制成功,

這項功能可以檢視每日每餐的攝取比較,並根據熱量以及七大營養素去做各品項的比較。

用戶反應到,在超商掃鮮食食品條碼時會找不到資料,由於同一食品的廠商有很多家,所以條碼會不一樣,所以我們有設計一個提示給用戶知道。

Process

立即掃描搜尋、即時辨別反饋的飲食記錄App

User Research

用戶輪廓

這次的訪談與問卷主要是理解用戶的「三餐飲食習慣」、「飲食控制經驗」、「App使用概況」這三個方向,60份問卷,女性用戶佔71% ,男性用戶佔29%,使用者分成三類:新用戶、使用中、流失用戶。我們希望在產品開發到一個階段後,從用戶調查中發現下一階段可以優化的方向。
 

三餐的飲食習慣

關於飲食控制

App使用慨況

Pain Points

用戶在執行飲食控制時,會查詢食品內容,同時也會把吃過的食物記錄下來,但是在找不資料的時候,就無法有效記錄,也看不到自己吃過的品項。

剛進來我們App的用戶不清楚怎麼操作,為此我們將做一個明確的使用引導,幫助用戶更快上手。

記錄飲食能夠提高控制飲食的意識,查看實際上吃了什麼,以及食品帶來哪些影響,但是整體使用下來,用戶無法感受到記錄帶來實際的成效與反饋。

用戶反應到,在超商掃食品條碼時會找不到資料,由於熟食是由多家不同廠商製造的,條碼會有所變動,我們也將這反饋列入優化項目裡。

Persona

經由訪談和問卷裡發現,找出Persona的分類,在訪談後我們分了以下三類的人物誌
1.已培養出自己的飲食作息且態度積極的用戶、
2.已培養出自己的飲食作息且態度隨性的用戶、
3.未培養出自己的飲食作息被動執行的用戶

其中探討到對飲食控制的習慣在於目標明確程度、相關知識的累積、意志力程度、飲食控制作息穩定程度,由於用戶裡大部分的人對飲食控制還是不太清楚,我們目標以第一個人物原型為主做為下一階段開發的原則。

 Discover User Task 

在完成問卷分析後,我們從中分類出三種人物原型,其中以芷晴為原型,屬於意志力不高,對於飲食控制沒有概念,且難以持續進行飲食控制的用戶。

 

經由用戶分析的結果,我們洞察到用戶碰到的困難,分別為這五種方向:

「制定個人化減重計畫」、「系統性學習飲食營養知識」、「想吃/想買某想食品」、「吃某項食品,確認執行成果」、「定期追蹤目標進度」。每一個分類都有一個使用者故事描述當作範例。我們就以芷晴為用戶原型,依據這五大項做分別的腦力激盪,思考更多可能的情境,再將這些點子統整完做收斂,這將會是我們做下一步優化的依據。

User Journey Map

App Information Architecture

App Flow

Optimization

建立手動新增食品

​痛點

用戶在執行飲食控制時,會查詢食品內容,同時也會把吃過的食物記錄下來,但是在找不資料的時候,就無法有效記錄,也看不到自己吃過的品項。

目的

找不到想要記錄的食品/熟食資料時,自己可以手動建資並完成當日記錄。

方法

我們會建立一個空白的食品資訊輸入頁面,再根據不同路徑找食品資料時,會連結到自訂新增食品資料,並引導用戶完建立自己的資料庫。

新增自訂食品頁面

  • 設計空白手動輸入頁面

  • 預設好文字給用戶,讓他們知道該怎麼填寫。

  • ​若是輸入的數值不在範圍內,會有紅色的提醒文字

​健康日記頁面的優化

  • 增加一顆增加記錄的按鈕

  • ​點下按鈕有三個方法新增記錄:掃描、搜尋、自訂

增加「自訂食品」在檢視食品列表裡

在原本的檢視列表裡

  • 多加一項「自訂食品」tab

  • 勾選任何想刪除的選項,會出現垃圾桶就可以執行刪除

​流程設計
以掃描為例
檢視每日營養分析

​痛點

用戶無法感受到記錄帶來實際的成效與反饋。

目的

讓用戶可以快速審視當日每餐、每個品項的熱量與營養素的比較,從中就可以發現一天下來,是哪一部分讓自己攝取過量,或是攝取太少而導致營養不均。

方法

這個新功能是設計在健康日記裡面。根據用戶每日每餐到每個品項做熱量與營養素分析,條列式的呈現,顯示出排序、份量與百分比供用戶參考。

新增使用指南介紹

痛點

剛進來我們App的用戶不清楚怎麼操作,缺乏一個明確的使用引導幫助用戶更快上手。

目的

幫助新用戶可以快速上手使用,區分六個項目搭配文字敘述,一一介紹功能怎麼使用。簡單動畫呈現,更好理解。

方法

區分六種功能說明,每一塊都有動態圖示和文字說明,用簡化的介面設計去描述操作流程,讓用戶可以在短時間內學到怎麼使用我們設計的功能。

​1 每日熱量目標

輸入你理想的飲食計畫、食物過敏原、與身體狀態,輕鬆了解每日所需的營養!

2 食品掃描搜尋

包裝食品掃一掃、熟食料理搜一搜,快速又省時

3 飲食紅綠燈

努力忌口,卻不確定自己吃進了什麼?
即時又直覺的紅綠燈說明,幫你辨別飲食資訊,讓你知道「吃進的食物」= 多少「每日建議攝取量」占比

​4 新增飲食記錄

透過掃描 / 搜尋,找到想記錄的食物
點選攝取量、設定你的食用量
點選「+」;三步驟輕鬆完成飲食記錄

5 回顧健康日記

每天回顧健康日記,了解你的飲食偏好、追蹤營養攝取的目標,協助你調整飲食習慣!

6 營養與分析

「食物、熱量、營養」的關聯,你都清楚嗎?

哪餐熱量吃的多、哪些食物適量碰,「每日營養分析」,解密你飲食紀錄背後的秘密!

解決查找超商鮮食

痛點

用戶反應到,在超商掃食品條碼時會找不到資料,由於熟食是由多家不同廠商製造的,條碼會有所變動,我們也將這反饋列入優化項目裡。

​目的

用戶會以為掃描可以找到便利店的熟食,但是條碼是變動,要用搜尋才可以找得到。

方法

在搜尋畫面上出現一排字提醒用戶,若是要找超商熟食品需在「搜尋」裡打入關鍵字才能找到。

新增提醒文字

  • ​​在掃描頁面裡,出現「超商食品」要用搜尋的提醒文字

  • ​在搜尋列裡即可找到超商食品的結果

Feedback

產品現況

根據用戶研究,我們仍然還有一些未來的計劃想要執行,希望做到「強化個人化」、「新增科普知識」、「規劃如何系統化的學習」等等。我們也思考了各式新的商業模式開發,做新的嘗試,由於有時間限制我們很難看到較完整的後續發酵。

我們還做了以下優化項目,讓整個產品的功能更完整,體驗更流暢:

  • 食品單位調整

  • 刪除帳戶申請的流程

  • 份量調節器上下限單位調整

  • 演算法優化搜尋結果排序

學習經驗

  • 理解到整個產品的運作與跨部門的合作是需要全面性的溝通與思考,並使用有效率的方法解決。

  • 比起以往更能夠感受到身為設計師要如何幫助團隊在體驗、品牌形象上提出適切的方法,用自身的專業出發點提出觀點。

  • 需要有明確的分工合作,才能在期限內達到彼此有共識的目標。

  • 團隊不大但這次的合作更有明確的計畫與準則,我認為要讓專案成功是不可或缺的。

feedback-1.webp
feedback-2.webp
feedback-3.webp

© 2025 by JANINA KAO

bottom of page