Hustl Fit
All-in-one fitness app for fitness enthusiasts who want to lit the spark of keeping themselves fit and regular gym-goers irrespective of their experience in fitness.
MY ROLE
Research, IA, UX / UI, App Design, Web Design, Iconography
PLATFORM
Mobile Application, Website
CLIENT
Hustl Fit Inc.
TIMELINE
Oct - Dec 2020
01
The
Beginning
The Beginning
Hustl Fit is an dynamic fitness app that provides various personalized workout programs, focused routines, streamlined progress tracking, and connect users with personal trainers who understand their preferences and provide a tailored workout plan according to their lifestyle, weight, height, and other niches.
As fitness is increasingly becoming mainstream and a large percentage of people are working to hone their physical and mental health. The founder wanted the app and website to tap into this space, building a fitness platform which not only provide industry proven routines but also make it exicting to the users and focus on the core level of expert guidance. Thus keeping the user experience simple, realistic, connectable, and keep up the level of motivation everyday.
My first thoughts were to come-up with a solution to focus on the problem every other fitness app faces. People loose interest after a while as they find it very cumbersome to use the apps and keep track of everything. So the underlying process I employed was to conducting user research to understand the market and creating user personas and empathy maps.
There was a multitude of challenges that were initially reported by the client and further user research with the aid of surveys and interviews revealed many more. By the end of the activities and discussion, we got to know the pain points as well as what the goals of the users were and how the app needs to present a solution for these.
02
Understanding
and Focus Point
Understanding
and Focus Point
User Interview
Empathy map
User Personas
David Alizter, 36
Professional Bodybuilder
PAIN POINTS
- Hard to get no/insufficient information about exercise.
- No customized workout were provided.
- Difficult to track calories and daily workout progress.
GOALS
- Platform must be as simple and intelligible.
- Find information about the routines and their benefits.
Vanessa William, 22
Fitness Enthusiast
PAIN POINTS
- Tough to get dedicated and trustworthy trainer online.
- Workout plan not fit for my BMI.
- Limited routines and fitness data are incomprehensible.
GOALS
- Get exclusive programs and coach.
- Should be easily able to do real-time clear fitness tracking.
Isabella Peyton, 29
Cardio Trainer
PAIN POINTS
- Scarce platform to enroll as trainer and provide service.
- Adding routines and slots are confusing.
- Hard to manage all the clients and use unreliable information.
GOALS
- Quickly enroll myself as a trainer.
- Work with multiple clients on day-to-day basis with focused data.
Elijah Perez, 31
Regular Gym-goer
PAIN POINTS
- Unable to find industry standard workout program.
- Interactions are deficient and displaced.
- No app to replace the gym during pandemic lockdown.
GOALS
- Replace the need to have physical trainer.
- Able to do workout from home with professionl guidance.
Key Understandings
Design a platform that creates an unique feel and stunning user experience incorporating easy to use features and speak with the fitness lovers.
Educate the users about the muscle/body part that would be worked out as result of particular drill with help of extensive videos and database.
Motivate users to adapt online or workout from home routine through one-on-one interaction and programs from industry finest trainer digitally.
Option to enroll as a pro and get access to special tailored workout programs which meets user needs.
Provide an detailed real-time activity monitoring system to track progress that in-turn inspires users through out the fitness journey.
Easy onboarding process, upload their routines, manage clients, and interaction platform for trainers.
03
Ideation
and User Flow
Ideation
and User Flow
The key stakeholders were gathered to brainstorm and discuss the key understandings finalized through user interviews and personas. The main task was to analyze and organize all the information to visualize content blocks and features through userflow models. Thereby ensuring that the users be able to perform a specific task through card sorting to understand which feature fits best under which section with a minimal number of steps.
Also I held back to look into the visual design from psychology point of view and defining the colors, typefaces, dimensions and patterns for the platform.
Color and Typography
BLACK
A symbol of power and strength. It exudes authority and gives perception of seriousness.
MARINE BLUE
A symbol of intelligence and trust. It calms the mind and improves concentration.
PURE WHITE
A symbol of awakening and clarity. Color that promotes excellence and enlightenment.
Texture Psychology
Based on one of our concept research, we found that approximately 85% of the fitness enthusiast, professionals, and even casual gym-goers who are into physical activities tends to favour grain pattern. It triggered the desire to challenge and the emotion to conquer more.
The scratch grunge texture in a dark backdrop seemed to impact the user visual stimuli, keeping their mind refreshed with feeling new all the time, and physically unstrained over a brief usage.
Early User Flow
Sketching the app ideas gathered at the stage of brainstorming, journey mapping, and user flow helped me translate the required features into more understandable solutions that were dry ran so the stakeholders could understand easily.
Moving ahead step-wise from sketches to lo-fi wireframes to describe the flow of the platform and the logical structure of the elements that defined the features of the application. Each use case was rapidly prototyped into wireframes so we can understand the flows and ultimately define the information architecture of the product.
04
Wireframe
and Prototype
Wireframe
and Prototype
05
Final
Design
Final
Design
With the major UX defined in the form of wireframes, user flows, user personas, empathy maps, affinity diagrams, the high fidelity visual design of the mobile app was designed along with the microcopy for each interface.
Login flow
Dashboard Screen
Workout Screen
Workout List Screen
Program Detail Screen
Pro Screen
Statistics Screen
Website (Coming soon)
"I worked with Niranjan, in more than 5 projects. His way to approach a project is outstanding, starting from idea listening to wireframe to final design. His work involves many software and tools usage so that as a client I get all details of work. He did a excellent job in designing the UI/UX for my hustlfit project. I wish him all the best."
Arpit Anand, Founder - Hustl Fit INC.