UX 設計

NTC App UX 再設計案例
重整資訊架構與功能入口,提升健身 App 探索效率

Nike Training Club(NTC)是 Nike 旗下一款提供居家訓練課程與運動計畫的健身 App。內容豐富且具備品牌信任感,但在初次使用時,使用者從探索課程到開始訓練,平均需要花費 2 分 12 秒才能找到合適入口——這個數字背後,反映的是導航命名模糊、入口分散所累積出的認知門檻。這次再設計的目標,是讓介面不再成為使用者開始運動的阻礙。

NTC App 介面 — 訓練頁、探索頁、跟練影片頁
我的角色
UX Research · UX Designer
使用工具
Figma · Photoshop · Illustrator
研究方法
量化評論分析 · 質化訪談 · 使用者測試
核心成果
任務完成時間縮短 56%
01 Project Overview

專案摘要

這次 UX 再設計的核心目標是:不要讓介面成為使用者開始運動的阻礙。在使用者研究階段,我透過 App 評論分析與使用者訪談,發現真正造成卡住的原因並非內容品質,而是資訊架構分類不清、功能入口分散,以及跟練過程中動作提示不足。

因此,本次再設計聚焦在三個面向:重新整理資訊架構與導航命名優化快速開始訓練的路徑、以及補強訓練影片中的節奏提示

451+
分析 Google Play 評論則數
6
深度訪談使用者人數
56%
再設計後任務完成時間縮短
02 Discovery & Research

為什麼 NTC 需要重新設計?

在解決問題之前,得先看清問題的全貌。我首先從 Google Play 的 451 則評論切入,藉由 Python 自動化分析整理回饋類型與常見痛點,讓後續的體驗優化建立在真實使用者回饋之上,而不只是設計師的主觀推測。

量化分析 — 451 則評論

分析結果顯示,82% 的使用者對 NTC 的運動內容表示滿意或正面肯定。這說明問題不在於內容本身,而在於使用者如何找到並開始使用這些內容。負面回饋主要集中在導航與資訊架構問題(8%)、技術門檻(7%)、功能自定義需求(3%),其中導航命名與資訊架構佔比最高。

質化訪談 — 6 位使用者

量化分析讓我看見問題的分布,但難以判斷使用者在什麼情境下迷失、以及這些障礙如何影響後續的使用意願。因此,我邀請 6 位首次使用 NTC 的使用者進行一對一訪談與可用性測試,觀察他們在尋找課程、理解導航與實際跟練過程中的即時反應。

INSIGHT 01
導航命名無法建立預期,使用者反覆試錯
「居家」、「活動」、「運動計畫」等命名讓使用者感到混淆,無法在點擊前預期頁面內容,導致不斷在頁面之間跳轉確認。
INSIGHT 02
多重入口缺乏層級邏輯,探索路徑不清
NTC 提供了許多進入訓練的入口,但入口之間缺乏一致的層級關係,使用者很容易在路徑中途迷失,不知道下一步該去哪裡。
INSIGHT 03
跟練提示不足,節奏中斷影響投入狀態
跟練過程中,當動作轉換提示不夠清楚、操作不直覺時,使用者必須暫停重看,嚴重打斷運動節奏,削弱整體跟練體驗。

「NTC App 給我的感覺更像是一個資料庫,我需要自己去找出可用的素材。」

— 受訪者
03 Problem Framing

從使用者旅程拆解設計問題

在完成量化與質化研究之後,我將分析結果整理成清楚的問題框架。我建立 Persona「Amber」,作為這次設計決策的核心參照對象——她代表一群想快速開始運動、但缺乏時間與精力自己摸索 App 的使用者。

Persona — Amber

Persona — Amber

User Journey Map — Amber 的使用旅程

為了讓設計決策有更清楚的情境依據,我將 Amber 從打開 App 到完成第一次跟練的流程整理成 User Journey Map,標示每個階段的行動、情緒起伏、痛點與設計機會。

