Fitio
A family and friends health & wellness tracking app.
The app allows users within a family/friends group to see how others are doing regarding health and fitness.
My role
Research, ideation, design, prototype, testing
Team
Solo UX/UI Designer
Tools
Figma, Zoom
Duration
1 month
Problem
On average, user engagement is heavy for the
first three weeks then it drops off and soon after users delete the app.
Solution
If members of the family or friends group can message individuals or the entire group at any point throughout the experience, engagement and repeat usage metrics will increase.
Process
Empathize
Define
Ideate
Design
Test
Implement
Secondary research
Competitive analysis
Synthesize research
User flows
Sketches
Lo-fi wireframes
Style guide
High-fidelity design
Usability testing
Document the final
solution
Empathize | Define
I started my work by conducting secondary research and doing competitive analysis. The main goal of the research was to understand why some people keep working out and others start and soon drop out. Also, I wanted to find what would help people stay motivated and engaged. I was able to find a lot of useful information. The key findings are listed below.
Why people DO work out
Why people DON'T work out
To lose weight
Physical health
-
To have a fit body
-
To build a body to match my confidence
-
To fit in nice cloth
-
Romantic interest
-
Because of diagnoses that can be improved by working out (obesity)
-
To stay healthy at old age
-
To feel energy
-
To balance eating and working out
-
To enhanced immunity
Mental health
-
To help with depression, anxiety, stress, anger
-
To be more patient and calm
-
To feel happy after workout
-
To feel comfortable in the body
-
To boost confidence
-
To learn how to use the mind to push the body
-
To inspire myself
-
To challenge myself every day
-
To have clear head
-
To focus easy
-
To have increased definition in thinking
Social reasons
-
To be competitive in any physical activity
-
To inspire others to improve themselves
-
To get compliments
-
Someone of friends/ family started to workout
Organization
-
To build discipline
-
To build routine and habits
Research showed that competition is a strong motivator for people and having support from others keeps them going and achieving their goals.
Train regularly with a partner who calls you by phone if you have not been to the gym at the scheduled time. Having a person depending on you influences us so as not to miss any training. If we have started a series of objectives with him, we will feel obliged not to abandon him.
In addition to acquiring commitment, you can help with certain exercises and, most importantly, you will make the session much more enjoyable
Competition appears to trigger a ratcheting-up of physical activity levels that creates an upward spiral within an entire peer group.
Using digital devices to create a healthy competition with yourself is another viable option for increasing your levels of physical activity.
When done right, we found that social media can increase people's fitness dramatically.
Competitive analysis
Doing competitive analysis I realized that while all of the apps have some kind of community and newsfeeds, there is a lack of communication between members of the application and also a lack of support from the community.
User Flows
Sketches
Using my user flows as a guide, I started with paper sketches as it's the faster way to try multiple approaches. Different solutions have been sketched but I listed only the final option below.
Low-fidelity wireframes
I created a prototype with low-fidelity wireframes to test it with 5 participants. Key features to test:
Challenges
-
Personal
-
Group
Chats
-
One-on-one
-
Group
An option to share
results of workout/
challenges
Articles/Motivation
pages
Findings from the first round of testing
Some users thought that screen is cut, it wasn't clear that fields could be scrolled horizontally.
* I didn't add scrolling for these objects for low-fi prototype.
#1 No option to see the percentage of completion
#2 How to see the progress of one person separetally?
No option to search for a specific challenge
Style guide
I aimed to convey a sense of elitism, embody the vibe of warmth and cheerfulness, and make the content stand out, while also keeping the design simple and fun. To achieve this, I chose a dark theme and added engaging colors.
Due to time constraints and to get inspiration, I used a UI kit to create a high-fidelity design. To make sure that the dark theme meets accessibility standards, I used a Material design system as a guide.
High-fidelity wireframes
As soon as I was done with high-fidelity wireframes, I created a prototype for the second round of testing with 5 new participants. Based on the feedback from users, I iterated on my design.
Major changes
Many users didn't realize that the date can be changed
"How can I see different types of the graph? If there will be more than 10 participants, it would be too overwhelming"
I've added an option to choose a different type of graph, changed the color of the date, and added a progress bar for days that are left till the end of the challenge.
#1 Some of the users were confused about what was shown on this page: all challenges that are available or challenges that they have already signed up for
#2 No visual on how urgent is to do a specific challenge
Below the "Personal/Group" buttons, I added an explanation text, so users can always know what this page displays.
Also, I added a line that shows how many days remain until the challenge is complete, as well as showing how much activity is required.
#1 Buttons look the same, the wrong button can be accidentally pressed
#2 Not very clear that the button is clickable
In order to avoid confusion, the buttons were changed to different colors.
The "Chat" button has been redesigned to clearly indicate that users can start a conversation with a person who challenged them.
Users were confused with the “share/invite” buttons, they thought it has the same functionality
Tips with explanations of the buttons will be displayed for first-time users.
Final design
Try the prototype yourself
Next steps for this project
-
Add option to schedule a workout
-
Add motivational push notifications from the app
-
Add option to share results of workout/achieved goals automatically with a specific group of people
Project takeaways
-
It was quite a challenge to design a dark theme and keep in mind accessibility. I gained a lot of knowledge and learned how to use the Material Design system.
-
A UI kit can be useful for speeding up the design process. Also, it's a great source of inspiration.
