ColorMetric for ZOZOFIT

SETTING THE SCENE

ZOZOFIT captures the body and many key measurements in 3D down to the millimetre. That accuracy was the whole point of the product, and it is genuinely world class.

But accuracy on its own was not enough. A first time user, someone nervous, hopeful, just starting out, opens their results and sees a list of circumference numbers. It is correct. They might wonder if it’s really theirs. And it asks them to do the work of turning data into meaning.

I led the design, and facilitated everything in close collaboration with engineering, product VPs, marketing, and executive stakeholders, and I especially stayed close to the people who actually use the app the whole way through.

THE BUSINESS REQUIREMENT

Build a "heatmap" view that shows the difference between two body scans.

• It was scoped from day one as a way to compare two scans, not as a standalone visual.

• The written spec was short. Real details still needed attention.

• Business pictured an overlay on the mesh. Paint the body, ship it.

That was the requirement. The problem underneath it was bigger.

Example image from business as a reference to heatmap concept

THE PROBLEM

The core asset, precise measurement, was accurate but emotionally flat. My job was not only to decorate the mesh, but to turn a cold number into something an ordinary person could understand, feel, and act on, without losing the credibility of the data.

The people I was designing for were not analysts. They were regular people at the start of a hard journey. So the real problems were human ones.

• Help them understand what the numbers mean without having to think hard or read between the lines.

• Let them digest progress in a glance, not decode a spreadsheet.

• Give them motivation, a reason to feel good and keep going.

• Make it easy to come back, again and again.

There was also a structural limitation baked into the feature. ColorMetric has no meaning with a single scan. It is always a difference between two points in time. That one fact shaped everything downstream: the gating, the education, the nudge to take a second scan, and the choice to compare against the previous scan rather than the very first.

So the questions I had to answer were these.

• How do I make a precise but cold measurement legible and emotionally resonant at a glance?

• How do I teach a new visual language without a wall of text?

• How do I handle a feature that is impossible with one scan without it feeling like a paywall or trickery?

• How do I keep the colour honest when the data is noisy from posture, occlusion, and tiny fluctuations?

Example of UI in early stages

USER AND PROFESSIONAL VALIDATION

I wanted to solve the right problems, so I went to the people who live this every day.

• I interviewed health professionals, gym enthusiasts, and personal trainers. I wanted to understand how they help clients read their own body measurements, and how they talk about progress in a way that teaches rather than overwhelms.

• I kept them in the loop as the designs evolved. I brought work back to them repeatedly and asked the hard questions: does this actually help your clients, and is it insightful, delightful, and different enough to matter?

• I travelled to Los Angeles several times to sit with our main users and earliest adopters, as well as product ambassadors. Being in the room with them kept me honest and kept me focused on solving problems, not just pushing pixels.

This was its own stream of work, but it fed directly into the decisions that followed. The professionals confirmed what mattered, the early adopters showed me where the experience confused and/or delighted them, and the main choices were shaped by both.

Online user testing for feedback and validation with ambassadors

Early days concepts for naming, iconography, navigation, introduction and education

CHALLENGES, COMPROMISES & CORE DECISIONS

This is where the idea met reality. A colour overlay sounds simple. Making it honest, readable, and on brand was the hard part.

Challenges

• Teal and amber blend into green. My two change colours, teal for reduction and amber for growth, mix into green where they meet. At ZOZOFIT green already means goals and achievement, so an accidental green would tell the user something completely wrong. The colour system had to be designed for how it behaves when blended, not just how each colour reads on its own.

• The data fought back. Real bodies and real scans are messier than a clean demo, and a few problems only showed up once colour hit actual data.

  • Posture masquerading as progress. Small shifts in how someone stood could read as change when nothing had really changed. I had to make sure the visual only responded to genuine transformation.

  • Parts of the body hiding others. In some poses, one part of the body would obscure another and throw the colour off. That needed handling so the result stayed accurate.

  • Noise versus real change. Tiny natural fluctuations are not progress. The challenge was tuning what counts as real, so small genuine changes still showed while noise did not.

Exploration of colour and technical implementation settings

Compromises

• One shared viewer, not three native builds. I favoured a single cross platform renderer so iOS, Android, and web look identical and can update independently. The trade was added complexity and memory pressure on older devices. For a feature whose entire value is a consistent visual, consistency won.

