IG EatKeep · UX Design Case Study · 2024

收藏了，
然後呢？

Background 背景

Instagram 不僅是日常分享平台，也成為商家與創作者宣傳美食、旅遊的重要渠道。Reels 崛起後，用戶更常透過影片儲存餐廳與景點資訊，把「收藏」當作靈感清單。

Problem 問題

許多 IG 用戶把 Reels 收藏作為吃飯、旅行的靈感參考，但真的想回頭查找時，卻發現收藏清單藏得太深、分類受限、無法搜尋，只能一條條滑過，十分耗時。

Goal 目標

設計一套優化的「收藏管理」系統，包含多層級分類、篩選、快速連結地圖、搜尋等功能，讓用戶能快速且有條理地管理已儲存的影片，把靈感轉化為行動。

😮‍💨

光是「找收藏」就要 4 步以上

從 IG 主頁進入收藏頁面需要點擊 4 次以上，找到目標影片後還得切換 Google Maps、複製店名、來回確認。對於想快速比對的使用者，這樣的流程非常不順手。這樣的痛點，促使我思考是否能設計一個工具——讓收藏不只是存檔，而是能被轉化為實際行動的行程規劃器。

目前的 IG 收藏調用流程（痛點圖解）

進到個人首頁

→

點 Menu 後點選收藏

→

選擇分類清單

→

從縮圖選擇目標影片

⚠ 只能靠記憶

→

從資訊欄中找到店名

⚠ 無法複製文字

→

切到 Google Maps 搜尋

⚠ 來回切換

→

找到店家，開始尋路

步驟 4–7 可能反覆多次

研究初步假設

💡

大多數使用者會觀看 IG Reels 作為旅遊或嘗試新店面的靈感，但通常要嘛不整理，要嘛在收藏整理上相當費時費工。

🔄

缺乏跨工具整合——使用者需要在 IG、Google Maps、通訊軟體、筆記軟體間來回切換，流程斷裂。

🎯

使用者期待更輕量、有行動導向的收藏體驗，能篩選理想條件的景點或店家、甚至自動連結地點。

★

使用者旅程

User Journey Map

Emily 從發現餐廳到最終決定造訪的完整旅程，標記情緒起伏與關鍵痛點（hover 痛點按鈕查看細節）。

發現

調用

查找

決定與分享

行動

在 Instagram 上瀏覽 Reels，看到推薦的餐廳或景點內容

收藏 Reel
點箱收藏鈕並選擇想要收藏的所屬資料夾分類

查看縮圖選擇感興趣的收藏項目，通過觀看影片了解餐廳特色，最後點擊「更多」獲取詳細資訊。

記下餐廳名稱，轉到 Google 地圖搜尋店家，並多次重複打開「更多」比對資訊。

與朋友討論去吃飯或是出去玩時，可以直接將該影片傳給對方

想法

「這個餐廳看起來好像很好吃的樣子，有機會想去看看」

「讓我看看，這個應該是屬於台南的餐廳...」

⚠ 痛點

當收藏種類繁多時，每次收藏都需要尋找對應的收藏夾，導致收藏程序變得繁瑣且耗時。

收藏的內容過於繁雜，要一個個翻資訊欄，難以快速找到特定資訊

⚠ 痛點

A. IG 原生收藏只能設置一層分類，針對不同地點的收藏無法做進一步的細分

B. 缺乏針對收藏內容的搜尋功能，難以尋找特定資訊

因為重複的動作而感到煩躁，覺得過程相當繁瑣且低效

⚠ 痛點

A. 無法快速一次性瀏覽與比對收藏中的店家詳細資訊（如地址、營業時間等）

B. 因為要另外打字輸入再切換到地圖而覺得不便

因為分享自己想去的地點的關係有滿足感，但可能因為無法快速決定想要的內容而感到有壓力

情緒

😊

🙂

😐

😠

🙁

發現1 / 5

行動

在 Instagram 上瀏覽 Reels，看到推薦的餐廳或景點內容

想法

「這個餐廳看起來好像很好吃的樣子，有機會想去看看」

情緒

😊

收藏 ⚠2 / 5

行動

