Fitness App: Information Architecture & Wireframing
Introduction
The fitness app market is expected to reach $14.7 billion by 2026, up from 8.39 billion as of 2023. More and more people are using apps to meet their health and fitness goals.
The current market leaders are Fitbit and My Fitness app, which boast various features from tracking calories to community activities in the user's local area.
As the user base grows, the appetite for alternative fitness apps offering advanced features also grows.
Project Objectives
Most people have busy schedules and have variable time for a workout. They turn to apps for their fitness needs. They want apps that are easy to navigate, fast and have delightful interactions. Additionally, the UI design should be attractive to capture users’ interest and make them stay.
This project aims to create an app with a unique and user-centric experience that is competitive with existing fitness apps.
User Personas
I have created two user personas to represent potential users' needs and pain points. Additionally, I have developed scenarios to understand their needs better and give context into how they might want to use the app in a particular situation. User 1 uses the gym frequently but has to find another way to keep fit due to a change in their work schedule. User 2 is not in the best shape due to a busy lifestyle with work and family but wants to improve their health metrics and believes a fitness app will help achieve this goal.
User Scenario 1 > Natalie
Natalie’s work is an hour from where she lives. She usually goes to her favorite gym, GetFit, which is close to work. She recently changed from a 9-5 Monday to Friday shift to a 4 days on 4 days off shift. As a result, she will be unable to go to her gym. A friend recommended a new fitness app that is user-friendly and enjoyable to use. As a savvy app user, she navigates the new app recommendations and features exercises. and workouts; she finds workouts similar to what she has been doing at the gym. She sets up her profile and chooses workouts for the next month. She also entered some milestones and began her first workout using this app.
User Scenario 2 > James
James is a father of two who has a busy life as an industrial designer and father of two. Due to health concerns, his doctor recently advised him to reduce his weight and adopt a healthier lifestyle. He has started to go to local gyms and is using this app to learn new exercises and to track his activity, nutrition, and sleep patterns. He knows he has difficulty maintaining and setting up the calendar and notifications to keep him on track. After a month, he has weeks of data, which he connects and syncs with the MyCharts app, then generates a report for his Doctor to review.
Information Architecture Map
I will create a sitemap which will be a blueprint, outlining a potential structure for the new app and to look at the relationship between the different pages and features. There are two site maps, one for a mobile device and a website version. The two versions will function differently. The mobile device will be the primary gateway to accessing the features, so I have created two accounts for the different experiences.
Design Strategy:
•Smart recommendations – AI-driven suggestions
•Performance Analytics – analysis of performance with recommendations for improvement
•Virtual trainer – AI feedback on exercise form
•Live classes
•Book local gym
•Automated meal plans – based on preferences and goals
•Achievements – Earn vouchers and rewards
•Community - Group workouts, forums, discussion
•Barcode scanning – quick logging of data
•Support – feedback and surveys
•Biometric information – Personalized insights
•Exercise library
•Custom workouts – AI feedback on form
•Quick tile access
•Share achievements – Share achievements on social media
•Health provider integration – synchronization with health apps e.g. MyCharts
User Flow
The next step was to create two user flows to explore critical user tasks and to craft an easy navigation path. I used Figma to create the wireframes after user flows to expand on user flows, showing the user-centric navigational structure for mobile and website applications.
A: The first diagram details the maritime journey from the point of first login to the user dashboard.
B: The second diagram is the detailed journey of an existing user navigating from the login page to building a workout routine, eventually reaching the dashboard.
Wireframes
Conclusion
In conclusion, the wireframing process for the fitness app case study has proven instrumental in shaping a user-centric and visually cohesive product. Through careful consideration of user needs, efficient navigation, and intuitive design, the wireframes laid the foundation for a seamless and engaging user experience.
The personas and sitemaps translated conceptual ideas into tangible layouts, providing a clear roadmap for the app's development. The wireframes focused on key features such as navigation and workout building to ensure users can easily access and utilize the app's functionalities.
Furthermore, the iterative nature of the wireframing will allow for valuable feedback and refinement. The wireframes have effectively bridged the gap between conceptualization and implementation, facilitating collaboration among designers, developers, and stakeholders.
As we go into the next stages of development, the insights gained from the wireframing phase will serve as a valuable guide. The user-centric approach embedded in the wireframes will contribute to a product that meets and exceeds user expectations, enhancing the overall user experience.