As a freelance UI/UX designer, I was entrusted with a crucial role in a dynamic project, leveraging my expertise to shape and enhance the user experience. Tasked with creating intuitive and visually captivating interfaces, my objective was to craft seamless digital experiences that would engage and delight users.
Working closely with the client, I embarked on a collaborative journey to understand their vision, goals, and target audience. Through effective communication and active listening, I gathered crucial insights and translated them into compelling design concepts. With a keen eye for detail, I meticulously crafted wireframes and interactive prototypes to illustrate the flow and functionality of the final product.
Iterative design processes were at the core of my approach. Through constant refinement, user testing, and feedback loops, I strived to optimize the usability and accessibility of the digital solution. I adeptly employed industry best practices and design principles to ensure an intuitive navigation system, seamless interactions, and an aesthetically pleasing visual design.
Research
Interaction Design
Visual Design
Accessibility Implementation
Understanding the Client
About
My client has a Fitness Company, they are passionate about helping individuals achieve their health and fitness goals. They also believe that everyone deserves to lead a vibrant and active lifestyle, and they want to support their clients every step of the way.
Design Challenge Highlights
A Mobile application which offers a refreshing design style with captivating illustrations.
Experience a well-detailed app that provides comprehensive information about each task.
Customer should relate all the functions similar to the best fitness apps available in the market.
User control and freedom The app does not give users a lot of control over their experience. For example, users cannot choose their own running routes
Error prevention The app does not do a good job of preventing errors. For example, users can easily start a run without setting a goal or without entering their weight. This can lead to inaccurate data and frustration for users. For example, if the user does not enter their weight, the app will use an estimated weight, which can lead to inaccurate distance and calorie burn data.
Visibility of system status The app does not always clearly indicate the user’s current status, such as their current pace, distance, and time. This can make it difficult for users to track their progress and stay motivated. For example, the user cannot see their current pace or distance without tapping on the screen.
Consistent language and terminology
The app uses inconsistent language and terminology throughout the app. This can be confusing for users and make it difficult for them to learn how to use the app. For example, the app uses the terms “run” and “workout” interchangeably.
Aesthetic and minimalist design The app’s design is not very aesthetically pleasing or minimalist. The app is cluttered with unnecessary features and information. This can make it difficult for users to focus on the task at hand.
Recognition rather than recall The app does not do a good job of helping users remember what they need to do. For example, there is no way for users to see a list of their past runs without going back into the history tab. This can be inconvenient for users who want to track their progress. For example, if the user wants to see how far they ran last week, they have to go back to the history tab and scroll through their past runs.
Help and documentation The app does not have good help and documentation. There is no way for users to get help with the app’s features or to troubleshoot problems. This can be frustrating for users who are having trouble using the app. For example, if the user is having trouble with the app’s GPS, there is no way for them to get help from Nike.
Research Goal
To investigate and identify user preferences, needs, and behaviors in order to create a user-centric and engaging fitness app interface that promotes adherence, motivation, and overall user satisfaction.
Let’s Ask the Right Questions
How many people in United States actually use a mobile application for fitness ?
According to a survey conducted by eMarketer in 2021, an estimated 94.4 million people in the United States use a fitness app on their mobile device. This represents approximately 28% of the population. The survey also found that the number of fitness app users is expected to continue to grow in the coming years, reaching an estimated 99.5 million users by 2023. Another study conducted by Statista in 2021 found that the most popular fitness app in the United States is MyFitnessPal, followed by Fitbit and Nike Training Club. The study also found that the number of active users of MyFitnessPal was approximately 19.5 million in the United States in 2020. Overall, these statistics suggest that fitness apps are widely used in the United States, and their popularity is expected to continue to grow in the coming years.
What are the Challenges designing a fitness mobile application ?
Data Accuracy: One of the biggest challenges with fitness applications Over reliance: Another potential problem with fitness applications is that users may become too reliant on them. While these apps can be useful for tracking progress and providing motivation, they should not be the sole source of information for fitness goals. Users should consult with healthcare professionals and personal trainers to create a well-rounded fitness plan. User Engagement: Some fitness applications may struggle with user engagement, meaning users may lose interest in using the app over time. To combat this, app developers may need to continuously update the app with new features, challenges, and rewards to keep users engaged. Privacy and Security: Fitness applications often collect sensitive personal information such as height, weight, and fitness goals, which can be a target for hackers. App developers must prioritize privacy and security measures to ensure that user data is protected. Accessibility: Finally, some fitness applications may not be accessible to all users. For example, users with disabilities may have difficulty using some apps due to design or functionality limitations. App developers should strive to create inclusive and accessible fitness applications for all users.
Question Areas
I frequently went for walks with gym trainers and spent significant time in the gym, engaging in conversations and observing people. Through these experiences, I have identified the following question areas.
What are the primary fitness goals and objectives of the target users?
How can the app provide a seamless and intuitive user experience?
How can the app leverage gamification or social elements to increase engagement and motivation?
What type of fitness content, such as exercise routines, nutrition tips, or progress tracking, should be included in the app?
What visual style and aesthetics should be employed to appeal to the target users?
How can the app accommodate users with different abilities or disabilities?
How can the app ensure the privacy and security of user data, especially sensitive information like health and fitness data?
What technical requirements and constraints need to be taken into account during the design process?
Synthesizing User Research
Let’s know our user Personas
Thomas W.
Friendly | Tech savvy | Educated Age: 27 Occupation: Graphic Designer Status: Single Location: San Jose, CA Tier: Mid-level
I need an app that is easy to use and can help me track my progress
Objectives and Goals
Thomas wants to be seen as a strong, healthy individual who is in control of his own fitness and wellbeing. He wants to be remembered for his dedication to his health and fitness goals.
Motivation Factors
Thomas is motivated by the feeling of accomplishment and the desire to reach his fitness goals. He hopes to achieve a healthier lifestyle and improved physical fitness.
Pain Points
Thomas struggling to find the right app to keep track of his activities.
Paula Allen
Friendly | Field Worker | Educated Age: 30 Occupation: Civil Engineer Status: Single Location: San Jose, CA Tier: Mid-level
I’m determined to reach my fitness goals and stay healthy. I’m committed to making time for my fitness routine.
Objectives and Goals
Thomas wants to be seen as a strong, healthy individual who is in control of his own fitness and wellbeing. He wants to be remembered for his dedication to his health and fitness goals.
Motivation Factors
Thomas is motivated by the feeling of accomplishment and the desire to reach his fitness goals. He hopes to achieve a healthier lifestyle and improved physical fitness.
Pain Points
Thomas struggling to find the right app to keep track of his activities.
Jack W Thomas
Friendly | Student | Educated Age: 25 Occupation: Student Status: Single Location: Boston, MA
I’m looking for an app that will help me stay fit and healthy without breaking the bank
Objectives and Goals
To stay in shape, stay healthy, and look good. He wants to be remembered as someone who is fit and active.
Motivation Factors
My main motivation is to stay fit and healthy, and to reach his fitness goals.
Pain Points
Jack is trying to find an app that meets his needs without being too expensive or having too many ads. He is currently researching different apps to find the best one.
Who do you relate with most ?
Thomas, who is currently facing difficulties in finding the perfect app to effectively track his activities. Then there’s Paula, who has grown tired of manually inputting data every time she wants to track her progress. And finally, we have Jack, a student who desires an affordable app that is also ad-free. Either way, I designed a solution with users like you, Thomas, and Allen and Jack in mind. Now that I have a better understanding of who I’m designing for, it’s time to move on to the good stuff!
Competitive Analysis
Let’s understand our competitors
MyFitnessPal is a popular fitness app that helps users track their nutrition intake, exercise, and overall wellness. It offers a comprehensive platform to monitor and analyze daily calorie consumption, set fitness goals, and track progress.
Pros
Extensive food database: Log any food or drink, including brand-name products and restaurant meals.
Barcode scanner: Scan barcodes to quickly log food items.
Nutritional insights: Track your macros, micros, and calories to see how your diet affects your health.
Exercise tracking: Log your workouts to track your progress and stay motivated.
Community features: Connect with friends, join groups, and share your progress to stay motivated.
Cons
User-generated database: The food database is extensive but can be inaccurate or inconsistent.
Free vs. premium features: Some advanced features are only available with a premium subscription.
Limited personalization: The app’s recommendations may not be fully personalized.
Interface and usability: The user interface could be improved.
Advertisements: The free version of the app includes advertisements.
The Fitbit app is a comprehensive health and fitness companion that seamlessly integrates with Fitbit wearable devices. It offers a wide range of features to help users track their activity, monitor their health metrics, and achieve their fitness goals.
Pros
Activity tracking: Tracks steps, distance, active minutes, and calories burned.
Sleep monitoring: Tracks sleep patterns and provides personalized sleep insights.
Heart rate monitoring: Tracks heart rate continuously to gauge cardiovascular health and optimize workouts.
Exercise and workout logging: Tracks and logs various exercises and workouts.
Wellness and health metrics: Provides a holistic view of overall health, including metrics such as resting heart rate, hydration, weight trends, and female health tracking for women.
Social challenges and community: Offers challenges and competitions, allowing users to engage with friends and the Fitbit community.
Integration with other apps: Integrates with popular third-party apps, such as MyFitnessPal and Strava.
Cons
Price: Fitbit devices can be relatively expensive compared to other fitness trackers.
App interface: The app interface can be less intuitive or visually appealing than other fitness apps.
GPS dependency: Some Fitbit devices require a connected smartphone for GPS tracking during outdoor activities.
Limited customization: The Fitbit app offers limited customization options.
Syncing issues: Occasionally, users may experience syncing issues between the Fitbit device and the app.
The Sworkit app is a versatile fitness application that offers a variety of customizable workouts and exercise programs to cater to individual fitness goals and preferences. It aims to provide convenient and effective workouts that can be done anytime, anywhere.
Pros
Customizable workouts: Users can personalize their workouts by selecting the duration, intensity, and specific areas of focus.
No equipment required: The app offers a wide range of bodyweight exercises that can be done at home or on the go.
Flexibility and convenience: Sworkit provides on-demand workouts that can be done anywhere, at any time.
Guided instruction: The app offers clear video demonstrations and audio guidance for each exercise.
Goal tracking and progress monitoring: Users can set fitness goals and track their progress over time.
Variety and adaptability: Sworkit offers a vast library of exercises and workouts that can be adapted to different fitness levels and goals.
Cons
Limited community and social features: The app doesn’t offer a strong community or social aspect for users to connect, compete, or share achievements with others.
Lack of specialized programs: The app may not provide specialized programs tailored to specific fitness goals or niche training preferences.
Free vs. premium features: Some advanced features and additional content require a premium subscription.
User interface: The app interface could be improved in terms of design aesthetics and ease of use.
Chapter 02
Interactions
Low-Fi Interactions Design
High -Fi Interactions Design
Why interactive charts ?
Visualize progress: Interactive charts can help users visualize their progress over time, which can be a great motivator to keep going.
Identify trends: Interactive charts can help users identify trends in their data, such as which days they tend to be more active or which exercises they are most consistent with.
Set goals: Interactive charts can help users set goals and track their progress towards those goals.
Stay motivated: Interactive charts can help users stay motivated by seeing their progress over time and identifying areas where they can improve.
Share data: Interactive charts can be shared with friends, family, or coaches, which can help users stay accountable and motivated.
Chapter 03
Visual Design
Branding and Guidelines
Components
Colour and Typography
A modern and fun style for the Colors and Typography
Typography
Aa
Poppins
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9
Colors
Sign up and Login
Dashboard
Workout Tracker
Meal Planner
Sleep Tracker
Progress Tracker
Clients Testimonials
The new design is much more user-friendly and intuitive. It’s easier to find the information I’m looking for, and the charts and graphs are much more informative. I also like the new features, like the ability to track my progress over time and the ability to share my data with my friends. Overall, I’m really happy with the new design of the FitnestX app. It’s made my fitness journey even more enjoyable and rewarding.
What are the challneges?
Balancing visual appeal with accessibility: Illustrations and colors can add visual appeal to a fitness app, but they can also make it more difficult for people with visual impairments to use the app. It is important to balance the use of illustrations and colors with accessibility guidelines so that all users can enjoy the app.
Providing alternative text for images: Images should have alternative text so that people who are blind or have low vision can understand what the image is about. The alternative text should be descriptive and accurate, and it should be placed in the alt attribute of the image tag.