Redesign Garmin Connect APP

此專案為修習研究所課程時執行，後續則透過自主線上課程學習，使用figma將整體架構與脈絡呈現於其中。

整個專案以雙鑽石設計模型為基礎，從產品探索到設計交付，包含Wireframe、Prototype、RWD等介面設計。主要是想得知在疫情下，室內運動者需要什麼樣的穿戴式裝置，再延伸到需要有效率的鍛鍊和改善姿勢等問題。

• Discover

1. Introduction
2. Questionnaire
3. Interview

• Define

1. Affinity Graph
2. Persona
3. User Story

• Develop

1. Sitemap
2. Flow Chart
3. Wireframe

• Deliver

1. UI elements
2. 設計發展
3. 解構畫面
4. 元件發展
5. 元件模擬
6. 功能草模
7. 介面狀態
8. 設計交付

• Design System

• RWD

Discover

1. Introduction

• Redesign動機：延續先前研究所課程的專案，與Garmin業師合作，試圖找出在疫情下，室內運動者需要什麼樣的穿戴式裝置。透過自身學習的Figma，將所有的思考脈絡全部呈現於此。
• 主訴問題：在疫情下，室內運動者需要什麼樣的穿戴式裝置？
• 商業目標
• 找尋適合室內運動者的穿戴式裝置
• 透過與網紅合作，增加使用訓練菜單的頻率
• 研究方法
• 分別介紹使用的研究方法，以及說明其原因和結果
• 問卷調查：了解使用者對於穿戴式裝置的經驗與期許，招募6位進行深度訪談
• 深度訪談：深入探討使用者在疫情中室內運動時所遇到的問題，以及對於穿戴式裝置的想法
• 親合圖：透過訪談後的資料整理，主要分成「運動習慣」、「穿戴式裝置經驗/期許」
• Persona：鎖定S2為本次專案的目標族群
• User Story：將問題拆分為兩項，並在後續針對問題找出解答

2. Questionnaire

• 問卷發放目標
• 了解室內運動者對於穿戴式裝置的經驗和期許
• 招募深度受訪者6位
• 目標受眾
• 特徵：年輕族群
• 行為：有室內運動、有使用穿戴式裝置

3. Interview

• 訪談並整理受訪者之基本資料、生活型態、價值觀、運動習慣、穿戴式裝置經驗/期許、類型。

Define

1. Affinity Graph

• 運動習慣：在運動習慣的訪談中，動機/目標可以分為「自發性」和「外部刺激」，主要會做的運動是「瑜珈」、「以彈力帶為主的健身運動」，透過youtube觀看，並參考其菜單。
• 穿戴式裝置經驗：對於沒有使用過穿戴式裝置的使用者，改詢問他們對穿戴式裝置的期許為何。在運動方面希望可以有「姿勢」的偵測和「運動建議」; 日常生活面則是「身體水分」的提醒。

2. Persona

• 鎖定目標客群：選定S2的受訪者為本次專案的目標用戶，該族群皆有意願去學習、接觸運動，只是對於相關知識並沒有太多涉略，因此需要他人給予建議或指導。

3. User Story

• 兩項情境貫串整個專案，也成為主要待解決問題。

1. 身為室內運動者 ，我想要有運動建議 ，從而有效率的鍛鍊。
2. 身為室內運動者 ，我想要知道動作正不正確 ，從而改善我的姿勢。

• 預計新增

1. 「網紅推薦」、「訓練菜單」之頁面
2. 智慧穿戴式裝置（Iris smart shirt ＋ Iris smart pants）（參考服裝1＆3）

Develop

1. Sitemap

• 以APP為主，呈現出原版和更新版的差異，並新增三項頁面「網紅推薦」、「訓練菜單」、「網紅頁面」

2. Flow Chart

• 透過Flow Chart確認操作流程邏輯，有助於Wireframe的建立，包含頁面和頁面之間的關係，和所有需要的功能。

3. Wireframe

• 以iPhone 8 （375*667px）為畫板進行製作（因無瀏海設計），藉由先前製作的sitemap和flow chart繪製出wireframe。
• 可以點擊下方Figma，看到更多詳細說明。

Deliver

1. UI elements

• 設計系統簡易文件（Color, Typography, Icons, Bottons ,etc.）
• 主要參考線上課程「設計遊牧」

2. 設計發展

1. 解構畫面：呈現Wireframe畫面並標註新增的元件。
2. 元件發展：對於設計細節的決定，以問答形式做出最終選擇。
3. 元件模擬：製作出更高擬真度的原型。

3. 功能草模

• 兩項流程皆為功能式操作草模，連結可以透過電腦或Figma APP操作。

1. 身為室內運動者 ，我想要有運動建議 ，從而有效率的鍛鍊。
2. 身為室內運動者 ，我想要知道動作正不正確 ，從而改善我的姿勢。

4. 介面狀態

• 根據介面狀態設計出「載入狀態」、「空白狀態」、「理想狀態」，且區分出使用者與網紅的頁面。

5. 設計交付

• 功能概述後，歸納出完整設計，並加註標示，以利後續開發。

Design System

• 建立可重複使用的物件，利於加速開發效率和維持設計的一致性

RWD

• 以1200px為分界，以下使用mobile web，以上(含)使用desktop web。
• 在Garmin Connect APP中，背景色為黑色。mobile & desktop web背景色為白色。
• 考慮限制（高度、寬度等條件）