GoalFit

使用工具

Sketch  Marvel   Principle  Xmind  Miro

Sketch  Marvel   Principle  Xmind  Miro

我的角色

UX UI Visual

UX UI Visual

製作時間

約12 週  2020 / 10 - 2021 /1 

約12 週  2020 / 10 - 2021 /1 

約12 週  2020 / 10 - 2021 /1 

phone2
GoalFit
APP Design

2020 - 2021  Case Study

 運動APP GoalFit 是我自發性執行的案子。這個案子從執行發想、前期研究、使用者調查和設計執行皆由我一個人執行。案子聚集在解決使用者沒有辦法持續運動的問題,透過App的呈現提出一個符合使用者體驗與需求的產品。

以下的案子簡述分為三大主題,依照製作時間順序排列:

01.前期研究   競品分析 /Lean Ux Canvas/ 使用者訪談 / Persona / User Journey Map

02.解決方法   Point of View / How Might We / Moscow / Funcational Map / IA / User Flow

03.設計執行   Wireframe / Visual / Mockup / Prototype / User Test

04.結論

接著就邀請您來看這個案子的執行與成果吧

gofit-mockup-small

發想起源

為什麼做

 🙌 簡單來說就是希望能解決不能落實執行運動的問題

運動一直是大多數人認同可以保健身體的方式,好處多到說不完。有趣的是,雖然幾乎每個人都是認同的,但是能真正落實做到的卻不在多數,這樣的情景也在我生活周圍發生。從上班族朋友到已經退休的人士,身邊的朋友往往花了很多時間企圖要建立自己的運動方式,但效果卻不彰顯。沒有辦法落實的原因很多,大多是因為時間、環境和動力等等的綜合原因,但這些原因是真的沒有辦法排除的嗎?我想並不是如此,因此,我相信透過科技的協助,一定能協助使用者完成健身。

那麼,究竟該怎麼幫助使用者能夠徹底地執行運動,讓身體更加強壯,進而讓身體更加健康呢?這個問題就成為我製作這個APP的起源。

產品定位

我的挑戰

定位和目標

  1.  藉由課程的安排能夠幫助使⽤者做到增肌和減脂。
  2. 紀錄使⽤者的狀況, 並檢視成果。
  3. 做到健康的維持。
  4. 能循序漸進的達到⽬標。
  5. ⾝⼼的平衡。

客群是誰

  • 學⽣、上班族、家庭主婦、退休族。
  • 在尋找運動⽅式的族群,想要藉由運動來達到健⾝、減脂。
  • 針對想建立運動方式的使用者,或是已經有運動的⽅式,但想要增加動運⽅式的使⽤者(專業版本)。

客群需求

  • 在家中或是家裡附近就能自主進行健身。

  • 達到健⾝、減脂的目標。

  • 想要運動,或是已經有運動的⽅式,增加去運動的執行力。


01. 
Research
前期研究
競品分析 /Lean Ux Canvas/ 使用者訪談 / Persona / User Journey Map

 

前期研究

競品分析

我下載市面上運動類型的APP來做出以下的競品分析。我使用分析比較,差異點和產品象限圖針對市面上的產品做出競品分析。

✨大多數的APP是專一課程主題,例如:跑步、重訓、瑜珈或每天幾分鐘的訓練。

✨APP功能大多包含:課程歷史紀錄、健身計畫、會員制度、記錄功能。

✨能讓APP更優質的功能包含:真人影片、會員制度、社群和部落格。

運動.競品分析

產品象限圖 

注重於能「引導」使用者非「自由度」。在分析完這玲瑯滿目的APP後,發現大多的產品多是在推廣每一又一個的課程,這些課程雖然很多樣性,但會不知道該如何針對目前我所需要的去執行。又或者說,有些具有引導性課程,在APP上不容易察覺,另外,也不知道哪一些是能針對我現在的狀況,做出推薦。換句話說,在看到這些課程是,往往會有暈頭轉向的感受。根據以上的狀況,我決定去針對「引導」性,而非「自由度」的課程去做研發。

我決定做多元運動主題的APP。這些APP的項目中,發現大多的產品是會分單一的主題運動(重訓、瑜珈、跑步),而較少綜合兩個項目的APP,綜合三個項目的更少。這樣的功能是市場上所缺少的。

loction_象限圖2

設計發想

Lean UX Canvas

為了讓這個產品更加地聚焦,我使用了Lean Ux Canvas,來幫助把想法更加的釐清和聚焦。(請點選下方的圖片看細節)