A
Amber 的使用旅程 — 從建立帳戶到回顧體驗
Amber User Journey Map — 建立帳戶、探索架構、尋找課程、開始跟練、回顧體驗
情緒最低點出現在「探索架構」與「開始跟練」兩個階段,是本次再設計最核心的優化對象。
04 Solution & Prototype

將設計策略轉化為可操作的介面體驗

針對 Amber 使用旅程中的兩個主要低點,我將這次 再設計 的核心聚焦在降低開始運動前的理解成本,並收斂為三個具體策略。

↓ 將滑鼠移至各策略卡片,查看 Before / After 設計細節

01
重建導航列命名,降低認知判斷成本
舊版中「居家」、「運動計畫」、「活動」與「計畫」的功能定位不夠直觀,使用者在點擊前難以預期頁面內容。再設計後,我將命名調整為更符合任務情境的語意,讓入口之間的差異更清楚,降低反覆試錯的成本。
Before — 原版導航列
Before:原版 NTC 導航列,居家、運動計畫、活動、計畫
「運動計畫」與「計畫」命名重疊;「活動」更像歷程與紀錄,但語意不夠直觀。
After — 再設計導航列
After:再設計後 NTC 導航列,探索、訓練、訓練紀錄、計畫
以「探索」、「訓練」、「訓練紀錄」重新定義入口,讓使用者更快理解每個頁面的用途。
「居家」→「探索」:讓使用者知道這是瀏覽、發現課程與內容的入口,而非僅限於居家運動。
「運動計畫」→「訓練」:移除與「計畫」重複的語意,讓這個入口更直接對應「找課程、開始訓練」的任務。
「活動」→「訓練紀錄」:將較模糊的「活動」改為更接近歷程、成就與紀錄概念的命名。
「計畫」保留不變:當「運動計畫」改為「訓練」後,「計畫」本身的語意變得清楚,因此保留原命名。
調整導航命名後,使用者能在點擊前建立更清楚的預期,減少在不同入口之間反覆確認的認知負擔。
02
簡化探索路徑,加入「快速開始」入口
原版 NTC 提供多條進入訓練的路徑,但入口之間缺乏清楚的層級關係,過多選擇反而增加判斷成本。我在首頁加入「快速開始」區塊,讓使用者從已儲存或進行中的課程直接開始訓練,不需要每次重新搜尋比較。
快速開始路徑 — 三步進入訓練
快速開始路徑 — 從首頁進入已儲存課程一鍵開始訓練
透過「快速開始」,使用者能從熟悉的內容直接進入訓練,不需每次重新搜尋比較
03
補強訓練影片提示,維持不中斷的跟練節奏
跟練時,當動作轉換提示不足、操作不清晰時,使用者必須暫停重看,打斷整體節奏。我在訓練影片介面中補強了動作名稱、進度條、倒數提示與下一動作預覽,讓使用者能在不停下來的情況下掌握當前狀態。
Before — 提示資訊不足
訓練影片 Before — 僅顯示時間與動作名稱
只顯示時間與動作名稱,無整體進度、無下一動作預覽,使用者無法掌握當前狀態
After — 補強進度提示與預告
訓練影片 After — 進度條 + 動作序號 + 下一動作預覽
補強進度百分比、動作序號、進度條,以及左上角的下一動作預覽,讓使用者在跟練中持續掌握進度
補強的資訊包含:動作序號與總數(知道做到哪)、整體訓練進度條(知道還剩多少)、下一動作預覽(提前做好心理準備)。這三項資訊在不佔用大量畫面空間的前提下,大幅降低使用者跟練時的不確定感。
補強提示後,使用者在跟練中無需暫停確認,節奏更連貫,整體跟練體驗更流暢

資訊架構重整 — Sitemap Before & After

在進入高保真原型前,我先完整重整 NTC 的資訊架構,釐清哪些命名需要修改、哪些入口需要前移、哪些層級需要合併,確保改動邏輯上的一致性。

