FitSync aka...

How I made an app to help busy people schedule workouts with their friends.
Role:
UX/UI Designer

Duration:
June - Sept 2023

Designed for:
iOS

Responsibilities:
User Research, Wireframing, Product Design, Prototyping, User Testing

Tools:
Figma, Figjam, Otter.ai, Pen, Paper

Project Overview


Problem: Canadians aged 35-55 are motivated to work out with their friends but find that they are too busy to exercise.

HMW: How might we motivate Canadians aged 35-55 to fix their schedules with a partner to reach their fitness goals?

The Solution: A fitness app that syncs existing schedules and allows the user to match their schedule with a friend to plan a workout in advance due to their busy schedule.

Constraints: Time (12-week BootCamp with one project due every week while learning UX/UI fundamentals)

The Double Diamond Process


I used the Double Diamond Design Process throughout the duration of the case study. I wanted to use a methodology that would help me fully demonstrate the UX process.
The Double Diamond Design Process Model
"The Double Diamond Design Process Model" 20005. Published by the UK Design Council.
Demonstrated throughout the FitSync Project.
1) Research and Discovery

I was drawn to fitness and how I could help people maintain a fitness routine. So, I dove into some research.

  • 2020

    40.5%


    of inactive Canadians became less physically active, during the pandemic.
(Lesser, 2020)
  • 2023

    57%


    of Canadians, 35-55, say they acted to maintain their routine. A drop from 2020. (Researchco, 2023)
  • 2023

    33%


    of Canadians cancelled their gym memberships
    (MadeInCa, 2023)
After initial research, I made a hypothesis and conducted three interviews:

Hypothesis:

I believe that social accountability can motivate people to stick to their fitness goals. I will know that I am right if 2 out of 3 interviewees agree to social accountability as a motivator.
User Interviews for FitSync
2) Synthesis

I sorted the data into different pain points, motivators, and behaviours and discovered something interesting.

I was wrong.

Sort of. 100% of interviewees agreed social accountability was important, but the biggest pain point I discovered was poor time management due to a busy schedule.
Main results from the theme Time Management
Scheduling was the main theme.

  • There is a general desire to work out more, but life gets in the way.
  • Respondents are interested in having a workout partner.
  • It's challenging to commit due to either being too busy or not being able to manage time well.
  • However, friends were STILL a motivating factor

I decided to retool my hypothesis to ask a question...
How might we motivate Canadians aged 35-55 to fix their schedules with a partner to reach their fitness goals?
Understanding the User

Using the data, I created a user persona named "Joe" and followed him on his journey. Analyzing Joe's journey highlighted the importance of syncing one's schedules with one's friends.
An image of the user experience map for Joe
3) IDEATION

An app was chosen as the best solution. Defining the features was the next step of the process.

A tale of two epics

Initially, I chose only one epic. However, I decided to use two epics to focus on: Workout Scheduler and Friend Matcher, because they solved the problem together.
A list of user stories for Epic 1: Workout Scheduler
Epic 1:
Workout Scheduler
A list of user stories for Epic 2: Friend Matcher
Epic 2:
Friend Matcher
Two Task Flows

Since I decided upon two epics, I demonstrated two task flows following the user scheduling a workout for the first time. Once a user has a workout date, they will be prompted to find a friend to match with. It was a challenge to use both instead of one, but it was necessary to show the value of the app.
The primary task flow flow of a user booking a work out date
1) The user completes the first task flow by booking a date
The secondary task flow flow of a user booking a work out date
2) The user continues into the next task flow of matching with a workout partner
4) Wireframes

It was time to put pen to paper and hash out ideas. After that, the sketches were translated onto a digital format.

An image of mobile app sketches on paper
Paper Sketches
5) User Testing & REVISIONS

I conducted two rounds of user testing and received feedback, prioritized solutions, and made changes.

2 Rounds of User Testing
Many solutions were high impact
Using a Design Prioritization Matrix, like the image to the right for both rounds, I sorted solutions to identify which ones I should prioritize based on effort and impact.

