Fitmark is a singular platform based on an concept iOS app for users to easily link and organize all of their fitness content, while also staying connected with friends through fitness.
My Role: Sole Product Designer
Tools Used: Sketch, Adobe Illustrator, Adobe Photoshop, Miro, Marvel, InVision
Duration: 3 months
CHALLENGE
Helping people work out at home
It started as work from home and then it became work out from home…
COVID-19 shifted everyone’s usual fitness experiences. People who usually take group classes or work out at the gym now exercise at home alone. Studios and gyms have converted their classes into a virtual experience, and thus, virtual wellness has suddenly become everyone’s new norm.
It became increasingly overwhelming and difficult to keep up with the surge of fitness content out there.
Working out at home lacks the same motivation and sense of community that there once was at a gym or fitness studio.
So the question at hand is, how do we optimize works out at home to save time and include a social aspect?
SOLUTION
Discover it - Save it - Do it.
Fitmark promotes one place for users to view, save, and organize their fitness content along with constant motivation and accountability from friends. My goal was to create an app for users to save time searching for a workout and improve overall workout experience at home. As well as, provide a way for users to connect with their friends through fitness virtually.
PROCESS
The approach
DISCOVER
Literature Review
Heuristic Analysis
User Interviews
DESIGN
Brand Development - Illustrator
Iterative Sketches
Wireframes - Sketch
Hi Fi Screens
IDEATE
Personas / Empathy Map
POV Journey Maps
User Flows
TEST
Rapid Prototyping in Invision
Usability Testing (3 rounds)
Implementation
DISCOVER
Gathering research
Literature Review
WORKING OUT WITH A CROWD INCREASES COMMITMENT
95% of those who started a weight loss program with friends completed the program, while those who tackled it alone only had a 76% completion rate. Those who worked out with peers were also more likely to maintain their goal.
SELF MOTIVATION FROM TEAM MOTIVATION
Those who exercised with a more capable partner increased their plank time by 24%. Working out with a community also offers a positive competitiveness.
ORGANIZATION = LOW STRESS, MORE TIME
“By keeping organized, you will save time looking for things and will have more time to work on important tasks. You can reduce your stress level. If things are organized and labelled neatly, tracking this down should be a piece of cake, rather than a source of stress!”
What’s Out there Now…
Using the information from literature review, I performed a light competitive Nielsen Norman Group usability heuristic analysis based on 3 competitors: FitOn, Peloton and Pinterest. These 3 apps provide a similar solution to the challenge I am trying to tackle - to improve user’s social connection in fitness, while also organizing their fitness content. FitOn and Peloton provides a library of fitness content, while offering a platform for social connection. Pinterest provides a platform for users to discover, share, and save inspiring content or ideas in one place.
Full analysis found here.
Excellent - No usability problems
Good - Little usability problem, fairly easy to overcome
Average - Minor usability problem that should be given a low priority to fix
Fair - Usability problems, that should be given some priority to fix
Poor - Very difficult to use and imperative to fix
Speaking to Users
I created a survey for potential interview participants via Survey Monkey and received 32 responses over the course of a week.
I interviewed 9 users who fit into the criteria of what I was looking for - a frequent (3+/week) fitness enthusiast who takes fitness classes with friends or a group and references a lot of fitness resources for inspiration.
Cardio tends to be the main type of fitness content out there, and women tend to do more aerobic based workouts, therefore they use the most fitness content for inspiration. Thus, my interview sample took into account more women than men. The sample includes 8 females and 1 male aged from 25-38 years old, located in the tristate area (NY, NJ, CT) with different ranges of fitness levels.
The interviews took about 30-45 minutes and included topics to get to the core of what users are currently doing for their at-home fitness routines and what problems they are running into.
Deeper insights
I was able to organize and analyze the interview notes through an affinity map, this was the best way to organize my thoughts to see trending problems and goals. This map was used as a tool to create my design goals, empathy maps, and personas.
You can view full image here
ONE PLATFORM
All of the users want to save time. They desire a singular platform where they can reference all of their fitness options, as well as view their past workouts.
Users like structure and a schedule.
FILTER TO LIMITATIONS
100% of the users have some sort of limitations. This includes space or equipment.
Users do not have the ability to filter based on limitations or similar fitness level.
“It's also difficult to know this is a class that other people who are men like me, who do certain types of exercises also really like...I think it would be really useful to know when picking out a class.” - Vikram
“I like seeing what classes she has done because I know she is like me and I have a better gauge of whether or not I can handle it” - Carol
SENSE OF COMMUNITY
All of the users enjoy working out with friends or a group of people to some capacity, mainly for motivation and accountability. It also helps them save time because they can work out and also socialize at the same time.
Users like the connection fitness creates.
Users look for instructors that motivate and also keep an eye on their posture.
Users use social media or word of mouth to find fitness content.
TOTAL GYM AT HOME EXPERIENCE
100% of the users need and require music to workout to. It’s extra motivation, especially at home.
100% of the users prefer to workout to a bigger screen.
IDEATE
The vision
How might we…
> Provide a way for users to reference their fitness content in one place?
> Help users find content based on their limitations?
> Help users feel like they’re working out with their friends at home?
> Help users create structure in their fitness activities at home?
User personas - meet Jillian & Kat!
Using the information from the user interviews, I realized that all the users wanted the same end goal: a way to save time by staying organized and still being connected with friends. However, there are 2 slightly different personas that I gathered from creating an empathy map. Jillian is a newness addict, while Kat is creature of habit. The personas helped me to narrow down user flows based on their needs.
Jillian - The Newness Addict
Likes to find new fitness inspiration. She prefers to take classes for her fitness routine and tries to invite her friends every time. She goes to the gym if she’s crunched for time.
I created a journey map (see below) to gain some empathy and understanding of what Jillian experiences during her at home workout. She ultimately struggles to find the right workout content to follow and runs into a lot of technical phone issues.
Kat - Creature of Habit
Likes to rotate between the same fitness routine. She prefers going to the gym with a structured schedule in mind. She takes one fitness class a week that she tries to schedule with a friend. She enjoys creating challenges with friends to hold herself accountable in the gym.
With Kat’s journey map, she ultimately struggles to find the video she had followed in the past. Since she already knows what she followed in the past, it causes her frustration to have to re-watch the long intros. She also runs into some technical phone issues.
How will Jillian and Kat stay organized? How will they work out and socialize through fitness?
Here are the 6 flows I prioritized for Jillian and Kat to fulfill their tasks.
1. Create an account
Jillian and Kat can link all of their content, like the Nike App. This allows them to view all their app content in one place!
They have the option to have the app organize pre-organize any saved bookmarks to save time! However, both Kat and Jillian organize bookmarks themselves so they know where everything is.
Jillian and Kat can enter their personal fitness level to be able to gain insight from similar users.
2. Save a Bookmark
Find and save fitness inspiration and workouts.
Folders to stay organized and save time.
Create [personal] Tags for filters. Jillian and Kat can create their own personalized tags so they have the option to filter by tag as they’re figuring out what to work out to. For example the option to filter by certain weights or equipments that they have at the start of a workout.
3. Start a Workout from a Bookmark
Include features such as casting, link to music, trim and more to improve the work out experience.
Able to keep track of all workouts in one place.
4. Reference Past Workouts
Keep track of past workouts - important for Kat, who normally goes back to the same video to work out to.
5. Create a Routine
Users can create structure and reminders with a calendar.
Follow multiple videos at once.
6. Invite Friends to a Workout
Invite friend to workout for motivation and accountability.
Send message for that' “fitness connection”.
DESIGN
Pen to paper
I created a paper prototype and conducted a guerrilla usability testing session with 5 users. The goal of the testing is get initial feedback on user flows and to ensure that it is intuitive and easy to use before proceeding to create wireflows.
(Of the 5 I tested, only 2 participated in fitness activities. The users were given tasks to see if they will follow the pre-designed user flow.) Users passed all tasks, with some minor difficulty.
I discovered the following -
Users would prefer to have skip as an option wherever possible.
All users said it would be great to have a quick walk through when they downloaded the app. They didn’t realize there was a calendar section.
They were confused by the wording for “add workout” or “create routine”.
Wireframe layout mimics a social feed
The wireframe was designed after improving the paper prototype. This allowed me to visualize solutions and conceptualize my research, especially the concept of viewing all bookmarks from different apps & platforms in one central area.
The layout was designed to look similar to a social feed. The general feedback from users is that they mostly use Instagram to find new fitness content. Kat and Jillian like the ease of clicking a bookmark and saving to a folder as they’re scrolling.
In addition, I was able to use it to test on 3 users. Users were able to complete all tasks, however it was difficult to hold users attention because it was in black and white.
I discovered users did not try to read any pop-ups, they were quick to close any that showed up. They clicked on icons and buttons without understanding the function. It could be that the interface wasn’t engaging because it was in grayscale, but I decided to improve the layout so that it was more similar to apps they’re familiar with for easier and faster use.
I also realized the save a bookmark feature user flow needed an update as all three saved booked through the feed versus adding a link. I was curious to see test this in the hi fi testing…stay tuned.
Fitness + Bookmark = Fitmark
The name Fitmark derived from the literal combination of fitness and bookmark. I wanted to name the app with a verb-like word, so users can say they “fitmarked” a content.
The logo is an iteration of an “F” and “M”.
I chose Bolt Blue as the main primary color because it’s unisex and can translate to both calm and excitement. The black and white helps to ground and balance the brightness of the blue. I kept the palette simple to allow the fitness content to be the main focal point.
TESTING
HiFi Screens + Rapid Prototyping
“The invite friend feature feels hidden!”
I contacted 5 people that participated in the initial screener survey and conducted a moderated usability testing on all the user flows. The sessions lasted 20-30 minutes. All tasks completed.
Task Difficulty (hover for key) -
Likes: the feed aspect and being able to browse through apps, tags and similar user rating.
Wanted tags and folder info clearly labeled within each content’s page because users would prefer to quickly glance at their personalized tag instead of reading the given description.
Users intuitively went to each content’s menu before going to the calendar page or add page.
Most fitness apps don’t allow users to create their own schedule. This is a new feature that people are not familiar with.
“If I had a new app it would walk me through the app...I wouldn’t have gone to the calendar. I don’t really go into the calendar in apps because I can’t edit it.” - LC, Tester 1
Users felt the invite friend feature was hidden and it would be something they would use.
Next round - 85% Task completion
Tested 7 people in total - 4 people with moderated testing + 3 unmoderated testing with testmyui.com.
Updated screens to reflect findings from the first round of high fidelity testing above - see left.
100% Task completion. All users found the app to be super intuitive. The task difficulty improved for flow 3, 5 and 6 from initial high fidelity testing!
The Results
1. Create an Account
Kat and Jillian can link their fitness apps and friends through Fitmark’s onboarding process. It compiles content from their apps into their feed. They have the option to send messages to friends, discover, bookmark, work out all in one place!
2. Save a Bookmark
Bookmark fitness content within your feed or from an external link. The bookmark page allows them to see all of their favorites in one place and organize within by personalized folders and tags.
Save from external link
Save within feed
3. Start a workout from a bookmark
Kat and Jill can start a workout within the app. They have preferences to enhance their experience that would normally not have with other apps, such as locking screen or “trimming” videos (can only cut off start and end).
Users rate the difficulty at end of every workout so the data can be used to create an average difficulty rate from similar users.
4. Reference past workouts
Kat loves to work out to videos she’s done before. She can easily reference her past workouts through the app.
5. Create a routine
A way for users like Jillian to create structure at home. Piecing together videos she can play it all at once.
6. Invite a friend to workout
During usability testing, testers preferred to invite friends to workout using the add friend icon.
Users can call their friend during a workout so it feels like they've worked out togehter.
Initial User Flow
Updated user flow
Other - Send Messages
During usability testing, testers raved about the messaging option. When prompting them share a message with their friends, all users noted they would use this feature more than actually work out with a friend at home.
Which made me realize users frequently see content that their friends might like or have done a workout that their friends might like. They are quicker to share those first, as they’re used to doing this even before the pandamic. I should have prioritized this flow first.
In retrospect
If I could do this all over again, I think I would focus and narrow down the MVPs into small chunks - I went gungho on all these fun ideas, but didn’t account for the build…at least this is just for fun!
However, at the end of all of this I was able to create a comprehensive app experience that provided a solution for a problem that myself and many other users experience. This was a really fun project for me because it involved a lot of research, as well as detailed visual and interactions work. It was extremely valuable to work directly with users to ensure that the app provides a great user experience. The app is a strong foundation that can only get better from here!
It was a wonderful feeling to hear feedback from users that Fitmark can be used for now (during covid) and beyond.
Modified Illustration 1, Illustration 2