Before 舊版 IA — 三個主要問題
After 再設計 IA — 三項優化
NTC Sitemap Before & After
核心調整:導航命名改為功能導向(探索 / 訓練 / 訓練紀錄 / 計畫)、快速開始入口從深層移至首頁探索區、任務路徑更直線

Prototype — 可互動的完整流程

在完成資訊架構與關鍵畫面設計後,我進一步將再設計方案轉化為 High-Fidelity Prototype,呈現使用者從探索課程、快速開始到進入訓練影片的完整操作流程。

立即體驗 Prototype →
05 Validation & Iteration

驗證與迭代

完成再設計方案後,我邀請 3 位受試者進行任務式易用性測試,以確認設計調整是否真正降低了「探索到開始訓練」的理解成本。

驗證方法

🎯
任務式測試
設定具體任務:「從首頁找到一堂自己感興趣的課程,並點選開始訓練。」測量完成時間與路徑。
👁️
行為觀察
觀察受試者在導航命名、課程入口與訓練影片介面的即時操作反應,紀錄停頓點與返回次數。
💬
即時回饋
測試過程中請受試者口頭說出想法,收集對導航清晰度、快速開始入口與跟練提示的主觀評價。

輔助觀察指標

除了記錄任務完成時間,我也同步觀察以下行為作為輔助依據:停頓(使用者在介面前猶豫不動的時刻)、返回上一頁的次數(迷路或確認失敗的訊號)、反覆切換分類的頻率(導航命名是否仍造成混淆),以及完成後是否需要額外尋找下一步。這些觀察補充了時間數字無法呈現的情境細節。

測試結果

觀察指標再設計前再設計後變化
找到感興趣課程並開始所需時間 2 分 12 秒 58 秒 ↓ 縮短約 56%

「整體來看,redesign 不只是介面更清楚,也確實降低了使用者在開始運動前的理解與決策成本。」

重新整理資訊架構與導航命名後,受試者完成任務的時間明顯縮短,停頓與返回次數也有所減少。雖然測試樣本不大,結果僅供初步參考,但這些方向性的改善支持了設計決策的有效性,也指出後續迭代可以繼續深化的面向。

06 Opportunity & Reflection

後續優化方向與設計反思

這次 NTC 再設計是我第一個完整的 UX 專案。從研究、定義問題到設計策略,整個過程讓我更清楚理解:UX 設計不是讓介面變漂亮,而是透過研究與迭代,持續降低使用者完成目標所需要的認知成本。

未來展望:擴大樣本,建立更完整的量化驗證

這次易用性測試偏向初步驗證,樣本數有限。未來希望納入更多不同運動程度、使用背景與操作習慣的受試者,並加入更細緻的量化指標——例如導航點擊次數、返回頁面頻率、任務完成率,讓設計決策有更扎實的數據基礎,而不只是停留在時間縮短這個單一指標。

AI 輔助研究:提升效率,但判斷仍需回到使用情境

在這次專案中,我嘗試用 Python 搭配 AI 工具自動化處理 Google Play 評論,將大量非結構化的使用者回饋初步轉化為可分析的問題類型。這個過程讓我看見 AI 作為研究前期輔助的價值——它能快速整理規模,但真正的設計判斷仍然來自對使用情境的理解,以及與真實使用者的對話。未來我希望進一步整合 AI 輔助訪談逐字稿分析、關鍵字萃取與行為模式歸納,讓研究流程更有效率,同時保持對使用者行為的直接觀察。

最大的學習:放下預設,讓使用者的行為來修正設計

在整個 再設計 過程中,最深刻的一課是:我必須學會放下自己對介面的設計預設。當受試者的操作路徑與我預期的不同時,第一個念頭不是「使用者理解錯了」,而是「設計是否真的傳遞了正確的方向感?」這次專案讓我更習慣用觀察代替假設,用數據和行為模式來支持設計決策,而不是靠直覺走完整個流程。這也是我在這個專案中最重要的學習:設計不是證明自己的直覺,而是透過觀察、驗證與修正,讓產品更貼近真實的使用情境。

← 返回作品集 NTC App UX 再設計案例
已複製 Email ✓