收藏 Reel — 點箱收藏鈕並選擇想要收藏的所屬資料夾分類

想法

「讓我看看，這個應該是屬於台南的餐廳...」

痛點

當收藏種類繁多時，每次收藏都需要尋找對應的收藏夾，導致收藏程序變得繁瑣且耗時。

情緒

🙂

調用 ⚠3 / 5

行動

查看縮圖選擇感興趣的收藏項目，通過觀看影片了解餐廳特色，最後點擊「更多」獲取詳細資訊。

想法

收藏的內容過於繁雜，要一個個翻資訊欄，難以快速找到特定資訊

痛點

A. IG 原生收藏只能設置一層分類，針對不同地點的收藏無法做進一步的細分

B. 缺乏針對收藏內容的搜尋功能，難以尋找特定資訊

情緒

😐

查找 ⚠4 / 5

行動

記下餐廳名稱，轉到 Google 地圖搜尋店家，並多次重複打開「更多」比對資訊。

想法

因為重複的動作而感到煩躁，覺得過程相當繁瑣且低效

痛點

A. 無法快速一次性瀏覽與比對收藏中的店家詳細資訊（如地址、營業時間等）

B. 因為要另外打字輸入再切換到地圖而覺得不便

情緒

😠

決定與分享5 / 5

行動

與朋友討論去吃飯或是出去玩時，可以直接將該影片傳給對方

想法

因為分享自己想去的地點的關係有滿足感，但可能因為無法快速決定想要的內容而感到有壓力

情緒

🙁

發現 · 1 / 5

01 / How Might We

問題定義

從使用者研究提煉出的核心設計挑戰，圍繞「搜尋效率」「智能管理」「愉快體驗」三大方向展開。

↳ 根據問卷與訪談的痛點結果，HMW 是將研究發現轉化為設計問題的橋樑，為後續 User Flow 提供問題框架。

痛點 01 · 收藏過多難整理

HMW 幫助用戶快速篩選和定位 IG 收藏中的餐廳和景點？

痛點 02 · 手動操作繁瑣

HMW 自動提取並補充收藏資訊，讓用戶省去手動查詢的麻煩？

需求 · 直觀展示

HMW 提供更直觀的收藏展示方式，讓用戶輕鬆比較和選擇？

需求 · 無縫整合

HMW 為用戶提供簡單的收藏導出功能，無縫對接其他應用？

訪談洞察 · 分享需求

HMW 幫助用戶高效整理並快速分享收藏內容？

訪談洞察 · 操作簡化

HMW 減少用戶在收藏管理中所需的操作步驟，降低學習成本？

02–03 / User Flow × Function Flow

使用流程 × 功能流程

左欄為使用者視角的操作路徑（User Flow），右欄為對應的系統技術流程（Function Flow）。選擇同一階段的 Tab 可對照兩個視角。點圓點可展開細節。

↳ 承接 HMW 定義的設計方向，User Flow 描繪用戶如何完成任務，Function Flow 則說明系統如何支援，兩者合力驗證解法可行性。

選擇階段，左右對照

🚀 啟動 / 註冊登入

📥 匯入與整理

🔍 調用收藏

User Flow · 使用者視角

觀看介紹起點

進入 App 後顯示 3 頁介紹說明產品功能與價值主張。

讓用戶了解產品價值，提升轉換意願

確認隱私權政策判斷

顯示使用條款與隱私權政策。

✅ 同意 → 繼續❌ 不同意 → 無法註冊

合規需求，建立用戶信任感

選擇註冊方式分支

📱 手機號碼 → 簡訊驗證G Google 登入f Facebook

降低門檻，支援多種登入方式

閱讀並確認條款確認

驗證成功後再次確認條款，完成後跳轉至首頁。

確保用戶了解資料使用方式

登入成功 → 首頁終點

完成驗證，跳轉至主畫面（卡片清單列表）。

進入登入畫面起點

📱 手機號碼 + 密碼G Googlef Facebook

已有帳號可快速進入，減少摩擦

忘記密碼？選填

📱 簡訊驗證重設📧 Email 驗證重設

避免用戶因忘記密碼流失

登入成功 → 首頁終點

驗證通過後跳轉至收藏清單首頁。

