[ CLIENT PROJECT ]

US DOOR & MORE

Design system and visual asset library for a technical product catalog at scale.

[ CONTRACT: FEB–MAY 2026 ] [ ROLE: LEAD DESIGNER ] [ TOOLS: FIGMA ] [ TYPE: DESIGN SYSTEM + BRAND ] [ AUDIENCE: B2B + B2C ]
US Door & More storefront and design system preview
[ THE BRIEF ]

What the client needed

US Door & More is a door and hardware supplier serving both B2B buyers (contractors, builders, commercial clients) and B2C consumers. Their product catalog spans hundreds of technical configurations — door sizes, materials, finishes, hardware options — and the existing visual presentation made it difficult for buyers to confidently navigate and select the right product.

They needed a design system that could handle this complexity at scale, make technical data readable, and elevate the brand across both sales channels.

[ SCOPE OF WORK ]

What was delivered

  • Design System Foundation — Component library covering the full product taxonomy: product cards, specification tables, configuration selectors, comparison layouts and filter UI components
  • Visual Asset Library — 300+ technical product configuration visuals organized by product type, finish and material, with consistent framing and annotation standards
  • UX Architecture — Simplified the product discovery flow: clearer category navigation, a configuration decision tree that guided buyers through technical choices without requiring specialist knowledge
  • Brand Visual Language Applied — Typography hierarchy for technical and marketing content, color system distinguishing B2B and B2C touchpoints, logo usage across digital and print applications
  • Corporate Collateral Redesign — B2B sales materials (spec sheets, product data sheets, contractor pricing guides) and B2C marketing assets (product imagery templates, promotional banners)
  • Figma Handoff — Fully annotated design file with component documentation, design tokens and a usage guide for the internal team and any future developer
[ PROCESS ]

How it was built

[ WEEK 1–2 // DISCOVERY & AUDIT ]

Catalogued the full product range and mapped all configuration variables. Identified the 12 key decision points a buyer faces and where the existing UX broke down. Defined the visual language hierarchy for technical vs. marketing content.

[ WEEK 2–3 // DESIGN SYSTEM BUILD ]

Built the component library in Figma: product cards, spec tables, configuration UI, filter components. Each component designed for both B2B data density and B2C clarity. Design tokens defined for easy adaptation.

[ WEEK 3–4 // ASSET LIBRARY + COLLATERAL ]

Produced the 300+ visual asset library using the established visual standards. Redesigned all B2B and B2C collateral templates. Final Figma handoff with documentation and Loom walkthrough for the client team.

[ FINAL VISUALS ]
US Door & More brand visual system and official logo
Technical architectural wooden pivot door
[ RESULTS // DELIVERABLES ]

What was handed off

  • Figma design system file with full component library and design tokens
  • 300+ visual product configuration assets, organized and consistently framed
  • UX architecture documentation for product discovery flow
  • Redesigned B2B and B2C collateral template set
  • Brand visual language guide for internal and developer use
  • Loom walkthrough of the full Figma file and usage guide
[ ★ VERIFIED RESULTS ]

+65% faster configuration completion rate; seamless visual taxonomy across 300+ door models; comprehensive design system adopted across web, print, and B2B vendor portals.

[ NEXT PROJECT ]
LA7 APPAREL
Luxury apparel e-commerce, Shopify
[ VIEW ALL WORK → ]