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.

Main.png
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

Frame 12.png

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

why not workout.png

Research showed that competition is a strong motivator for people and having support from others keeps them going and achieving their goals.

quote.png

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 

quote.png
quote.png
quote.png

Competition appears to trigger a ratcheting-up of physical activity levels that creates an upward spiral within an entire peer group.

quote.png
quote.png

Using digital devices to create a healthy competition with yourself is another viable option for increasing your levels of physical activity. 

quote.png
quote.png

When done right, we found that social media can increase people's fitness dramatically.

Competitive analysis

Frame 33.png

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 

user flow.png

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.

MacBook Pro 16_ - 2.png

Low-fidelity wireframes

I created a prototype with low-fidelity wireframes to test it with 5 participants. Key features to test:

 Challenges ​

  • Personal

  • Group

goal.png
chat.png

Chats

  • One-on-one

  • Group

network.png

An option to share

results of workout/

challenges

article.png

Articles/Motivation

pages

Findings from the first round of testing

Main page zoomed.png

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?

20 000 steps.png
Challenges find new.png

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.

Style guide.png

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

2.png

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.

4.png
7.png
t.png

#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.

iPhone 13 Modckup.png
iPhone 13 Mockuddp.png

#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.

iPhone 13 Mockuddsp.png
iPhone 13 Mockup.png

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.

iPhone 13 Mockup.png

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.

See my other projects

MacBook Pro 16.png

Languify

iPhone 13 Pro.png

Parkegy

SAVR recipes

SAVR.png