連動 IG 帳號起點

授權串接 IG，選擇要匯入的收藏夾（可複選）。

授權後才能存取 IG 收藏資料

選擇要匯入的影片分支

🆕 初次 → 全選所有影片🔄 非初次 → 僅選新增影片✋ 手動選擇

讓用戶選擇性匯入，保有控制感

確認並轉換為卡片轉化

系統批次辨別影片資訊，轉換為結構化卡片資料。

✅ 正確 → 確認建立✏️ 有誤 → 手動編輯

確認資訊正確後再建檔，減少錯誤

進行分類判斷

🤖 接受 AI 自動分類 → 確認/回報🖐 手動分類 / 設為待分類

初次使用即建立個人化分類習慣

完成整理終點

確認分類結果，卡片正式建立，跳轉收藏總覽。

進入收藏列表起點

從首頁進入卡片清單視圖，預設顯示全部收藏。

提供多種入口，適應不同使用情境

搜尋或篩選分支

🔍 輸入關鍵字 → 即時搜尋🔽 篩選條件 → 顯示結果📋 直接瀏覽

關鍵功能：解決找不到目標的核心痛點

瀏覽感興趣的店家互動

點選卡片查看詳情（名稱可複製）、價格、連結地圖。

卡片設計讓用戶快速比較多個選項

確認是否前往判斷

🗺️ 是 → 跳轉 Google Maps↩️ 否 → 返回列表

降低決策壓力，明確下一步行動

出發 + 完成標記終點

分享地點給朋友後出發，完成後勾選卡片 → 【已去過】。

Function Flow · 系統視角

啟動應用起點

首次啟動顯示 3 頁 APP 功能介紹。

判斷新舊用戶，進入不同流程分支

是否已有帳號？判斷

無帳號 → 進入註冊流程有帳號 → 進入登入流程

區分流程：新用戶導入 vs 老用戶直接進入

驗證驗證

第三方串接（Facebook/Google）或手機簡訊驗證 → 設定密碼。

OAuth 驗證保障帳號安全

登入成功 → 引導匯入終點

登入後自動引導至 IG 帳號綁定與收藏匯入頁面。

綁定 / 連動 IG 起點

✅ 成功 → 選擇收藏夾❌ 失敗 → 重試

一次授權，後續可自動同步

調出影片 + 判斷初次分支

首次 → 全選匯入非首次 → 辨識已匯入 → 選新影片

解析影片中的地點、店名等關鍵資訊

確認匯入 → 系統分析轉化

系統讀取影片資訊欄位，批次轉換為結構化卡片資訊。

讓用戶確認 AI 解析結果，保留主控權

確認卡片資訊判斷

✅ 正確 → 儲存至資料庫✏️ 有誤 → 手動編輯後確認

開始分類，讀取待分類內容起點

進入分類頁面，載入所有待分類卡片。

呈現待分類清單，明確任務範圍

是否使用 AI 自動分類？判斷

🤖 自動分類 → 顯示結果 → 結果檢查🖐 不用 → 立即手動 or 稍後待分類

AI 建議分類可大幅降低操作成本

結果滿意？判斷

😊 滿意 → 儲存分類結果😞 不滿意 → 回報錯誤 → 手動編輯

人工校正確保分類符合個人邏輯

結束分類 → 跳轉總覽終點

完成分類後儲存結果，跳轉至收藏總覽確認。

進入收藏列表起點

載入使用者所有收藏的店家資料，預設清單視圖。

預設顯示全部收藏，提供完整概覽

搜尋 / 篩選 / 直接瀏覽分支

監聽搜尋欄位輸入，根據關鍵字匹配收藏店家，或透過篩選條件縮小範圍。

多條件篩選解決「找不到」的核心痛點

點選店家卡片互動

顯示詳細餐廳資訊（菜單、評價），或直接連接 Google Maps。

卡片詳情整合所有需要的資訊

確認前往 → Google Maps 判斷

✅ 前往 → 分享 → 標記【已去過】↩️ 不前往 → 返回列表

04 / Site Map

頁面架構

完整的 App 頁面層級關係，從介紹頁到各功能模組一覽。

