My Plan Module - a Personalized
Fitness Planning Experience
Burn Boot Camp needed one place for members to plan their week, track progress, and log personal records - instead of three disconnected touchpoints. Five flows, one module, delivered through client-driven exploration rather than a fixed spec.
01 - overview
Aug 16, 2024
BURN BOOT CAMP is a fitness brand offering trainer-led workouts, nutrition support, & community-driven programs. The My Plan module was designed to help members track progress, manage PRs, follow nutrition goals, and stay consistent through one simple mobile experience.
BURN BOOT CAMP is a fitness brand offering trainer-led workouts, nutrition support, & community-driven programs. The My Plan module was designed to help members track progress, manage PRs, follow nutrition goals, and stay consistent through one simple mobile experience.
Product type: Mobile App Module Experience
Domain: Fitness, Wellness & Habit Tracking
Team: Solo Product Designer (Me), 1 Delivery Lead
Timeline: 1 Month
Back Story…
We were already working on other Burn Boot Camp modules, which gave us a strong understanding of the product, brand, & development flow. The client team also brought deep business & member insights, while exploring early ideas from their side.
We were already working on other Burn Boot Camp modules, which gave us a strong understanding of the product, brand, & development flow. The client team also brought deep business & member insights, while exploring early ideas from their side.
02 - THE start
Aug 16, 2024
How My Plan Started.
How My Plan Started.
The client came with a high-level direction for how My Plan could work. They had prepared an initial user flow and rough low-fidelity screens to explain the idea, but the detailed experience was still open for exploration.
The client came with a high-level direction for how My Plan could work. They had prepared an initial user flow and rough low-fidelity screens to explain the idea, but the detailed experience was still open for exploration.
They knew the larger goal, but….
internal screens, edge cases, interactions, feature depth, and
the complete experience still needed to be shaped.
They knew the larger goal, but….
internal screens, edge cases, interactions, feature depth, and
the complete experience still needed to be shaped.
Sketches provided by client
Sketches provided by client
03 - THE CHALLENGE
Aug 16, 2024
The real Challenge
The real Challenge
My Plan looked like a simple tracking module, but it had to connect multiple fitness touchpoints into one clear experience.
My Plan looked like a simple tracking module, but it had to connect multiple fitness touchpoints into one clear experience.
Progress, wearable data, camps attended, calories, nutrition, and personal records all needed to work together without making the app feel heavy or complicated.
Progress, wearable data, camps attended, calories, nutrition, and personal records all needed to work together without making the app feel heavy or complicated.
Multiple Data Points
Aug 16, 2024
Steps, calories, camps, Heart rate, PRs, goals and nutrition had to feel connected.
Steps, calories, camps, Heart rate, PRs, goals and nutrition had to feel connected.
Evolving Scope
Aug 16, 2024
The client was still deciding what should stay in Phase 1.
The client was still deciding what should stay in Phase 1.
Consistent Experience
Aug 16, 2024
The design had to be aligned with the clean, functional, & member-friendly approach
The design had to be aligned with the clean, functional, & member-friendly approach
04 - FLOW MAPPING
Aug 16, 2024
key flows to design
key flows to design
My Plan was more than a dashboard - it included multiple connected flows around fitness progress, wearable data, nutrition, and personal records.
My Plan was more than a dashboard - it included multiple connected flows around fitness progress, wearable data, nutrition, and personal records.
01
Aug 16, 2024
Onboarding flow
Questionaaire for setting goal and wearable connection to sync progress
Questionaaire for setting goal and wearable connection to sync progress
02
Aug 16, 2024
My Plan Dashboard
Showing steps, calories, camps, nutrition, PRs, & progress in one place.
Showing steps, calories, camps, nutrition, PRs, & progress in one place.
Entry point for every flow
03
Aug 16, 2024
Personal Records
Add, edit, delete, and track fitness achievements.
Add, edit, delete, and track fitness achievements.
04
Aug 16, 2024
My Diet / Nutrition / Goals
Manage and track nutrition-related details.
Manage and track nutrition-related details.
Exploring the Direction..
To understand the best direction for My Plan, we explored similar fitness, health, and tracking experiences. We studied how other apps handled progress, goals, nutrition, personal records, and wearable data and had a pretty good idea about the whole experience.
To understand the best direction for My Plan, we explored similar fitness, health, and tracking experiences. We studied how other apps handled progress, goals, nutrition, personal records, and wearable data and had a pretty good idea about the whole experience.
05 - AI EXPLORATION
Aug 16, 2024
There comes Chatgpt + Figma Make
There comes Chatgpt + Figma Make
Instead of jumping directly into low-fidelity UI, we used AI-assisted exploration to quickly understand how the complete My Plan module could work.
Instead of jumping directly into low-fidelity UI, we used AI-assisted exploration to quickly understand how the complete My Plan module could work.
We used ChatGPT to brainstorm possible workflows, identify missing states, and create a detailed prompt around the module. Then, we used Figma Make to generate an early high-level prototype that helped us visualize the overall flow before investing time in detailed design.
We used ChatGPT to brainstorm possible workflows, identify missing states, and create a detailed prompt around the module. Then, we used Figma Make to generate an early high-level prototype that helped us visualize the overall flow before investing time in detailed design.
Created full prototype of My plan experience using Figma make
Created full prototype of My plan experience using Figma make
🔍 What we explored
🔍 What we explored
How the key flows could connect into 1 complete module.
How the overall module could look as an early prototype.
Which screens and states were missing from the initial flow.
How the key flows could connect into 1 complete module.
How the overall module could look as an early prototype.
Which screens and states were missing from the initial flow.
☑️ How it helped
☑️ How it helped
Turned abstract ideas into visible flows.
Helped the client react and give clearer feedback.
Gave us a strong base to refine through actual design work.
Turned abstract ideas into visible flows.
Helped the client react and give clearer feedback.
Gave us a strong base to refine through actual design work.
06 - VISUAL RESEARCH
Aug 16, 2024
Next stack Mobbin
Next stack Mobbin
Once we had an early flow direction, the client wanted to visually explore how similar apps were handling progress, goals, fitness data, and nutrition flows.
Once we had an early flow direction, the client wanted to visually explore how similar apps were handling progress, goals, fitness data, and nutrition flows.
We used Mobbin to collect relevant references and discussed them with the client. This helped us understand not only what could work, but also what the client wanted to avoid.
We used Mobbin to collect relevant references and discussed them with the client. This helped us understand not only what could work, but also what the client wanted to avoid.
Competitive benchmarking deck presented to leadership team
Competitive benchmarking deck presented to leadership team
📄 Key feedback we received
📄 Key feedback we received
Avoid rings, gauges, or heavy progress visuals.
Use simple bar-based progress indicators.
Keep the experience minimal, clean, and easy to understand.
Avoid gamification patterns for Phase 1.
Avoid harsh gradients or overly vibrant colors.
Skip AI summary functionality for now that we got from figma make, can be used in future-phase.
Avoid rings, gauges, or heavy progress visuals.
Use simple bar-based progress indicators.
Keep the experience minimal, clean, and easy to understand.
Avoid gamification patterns for Phase 1.
Avoid harsh gradients or overly vibrant colors.
Skip AI summary functionality for now that we got from figma make, can be used in future-phase.
After lo-fidelity iterations..
The reference discussion helped us lock the experience direction, so the next step was to bring the module to life through high-fidelity screens.
The reference discussion helped us lock the experience direction, so the next step was to bring the module to life through high-fidelity screens.
07 - DESIGN ITERATIONS
Aug 16, 2024
Shaping the High-Fidelity Experience
Shaping the High-Fidelity Experience
Iteration 1
Iteration 2
Iteration 3 - Approved ✅
My plan main screen
PR listing screen
PR detail screen
My diet detail screen
Burn share card mock
Camps attended detail screen
Built the System Alongside…
While the high-fidelity screens were being designed, we also started organizing the module into a proper design system. Components, styles, and color usage were structured in parallel so the final screens stayed consistent, scalable, and easier for the development team to implement.
While the high-fidelity screens were being designed, we also started organizing the module into a proper design system. Components, styles, and color usage were structured in parallel so the final screens stayed consistent, scalable, and easier for the development team to implement.
08 - SYSTEM CONSTRAINTS
Aug 16, 2024
Here comes another twist
Here comes another twist
Client introduced one more important requirement: the module had to use only the color codes already added in their development setup.
Client introduced one more important requirement: the module had to use only the color codes already added in their development setup.
We created the color shades and tokens based on new branding that was very close to existing app. But client wanted to use color token names and hex code as per their existing development setup and also provided a list of 72 color codes already been using in the app.
We created the color shades and tokens based on new branding that was very close to existing app. But client wanted to use color token names and hex code as per their existing development setup and also provided a list of 72 color codes already been using in the app.
We reviewed all 72 color names and hex codes, mapped them with our current design, and updated the system using Figma variables.
We reviewed all 72 color names and hex codes, mapped them with our current design, and updated the system using Figma variables.
Colors mapped from client-provided codes
Mapped colors added into figma variables as light and dark mode
Dark mode screens also delivered using easy color token switching
Designed with development
Since we had already worked with the Burn Boot Camp development team on earlier modules, the process was not a one-time handoff. We kept the collaboration ongoing while the module was being implemented.
Since we had already worked with the Burn Boot Camp development team on earlier modules, the process was not a one-time handoff. We kept the collaboration ongoing while the module was being implemented.
As the team reviewed feasibility and tested the app internally, we made small refinements across screens, states, and interactions to keep the experience practical, consistent, and aligned with the Phase 1 scope.
As the team reviewed feasibility and tested the app internally, we made small refinements across screens, states, and interactions to keep the experience practical, consistent, and aligned with the Phase 1 scope.
09 - PROJECT REFLECTION
Aug 16, 2024
Key learnings
Key learnings
This project helped me understand how to balance exploration, client alignment, visual design, and development feasibility while shaping a new product module from scratch.
This project helped me understand how to balance exploration, client alignment, visual design, and development feasibility while shaping a new product module from scratch.
It also reinforced that good design is not only about creating new screens, but also about working within real constraints - client feedback, development feasibility, existing colors, scope, and future scalability.
It also reinforced that good design is not only about creating new screens, but also about working within real constraints - client feedback, development feasibility, existing colors, scope, and future scalability.
What I learned
Early ambiguity can be managed better with quick prototypes and references.
Visual references help clients clarify both what they want and what they want to avoid.
Design systems become more valuable when they support real development constraints.
Phase 1 design should focus on clarity, stability, and future growth.
Early ambiguity can be managed better with quick prototypes and references.
Visual references help clients clarify both what they want and what they want to avoid.
Design systems become more valuable when they support real development constraints.
Phase 1 design should focus on clarity, stability, and future growth.
