Background
SMARC RUN 是結合 KOL 課程與跑步運動計畫的 App，幫助業餘跑者學習正確的運動姿勢，並透過動作辨識功能改善。
SMARC RUN is an app that combines KOL-led workout courses with structured running programs to help amateur runners improve their posture and technique through motion recognition features.
My role
UI/UX Designer
負責 App 架構規劃、介面設計、視覺風格、互動原型製作，官網設計與製作。
Responsible for app information architecture, interface design, visual direction, interactive prototyping, and website design and development.
Goals
為業餘跑者改善跑步姿勢
提升使用者關於跑步的知識量
根據品牌形象，呈現跑步運動的專業感
-
Help amateur runners improve their running posture
Increase users’ knowledge about running
Convey a sense of professionalism aligned with the brand image
Process
以 KOL 的追蹤者為 TA，整理主要情境與功能。
規劃 App 資訊架構，並以 Wireframe 驗證修改。
UI 設計與元件規範
網站設計：以 Canva 網站模板架構設計官網。
-
Defined key user scenarios and features based on the target audience—followers of fitness influencers (KOLs)
Planned the app’s information architecture and iterated through wireframe validation
Designed UI and established component guidelines
Designed the official website using a Canva-based template structure
Design Language
色彩：使用深色背景，更強調跑步距離、卡路里消耗、步數的視覺呈現。
字體：產品本身架構不大，根據文字用途區分階層。
圖像風格：選擇簡潔運動插圖，適合在完成任項任務時顯示，提升正向回饋。另外搭配真實影片拍攝強化內容感。
AI 具象化：在檢測中，會具象化 AI 的虛擬模樣，讓使用者感覺到與產品在實際對話。
個人化：根據檢測結果修改 基礎代謝率 BMR 與 每日總熱量消耗 TDEE，更新卡路里與步數等等目標。
-
Color: A dark background enhances the visibility of key metrics like distance, calories burned, and steps taken
Typography: A simple structure with clear visual hierarchy based on content type
Illustration Style: Clean and sporty illustrations give positive feedback upon task completion. Real footage is also included to enhance content authenticity
AI Visualization: During motion detection, the AI is represented visually to create a sense of interaction between the user and the system
Personalization: Based on test results, the app updates personalized metrics such as BMR and TDEE to adjust calorie and step goals accordingly