↳ 根據 User Flow 的路徑整理出頁面架構，確保每個流程步驟都有對應的畫面節點，不遺漏任何功能模組。

整理你的 IG 地點地圖

讓你收藏的餐廳一目了然

快速找到你收藏的餐廳

Facebook 登入

IG 帳號登入

推薦模組

常用篩選列

匯入收藏按鈕

未綁定 IG 帳號 → 直接進到 IG 帳號綁定頁面

卡片清單【篩析列出】或【指定類別】

系統偏好設定

通知設定（追蹤餐系統通知設定）

光暗色模式

帳號資訊

帳號綁定資訊

IG 帳號綁定

分類管理

現有分類顯示排列推薦

新增分類

搜尋欄位

接合篩選結果為常見用

篩選選項

設定篩選為預設（以用作主頁）

國家

縣市

鄉鎮區

自定義區域

搜尋 + 篩選後

篩選操作

到達卡片清單

卡片資訊

編輯卡片

跳轉至 IG 帳號查看

跳轉至 Google Map

卡片編輯頁面

連結暫存匯入區塊

方法一：複製連結到應用（掌識辨識）

直接透過分享儲存

批輸貼入連結轉快區塊

連到 Instagram

介紹頁面（3頁）

登入 / 註冊畫面

首頁

個人資訊頁 1 / 4

個人資訊頁

系統偏好設定

通知設定

帳號資訊

IG 帳號綁定

分類管理頁面

搜尋 / 篩選頁

地點選擇

篩選後的卡片清單

卡片內詳細資訊頁

卡片編輯頁面

匯入收藏頁面

連到 Instagram

05 / 卡片欄位 · 預設分類 · 篩選階層

資料結構

卡片欄位定義與預設分類階層。

↳ 資料結構設計來自訪談中「想知道什麼資訊」的研究結論，直接回應用戶需要快速獲取店名、地址、營業時間的核心需求。

卡片欄位 Card Fields

標題

店家名稱，可複製

分類 / 類型

美食、景點、活動

地點

縣市 / 鄉鎮區多層

影片截圖

自動擷取封面圖

價格區間

消費預算 $ – $$$$

造訪狀態

未訪 / 已訪 / 口袋

原影片連結

連結回原始 IG Reel，不顯示於清單卡

卡片功能 Card Actions

編輯

連結到地圖

刪除

預設分類 / 篩選階層

📍 地區

亞洲台灣縣市縣市鄉鎮區

日本 / 韓國 / 菲律賓 / 香港...台北 / 台中 / 台南...東區 / 中西區 / 永康...

🍜 類型

美食景點期限活動

台式 / 日式 / 韓式 / 甜食 / 小吃市集 / 展覽

📋 造訪狀態

尚未造訪已造訪口袋名單

03.5 / 設計系統

Design System

定義視覺語言，確保各畫面的色彩、字體與元件一致性。

          COLOR TOKENS

LIGHT MODE

#4D4D4D

Primary Text

#909090

Secondary Text

#FCFCFC

Background Primary

#EFEFEF

Background Secondary

#D0D0D0

Border Gray

BRAND · CORAL / ORANGE

#FF8A80

Coral 400

#FF6F61

Coral 500

#FF5A4F

Coral 600

#FFB74D

Orange 400

#FFA500

Orange 500

#FF9500

Orange 600

ACCENT

#FFD521

Yellow (Illustration)

#FFE543

Yellow Light

#408AE9

Facebook Blue

GRADIENT

品牌漸層

                --gradient-brand

深珊瑚漸層

                --gradient-deep-pink

淺珊瑚漸層

                --gradient-light-pink

          TYPOGRAPHY · Noto Sans TC

H1 ·
              35px

Design System

H2 ·
              30px

Color Tokens

H3 ·
              20px

Section Header

H4 ·
              16px

Body / Card Title

H5 ·
              14px

Caption / Sub-label

H6 ·
              12px

Tag / Label

            SPACING

XS · 4px

Uni · 8px

Small · 12px

Medium · 16px

Large · 24px

XL · 32px

XXL · 48px

            BORDER RADIUS

No Corner · 0px

Little · 4px

Chip · 8px

