PHYSIO
LOOK BETTER. FEEL BETTER. LIVE BETTER.
For this project, our team was tasked with creating an app that addresses a societal issue through the lens of UI/UX design principles. Our team identified a critical challenge: physical well-being. Physical inactivity is a growing public health concern exacerbated by sedentary lifestyles. In response, there is a need for an affordable and accessible solution that encourages exercise and empowers individuals on their fitness journey. Our app, Physio, developed through Design Thinking Phases (Discover, Define, Ideate, Prototype, Test, Iterate), addresses this by providing guidance and feedback on exercise routines. It helps users maintain correct form, enhance mobility, and prevent injuries while promoting accountability and discipline in achieving safe and effective workouts.
MY ROLE
I contributed to all the stages of the design process. I worked primarily on the design and components of Home Page, Favorites Page, Create An Account Page, and the AI Assessment Scan screen. Additionally, I create the Work Out Pop-UPs. Additionally, I made the Workout Pop-Up overlays and Workout Setting overlays that are implemented throughout the app. These pages significantly enhanced the ability for users to browse workouts and customize the workouts for their specific needs. The components and interactions enhanced the overall aesthetics and functionality of the app.
PROBLEM
DESIGN THINKING
PROPOSED
SOLUTION
Physical inactivity is a growing public health concern, exacerbated by sedentary lifestyles that worsen health issues nationwide. The barriers to personalized physical training—such as high costs and the intimidation of starting a fitness regime—often lead to procrastination and diminished motivation. Additionally, exercising with improper form can be detrimental, increasing the risk of injury and undermining the benefits of physical activity. To address these challenges, there is a clear need for an affordable, accessible, and educational tool that empowers individuals to take control of their fitness journey. Physio is designed to meet this need by providing guidance and feedback on exercise routines, ensuring users maintain correct form, enhance mobility, and prevent injury. Aimed at those ready to start or advance their health journey, Physio promotes accountability and discipline, making safe and effective workouts accessible to all.
Our app leverages everyday devices to transform the fitness journey, utilizing the phone camera and AI tracking to precisely monitor movements, log workouts, and provide feedback on form and movement. This technology not only tracks but also enhances exercise effectiveness and safety. Designed for convenience, our app supports users' fitness endeavors anywhere, anytime, ensuring uninterrupted progress toward fitness goals. This makes it a versatile tool for anyone aiming to improve their physical health and well-being. Some of the key features include:
1. AI-Powered Motion Analysis
Use of AI to analyze users' movements in real-time through the camera, providing immediate feedback on their form, range of motion, and technique to ensure exercises are performed correctly and safely.
2. Personalized Exercise Programs
Generate personalized exercise routines based on the user's physical condition, goals, and progress. This includes adjustments based on the real-time feedback received during exercises.
3. Progress Tracking and Reporting
Implement tracking of users' progress over time, including improvements in mobility, strength, and completion of exercise programs. Offer visual reports and insights to motivate users and show tangible results of their efforts.
4. Real-Time Feedback and Corrections
Offer real-time, voice-guided feedback or visual cues on the user's screen to correct posture or movement during exercises, ensuring effective and safe workouts.
6. Connectivity
Allow users to create group workouts and discover workouts completed by their peers. This creates an additional aspect of accountability and gives users the chance to connect from the comfort of their homes.
DISCOVER
SECONDARY RESEARCH
In our secondary research on the broader context of the problem, we found that many fitness apps lack a fully interactive and responsive user experience, particularly in providing real-time feedback and convenience for mobile use. For example, apps like FormCheck allow users to upload videos for later review but do not offer immediate feedback for on-the-spot form correction. Meanwhile, platforms like Peloton, despite sophisticated AI technology and extensive video libraries, fail to provide personalized feedback on user form, essential for safe and effective workouts. Additionally, these solutions often have high costs and may require specific equipment, restricting access for many potential users. This highlights a significant market opportunity for an app that provides accessible workouts for all, regardless of equipment or financial constraints, and offers instant, personalized feedback on form and technique. Such an app would be invaluable in helping users avoid injury and achieve better physical health, supporting them throughout their fitness journey.
DEFINE
TASK ANALYSIS
From our secondary research, we were able to outline key tasks and the activities that users have to complete to solve the problem of achieving the goal. The task flow diagram provided us a birds eye view of the problem, enabling us to focus on the design for the tasks and activities that support user goals.
STORYBOARD
We created a storyboard to illustrate the context in which the users completed the tasks and activities to achieve their goals, as shown in the figure below. The storyboard allowed us to notice subtle details and identify areas of the user’s interaction with the product that required focus in our design.
TECHNOLOGY
To tackle usability, affordability, and user engagement challenges, our app leverages the iPhone or Android camera sensor to connect with large-screen devices like TVs. This integration allows users to exercise at home using equipment they already own, making our app more accessible and cost-effective compared to many pricey at-home fitness programs and personal training regimens.
IDEATE
USER FLOW
We refined our app through multiple iterations, resulting in a user flow that begins with account creation followed by an AI Assessment Scan to track movements and preferences. After connecting their device to a TV, users can start personalized workouts, connect with friends, and track their progress. We prioritize privacy; thus, the app uses camera and microphone access securely. Instead of sharing actual video and audio, users interact through automated avatars on the Connect Page, which can be customized and purchased in the Physio store using earned Diamonds. The ideal steps users would follow to complete a common task are featured below in the User Flow Diagram.
SKETCHES
After finalizing our user flow, we sketched our concept and explored various aspects of user interaction by visualizing them.
PROTOTYPE (LO-FI)
WIREFRAMES
We iteratively developed the wireframes for the app and TV display.
EVALUTATION
The initial version of the wireframes were reviewed by three peer UX designers. Each evaluator received a clear overview of the problem statement, proposed solution, user flow diagram, and wireframes to help them understand the context. Based on the evaluation, we found that we needed to merge the Discover and Connect pages into one Connect page. We also found that we needed to simplify the Physio store and better incorporate it into the app. It was confusing whether or not users were using real money to buy the avatars. To solve this, we changed the reward system to diamonds. These findings were then incorporated into the final version of the wireframes as shown in the figures below.
PROTOTYPE (HI-FI)
INTERACTIVE
PROTOTYPE
The wireframes were then further developed into an interactive prototype.
HEURISTICS
EVALUATION
A new set of 3 peer UX designers conducted a heuristic evaluation of the first version of the hi-fi prototype. After discussing the evaluation results as a group, we found that visibility and efficiency of use and aesthetics were the most detrimental to the overall experience. Not only did we need to make the app more intuitive to use, but we also needed to make it more cohesive and visible overall. Getting the buttons and popups to be more standard would help the aesthetics, and we also thought that changing the text colors would help the visibility and cohesion of the app. We also found that the efficiency of use could be improved by creating back buttons and making “x” buttons more standard. These findings were then incorporated into the final version of the prototype as shown in the figures below.
LANDING PAGE
Finally we developed a landing page to promote our system.
CONCLUSION & REFLECTION
The Design Thinking Process yielded numerous insights that significantly shaped our app's development. Through a series of sketches, iterations, and invaluable feedback from peer evaluators, we crafted an application that empowers users to proactively manage their physical health in a cost-effective and accessible manner. By harnessing the sophisticated capabilities of camera motion sensors within smartphones, our app facilitates seamless connections to additional devices such as iPads, TVs, or monitors. It offers users robust tools to monitor their fitness progress, providing a holistic and integrated fitness experience. Our commitment to combining user-friendly design with innovative technology ensures that health and fitness are attainable for everyone, regardless of their resources or starting point.
During the UX/UI Design phase for ubiquitous systems, our team gained substantial knowledge about creating an intuitive and straightforward application. Personally, I significantly enhanced my skills in designing and implementing components and their variations. Initially challenging, I overcame these hurdles with persistent practice and guidance from my professor, leading to proficiency in using autolayout, a pivotal aspect of our design strategy. Moreover, I developed the ability to maintain a cohesive design flow across various devices, such as syncing the app from phones to TVs, which opens up exciting new possibilities for future UX/UI prototypes.
As a team, we tackled various challenges to make the app intuitive and user-friendly. The feedback received during the Design Process Phase was incredibly beneficial. Notably, during the Heuristic Evaluation, we identified key areas for improvement related to system status visibility, consistency and standards, usage efficiency, and minimalist aesthetic design. We responded by enhancing consistency across the app, standardizing popups for easier navigation, and incorporating back buttons to allow users to correct mistakes easily.
While there were occasional disagreements regarding aesthetic choices, we prioritized user-friendliness above all. Though some aspects of the app’s aesthetics and consistency could be further refined, our collaborative efforts resulted in a successful tool that supports users in achieving a healthier, more active lifestyle.
Throughout the design process, we utilized ChatGPT to assist in the initial conceptualization and development stages of the app. It proved invaluable in generating a range of initial ideas and expanding on essential features and elements to include in our design. Additionally, ChatGPT was instrumental in refining our written communications for proposals and informational content and in creating engaging headlines and subtitles for the app’s landing page.
