How I Framed It

I split the work into two parallel tracks that shared one design language.

Track 1 — The marketing site. The goal wasn't to describe features. It was to demonstrate the sizing logic visually — show visitors the journey from body scan to recommendation in a way that felt inevitable, not magical. Every section of the site maps to a step in the product's decision loop: data in, algorithm, confidence score, recommendation out. The structure of the page is the product explanation.

Track 2 — The product UI. The Size Advisor widget needed to feel native to any brand's product page while maintaining Measmerize's identity. That's a tension: too branded and it clashes with the host store; too neutral and it loses trust. I designed a system of subtle visual cues — typographic hierarchy, micro-interactions, and a restrained colour palette — that signals competence without competing with the brand it's embedded in.

Protopie prototypes bridged the two tracks. The marketing site prototypes demonstrated the sizing flow interactively for sales demos. The product UI prototypes tested the widget in context, embedded in mock product pages from actual client stores, so the team could evaluate fit before shipping.

Key Decisions

Show the algorithm, don't describe it

Context: The previous site listed features — “AI-powered,” “accurate from day one,” “customizable.” Accurate, but undifferentiated. Every sizing competitor says the same things.

Choice: I structured the homepage around the recommendation pipeline itself. Each scroll section corresponds to a stage: input capture, body model, garment data mapping, confidence scoring, recommendation. The visitor follows the logic instead of reading about it.

Trade-off: This requires more design and content work than a feature grid. It also means the page is longer. But for a product that sells on trust in its intelligence, showing the thinking is worth the scroll.

Design the widget as a guest, not a host

Context: The Size Advisor lives on someone else's product page. It needs to be visible enough to use but quiet enough not to disrupt the shopping experience.

Choice: A typographically-led UI with a near-white palette, no heavy borders, and interaction patterns borrowed from native e-commerce elements (drawers, inline expansions) rather than pop-ups or modals. The widget adapts its density based on the host page's context.

Trade-off: Less visual distinctiveness for Measmerize's brand inside the widget. But the product's job is to help the shopper buy confidently — not to advertise itself.

Protopie over static handoff for the sales demo

Context: The sales team was demoing the product with slides and a staging environment. Slides can't show interaction quality; staging environments break at the worst moment.

Choice: High-fidelity Protopie prototypes that simulate the full sizing flow — body input, processing animation, recommendation with confidence indicator. These run on any device, offline, and feel like the real product without depending on a live backend.

Trade-off: Protopie has a learning curve for the team maintaining the prototypes after handoff. I documented the interaction logic to reduce that friction.

One design language across marketing and product

Context: Marketing sites and product UIs often diverge visually because different people own them. Over time, that gap becomes a credibility problem — the website promises one experience, the product delivers another.

Choice: A shared type scale, colour system, and illustration style that carries from the homepage into the widget. The marketing site is more expressive; the widget is more restrained. But they're unmistakably the same family.

Trade-off: Constrains the marketing team's creative freedom slightly. Worth it for the coherence.