I learned that many of my initial ideas were identified as issues with high impact, so I prioritized fixing those issues.
An image of a design priority matrix
An image of mobile app screens with low fidelity wireframes for version 2

Version 2 (Low-fidelity)


My revisions were based on making it easier for the user to know their next action. This included steppers, actionable language, and highlighting where users could tap.


View the interactive prototype for Version 2

An image of mobile app screens with mid fidelity wireframes for version 3

Version 3 (Mid-fidelity)


The final round of user testing resulted in a higher usability score. The solution with the highest impact and low effort was to add images so users could better understand the context of what's happening in the app.


View the interactive prototype for Version 3

6) Branding

In order to fully realize the app, it was important to establish a strong brand for users to relate to.

An image of various images, photos, and textures to create a moodboard for FitSync
Moodboard
I defined five moods to describe the app: motivated, energetic, accomplished, confident, and active. I found images, patterns, and typography to represent these moods.
Wordmark & Colours
FitSync was chosen as the name of the app because it applies the main draw of the product: to sync your fitness schedule with a friend.

The logo invokes the image of a dumbbell combined with two arrows representing "syncing."

  • The brand colours of Golden Yellow and Gunmetal were extracted from the moodboard.

  • Tints of the brand colour were used throughout the app to fit the mood as necessary.

  • Accent colours that were chosen were Hawk's Blue and Ivory to help bring a calm and cool contrast.
An image of FitSync's logo and brand colours
An image of the font Outfit and various versions of it
Typeface
The Outfit Font Family is a sans serif font that is simple, clean, and gives a modern vibe.

It’s a perfect “fit” for FitSync as the typeface also shares the same word in its name.
Accessibility
I also chose the colours in mind to be accessible. I chose dark mode because it matched the mood I wanted users to have as well as being excellent at meeting accessibility standards.
A series of images that show accessibility requirements
7) High-fidelity

Purposeful colour injection was added after many revisions and iterations to create a fully realized product.

A series of images that show high fidelity screens of FitSync

High Fidelity Screens


New updates were added as I translated wireframes into High Fidelity. I added a calendar on the dashboard, the send request hierarchy was fixed, and events were added to remind users what other appointments they had on their calendars.


View the interactive prototype for High-Fidelity

8) Marketing

Through various iterations and feedback, I developed a responsive marketing website to showcase the value of FitSync.

9) Next STEPS

If FitSync were to continue, I needed to consider the future and evaluate the value of FitSync.

Value Proposition
FitSync brings people together through fitness
  • Currently, no other app on the market offers users the ability to match their schedules to continue their fitness journey.

  • FitSync allows users to make new gym workout partners if their friends aren't available.
A photo of a person holding a phone that has a FitSync app loaded on it
Next steps and Considerations
  • -1-

    How might cultural habits change your product?

    There could be a shift towards fitness without a gym. If that were the case, FitSync can also help people schedule their workout with or without a gym.

  • -2-

    What is a possible scandal that could happen?

    Calendars could be leaked, and privacy would be a huge issue. FitSync aims to keep all users' privacy intact and will take measures to protect users' privacy.

  • -3-

    What happens when 100 million people use your product?

    FitSync could become the de facto communication platform in the country like LINE does for Japan. With this, FitSync could branch into other areas, such as business and entertainment.

10) CONCLUSION

The process was challenging, but surprisingly, summarizing all critical learnings into a few sentences was eye-opening.

Takeaways
  • Importance of testing. Testing with the target audience helped emphasize the impact that my idea could have.

  • Colour branding. I learned to embrace the colour process so that every color choice was made with intent.

  • Focus on the problem. Not the solution. Anyone can think of a solution, but taking the time to truly consider a user's needs before taking action is more important.

Thanks for reading! Why not see more projects from me below?

E-mail plugin
Sentry
An e-mail cohesive plugin that detects AI Phishing scams. This was part of a 24-hour hackathon.
Made on
Tilda