Design Systems with a Twist
COMPANY
-
SERVICES
Product design, Design system
Overview
My role: Lead Product Designer
Scope: Audited established design systems (including Shopify’s and major store themes) to define a tailored approach to spacing, color, and typography; built Figma components and tokens; documented naming conventions; partnered with engineers for implementation
Result: System adopted by both development teams; improved consistency, accessibility, and design–dev handoff; reduced design debt by centralizing and updating core components (buttons, variant/quantity selectors) across 40+ apps
Timeframe: 2 years (ongoing work alongside product and marketing initiatives)
Problem
- The team was moving fast but lacked structure.
- Components were duplicated,
- UI patterns were inconsistent, and developers were building everything from scratch.
- Developers needed a shared language and designers needed guardrails.
I audited the existing product and worked to identify overlaps, inconsistencies, and gaps. I also worked closely with developers to understand real needs and blockers in their workflows.
System Foundations
- We followed WCAG 2.1 AA standards for contrast ratios to ensure readability of all text, especially for interactive elements like buttons, links, variant and quantity selectors.
- Created reusable Figma components based on real use cases
- Built visual consistency across multiple surfaces (product, landing pages, and marketing materials)
- Integrated naming conventions that matched front-end code
- Designed with flexibility in mind for experiments and rapid iteration
Outcome
- System adopted across 40+ apps by both development teams, improving consistency and reducing maintenance overhead
- Centralized key component selectors - making accessibility updates scalable across the platforme and encouraged usage from non-designers and engineers: system continues to evolve as the team scales.
- Improved engineering velocity: reduced design-to-dev clarification and rework by documenting components and tokens
- Reduced design debt: eliminated inconsistent spacing, typography, and color patterns inherited from legacy themes and early-stage chaos
- Boosted internal engagement: naming conventions made the system approachable and encouraged usage from non-designers and engineers
- Still in progress: system continues to evolve as the team scales.