goalfit.lean-ux-canvas-

前期研究

使用者訪談

針對目前的app功能,我找了共六位使用者進行深入訪談,其中4位是「有運動習慣」的使用者,2位是「沒有運動習慣」的使用者,來了解他們在運動時會遇到的問題。
曾經使用過運動類型APP的使用者表示:

👩🏻 做行銷企劃,33 歲的Coral表示:

"過去我很喜歡運動app每天十分鐘運動的概念,因此做了嘗試,但真正要在現實中持續的執行是有困難的,所以最後會選擇一週2次到3次可以自主練習的運動,不依賴APP了"

👨🏻工程師,34 歲的David表示:

"目前我還沒有達到我的運動目標,即便我認同設定目標是很重要的,但是生活中有太多變數,所以沒辦法有效果的執行。"

👩🏻 平面設計師,26 歲的Vivien表示:

"目前我個人還沒有建立出數據化的方式,能幫助我檢視運動的成效。"

已經有建立運動習慣的受測者,全都認同運動目標的設定是有幫助的,也知道自己的目標,但卻還沒有建立出一個具有成效、可以被檢視的運動模版。從使用者的訪談中也推翻了之前認為心情會影響運動的假說:大約少於一半的受測者會被引響,而其他的不會,因此將不會加入相關的功能。

✨ 透過訪綱的整理,我分類整理出各個不同的問題與洞見

訪綱整理01-cut拷貝
  • 使用者運動的背景:大約是一週1次-3次、願意從事多種類類型以一個人就能執行的運動為主。願意在家中附近或是室內從事運動。
  • 80%的受測者都曾經花錢在運動上,但最後都會減少花費。也有許多最後就會減少去健身房。
  • 80%的受測者都曾經使用過運動的app。
訪綱整理02-cut
  • 痛點:即使認同目標的設定對達到目標有幫助,但卻沒辦法照徹底持行。有些受測者沒辦法持續使用運動的APP和持續看影片學習運動。
  • 未來APP的方向:受測者認同能達到增肌/減脂的方法;能達到目標完成的方法
  • APP的功能:訊息提醒、引言和心靈雞湯、體態紀錄、影片教學/聲音教學。

前期研究

Persona

我使用 Persona 將目標族群勾勒出來。

exercise_persona

前期研究

User
Journey 
Map

 

在測試之後,發現掛號流程,會產生較多的不流暢,同時也是使用者最常使用的功能。因此針對掛號流程,製作出使用者歷程(User Journey Map)。

exercise_journey-map
02.
Solution
解決方法
Point of View / How Might We / Moscow / Functional Map / IA / User Flow

 

解決方法

Point of View

We met: 使用者、場景、所遇到的問題
使用者想尋找一個讓他們可以持續運動的方式

We were surprised to notice: 我們的發現
使用者有運動的需求,同時很多過去都有報名過健身房,不單是因為費用,而是因為距離和時間沒有辦法配合,所以另外去尋找可以幫助自己達到目的的方法。

We wonder if this means: 獨到的推論
有些使用者不在意去健身房提供的服務,他們只希望動運能夠有效率有方法的被執行。

It would be game-changing to:
讓使用者可以建立習慣、方法的漸進式的學習方式,除了去健身房也能讓使用者有系統的建立運動。

解決方案

How Might We?

 

  • 該怎麼幫助使用者去達到目標,減少他們不去執行的阻力和壓力,並享受達到目標的過程。
  • 該怎麼協助使用者感到上課具有更沈浸式的體驗
HMW

解決方法

MOSCOW

我使用Moscow的方法,將以上發想的功能做整理與收斂。

MOSCOW

解決方法

Functional Map

我透過Functional Map 將功能列表列出。將功能大致分為:獎勵兌換、紀錄、體態紀錄、課程目標、課程、我的主題和設定

funcational-Map-withour-margin

解決方法

IA

我將functional Map 中的功能列表,分類到IA 當中。在IA的分類中,使用了層級不太深入的方式,目的是讓使用者能夠快速去找到內容和功能。,能夠快速的進入到執行的任務上。

IA-new

解決方法

User Flow

透過了解到使用者的痛點:沒有辦法持續運動。將這個核心痛點,轉變成主要的功能,定義為:我的運動主題與單次/快速運動。以下我透過User Flow將這兩個功能的流程做出。

User-Flow-02-
User-Flow-01
03. 
Design
設計執行
Wireframe / Visual / Mockup / Prototype / User Test

 

