Key skills
Prototyping + Interaction Design
Visual Design
Tools Used
Figma
Platfrom
Mobile (iOS/Android)
Problem
Most fitness apps are either too general or hide essential features behind paywalls. I wanted to create an app that gets to the point—delivering clear, effective guidance that athletes can use every day to fuel performance and track progress.
Competitive Analysis & Research
I analyzed popular apps like Apple’s Fitness app, Nike Training Club, and SmartGym. Apple’s app works great with Apple Watch and has a motivational color palette, but relies heavily on pop-ups and premium features. Nike Training Club has a clean layout and workout focus but lacks detailed progress tracking. SmartGym has strong customization but a dense interface and paywalled features.
I saw the opportunity to design something visually motivating, direct, and free of distractions, made for athletes who want to know what to do, why it helps, and how to do it right.
Reflection
Designing Proform helped me grow tremendously in both UX and UI design. I learned that athletes value clarity and purpose—every feature needs to be there for a reason. Simplicity and fast access to data are essential, especially on mobile, where distractions can break focus. Figma’s auto-layout and component system were key to building a consistent, scalable design, and user testing reminded me how important feedback is in refining layout, hierarchy, and overall usability.
One of the UI challenges I tackled was designing a full dark mode version of the app. It pushed me to think about contrast, color accessibility, and how to carry the brand’s energy across different themes. If I had more time, I’d continue exploring motion in data visualization, customizable dashboards, and subtle interactions that enhance performance tracking without overwhelming the user. Overall, this project helped me bridge research, interface design, and visual storytelling to build a clean and motivating experience for athletes.
SCHOOL PROJECT - Oct–Nov 2024
Proform
Target Audience
Proform is designed for athletes —specifically those in sports like basketball, football, baseball, and soccer—who want to improve performance through intentional tracking and personalized workouts. The tone is serious but motivating, giving users the tools they need to stay disciplined and goal-oriented.
Danny Smith
“I want to aid my clients in their journey”
About
Danny Smith is a retired Athlete who is now a personal Trainer for new athletes. He was looking for a easy way to keep his clients consistent with workouts when he was away. He is also getting older and wants to stay motivated to continue to keep his body healthy. Danny is a hardworking role model for all of his clients, with that reputation he is relied on a lot and that can be stressful. He loves a challenge and lives up to it!
Demographic
Personality
Hardworking
Focused
Intelligent
Current Feeling
Pride
Stressed
Contentment
Habits
Overthinking
Perfectionist
Pain Points & Frustrations
Not tech savy
Job can be overwhelming
Not always being there for clients
Goals & Needs
Stay in shape
Keep clients consistent
Reduce stress
High-Fidelity Design & Prototype
Once the layout was solid, I began building high-fidelity mockups in Figma. I developed a consistent design system using a bold, athletic-inspired color palette of azure, chili, and a soft champagne accent. The typography was clean and legible, paired with rounded, touch-friendly components to ensure usability. My goal was to create a UI that felt energetic and motivating, with colors that communicated performance and intensity—without losing clarity or simplicity.
The final screens included an animated loading screen, a personalized homepage with sport-specific tips, detailed workout pages by muscle group, and a full Health Metrics breakdown. Each screen was built using Figma’s auto-layout and component system to ensure consistency, responsiveness, and ease of iteration.
I also designed a complete dark mode, focusing on color contrast, accessibility, and maintaining brand energy in a low-light setting. All designs were built using Figma’s auto-layout and component systems for fast, consistent iteration.
Check out my other projects!
Wireframes & Planning
Before diving into UI design, I created low- and mid-fidelity wireframes using Figma. The homepage was built around what matters most to athletes: a preview of suggested workouts, a snapshot of health metrics, recent progress, and quick sport-specific advice. From there, I mapped out secondary pages like a full Health Metrics breakdown and a detailed Workouts page based on each user’s sport..
