UI Design
PulsePath Fitness UI
Aug 2025•5 weeks•React Native UI + Motion Prototyping
Fitness app UI concept with motion, habit tracking screens, and wearable-style stats layout.
Overview
Created a consistent design language for workout screens, stats, and habit streaks.
Used motion intentionally: transitions that guide attention rather than distracting the user.
Focused on mobile usability: thumb reach, clear hierarchy, and readable metrics.
Key Challenges:
- •Keeping animations smooth on mid-range devices without overloading the UI thread.
- •Balancing aesthetic design with accessibility and contrast requirements.
- •Designing data-dense screens that still feel calm and usable.
Built With
TypeScript
Language
Framer Motion
Animation
Tailwind CSS
Styling
⚡
React Native
Mobile Framework
Key Features
01
Workout Flow Screens
Warm-up → workout → cooldown screen flow with progress UI and clear CTA placement.
02
Streak & Habit Tracking
Streak calendar and lightweight habit tracking to reinforce daily consistency.
03
Insights Layout
Weekly summaries with clear metrics and trend indicators built for quick scanning.
Visual Showcase
Development Journey
Research & Moodboard
1 weekJul 2025
- Benchmarked top fitness apps for hierarchy patterns
- Defined color tokens and typography rules
- Created motion references and interaction principles
Design & Prototyping
3 weeksJul-Aug 2025
- Designed key screens (home, workout, stats, streaks)
- Built micro-interactions and transitions
- Iterated on spacing, readability, and metric cards
Handoff
1 weekAug 2025
- Prepared component specs and tokens
- Exported assets and documentation
- Final review and improvements for consistency
Work together
Let's build something great together
Have an idea you want to bring to life? Let's shape it into something you're proud to show.