Design System

Challenge

• Hard to find – 1000’s of design assets with no systematic structure or naming conventions.
• Hard to start – little documentation. What button style should I use? What font size choices do I have?
• Hard to use – confusion over the latest and greatest version.
• Hard to reuse – a non-modular approach. Components baked into projects, rather than extracted.
• Hard to reference – no shareable URL.
• Lack of focus on a responsive or accessibile approach.

Objective

• Reduce bloat and code debt.
• Increase consistency, quality and velocity.
• Create a toolkit of UI components and templates for designers.
• Create a shareable source of truth and reference for our product design language.
• Document how to use for designers, engineers and cross-functional teams.
• Create a harmonious family of products regardless of platform, tech stack, viewport size or device.

Process

• Create an in browser proof of concept.
• Agree components, patterns, and conventions as a team.
• Sunset Abstract and Sketch, transition to Figma and Code.
• Lunch & Learn.
• Cross-functional teams presentations, collaboration, and adoption.

Solution

• SprayShop v1.
• Hired our first Design Engineer.
• SprayShop v2 Coming soon.
• Documentation and organization; easy to use and reference. A happy and proud team.
• Rapid onboarding for new team members, allowing the team to scale.