Fitivate
Workout App Specializing in Sustaining Motivation
After covid 19 closed all the gyms, I found it hard to stay motivated to work out regularly at home. I was inspired to tackle this problem for my first project at Springboard because I knew other people had to be struggling too. I wanted to create a fitness app with the primary goal to help users stay motivated to work out consistently.
After many months of research, study, design, and iteration, I created the app, Fitivate. Fitivate is a fitness app that allows users to track and gauge exercise, make and hit goals, join challenges, be a part of a health and fitness community, and get workouts. It is different from other fitness apps because its main focus is to help the user sustain motivation.
Project overview
Deliver an app that helps users stay motivated to exercise consistently within a 10-week period
Platforms
Mobile iOS/Android
My Role
UX Researcher
UX Writer
UX Designer
UI Designer
UX Strategist
Interaction Design
Deliverables
User research
Competitive analysis
User interviews
Affinity maps
Personas
User flow
Site map
Wireframes
An interactive prototype made with Sketch
User testing of prototype
Problem
Being passionate about health and fitness, I had a strong desire to discover what stimulates motivation. I wanted to identify the catalyst that drives people to work out consistently. Why do some people strongly desire to stay fit and live healthy lives yet cannot sustain that work it takes to get there? My goal was to distinguish the differentiating factors between users who are consistently driven to work out vs. those who want to but just can’t seem to keep going.
How might we help users be motivated to work out consistently?
Approach
On a solo mission for my UX/UI design Capstone project, I used design research methodology to empathize, define, ideate, prototype and test a fitness app focused on sustaining user motivation. Adopting quantitative and secondary research, iterative analysis, design, development, and implementation, I came up with Fitivate.
Primary Goals:
Use design research methodology to understand obstacles of sustained motivation as well as what supports it.
Identify user base, user needs, and pain points.
Create and validate a fitness app utilizing these findings to motivate users to work out consistently.
Research
I started with divergent thinking using secondary research to gather information. Users may have a strong desire to stay motivated but lack knowledge of how they are personally motivated or how to follow through. I wanted to find a solution that would give users the best chance to stay motivated.
My objective was to use generative research to identify barriers and find supporting behavioral science that could bring forth solutions that would get results. This research could also help me pinpoint my user base.
Research Plan
Find out what obstacles prevent users from staying motivated
Determine practical techniques and motivating factors for motivation
Use the findings to clarify the user
App Conceptualization
Secondary Research
Motivation Obstacles & Motivating Factors
To truly understand what compels humans to be motivated, I conducted generative research to learn all that I could to get familiar with common behaviors and drives. Using white papers, case studies, articles, and videos, I compiled information on motivation. I found that obstacles and motivating factors went hand-in-hand with what is called motivational push and pull.
Motivational Push
Motivational Pull
I determined each motivating push and pull can be placed into one of two categories. Intrinsic motivation, motivated from within, or extrinsic motivation, motivated from an outside source.
Motivations: Intrinsic vs. Extrinsic
Motivating Factors to Exercise
Secondary Research
3 R’s Of Habit Formation
I came across the 3 r’s of habit formation, and I knew they would be a helpful link to learn to keep motivated.
1st- Reminder. The cue or trigger that starts the habit
2nd- Routine. The action you take. The habit itself.
3rd- Reward. The benefit you get from doing the habit.
Since the reward is positive, the user will have the desire to repeat the action the next time that reminder pops up. My wheels started turning as I thought about what aspects I could add to the app to help keep the user going.
The Goldie Locks Rule
The Goldie Locks Rule states humans experience motivation when working on tasks that are right on the edge of their current abilities. Not too hard, not too easy, but just right.
Progress Measuring
Having a way to measure immediate progress and get feedback is crucial in sustaining motivation because it helps gauge progress. It indicates where we are and allows us to set goals of where we want to be.
Boredom & Difficulty
When feeling unmotivated to work on a task, it is often because of drifting into an area of boredom or shoved into a place of great difficulty. Finding tasks that are at the border of our abilities gives us the best chance at success. There is a challenge, but we are still capable of reaching it.
This quote from a success guru demonstrates why putting daily effort into fueling motivation is necessary for success.
People often say that motivation doesn’t last. Well, neither does bathing. That is why we recommend it daily.
— Zig Zigler
Competitor Analysis
I recognize the importance of scoping out competitors who may be tackling the same problem space. Checking out their advances and identifying their weaknesses was essential in getting to know the workout app market.
Making a competitor app chart with the product’s primary target, features, and critical considerations helped me organize the data in a palatable way to get a sense of the problems I need to focus on solving.
Competitor analysis chart comparing Features and highlighting key considerations.
After completing secondary research, I used the data to move forward in the developmental stages. All of these valuable tools would, in turn, get me one step closer to making an app that will help users reach their goals.
Empathy
I developed a deeper understanding of motivation, so it was time to get to know the user and their perspective. I wanted to create a product that people need and want, so studying the user was imperative.
I conducted primary qualitative user research by doing user interviews. I took to social media, including Facebook, Instagram, and Slack, to vet users who use smartphones, were 18-69 years old, and desired to work out regularly but struggled to do so. They took part in a screener survey that helped me qualify 5 participants for user interviews.
I choose participants for the interviews based on their ability to provide information and insight into the problem space.
During user interviews, I follow a structured methodology by asking prepared how-and-why, behavior-based questions. I then recorded what users said in the interviews and made notes to analyze their input.
“If I don’t have a positive attitude, I don't want to go to the gym.”
-Janel, during informational interviews
Synthesize
Time to synthesize my user research to explore the user needs and start to uncover the pain points.
Affinity Diagram
I used the notes from the participant interviews to create an affinity map. I grouped the users’ ideas, opinions, and issues and organized them into groups based on their natural relationships.
Affinity map.
Helpful for success, preferred workouts, challenges, pain points, and successful app uses/ suggestions were the groups that came together, with a significant focus on pain points.
Empathy Map
I put together an empathy map to bridge the gap between personas and my design concepts by gathering thoughts, feelings, goals, and behaviors I found during user interviews.
I synthesized the gathered input and focused on what the users think, feel, say, and do. Doing so helped me identify specific user pain points.
I realized I could narrow down the pain points into two main categories.
Intrinsic and extrinsic
The extrinsically motivated were lacking social support
The intrinsically motivated were lacking internal drive
Personas
I created the personas using the observations and analysis I recorded up to this point. Once I identified motivational drives to be intrinsic or extrinsic, I realized it would be a great starting point to creating empathy with the end-user.
Returning to personas throughout the project was helpful to keep it aligned on staying user-focused. The persona method helps create a deep understanding of customer behavior, needs, and goals, creating a greater sense of empathy with the customer, which helped me provide a tailored design based on the user’s specific needs.
User Needs
It is important to me to design a successful product for people and to do so, I need to understand them. Setting goals, identifying problems and potential issues in the user-product relationship are essential. Understanding user needs is my number one priority, and it will help me find a successful outcome.
How Might We?
I wanted to be sure of the exact problems I am designing for, so I put together a handful of problem statements to gain awareness.
Question 1
How might we help motivate users daily?
Have a selection of motivational, inspirational, and reminder notifications delivered to users. Users can set their notification frequency, and time of day they would like each message to be delivered. Each type of notification would be optional.
See examples below:
Inspiration Notification
A daily inspiring quote notification that pops up at the time of day users choose.
An example of a Daily Inspirational Quote notification.
Motivation Notification
Users get a notification of their pre-set goals as a daily reminder to help them stay motivated to complete their goals.
Reminder Notification
A health tip reminder pops up as a notification prompt.
EX.
Go for a brisk walk today. You will sleep better tonight.
Eat one cup of dark green veggies today. It can help reduce headaches and cravings for sweets.
Stretching 20 minutes before bed leads to a more restful sleep.
Drinking half your body weight in water each day helps your muscles and joints work better so you can work out harder and heal faster.
Question 2
How might we create a feeling of community to help users feel supported?
Have a social community of health and fitness users post, like, share, and comment and join and start groups.
Possible Idea:
An inspiration board might look a little like a Pinterest layout format with health and fitness articles, blog posts, and groups.
Question 3
How might we get the user’s mind in the right place to stay motivated to work out consistently?
See inspiration, motivation, reminder notifications above under question 1.
Question 4
How might we help the user organize their time to make room for regular exercise?
A calendar where users can schedule their workout times to prioritize and sync with common calendar apps. Notifications will remind beforehand of workout times if/when needed.
Question 5
How might we encourage users to continue their workouts even when they are away for work?
Have users schedule workouts into the calendar and provide them with exercises they can do with their body weight via collaborations with fitness companies/personalities who have workouts available.
Ideation
As I prepared to make my design decisions, I had to start to visualize based on what I learned from my research to conceptualize a prototype solution.
User Stories
I created user stories based on my user interviews, research, and personas. They are written from the user’s perspective to get into the user’s mind to understand what they need to do to accomplish a task and why they need to achieve it instead of a description of a solution. With a strategic objective in mind, grouping together the user stories helped me to distinguish the epics. Organizing in this way, I was able to get an idea of where my time would be best spent to pinpoint and prioritize essential tasks. It also helped me to decide on the Minimal Viable Product (MVP).
Epics
MVP
Help for Motivation
Logging & Tracking Data
Join a Challenge
2nd Release
Community
Health & Fitness Information
Access to workouts
Sitemap
Once I got an idea of what I needed to create, it was time to lay out a hierarchical sitemap. The site map helped me keep track of different screens and visualize how they are connected. I determined how the app pages would be prioritized, linked, and labeled and what content would need to be designed for each one.
Red Route User Flow
Having a sitemap, I could begin to determine the user flow throughout the pages. Understanding the route the user is most likely to take, the red route showed me what pages to focus on to design first.
In this instance, the user flow started with the onboarding process, Onboarding Redline User Flow, where the user would begin their journey after downloading the app. They sign up and set up their app with their personal information and goals.
The second red route, Stat Compare Redline User Flow, was checking and comparing their workout stats.
Low Fidelity Sketches
I wanted to sketch out my red routes to communicate my ideas and get feedback before investing too much time into the full designs. Doing so would allow me to work with the low-fidelity sketches and modify them quickly before moving onto wireframing.
I sketched out the onboarding process. It was vital to incorporate the information I gained during secondary research to hone in on the behavioral techniques that help with staying motivated.
I added an open-ended goal and mini goal field to input personal user goals that they felt passionate about. Having their goals customized to the desire that is driving them would help with sustaining motivation.
I felt it was essential to add a page to pre-schedule workouts. According to research, preparing for workouts beforehand made it more likely the user would follow through. I also added an optional workout reminder notification to remind the user of their exercise in advance.
The last page shows each type of notification and allows the user to set the frequency.
Compare Stats Red Route
The dashboard is the home screen, and it incorporates essential features to help the user stay motivated. Having a daily inspirational quote, the percentage goal tracker, recent insights stats, and upcoming scheduled workouts can help keep users motivated.
Guerrilla Usability Testing Methodology
It was time to put these sketches to the test. I found five users in the local park to do moderated usability tests. I used my low-fidelity red route sketches as screens with the Marvel POP app to simulate the onboarding process and the Comp Compare Red Route. My main objective was to make sure both routes were clear, easy to understand and navigate. I needed to know what users liked about the app as well as what was less intuitive.
The usability testing proved very helpful, and I was able to get some good feedback from my users and find an edge case.
Initially, I wanted to have the user input their personal goals to track during the development and research stages. However, I discovered an edge case that brought me to change that method. After much brainstorming and wishful thinking, I could not come up with a way to quantify the vast forms of unit tracking that would be necessary for each goal type possibility, so I changed the goal and mini goal to step and weight goal. I choose Step and Weight because it is the most common way to make goals, and they are easy to track. To help me do that, I added Height and Weight to the personal information page to gauge the data as needed.
During guerrilla testing, some users were unsure what the word Insights meant, but since other apps were using that term, I decided to test it further and see how it went with future users.
A few users were not sure how to expand and collapse the graph. To make it easier to find, I moved the expand/collapse arrow into the graph instead of the top of the page.
Wireframes & Wireflow
This route is the common route a new user would follow. It starts at the onboarding process, then to the App Dashboard, next to Examine Steps Graph Details, where they would take a look at their steps for the day. You will see a star showing where I implemented changes in the wireframes based on guerrilla usability testing and edge cases.
I also moved the Home Icon on the Bottom Navigation bar from the middle of the bar to the very left, a more common placement.
Prototype and Validate
The Design Process
Brand Platform
Having a solid brand platform is of utmost importance to me. It can define the message to the audience and shape the very essence of the brand. It creates cohesion, direction, clarity, and unity amongst all platforms and media. A design guide is a manual for the look, the voice, and the feel of the brand.
Name
Fitivate. I choose this name by combining the words fitness with motivate, creating Fitivate.
Logo
Energizing, trustworthy, fresh, clean, modern
Symbol
Arrow showing forward movement, acceleration, propelling forward
Note, the first sentence of the mission/vision appeals to the user’s needs for help to reach their goals. The second sentence tells a brief explanation of how Fitivate will help them succeed with those goals.
Brand Personality
Fitivate is user-centric and genuinely cares for users' fitness journey. Providing a support system of inspiration and motivation is the top goal. Fitivate truly cares for every user and is there to help them succeed.
Brand Attributes
Users need to feel energized, empowered and encouraged. They need to be compelled to take action by being inspired and motivated to accomplish their goals. Being able to instill trust shows the user that they can be comfortable and depend on your app.
Color Palette
I chose the color Coastline for its soothing mid-tone teal, which had a classiness with its grey undertone. It added hints of life and inspiration. It worked great because it is gender-neutral and likable among many. For the energy pop, I used Lime to bring excitement and pep. I use the secondary accent color strip throughout Fitivate to tie together the feel of the brand.
Color Strip
Design and Layout
I added pops of invigorating color to energize and excite the user. I wanted a modern look, so I added rounded corners, a modular design with a customizable layout. There is an excellent opportunity to delight the user with color and movement.
Imagery
I wanted Fitivate’s imagery to set the brand’s personality and reinforce emotional connections by helping users feel comfortable, united, and supported. It is essential that users relate, be inspired, awakened, and get a sense of adventure.
Prototype and Validate
High Fidelity Designs
I collaborated on all aspects up to this point to create the high-fidelity mockups. It was an iterative process as I designed, got feedback, and then adjusted my designs once again.
I incorporated changes from the wireframes for the 1st round of hifi designs, but I wasn’t entirely satisfied with the overall look. Although it was pretty, it wasn’t hitting the mark for modern, and it looked a little too feminine and soothing. The grey tones were nice looking, but they didn’t match the intensity and range I ultimately wanted to establish, so I knew I would like to spend some more time finding the perfect palette.
Animations
2. Screen Transition Animation
An animation showing the expand/ collapse screen transition.
Click the link below to try animation.
1. Customization
Being able to tailor the app experience to what suits the user is a great feature I wanted to add to the app. Here is an animation showing how you can customize the Insights page. Click, hold and drag an insight to activate changing its order. Click the link to see it in action.
Click the link below to try animation.
Design Progress
After some thinking, I realized that the app needed a nice crisp white and off-white to allow the primary and secondary colors to pop. Doing so made the design look modern, simple, and clean, just like I intended.
Here are the three design progressions from oldest to newest.
Note the changes in the bottom navigation bar to have a clean, modern feel. I also did away with the border around the schedule and graph to have less clutter creating less cognitive load.
Design evolution from oldest to newest.
Test
Investing in the design’s look was going well, but I also wanted to optimize the app’s function to make it as user-friendly as possible, so it was time for another round of user testing.
Notifications
Several users suggested adding details to notifications to help understand what each notification stands for, so I added short descriptions. I also added an opt-out choice for each notification labeled as none.
I also changed the radio buttons to sliders as it made it easier with the design space and more intuitive.
Schedule Workout Calendar
After multiple iterations and user feedback, I found a convenient way for users to add workouts and see past workouts.
Conclusion
On the next project, I will be sure to stay on track during the design stage to make sure I am focused on the brand’s look and feel. I could have saved time during this project if I took a step back for a minute to re-access the direction it was going and evaluated where it needed to be.
During this project, I learned the total value of design thinking. To empathize, define, ideate, prototype and test my ideas helped me create an app with a unique set of tools. These tools can help users on their fitness journey to stay motivated to exercise consistently.
Qualitative, competitive, secondary, generative, and user research were essential in developing a user-centric product that I hope will one day make a positive change in user’s lives.
Prototype Links:
