Flex
UX RESEARCH | UX DESIGN | UI DESIGN | USABILITY TEST | PROTOTYPE
Overview: Flex is your ultimate gym fitness companion app. An accessible and convenient way to workout and monitor your fitness progress at your local gym.
Role: UX Research, UX/UI Design, Usability Test, Product Design, Interaction Design
Industry: Health, Fitness
Toolkit: Figma, Adobe CC, FigJam, Google Forms, Pencil and paper
Duration: June 2024 (4 weeks)
UX Research
Overview
Background
Flex is an end-to-end app where gym users can function in the gym easily and independently.
-Track your progress
-Work towards your fitness goals
-Achieve a great experience at the gym in the most convenient way possible
Research Goals
We want to investigate gym members' satisfaction with their gym's facilities and services in order to identify key factors for app features development that will improve their overall gym experience and engagement.
Methodologies
1. Competitive Analysis
2. Survey
3. User Interviews
Competitive Analysis
CLICK TO ENLARGE
Survey
Overview
I’ve created a survey anonymously based on personal questions focusing on how gym members (from different gym places and different lifestyles) feel about their overall gym experience and why some of them quit the gym.
45 people both genders between 18-40 years old have answered the survey and the results were quite interesting.
User interviews
Overview
6 people were interviewed: 3 gym members; 2 hire private trainers; 1 exercising at home. All interviews have been conducted remotely by using Google forms.
Affinity Mapping
CLICK TO ENLARGE
User interviews
Quality Training Over Quantity
The need of a high-quality lifestyle
no matter the price
Overuse of Apps
This is evidence that athletes use multiple fitness platforms to achieve their goals.
Timing Your Freedom
Exercise at your own pace
Customer Service Is Key
There’s a big gap between reality vs. expectations from the gym’s service and the need for customers to be heard.
Persona #1
Guy Goldstein
28 Y/O - SOFTWARE DEVELOPER
Bio
Guy is a software developer at high-tech company
who works long hours, often from home. He started
going to the gym a couple of years ago to improve
his overall health. Guy is tech-savvy and enjoys using
various apps and gadgets to track his progress.
Goals
• Build muscle and increase strength
• Learn proper techniques for lifting heavier weights.
• Track progress accurately and stay motivated
• Integrate all fitness-related activities and data into one app
Frustrations
• Struggles with remembering sets and reps during workouts
• Often relies on social media for exercise techniques, leading to incorrect form and minor injuries
• Finds it challenging to stay consistent due to work commitments
• Uses multiple apps for different aspects of fitness, which feels fragmented
Persona #2
Maya Levi
34 Y/O - HOUSEWIFE
Bio
Maya is a busy housewife and mother of two young children. She recently joined the gym to improve her healthy lifestyle, relieve stress, and gain some personal time for herself. Maya is relatively new to working out and often feels overwhelmed by the equipment and exercises.
Goals
• Lose weight and improve overall fitness
• Learn proper workout techniques and routines
• Balance gym time with family responsibilities
• Stay motivated and make fitness a regular part of her lifestyle
Frustrations
• Feels uncertain about using gym equipment correctly and safely
• Often forgets her workout routine details and loses track of sets and reps
• Finds it challenging to stay consistent due to her busy schedule with the kids
• Lacks confidence in her fitness journey and needs more guidance
Persona #3
Daniel Baum
18 Y/O - HIGH SCHOOL STUDENT
Bio
Daniel is an 18-year-old high school student preparing to enlist in the military. He is highly motivated and has been working out regularly to meet the physical requirements and improve his fitness levels before basic training. Daniel is focused on strength, endurance, and agility exercises.
Goals
• Build strength, endurance, and agility for military readiness
• Learn proper techniques to maximize workout efficiency and prevent injuries
• Track and measure progress to ensure he meets military fitness standards
• Stay motivated and maintain a disciplined workout routine
Frustrations
• Struggles with finding the right balance between strength training and endurance workouts
• Occasionally experiences minor injuries due to improper form or overtraining
• Needs detailed guidance to optimize his workouts
• Feels immense pressure from his family to join an elite military unit, adding stress to his preparation
UX Design
Project Goals
UX research has demonstrated that gym places and gym members are not fully in line. Members don’t experience the gym and its full potential services.
The main goals of the app: to enhance gym users’ fitness and health through booking classes, personalized workout and tracking progress ; to offer a user-friendly gym experience that’s easier and more efficient than ever before.
Product Roadmap
After having established project goals, I’ve listed the different features I wanted to include in the app and then prioritized them into a spreadsheet. All the decisions are based by user interviews, surveys and competitive analysis.
CLICK TO ENLARGE
Information Architecture
I’ve built a sitemap considering primary, secondary and tertiary navigation.
Firstly, I’ve developed the primary navigation by defining which main actions users might have taken:
home, workouts, classes and trainer. Secondly, I’ve explored and expanded each one of those sections.
CLICK TO ENLARGE
User Flows
I’ve designed 4 main User Flows. I’ve considered the main reasons why a user can use the app and its benefits: to book or cancel upcoming classes; to create a personal trainer program; book a personal workout training session; Renew or cancel gym membership. The flowchart includes a start/end point; page or section; user decision; user choice options; alternative path and system action.
Task Flows
I’ve created flows for 3 tasks, which are the ones I’ve then tested in usability testing phase:
• Connecting to the app
• Manage your own workout routine
• Inserting daily weight measurement
#1 Connecting to the app
CLICK TO ENLARGE
#2 Inserting daily weight measurement
CLICK TO ENLARGE
#3 Manage your own workout routine
CLICK TO ENLARGE
Wireframes
For the first flow, I’ve developed homepage and workout list while guiding the user how many reps and sets they got left for each workout.
For my second flow, I’ve focused my attention on gym member general requests (such as notifications and cancelling gym membership…), personal trainer session booking system, checkout, and booking classes.
UI Design
Brand Identity
First of all, I’ve explored potential naming solutions and a symbol for the logo. Eventually, I’ve decided to go for the name Flex, as in flexing muscles and to reflect flexibility meaning the app can go above and beyond for the gym member.
UI Library Components
I’ve created a color palette with 1 primary, 2 secondary , 3 neutral colors and 1 accent color. And as for typography the choice is Mulish, a sans-serif font with a decent x-height for legibility.
With those elements added to my low fidelity wireframes, I made my way into high-fidelity wireframes.
Usability Test
Prototype
In order to keep the flow nice and neat, I’ve followed my instincts as a user and mainly used the same transition effect for every screen that’s built left to right (such as settings) to make the flow looks more like a real app.
In the booking experience I went for simple transitions to make it easier for the member.
Additionally, I’ve built a loading animation for each workout count timer to make the prototype experience more realistic.
Outcome
Overall, usability test was quite satisfying. The general flow was made to be easy, less taps and very practical. I made a few fixes that aimed at facilitating the flow even more.
Test Project Prototype
© Created by Mor Eitan
All projects are for educational purposes only