PHYSIO
Physio is a mobile health app designed to promote physical well-being by helping users build safe, effective, and consistent fitness habits. With physical inactivity on the rise and personalized training often inaccessible, Physio offers an affordable and user-friendly solution. Developed through the Design Thinking process, the app leverages AI motion tracking to guide users through proper form and injury prevention, supporting users at any stage of their fitness journey.
Hi-fi Prototype.
Landing Page.
CHALLENGE + SOLUTION
The challenge was to create an accessible tool that encourages physical activity while addressing common barriers like cost, motivation, and improper form. Many people struggle with staying active due to lack of guidance, injury risk, or intimidation. Our team designed Physio to meet these challenges head-on, offering AI-powered motion analysis, personalized workout programs, and real-time feedback—all from a user’s phone. The app also supports progress tracking, workout customization, and peer connectivity to build motivation and accountability.
Phone Screens.
TV Screen.
DESIGN THINKING
Task Analysis: By mapping out the steps users take to achieve their fitness goals, we identified critical pain points and tailored our design to support a more seamless, goal-oriented experience.
Storyboard: Our storyboard visualized how users would interact with Physio in real life, helping us uncover subtle moments that informed more thoughtful design decisions.
Technology: Physio uses built-in mobile cameras and connects to larger screens, making home workouts more accessible, interactive, and cost-effective—no extra equipment required.
User Flow: We designed a streamlined user journey—from sign-up to personalized workouts—while prioritizing privacy and enhancing engagement through custom avatars and rewards.
User Flow Sketches: Sketching helped us rapidly explore layout ideas, interactions, and navigation paths, setting a strong foundation for our visual and functional design.
Close up of user flow sketches.
Wireframes: Through iterative development, we refined the app and TV display wireframes, ensuring functionality, clarity, and a smooth user experience.
TV display wireframes.
Evaluation: Peer feedback helped us identify confusing areas in early wireframes, leading to key updates like merging pages and introducing a diamond-based reward system.
Interactive Prototype: We brought our wireframes to life in a clickable prototype, allowing us to test and demonstrate the app’s core features and flows.
TV display interactive prototype.
Heuristic Evaluation: A round of expert reviews revealed issues with clarity and visual consistency, which we addressed by refining UI elements and standardizing navigation to improve usability and aesthetics.
Heuristic Evaluation key themes.
Updated frames following the Heuristic Evaluation.
Figma
Photoshop
Artificial Intelligence
TOOLS
UI/UX Design
Health Tech
App Design