← Back to projectsCreated the Devo design system from the ground up, radically enhancing consistency, scalability, and the overall speed of design and development.
UX/UI ArchitectureFigmaDocumentationStorybook
My Role
I led the creation of the design system, collaborating closely with frontend developers and my design team colleagues to ensure a cohesive and efficient design language across the platform.The Problem
Before the design system existed, the product ecosystem faced major inconsistencies — not only visual, but also in how users interacted with the platform. The same actions could be performed in multiple ways, using different components depending on where the user was in the product.
Meanwhile, developers were building their own components and layouts for every new feature or enhancement, which significantly increased both development time and maintenance costs.
To make things even more complex, the Professional Services team was continuously creating new, tailor-made vertical applications for specific clients.
As a result, maintaining visual consistency, accessibility standards, and scalability across products had become almost impossible.
That’s when we decided to create a unified design system — not just as a visual framework, but as a strategic foundation to transform how Devo designed and built its products.
BEFORE: this is the Alert Creation page before the design system.
AFTER: and this is the same section after the design system.
Goals & Success Metrics
- Radically improve consistency: Establish a unified visual and interaction language to ensure coherence across all Devo products and touchpoints.
- Accelerate design and development workflows : Reduce repetitive work by providing reusable, ready-to-implement components and design tokens.
Research & Audit
Show your analytical process before building. UI audit: review of all existing components and styles. Designer and developer interviews to understand pain points. Benchmarking against other systems (Material, Polaris, Carbon). Identify core inconsistencies or inefficiencies. 📸 Tip: Use screenshots or visual comparisons to show “before” states.Foundations
Lay the groundwork of your system. Design tokens: color, typography, spacing, grid, shadows, borders. Principles: accessibility, scalability, visual identity. Naming conventions and variant structures. Documentation: Figma styles, usage guidelines, component anatomy. Include visual examples — e.g., your color palette, typography scale, or spacing system.Components
Describe how you designed and standardized the key components. How you identified reusable patterns. Design iterations and feedback cycles. Handling states, variants, and responsive behavior. Ensuring alignment between Figma and code. 📸 Add visuals of components (buttons, inputs, modals) with annotations.Implementation & Collaboration
Highlight how design and code came together. Stack: React + TypeScript + Storybook. Design–dev sync process: tokens, naming, pull requests, review workflow. Version control, npm publishing, or CI/CD setup. Example: components/ ├─ Button/ ├─ Input/ ├─ Modal/ └─ Theme/ Show a Storybook screenshot or documentation snippet — recruiters love this. Adoption & Rollout
Explain how the system was introduced across teams. Internal communication and demos. Migration of existing products. Training sessions or documentation updates. Feedback loops and improvement cycles. “We onboarded 4 teams in the first quarter, with continuous feedback from designers and engineers.”Impact
Demonstrate real value and outcomes. Time saved in design/dev handoffs. Reduction in inconsistencies or visual bugs. Increased team satisfaction or adoption metrics. Business impact if measurable. 📈 Example: “Implementation time per component decreased by 40%. Over 120 screens unified under a single design language.” Learnings and Next Steps
Demonstrate real value and outcomes. Time saved in design/dev handoffs. Reduction in inconsistencies or visual bugs. Increased team satisfaction or adoption metrics. Business impact if measurable. 📈 Example: “Implementation time per component decreased by 40%. Over 120 screens unified under a single design language.”Presentation tips
Use large visuals and minimal text. Include before/after comparisons. Show process + outcome, not just final screens. Clarify your specific contribution if it was a team effort. End with a clean “Impact” summary — recruiters love measurable results.