From wireframe to production: our product design process

A lot of design processes optimize for a beautiful Figma file that then hits engineering reality and quietly falls apart: states nobody designed, edge cases nobody considered, interactions that don't translate to a real component library. We run a process built around one constraint: every screen has to survive contact with an engineer before it's considered done.

Stage one: low-fidelity, high-coverage

We wireframe every state of a flow before we style any of them: empty state, loading state, error state, populated state, and the state after a destructive action. Most design debt we inherit from other teams comes from beautiful happy-path screens with no plan for what happens when the API is slow or the list is empty.

• Every screen gets its empty, loading, and error states wireframed alongside the happy path
• Flows are mapped end to end before any individual screen gets detail, so we catch missing steps early
• Wireframes get reviewed with engineering before moving to high fidelity, not after

Stage two: design in the actual component library

High-fidelity design happens using the real design system components, not a fresh set of shapes that happen to look similar. If a design calls for a button variant that doesn't exist, that's a decision made explicitly (add the variant, or use an existing one) rather than something an engineer discovers three days into a build.

Stage three: annotate for reality, not for a portfolio

Handoff files get annotated with the information an engineer actually needs: what happens on this input's validation failure, what the API response shape implies for this list's pagination, what the loading skeleton looks like for this specific card. Not every screen needs paragraphs of annotation, but every non-obvious interaction does.

• Interaction states (hover, focus, active, disabled) specified for every interactive element
• Responsive behavior called out explicitly at the breakpoints that matter for this specific screen
• Copy finalized before handoff: placeholder text in a handoff file is a guaranteed follow-up question

Stage four: sit in on the build

The design process doesn't end at handoff. We review the first implemented pass against the design before it ships, catching the inevitable small drifts, a spacing value that got approximated, a state that got missed, while they're a five-minute fix instead of a post-launch bug report.

“A design file that hasn't been built yet isn't a design. It's a hypothesis.”

How we brief every design engagement