• Filtering honesty against sensitivity. Every threshold that kills a false positive risks hiding a small real change. I tuned deliberately toward trust, because a visual people cannot believe is worse than one that occasionally under reports.

Core Decisions

• Colour that means the right thing. Red and green is the obvious scale, but it fails red green colour blind users and quietly says "red is bad". On a changing body that is the wrong message. I stayed true to the colour theory already running through the product: teal for reduction, amber for growth, white or transparent for no change, and green reserved for goals and achievement. That kept ColorMetric consistent with the rest of the experience and avoided sending mixed signals.

• A feature that teaches itself. A new visual language dies if it needs a manual. I layered the education into a one time intro, a plain explainer, and a permanent info button for the moment someone forgets. Easy to learn, easy to revisit.

• An invitation, not a paywall. Most users start with one scan, so their first experience is an absence. I framed that moment as progress, "Unlock ColorMetric", rather than a locked door. This is where the retention loop actually lives.

• Show the change, not the stats. In this view I replaced absolute measurements with the delta and directional cues, so the screen answers one question: what changed.

Encouraging second scans as part of the journey

Showing how difference metrics are represented in color alongside the visual

THE SOLUTION

I designed ColorMetric as a comparison first, colour coded view of the body. It ties straight back to the goals: understand at a glance, feel the progress, come back for more.

• Pick a scan. The app pairs it with your previous one by default, so the colour always reflects recent change and stays alive between scans.

• See the change. The mesh is painted teal to amber, with the intensity scaled to the size of the change. Bigger change, brighter colour.

• Read it instantly. Delta values and directional arrows sit alongside the visual, so the number and the feeling arrive together.

• Learn it once. A first run layer teaches the colour language and stays available on demand.

The UX of integration:

ColorMetric could not sit behind a wall, because it needs a second scan to exist. So I wove it through the app rather than hiding it: an "Unlock ColorMetric" card on the home screen for one scan users, a view mode tab inside scan details for returning users, an in context info button, and marketing deeplinks for campaigns. The goal was to make the "you need a second scan" moment feel like an invitation.

Built to scale:

This is the part I am most proud of as a systems decision. Rather than bolt on a one off screen, I designed the navigation and structure of the mesh views so new compare modes could slot in cleanly. That foundation is why new comparison views like Side by Side, and later Booty, Tailor, and Posture modes, were cheap and easy to add. One feature became a platform for many. This single handedly became what opened up the future of this product offering.

The name followed the same logic. Built internally as "Heatmap", it felt clinical. Working with marketing, we landed on ColorMetric: ownable, on brand, and framing the feature as metrics made visual.

Current ColorMetric implementation with navigation, user flow and hi-fidelity UI

IMPACT AND OUTCOMES

ColorMetric started as a request to add colour and became a retention and growth engine.

The sharing result was no surprise. The vibrancy of the visual made people want to show their progress. Those shares pushed ZOZOFIT in front of new audiences, lifted engagement online, and fed straight back into acquisition. A feature built to help one person understand their body ended up bringing more people to the app.

And crucially, we did this without hiding it behind the paywall. The bet was that engagement and word of mouth would pay off more than a paywall would, and it did.

LEARNINGS AND KEY TAKEAWAYS

• Solve the stated problem and the real one. The business asked for a heatmap. What people needed was to understand and feel their progress. Both had to ship in the same feature.

• Constraints are direction, not obstacles. "Impossible with one scan" looked like a weakness. It became the reason the feature drives a second scan.

• Get in the room. The trips to LA and the time with trainers changed the work. You cannot design motivation for people you have not listened to.

• Systems thinking compounds. Designing the navigation to scale turned one feature into a foundation for many, and saved the business real time later.

• Honesty builds trust. Tuning the colour to under report rather than over report protected the one thing the product cannot afford to lose: belief in the numbers.

• Design has a seat at the table. This ultimately shipped and was successful because I as the designer took the lead, and brought business goals and user needs together so both would win.

FINAL CONCLUSION

The best features do not just answer the brief. They find the human need hiding behind it and build the business case on top of it.

ColorMetric took ZOZOFIT's greatest strength, accuracy, and made it something a beginner could feel. It gave people a reason to scan again, a reason to share, and a reason to believe what they were seeing. It did that while laying the groundwork for a whole family of features to follow.

I did not just paint the body. A measurement that once felt like nothing now gives people a reason to keep going and keep scanning. And I turned that meaning into growth for the business.