設計執行

Wireframe

針對使用者的痛點,我繪製了三個流程

流程一:我的課程主題:表現目標導向、多元性的課程
流程二:客製化課程建立
流程三:運動課程選單

wireframe2

設計執行

Visual

我使用漸層顏色和暗色模式,作為產品的主要特點。

🌈 為什麼會使用漸層為主色?

在做視覺規劃時,我從Goalfit的主題做思考起點。此運動主題的產品,視覺需要表現出運動的動感、活力和能量,在這品牌關鍵字之下,我認為漸層除了可以完整表達此特色外,更能代表新穎的氣象,符合此產品的特性。因此綜合上述原因,才選擇用漸層為主色。

為什麼漸層色會是紫色到藍色?

視覺規劃初期我設計了了三種漸層色,並請 2 位使用者做測試。這三種漸層分別為:1.紫色到藍色;2.紫紅色到紅色;3.藍色到紅色。(請參考下圖)
測試後,出乎我的意料之外,2 位使用者都選擇:1.紫色到藍色。她們表示,雖然2.紫紅色到紅色;3.藍色到紅色這兩種配色,能讓他們感到活力,以及運動的氛圍,但打開APP的情境下,會讓他們很躁動,比較不能靜下來。相對而言,1.紫色到藍色最能讓他們專心在動運的執行上。

Goalfit的目的之一是要讓使用者順利的完成階段性的任務,因此,使用者給予的建議就很符合此Goalfit的產品目標;另外,我也思考到,除了動態的運動(重訓、跑步和TAbata)外,Goalfit也有提供瑜珈這類較為靜態的主題,,因此漸層選擇1.紫色到藍色也成為比較符合Goalfit中綜合運動主題的顏色。

⬛ 為什麼使用暗黑模式?

1.白天強光使用下,暗黑模式能減少視覺的反光,增加在使用的效能。
2.在夜間使用下,減少對眼睛強光的負擔。
3.視覺層面上,能更凸顯主色漸層,增加品牌的鑑識度。
4.在感受上,黑色相較於白色,更能提供專業感受,能提升品牌信賴度。

color-1

設計執行

Mock up &         
使用者測試

 

請試試看右邊(手機版則是在下方)的使用者流程吧!

運動流程1

主要課程

進入APP的第一頁面是本週的主題課程。點選課程的卡片即可看到此課程的目前進度
基於作為完成個人運動目標導向,將主題課程分為月曆和列表的呈現,讓使用者聚焦在本週的目標。
透過列表,使用者可以點入課程,開始上課(本次是以跑步的課程作為示範)。
課程最後,會有對課程的評量,有利於使用者作為個人的紀錄,同時也為系統做出評斷的依據

使用者表示

我迫不及待地想用這個APP有多樣性的課程,很符合我的需求

運動流程 2

客製化課程建立

進入APP的第一頁後,點選segmented controls 的目標規劃,即可為試用者進行新的目規劃。

使用者表示

我很喜歡這一個功能,確實可以幫助到我建立到課程

運動流程 3

課程選單

單次運動課程,是為了使用者提供課程的多樣性和種類,讓使用者可以依據當時的心境,選出課程。
課程的分類包含:全部、時間分類、運動項目、我的收藏。

使用者表示

這個可以單選課程的功能真的很棒,除了主要的主題之外,如果我膩了,也可以嘗試其他的主題

單次課程的選單,階層分類可以更加明顯,會覺得有點重複

04. 
Conclusion  
結論

在這一段設計的流程後

結論
首先,真的很感謝您看到這裡。在完成這個專案後,達成了先前所設定的目標:多樣性的課程(瑜珈、重訓、跑步和Tabata)、完成個人目標為導向的設計、智能課程的安排、和課程的紀錄。從一開始的發想到最後的執行,在這個設計旅程,真的是個很有趣和挑戰性的旅程。

可優化的地方

未來規劃

1. 將紀錄的功能做得更加的明顯與完整,讓使用者在上為課程後,可以明顯知道自己的課程會記路在哪一個頁面上。
2.將完成課程的百分比,可以做出更有趣的動畫。
3. 運動的紀錄頁面做得更加的完整。
4. 完成每一個頁面的設計,使整個產品更加的完整。

👋 Hi ! Let's chat  謝謝你來瀏覽,來聊天吧!

與我聯繫

Weidandesign@gmail.com

更認識我

copyright © 2024 Weidan lu. all rights reserved