Design Systems

Design Leader / UX / UI Design

I've completed 3 different design systems and the problems remain consistent across all three. As the ecosystem grew, inconsistencies in UI components, behaviors, and accessibility patterns began to create friction across teams. Designers and engineers were duplicating efforts, inconsistencies in spacing and typography emerged, and scaling across platforms became increasingly time-consuming. Without a shared source of truth, design debt and visual fragmentation threatened product quality and velocity.

Goal

Create a centralized, cross-platform design system to:
• Align designers and developers on a shared visual and interaction language
• Reduce redundant work across product teams
• Improve consistency and usability across all touchpoints
• Support accessibility, responsiveness, and component reuse

Mapping out every workflow and feature a user can accomplish in Securemail.

Creating a new visual langauge and design system for the entire mobile suite.

My Role

I defined the visual language and core design principles in close collaboration with brand and design leadership, ensuring a cohesive foundation across the product. I designed and prototyped the system in Figma, creating detailed handoff files linked to living documentation. Working alongside frontend engineers, I helped translate design tokens and component logic into production-ready code using React and Storybook. To drive adoption, I facilitated internal workshops, onboarded teams, and conducted usage audits. I also maintained the system through weekly triage sessions and quarterly reviews to ensure it remained scalable, relevant, and high quality.

Outcome

• 40–60% faster design-to-dev handoff (measured by sprint planning + QA logs)
• 25% reduction in front-end bugs related to UI inconsistencies
• 80%+ component reuse rate across teams within 6 months of rollout
• Improved accessibility coverage to 95%+ WCAG AA compliance
• Design system adopted by 5+ product squads, with 100% of designers actively using the library in Figma