Fitness for the
Mind, Body, and Soul
Introducing Knetik Fitness; a more holistic approach to health and well-being
THE CLIENT:
A fitness-based company looking for a product within a certain sector in the fitness industry.
What problem was I solving?
THE ROLE:
Product/UI Designer
THE TIMELINE:
6 weeks
THE TOOLS:
Sketch, Invision, Trello, GSuite, Keynote
A fitness-based mobile app that had the ability to motivate the user as well as offer expert advice when needed.
Our stakeholders were searching for better ways to assist users with pre-existing health conditions to meet their health and wellness goals. Within the current fitness app industry, there weren’t any applications that focused on pre-existing health conditions that users could trust to provide advice and recommendations to workouts and meal plans.
“Excercise?!?! I thought you said extra fries!”
What was the outcome?
Knetik Fitness; a mobile-based app that develops health and fitness plans based on users’ personal information.
The app connects users to professionals in fitness, nutrition and mental health that monitor and motivate the user to a better lifestyle. With user health information gathered during the onboarding process, Knetik develops workouts and nutrition plans based on professional advice. The app motivates its users by providing workout flexibility based on their individual needs and constraints while sending reminders and alerts to stay on track.
The Details
The objective
My objective was to create a fitness app for millennials that catered to pre-existing health conditions.
This app would allow the user to develop healthier habits by providing fitness recommendations and health plans. I was also tasked to try and include mental wellbeing and approach the project from a holistic standpoint.
The proposed mobile app basic features:
-
Health Plans
-
Personalization based on Health Conditions
-
Physical Fitness for Millennials
-
Mental Wellbeing
-
Holistic Fitness
The User
Meet Erin! The Primary User Persona
I was provided a User persona from our stakeholders that highlighted the concerns in the project brief. Meet Erin, who is an overworked educator. She has a health condition that limits her ability to work out, and she is often stressed due to work and doesn't know how to manage it. Some of her main frustrations and goals are:
Frustrations:
-
Health Condition
-
Stress
-
Balance in Life
-
Accountability
Goals:
-
Expert Help
-
Weekly Accountability
-
Efficient Workout Schedules
The Wireframes
I was provided app wireframes from a 3rd party UX team as a base for our app. After doing a preliminary wireframe overview I highlighted some successes within the wireframes to prioritize in the first round of designs. I noticed many opportunities to better align the product with the goals I wanted our app to reach.
Questions that need answers
I focused on these four questions while reviewing the wireframes
How can the onboarding process be easier?
How can information be displayed better?
How can we add accountability and support?
How can we be unique to our user?
Tackling the problem
Process: From research to brand development
To begin the overall process of creating this platform, I researched some of the top fitness apps in the Industry to see what successes and opportunities each had within the marketplace. I looked at all aspects of their platforms from colors and fonts used to app features and photography used to tell the over brand story. I wanted this new app to play within this space but definitely have its own unique voice and tone that could make it distinct within the fitness world.
A part of the project scope was to cater to a user’s health conditions. I also researched Nourishly, is a top nutrition and diet monitoring app within the wellness marketplace. To see how they onboarded users with pre-existing health conditions and what app features they offered really allowed me to think about what would work best for this new product and the user that I was trying to attract.
There were some key takeaways from the research, from color and font usage to the level of community that each app featured. All of the apps researched did provide a simple onboarding process and in-app assistance to help the user build long-term healthier habits.
To dig into more of the research behind this project, check out this Trello board:
Insights: What the research said
With that research, I concluded that I wanted our app to have some key design and functionality aspects that aligned with everything else in the marketplace.
Design
-
Bright and Fresh tone and feel
-
Use of White as a primary color
-
Use Sans Serif fonts
Functionality
-
Simple onboarding
-
Understand user’s personal goals
-
Motivate the user to obtain goals
-
Connect to professional help
Building the Brand
Process: Brand Development and Ideation
“Holistic Health emphasizes the connection between mind, body, and spirit. The goal is to achieve maximum well-being, where everything is functioning the very best that is possible."
I really dug into the “Holistic” standpoint that our stakeholders wanted in this new fitness app. With Millennials taking a larger approach to more natural avenues to medicine and healing, I wanted to follow that same direction for the tone and feel for the app.
When developing the brand, I wanted to break down the definition of holistic, energy, and kinetic. I wanted our app to showcase some type of movement, and agility in the look and feel of the brand. I wanted to highlight the energy and wholesomeness that comes from holistic health. And provide a sense of balance and focus that would hold all of these concepts together.
Brand Elements
To further develop and ideate, I looked at each word and reflected on its meaning and uses, and broke it down even further. From the happiness, bright energy and manifesting goals that the Citrine has to the warmth that comes from standing in the sun. All of these ideas had to be framed in something that would be bright and fresh and something that our users would respond to.
Name and Concept Statement
When I was doing my research for the brand, a word stuck out to the most in the process. But some others spoke to me from research and connections with the overall tone and feel that I wanted this new mobile app to have.
After Ideation I really wanted the brand to hone in on these words, and realize that they are not independent of each other. You can’t have balance without focus, you can’t have strength without energy, and you can’t have stamina without drive. But all those attributes would lead to one singular word. Kinetic.
I thought about how a fitness app would use the word Kinetic and make it fresh. I removed the “i” and replaced the “c” with a “k”. The “K’ reminded me of the shape of a piece of workout equipment, so I was sold!
KNETIK FITNESS
From that thought process the concept statement was created as well:
With the mind, body, and soul at the core; Knetik Fitness is a more holistic approach to well-being. For the busy professional, Knetik offers tips, motivations, and access to health experts available at any time. A better way to monitor health and wellness, while staying fit. With the flexibility you deserve.
“Fitness for the Mind, Body, and Soul.”
Moodboard
So I looked at all the branding elements from the competitive analysis and my own personal exploration to hone in on the best tone and feel to showcase in a moodboard. The moodboard that I developed took aspects of the words listed to and defined them as brand attributes that I would continue to think about while designing the new mobile app.
Logo
When thinking of a logo design, I wanted to play with the use of movement and showcase some type of energy with the design. I wanted to play with the letter “K” and see how it could be manipulated. Here is the final logo for Knetik Fitness
Style Tile
Putting all of these thoughts to a screen was no easy feat. Trying to determine what UI elements and fonts would work best for the brand took some additional trial and error and of course iteration. The style tile that was developed concentrates on the design aspects I determined during the exploratory research and competitive analysis that was done earlier in the process.
Making the Product
From Style Tiles to High Fidelity Screens
To make sure the app would be functional and efficient to the user, I dug into the wireframes provided and saw a key opportunity to assess the productivity of the mobile app. From a wireframe evaluation to developing a true user task flow I wanted to make sure that the functions of the app were most viable for the stakeholders
Wireframe Evaluation
The "Progress" page on the app would serve as the hub for the user and display all of the important information. The screens below show how much information was on the different stages of the Progress page, on both the "Today" tab and the "Goals" tab. These pages were extremely long and part of my wireframe evaluation was how to best show this information in a more concise, digestable manner for the user not to be overwhelmed by scrolling down long screens.
Progress (Home) Pages
This is all one screen! Who got time to scroll to the bottom with all this information?
User Flow Mapping
To make sure that the user expierence while using the mobile app was the most ideal and simplified, I created a User Flow map. This map would walk through the screens as if a user was completing a task. This task would be a workout, because at its core, this app would be for fitness.
A Holistic Approach to Fitness
Meet the App: Knetik Fitness
The Final High Fidelity Screens for the fitness mobile app. See how I tackled the questions above in my design.
Solutions: The Final Screens
How can the Onboarding process be easier?
With the Onboarding process I added a progress bar for the user to track the steps. I streamlined the time and cognitive load for the user by consolidating some screens and eliminating some of the lists to convert the information to buttons. I also provided the user better clarification on the survey being conducted.
How can information be displayed better?
To clarify the information, I grouped relatable data into cards. I also created a “Dashboard” to provide the most pertinent user information such as calories, weight and workouts right at the top of the progress page. I wanted the data to be streamlined as well, and created a clearer grafts, charts system., so that all of this information could be understood easier by the user.
How can we add accountability and support?
To provide better accountability and support for the user, I added the Snapshots/Previews of workouts for the user. Making the workout schedule editable along with adding it to a calendar provides an additional layer of accountability for the user. Tips from the Trainer and the workout continuous play provides support for the user to complete their workout to reach their goals.
How can we be unique to our user?
Some of the intentional design elements that I want to highlight are the use of the imagery, and icons within the app to provide visual identification to key information. And the renaming of the app functions to map back to the brand feel; Workouts as "Move your Body"; Nutrition as “Feed Your Soul"; and Meditations as "Clear your Mind."
So going back to the questions from the wireframes, I really had a task at what the design and aesthetic of this app should be. And here are the results.
Check out the prototype via Invision with the link here:
Final Steps
After creating our design, we had some final steps including user testing and building responsive marketing sites for our final product.
Insights: What users said in testing.
So after creating the app, we had to test it out! I recruited users based on our User Persona, Erin, and they had some valuable feedback for the product, which included some successes including the app color and moods. . There were some opportunities that we took note of including the feel of more inclusivity regarding ethnicity and gender.
My Reflections
I really enjoyed doing this project and it allowed me to push my creativity to new levels. It was really tough branching into new technologies (I'm personally not a fan of change!) but I am happy with the final results for this project.
With the opportunity to develop the app and brand more I definitely would perform more desirability/usability testing to make sure the final product aligns with what the ideal user would want in a fitness app.
In closing, I want to reiterate that better fitness doesn't come without better health and well-being. It's the mind, body, and soul working together to create a better version of you. I just want you to remember that Knetik Fitness is not just a workout app. It a holistic approach to better health and wellbeing. Fitness for the Mind, Body, and Soul.
How fun was that?!