＊ OVERVIEW
台灣迪卡儂運動社網站協助用戶預訂運動課程、探索活動資訊，目標是打造一個連結運動機會與同好的流暢平台。本次改版聚焦於優化活動主題頁面與使用流程，提升資訊取得效率與跨平台體驗，讓用戶能順暢地在活動網站與電商平台間切換，並輕鬆完成報名。
[MY ROLE]
UI/UX設計、用戶研究、原型製作、可用性測試、與開發團隊協作
[PERIOD]
[TOOLS]
＊ CHALLENGE
＊ DESIGN PROCESS
＊ RESEARCH
為了發掘潛在的優化機會，我在正式進入設計階段前，對五家知名電商與訂房旅遊平台進行了深入的競品調研；同時為了維持與全球迪卡儂品牌視覺及風格的一致性，我也研究了法國迪卡儂運動社網站與即將上線的亞太區電商頁面。透過截取並整理各網站的截圖與使用者旅程，觀察競爭對手如何解決相似需求，也在實際互動中評估了可借鑑的改進方向與功能變更。
競爭對手網站的截圖，用於研究分析
基於我從競品分析中獲得的洞察，我歸納出以下幾項關鍵發現：
CTA 漸進式引導：部分電商會在列表頁先顯示「加入購物車」或「立即查看」，並在詳情頁補充更多互動選項；而活動平台則是直接跳轉到報名表單，導致使用者在決策前缺乏足夠資訊。
視覺節奏與版位配置：蝦皮/淘寶等電商平台會以大圖＋大按鈕的組合吸引使用者注意力，但也引發過度資訊干擾；Airbnb 和法國迪卡儂則透過留白和色塊分隔，讓主要活動訊息更突出。
首屏即見核心課程活動卡片：超過 70% 的訪客不會刻意往下滾動，任何關鍵按鈕若被篩選欄遮蔽都會導致報名率下滑。
我也與行銷團隊深入討論，了解他們投放付費廣告的目標與檔期活動規則，以及關鍵的衡量指標；接著我收集並分析了廣告素材、電商落地頁和運動社活動頁面，並透過繪製使用者旅程地圖，串連用戶從點擊廣告、訪問落地頁、參與活動到最終下單的完整流程，識別各環節的痛點與改進機會；最後，我將這些洞察與行銷團隊的專案目標對齊，確保後續的設計優化能切實提升轉化率與使用者體驗。
研究使用者整體旅程
＊ IDEATION
我在紙上勾勒出了一些想法。草圖幫助我直觀地了解了活動頁的基本概念，並快速探索了不同的方案。
活動頁框架設計草稿
接下來，我使用 Figma 將紙上的草稿數位化為線框圖，以確認關鍵功能與版位（如 Banner 與活動卡片尺寸、篩選欄位置等）。在對線框圖進行多次迭代後，我透過添加內容、照片、顏色和排版，製作成高保真的 Prototype。
在這個階段，我測試了各種顏色組合和圖片位置的方案。最終的高保真模型與線框看起來有所不同，因為有些方案沒有達到預期的效果。我針對使用效果調整圖示、間距與介面佈局，以提高可用性和美觀度。
Figma 中的 Wireframe 與設計測試
導覽整合優化跨平台體驗
為解決活動機制複雜性，我將 Hero Section 拆分為兩層資訊架構，透過階層化清楚說明呈現活動流程，並在適當位置加入導流按鈕與文字次要 CTA，讓使用者能從活動頁順暢回到電商平台，降低跳轉阻礙並鼓勵探索更多商品或課程。
此外，我採用兩張錯位排列的 Banner 強化主題曝光，同時擴展了視覺設計的應用範圍。
Figma 中的 Hero Section 設計
強化活動能見度
為了讓使用者一進入網站就能立即看到核心活動資訊並提升報名率，我先透過 Hotjar 及 GA 分析使用者行為，將 Tab bar 移至 Navigation 下方，讓使用者能快速抵達目標頁面；接著將篩選功能置於活動卡片上方，以強化使用流程的連貫性，並同步調整 Hero section 與活動卡片的尺寸，優化整體視覺與資訊佈局。
此外，我也針對行動裝置優化整體排版及互動流程，減少誤觸與資訊過載，確保跨裝置體驗一致且順暢。
Figma 中的活動卡片設計
＊ CONCLUSION & KEY LEARNINGS
在運動社活動頁面改版專案中，我與行銷團隊透過多次專案會議，深入溝通品牌投放目標及各觸點需求，共同梳理使用者從接收到活動資訊、點擊廣告、瀏覽落地頁到最終報名的完整使用者旅程。基於這些洞察，我優化了資訊架構與導流路徑，並設計出直觀且專注於核心功能的頁面，讓使用者能夠快速找到並參與活動。
這是我首次負責結合行銷策略的端到端頁面改版，不僅加深了我對整體使用者旅程的理解，也讓我體會到優秀設計必須兼顧美感、行銷成效與使用者需求。透過這次經驗，我學會了如何在多方利益相關者間建立共識，並透過快速原型與實地驗證，持續優化設計，確保每一次更新都能帶來實質成效。
＊ MORE PROJECTS
