FitLyf
The FitLyf app serves as a mobile platform offering customized workout and nutrition programs, coaching from industry experts, and a variety of added functionalities. Users can select bespoke plans to enhance their wellness journey that integrates exercise into their daily routines while tracking their health and fitness data.
Student project at CareerFoundry
Client
Design a Fitness and Health app for beginners
Goal
End-to-end UX designer, from discovery to handoff
Role
Figma
Usability Hub
Optimal Card Sort
Google Forms
Tools
Challenge
Design a comprehensive and user-friendly experience for health and fitness app that will keep the users engaged by providing exercise videos and modifying their lifestyle with the guidance of fitness experts to stay motivated.
We will know this to be true when we see an increase in user retention and positive feedback on the platform’s convenience and security features.
Solution
Users need a simple and reliable solution that will keep the beginners, who are stepping into the fitness journey, on top of their health goals. The app will help in customizing the fitness activities and with exercise videos. The users will also be provided with Virtual assistants to answer minor queries. This app will also benefit the users who are already fit and want to enhance and continue their fitness journey.
The Design Process
Research
Competitive Analysis
In marketing and strategic management, competitive analysis evaluates the strengths and weaknesses of existing and prospective competitors. This evaluation offers both an offensive and defensive strategic framework to recognize opportunities and risks.
After conducting SWOT analyzing for 2 competitors, I have successfully evaluated and adapted their strengths, converting their weaknesses into opportunities that cater to my audience’s needs.
Easy to use and customizable.
Expert advice anywhere and anytime.
Track fitness activities and health data.
Strengths
Enhance a healthy lifestyle for beginners through accessible fitness videos.
Gives users to connect with third-party applications/devices.
Benefit already fit users to enhance and continue their fitness journey.
Opportunities
User Research
In order to fully understand user’s needs and habits, I began with a comprehensive user study.
Conducted 2 different approaches for my research, a combination of 3 interviews and 18 surveys, indicated that a significant lifestyle enhancement and healthy behavior is essential to improve overall well-being. In light of this understanding, the app must incorporate functionalities that seamlessly support its objectives.
By focusing on what the users want and need, hidden opportunities were revealed for my project:
Research indicates that a focus on significant lifestyle enhancements to improve overall well-being and instill healthy behaviors is essential. In light of this understanding, the app must incorporate functionalities that seamlessly support its objectives.
2. Define
Affinity Map
After reviewing the interviews and surveys, I compiled all the notes I had taken into several key categories–needs & goals, behaviors and quotes & notes– for affinity mapping that helped me narrow down my focus and gain a better understanding of the users. This enabled me to identify patterns and topics in people’s needs and expectations which shaped my creation of FitLyf and the development of my personas.
These categories allowed me to view similarities in the research and extract some key insights to proceed with:
Any knowledge is welcomed in terms of food and exercise types, therefore virtual assistant is a priority for seeking any advice.
Participants would like to record and visualize their fitness progress to get health back on track.
The correct form of exercise is also a concern for the participants improved performance and better results.
Key Insights:
User Persona
Following user research, I created two personas based on the information gathered. Both the personas are beginners in the world of fitness and exercise but their distinct scenarios and requirements showcase different preferences and behaviors.
Meenu, a Homemaker, values healthy food and consistent fitness, and her unique situation and needs represent essential target audience segments for consideration.
Sunny, a Banker, wants to find a fitness expert to get awareness on good health and, also look for workout videos suitable to his level of intensity.
Journey Map
To better understand Sunny’s perspective, I created a user journey map for him. It illustrates his interaction with FitLyf from the initial discovery to finding out suitable Fitness coach and relevant workout videos. This map helped me identify potential problem areas to be addressed in the design stage.
3. Ideate
User Flows
The next step was to visualize how the app works, so I created user pathways based on User stories to represent user’s goals and expectations. These gave in-depth understanding of the user’s needs, and helped to generate solutions that provided value to the design for Sunny to comprehend his navigation through FitLyf for task completion. This enabled me to enhance the user interface and pinpoint possible hurdles in the user experience.
Information Architecture
After analyzing user involvement and platform interaction, I designed a sitemap layout derived from information gathered through card sorting by 8 participants with a set of 30 cards. The similarity matrix indicated agreement on 6 unique categories.
4. Design
Wireframes
With all the data from the Sitemap, I initiated sketching out Low-fidelity wireframes to brainstorm ideas in a simple way. The emphasis was not on visuals, rather observing how users maneuver through FitLyf. This has helped to visualize the structure of the new creation. By keeping things simple to start, I was able to make quick and multiple iterations before moving on to adding more detail.
Low-fidelity wireframes
Mid-fidelity wireframes were created to showcase what the structure will look like, including accurate spacing, headlines, and buttons. They are created in a wireframing tool, Figma for more accuracy and detail.
Mid-fidelity wireframes
5. Test
Usability Testing
Afterwards, updated the wireframes to mid-fidelity clickable prototypes, performed usability tests using 6 participants and organized the outcomes using Affinity maps and Rainbow spreadsheet. With these outcomes, I evaluated the identified issues based on Jacob Nielsen’s four-stage grading system and developed solutions for them. Tackling these concerns enhanced the overall flow as well.
Issues
1- Fitness Coach screen
Issue: The purpose of ‘Chat/Talk’ buttons on the top of the page was not clear.
Evidence: 33.3% participants were not clear about ‘chat/talk’ buttons on the top of the page.
Solution: Remove ‘Chat/Talk’ button from the top and placed it next to each coach for an easy access.
2- Onboarding screen
Issue: Visual element/images were missing to make the screens standout.
Evidence: 50% of the participants did not find the app very attractive and visually appealing.
Solution: The graphics/visual elements will be included in the app to make it showcase the Fitness content.
3- Tutorial videos screen
Issue: A participant did not like the way tutorial videos were displayed as they were female specific.
Evidence: One participant was looking for tutorial videos showing men.
Solution: Male exercise tutorials will also be included in the app to make it useful for everyone.
A/B Testing
I carried out a A/B Test on two variations of Onboarding screens, A and B.
The emphasis was on determining which screen better conveyed the visual aspect and explained the app's purpose.
The difference between the two screens is significantly high (90% and above). According to the test, version B screens offered improved graphics, content for clearer comprehension and justifies the design esthetics.
Style Guide
As FitLyf progressed, the designs were prepared to be handed off which involves documenting design elements so that the developers can recreate them and ensure consistency, and further assist the developers in making decisions and speeding up the creation of prototypes. This approach forms the backbone of a cohesive framework assuring uniformity and stable user interface.
Final Design
After analyzing feedback from participants and gathering knowledge from the usability testing, I focused on refining and improving the high-fidelity prototypes for FitLyf.
View the full interactive design experience...
Thoughts and Takeaways
The biggest challenge was to confine the features within the app. This was because the initial brainstorming about the functionality hinted at a very broad spectrum of aspects to include in one app. Conducting a seamless session for efficient testing can also be challenging as a few participants had issues setting up their Zoom for Usability test.
Creating the UX project for FitLyf was a wonderful journey, where I gained knowledge of innovative tools and techniques. Not only that have I become skilled in these platforms, I have also build confidence in ability to understand and quickly learn to implement new methods. I learnt that there is no best time to run usability tests, so starting to test early-on will improve app's structure resulting in more smoother interaction. During the design process, I realized the equivalent importance of each phase as they assist in reviewing and improving the design for superior user engagement. The process of developing FitLyf enhanced my understanding in:
In-depth analysis of the concept.
Learning to understand and create the user flow for the task.
Collaboration with the peers made the observations even more relevant which encouraged problem solving.
Now that the core structure and high-fidelity prototypes are set, I would like to continue with practices to enhance my proficiency, and gain the crucial hands-on comprehension of the recently acquired tools in constructing wireframes and prototypes. Allocating additional time towards research could provide valuable insights into competitors, customer challenges, and expectations. This strategy would ultimately assist in creating enhanced opportunities for my application. Moreover, Accessibility is another subject that could be explored thoroughly.