Fitted Responsive Design
Fitted is an inclusive & customizable fitness platform designed to provide workouts, wellness, motivation and organizational tools to help User’s achieve their fitness goals.
Role
Sole UX/UI designer of the concept case study
Process
competitive analysis, User Flow, wireframes, prototyping, mood board, style guide, branding, and user interface design.
TimeFrame
3 months, April 2021 -June 2021
Tools
Sketch, Invision, canva, Procreate & Paper/Pencil
Project Overview
The Task
“Motivate people into an exercise routine that suits their level, schedule, and interests.” For the final project of my Career Foundry program, I was tasked with creating a responsive design product geared toward fitness.
The Challenge
There are countless methodologies, processes, and products all geared toward helping Users achieve their ideal fitness lifestyle. Too many to count.
Why are there so many products?
Who determines what is the best?
User’s fitness preferences, journeys, and experiences are unique as the individuals themselves. So why not give them the flexibility and customization to make the product what they need it to be?
Creative Brief
The initial UX Research was provided in the creative brief linked in the button below; personas, user stories, and functionality requirements. Along with other requests in terms of icons, UI Design, and branding elements.
The Process
Although the project contained many iterations and was not linear, here are the methods I executed during the process:
Understand:
Building off of the initial UX Research, I wanted to frame my understanding of the problem, competition, and User.
I began with a problem statement:
Who’s the Competition?
As I stated in the challenge there are so many options for Users to achieve their fitness goals. Utilizing iTunes ratings, I pulled the top three competitors within the fitness category and conducted a SWOT analysis.
The three, top competitors were Map My Run, Fitness Buddy, and JEFIT (a fitness planner).
Competitive Observations:
They are all geared toward the User having the motivation, opening the application, and doing the workout. None have a scheduling function to tie the User’s lifestyle and schedule in with fitness.
Fitness Buddy & JEFIT focus solely on lifting or strength training so they’re tailored to individuals with access to gyms or home equipment.
Map My Run is geared toward running, hiking but it does have the ability to be used indoors or outdoors.
The UI, visuals, and imagery are very masculine and not inclusive to different levels or journeys.
Understanding the User
After having an understanding of the problem and market next, I focused on understanding the User. Based on the UX Research these are the top User Insights:
The User Insights echoed the main functional areas that I found the competition lacking. Yet, something had me wondering who was actually using fitness apps? Due to the Global Pandemic, there was an understandable increase in at-home membership subscriptions, application conversions, and engagements because of availability. Was there a clear delineation between age groups or individuals?
Are the same User’s who used to frequent gyms turning to applications and subscriptions?
In an article on Healthline, the “digital fitness boom is closing the gender gaps in health and wellness.” According to fitness app Strava’s Year in Sport report, between April and September 2020, women ages 18–29 tracked 45.2% more fitness activities than they did during the same period last year, compared with a 27.3% increase among their male counterparts. The article also addresses social, psychological, and behavioral barriers that women often face in prioritizing their self-care and mental health but how fitness applications can bridge this gap.
https://www.healthline.com/health/fitness/digital-fitness-boom-women
So with a better understanding of who the User is, as well as their needs, wants and goals I wanted to tailor the design to the these four main tenets:
Define
After defining the problem statement, getting a better understanding of the User and the competition I sketched out a User Flow using the User Insights as a guide for the main functions that needed to be incorporated.
User Flow:
Design
I created low-fidelity wireframes using Sketch and started with mobile designs first, but did eventually sketch out the Tablet and Desktop with paper and pencil to ensure the design principles were carried through all breakpoints. This allowed me to identify any friction points early on in the design process.
Low-Fidelity Wireframes:
Through the first rapid testing of the Low-Fidelity prototype, it was clear there were friction points around the Search & Scheduling functions as well as the navigation tabs. I addressed these in the Mid-Fidelity wireframes.
Mid-Fidelity Wireframes
First, I updated the navigation bar and moved it down to the bottom of the screen. Then I worked through the breakpoints for Mobile, Tablet & Desktop with this update.
Then I worked on the Search functionality. A big issue with the Search function in the UAT was that some Users wanted to see the options or categories rather than search for a specific exercise or high-level filters. So in re-flowing the screen I added buttons under the Search Input Field that would feature the top workouts or categories (like Yoga, HIIT etc.).
Before designing the High-Fidelity wireframes, I began pulling inspiration for the mood board and the UI Design.
I knew I wanted to convey that everyone’s fitness journey is different and show a balance of strength while still promoting positivity and joy. Utilizing the body positive and inclusive imagery led me to lean more toward the fun, energetic, positive, and uplifting feeling for the UI Design.
I used the following four words as a compass to inform the imagery, color palette, typography and overall design.
Fitted Mood Board:
Refine
Once the Mood Board and other inspirational elements were defined I created a comprehensive Style Guide to ensure the UI design across all the final screens would be uniform.
High-Fidelity Breakpoints:
High-Fidelity Mobile:
Click the button below to view the Invision prototype of the Fitted product.
Results
In the High-Fidelity round of User Testing, the Fitted application had an 85% approval rating. There were 25 Users total tested and 17 of them would utilize this application in their everyday lives.
Next Steps
After the first round of testing and identifying friction points within the calendar scheduling functions I wanted to work on the following action items to continue to iterate and update the mockup:
Address friction points in Calendar/Scheduling functionality.
Build out remaining screens for tablet and desktop.
Increase functionality by adding in the ability to connect to fitness devices.
