Employer

Bodygram

Shipping Date

Released – ongoing

Reducing churn by 27% with a new, simpler user flow and real-time morphing avatar

Role

Product Designer

Tools

Figma, Notion

Brief

Create an engaging user experience to reduce churn rates. The application should be visually appealing enough to encourage new business, whilst respecting our partners' branding.

Business Context

Body2Fit is Bodygram’s flagship B2B(2C) application, taking user-body data, via text fields and photo capture, to produce a 3D avatar closely resembling their own body shape.

Our various business partners in fashion and retail trust our application to provide their customers with accurate fitting information. Naturally each business we work with has their own needs, and requires both unique visual and functional configurations.

Within the product team, the key problems we are trying to solve are:

  • Reducing user churn rates (roughly 10% churn for each screen)

  • Fewer variations, which are separately maintained, whilst still supporting configurations

  • Modern, themeable interface and features that encourages new business

Rethinking the body measurement experience to increase customer confidence

Our current product rewards the user with insights at the very end of the flow. In each case, a customer would need to select their flow, and enter personal details with little idea of what to expect in return.

I started from scratch with the above problems in mind: to reduce drop-off, simplify decision-making. By presenting an average sized model and fitting details, the very first page shows what they can expect, with intuitive sizing controls to adjust for their own body shape. Results can be further refined and improved upon.

More than a redesign, this version is a complete rewrite to turn a functional tool into a scalable, client-ready platform.

My Role

As the only designer within the company, I am responsible for various areas of design, and key decision making.

I frequently utilise the experience and product knowledge of my co-workers, coupled with partner feedback and detailed analytics from their various implementations, in order to confidently direct the user flow and interface.

Some of my contributions include:

  • Designed an interactive body morphing experience using
    skeuomorphic inputs and real-time feedback to increase engagement

  • Optimising the user journey to significantly reduce number of screens from start > finish

  • Building a themeable component system in Figma

  • Working directly with engineers, and iterating as required

  • Balanced stakeholder expectations while preserving UX quality

The starting flow - see body-size in real time, and get your fitting immediately!

Signals of Success

Though it's still early, we’ve already seen:

✅ Start > Results flow condensed from 4+ pages to first page
✅ Lower bounce from clearer inputs and fewer steps (est 27% reduction)
✅ Improved client feedback during demos and onboarding
✅ Modularity across all current Bodygram features, with options to extend

With this new approach, Body2Fit no longer feels like five products duct-taped together - it’s one cohesive system with a solid foundation.

Key Design Decisions

Interactive Avatar Sliders

Instead of typing weight or measurements, users now manipulate a dynamic body avatar using sliders for height and weight—lowering friction and increasing engagement.

Replacing input fields (left) with sliders and a real-time body (right) has proven to be much more intuitive. Users are exited to see their avatar change in real time.

Systems Thinking

Most features in this latest version are designed from a small set of reusable elements:

  • Shared tokens and elements throughout

  • Predictable type hierarchy

  • Sensible defaults and clear states

This ensured new features could be added without fragmenting the experience.

Brand Customisation for Our Partners

We introduced per-client theming support including:

  • Custom logo support

  • Primary and accent colours

  • General token overwrites (spacing, border radius, typography)

This allows clients in the fashion space to seamlessly embed Body2Fit within their own ecosystem, reinforcing brand consistency while using our core product.

Each brand can easily customise the interface to reflect their own visual identity.

Mobile Enhancements

On mobile, we support additional features, including:

  • Use of on-device camera allows additional full-body scan flow

  • Gyroscope interaction provides real-time feedback for photo angle

  • Optimised layout for one-thumb use

Overcoming Challenges

Various stakeholders meant design work had to prove value early and often. Business priorities can change at a moments notice. I focused on:

  • Presenting UX proposals in terms of business benefits eg.

    • Solving the key problems as defined

    • Reducing development and maintenance from engineers

  • Offering “design guardrails” rather than rigid rules, with everything open to discussion

  • Creating localisation within Figma to support Japanese and US prospects

Reflection

This project helps Bodygram realise Body2Fit as a flexible, client-ready platform. I’m proud of:

  • Creating a design system that can grow with the product

  • Introducing white-label theming to unlock B2B value

  • Replacing flows which required elaborate instructions with a user-friendly, visually engaging experience

Systems thinking and knowing our market will allow us to take a largely service based approach, and refine it as a product.

Visit Bodygram