The engagement
SafeSize uses 3D foot scanning to tell you exactly which shoe fits — the diagnostic layer worked. What didn't exist was a way to act on it. No cart, no checkout, no path from recommendation to purchase. The product had a senior in-house designer; I was brought in via Code.Hub for three months as an external consultant to design the missing e-commerce layer.
This is a different mode from founding-designer work. The brief here wasn't "build the product" — it was "extend the existing design system to ship a new flow without fragmenting what's already there." Different skill. Different posture. Equally important.
The Card Problem
The product card was the hardest surface in the project. It was already carrying 3D scan results, fit confidence scores, and size callouts. The ask: add Add to Cart, size selection, and purchase intent actions to the same compact container — without making the scan data, which was SafeSize's core value, feel like a footnote.
I started with a UX audit of the existing recommendation engine: what did scan results actually show the user, what information was needed at the purchase decision point, and what could be deprioritized or collapsed. The pattern that emerged: fit data should lead the hierarchy, commerce actions should follow immediately — always visible, never competing. Space efficiency and information hierarchy had to solve the same problem simultaneously.
The Constraints
The card needed to work across three deployment contexts: the retailer's in-store kiosk interface, the embedded e-commerce widget, and the brand's own product pages. Same component, three different container widths and color contexts. This ruled out fixed-dimension design — everything had to be built with fluid proportions and context-agnostic tokens.
How I Worked Alongside the Team
SafeSize had an existing engineering team and a retail integration architecture I needed to understand before designing anything. Week one was audit and alignment: I reviewed the recommendation engine's output format, mapped the data fields available at render time, and aligned with the frontend developer on what was technically feasible within the checkout integration they were building in parallel.
I didn't design in isolation. Each card iteration was reviewed with the engineering lead for feasibility before it moved to documentation. This saved two or three rounds of scope revision and kept the handoff clean.
Component Library & Handoff
The deliverable beyond the card design was a component library for fit-diagnostic data visualization: scan result states (perfect fit, close fit, not recommended), confidence level indicators, size callout treatments, and the checkout entry states. Everything documented for engineering handoff with variant logic annotated directly in Figma.
The system was structured so SafeSize could add new shoe categories — trail running, children's footwear, orthopaedic — without requiring a design engagement for each. One component model, extended via configuration.
What this engagement was about
Consultant work in someone else's house is the test of whether a designer has ego or judgment. The temptation is always to put your fingerprints on every screen. The discipline is to leave fingerprints only where they're needed, and to make the rest invisible enough that the in-house team can keep building without your maintenance.
SafeSize shipped a complete commerce experience three months after I joined. The component library extended the existing system. The senior designer kept ownership of the broader product. That's the engagement working as designed.