BodyFlow +AR: Master Your Proprioception

• 

  BodyFlow +AR makes invisible effort visible: detect muscle load, enhance form with Effort Map, and lock it in with AR Replay.

• 

  BodyFlow +AR in outdoor golf scenario

• 

  BodyFlow +AR in indoor gym scenario

• 

  Editing the UI in Figma Design

• 

  BRAINSTORMING

• 

  A draft of user journey

🌟 The "Invisible" Problem

Most people don’t actually know what their body is doing during a workout. You might repeat the same bad form for thousands of reps, building habits that lead to injury rather than progress. We wanted to take that "invisible" sense of effort and balance—proprioception—and turn it into an informative, intuitive AR experience. Our goal: turn every practice session into a masterclass in body awareness.

🏌️ The Prioritization: Why Athletes First?

We originally tried to build for every sport at once, but we quickly realized that to make it work, we had to go deep. We focused on Golf. A golf swing is a masterclass in high-speed torque and precision. We figured if we could help a "picky golf dad" fix his shoulder alignment in real-time, the system would naturally scale to everything else, from gym squats to office posture. And we were rewarded. Once we defined a key flow with a complex user scenario, the rest of the design flows together naturally.

🛠️ The Build

We didn't just start with a solution; we started by defining our users as "active people with other primary obligations" (job, school, etc) and brainstorming the frictions they face in daily life. This is how we found our user journeys. We mapped out exactly when users need a better way to understand the feedback from their trainer and how they can sense what to improve. This is how we settled on the wearable personal health tech solution.

• The Bento Logic: We used a Bento-style UI because we were constantly thinking of new features. This modular layout lets us add, iterate, and throw away bite-sized components fast.
• Figma & WebGL: We used Figma Make to bridge the gap between AI ideation and pixel-perfect design. By dragging and dropping the frames we designed in Figma Design into our Make, we can see how our UI looks in a 3D space in real time while simulating an AR experience. Then, we can make quick changes to motion/copy using Make again, then export it back to Design using the "click to copy all UI" function. T'was a fun process.

🚧 Lessons from the Trenches

It wasn't a smooth ride. We faced a few major hurdles:

• Design Tunnel Vision: We got stuck on one specific design early on and tried to force features into it later. We learned the hard way: never settle too soon.
• The 3D Playground: Designing for AR with the constantly changing environments (backdrop) is hard to imagine. We built a 3D playground in Make (drawing from previous experience making UI in Unity3D) just to test how our UI would actually feel in a responsive environment. While we couldn't import 3D animations & models directly to Make, we didn't stop— we "scraped together" custom JSON to hard-code muscle and joint movements frame-by-frame in WebGL. This helped us achieve our vision of how it feels controlling our 3D buddy in an AR space with our UI.
• The Human Element: Our team was formed online across different time zones. We lived in a 24/7 Discord VC to keep the momentum going despite never having met.

🏆 Accomplishments we're proud of

• Analytical Clarity: We stripped away the "data overload" & "analysis paralysis". Instead of showing confusing jargon, we help you feel exactly what went wrong with our dashboard and AR spatial environment.
• Precision Prototyping: We’ve built what we believe is a first-of-its-kind AR prototype in Figma with this level of spatial control and 3D space.
• The Experience is "GOOD": Seriously, check out our Figma Make site! We’re proud of how polished it looks and feels.

🚀 What’s Next?

We’re looking toward the horizon:

• Rehab + Recovery: Guided reloading for athletes coming back from injury.
• Coach Mode: Shared AR replays so pros can see what you see.
• Clip It: A "instant replay" feature to break down a crazy move the second after you do it.

Built With

• cursor
• figma
• figmamake
• gemini
• json
• three.js
• webgl