Radius 2 · 12px

Radius 3 · 24px

Radius 4 · 48px

03.6 / 元件

Components

可重複使用的 UI 元件，確保設計語言一致性。

              SHORT BUTTON · 200×43

Default
                

Pressing
                

              POP-UP BUTTON · 187×36

確認

Default
                

確認

Pressing
                

已同步收藏鍵

已同步

              LARGE BUTTON · 227×36

確認

Default
                

確認

Pressing
                

              FUNCTIONAL BUTTON LIST · 40×40

                  卡片按鈕

                  按壓效果

                      Default

                      Pressing

            NAVIGATION BAR · 可點擊原型

            點擊各 Tab 切換 active 狀態

首頁 active

            CARD · 382px

                Default
              

                Edit
              

            LOADER · 48×48px

Property 1=Default

            FILTER COMPONENTS · 篩選框元件

類型：

篩選框－類型 · 點擊 Tag 切換 ·
                點選單展開子項

造訪狀態：

造訪狀態 · 點擊 Tag 互斥切換

未選擇地點 ·
                  點擊切換

台南/市區，高雄

已選擇地點
                

套用篩選 · 點擊切換 on / off

價格區間：

$0~100$1000<

$200~400

價格區間 · 拖動滑桿即時更新

            MENU COMPONENTS · 選單元件

                A · 選單列元件 · 287-14567

東南亞料理

選單 · 有子項目 · off / on
                  

早午餐店

甜點/咖啡

選單 · 無展開 · off / on
                  

泰式料理

越式料理

子選單元件 · off / on

                  子選單展開樣式 · 互動

子選單展開樣式 · 點擊主項目切換

              B · 區域選單

區域

下拉選單鈕

篩選框 · 複選

區域

不限(預設)

中西區

東區

北區

南區

永康區

善化

新市

七股

麻豆

安南

新營

長條清單 · 靜態示意

04 / Wireframe

線框稿與原型

從 HMW 問題定義出發，對應核心痛點，驗證設計解法的可行性。

↳ 線框圖是設計流程的收斂點，將 HMW 問題、痛點與 Sitemap 架構三者對應，形成可測試的低保真原型。

線框稿

痛點 01 · 收藏整理繁瑣

當收藏種類繁多時，每次收藏都需要尋找對應的收藏夾，導致收藏程序變得繁瑣且耗時。

↓

HMW 01 · 快速篩選定位

HMW 幫助用戶快速篩選和定位 IG 收藏中的餐廳和景點？

↓

設計解法 01

首頁卡片清單 + 地區篩選 + 關鍵字搜索欄，快速定位目標

核心痛點 02

嘗試使用第三方工具找餐廳，但還是對IG上之前存過好像有看起來非常好吃的餐廳念念不忘

↓

HMW 02 · 自動提取資訊

HMW 自動提取並補充收藏資訊，讓用戶省去手動查詢的麻煩？

↓

設計解法 02

卡片自動擷取 Reel 截圖 + 解析店名／地點，一鍵開啟地圖，並在首頁或篩選後的頁面顯示卡片。

核心痛點 03

無法快速一次性瀏覽與比對收藏中的店家詳細資訊

↓

HMW 03 · 直觀展示收藏

HMW 提供更直觀的收藏展示方式，讓用戶輕鬆比較和選擇？

↓

設計解法 03

以卡片式列表呈現收藏，支援縮圖預覽與關鍵資訊一目了然，降低用戶比較時的認知負擔。

原型

PROTOTYPE WALKTHROUGH · YOUTUBE SHORTS 觀看影片 ↗

▶

INTERACTIVE PROTOTYPE · FIGMA 開啟原型 ↗

              CLICK TO OPEN IN FIGMA
            

              ⚠ Figma embed 需部署至 HTTPS 才可預覽，點此直接開啟
            

收藏了，
然後呢？

研究與
設計過程

問題定義

使用流程 × 功能流程

自訂分類

頁面架構

資料結構

Design System

Components

線框稿與原型

收藏了，然後呢？

問題定義

使用流程 × 功能流程

自訂分類

頁面架構

資料結構

Design System

Components

線框稿與原型

收藏了，
然後呢？