Design | Research | UXUAT | Dev Alignment
Figma | Sketch | Adobe XD | Invision | FigJam | Abstract
B2B | E-Commerce | B2C
Fashion | Retail | Financial | Travel | Insurance
A design system is more than a collection of components—it’s a shared language and source of truth that aligns design and development teams. I specialize in creating scalable, accessible systems that simplify workflows and enhance consistency across digital products. As Nielsen Norman Group highlights:
“A well-implemented design system improves efficiency by reducing duplicate work and minimizing design inconsistencies.”
As a UX designer, I aim to bridge the gap between design and development by crafting systems that are user-focused, developer-friendly, and optimized for collaboration. From concept to implementation, I ensure every element is functional, flexible, and aligned with business goals. While experienced with most design softwares I have a strong preference for Figma – though Sketch is a close second. Below are some examples of my work.
While building a custom icon library, I mastered the balance between optical and mathematical alignment. Mathematical alignment ensures precision and consistency across a grid, but optical alignment compensates for how we perceive shapes and weights, ensuring icons and typefaces look harmonious to the eye. This balance was critical in creating scalable, cohesive design systems, like PwC’s audit assessment tool, where attention to these details elevated the final product’s usability and aesthetic clarity.
1. Sketch to Figma MigrationGoal: Simplifying Collaboration between NORA & EMEA UI/UX teams.
With regional UX teams using tools like Sketch and Figma and maintaining separate component libraries, collaboration became a major bottleneck. Teams often duplicated efforts, which led to inconsistencies in design and inefficiencies in workflows. Migrating to Figma was not just a tool switch—it was an opportunity to unify the design process by creating a centralized design library and adopting scalable design tokens. This migration aimed to align teams, improve collaboration, and ensure consistency across digital products.
“Centralized design libraries eliminate 30–50% of repetitive design tasks, allowing designers to focus on solving unique problems.”
-Baymard Institute
2. From Scratch to Scalable: The Vans Design SystemGoal: Accessibility Meets Efficiency
Multiple regions lacked a unified email design framework, leading to inefficiency and accessibility gaps.
Creating emails for global markets came with significant challenges. Each regional team was building emails from scratch, resulting in inefficiencies, design inconsistencies, and accessibility gaps that were costly to resolve. By developing a modular email design system, I provided teams with flexible, accessible templates that could be easily customized for local needs while maintaining global brand standards. This system streamlined workflows, reduced errors, and ensured that every email met high accessibility standards.
“Accessible design improves usability for all users, not just those with disabilities, leading to a broader reach and higher engagement rates.”
-Nielsen Norman Group
3. Maintenance and Updates: Enterprise PlatformGoal: Bridging Design and Development
Developers and designers operated in silos, often leading to delays and inconsistencies during product launches. Designers relied on static assets, while developers struggled to translate them accurately into code. To solve this, we created a token-based system that standardized design values such as colors, typography, and spacing. By embedding these tokens directly into the codebase, I created a seamless connection between design and development, enabling faster iterations and reducing the margin for error.
“Systems that integrate design and development tokens reduce iteration cycles by up to 25%, improving product delivery timelines.”
-Baymard Institute
Beyond creating detailed visualizations of brand assets to align teams and provide stakeholders with a unified reference point, I’ve learned that balancing optical and mathematical alignment is crucial in design systems. While mathematical alignment ensures grid consistency, optical alignment accounts for human visual perception. Mastering this balance has been essential in projects like icon libraries and typeface designs, where subtle adjustments significantly impact usability and scalability.
For instance, in the following example:
While building an icon library for a retail brand’s design system (on Figma), I was designing a play button—a triangle within a circle—and I encountered a common issue: such icons require optical rather than mathematical alignment due to the varying weight distributions of shapes.
Human Perception: Though I used a key line grid to achieve mathematical alignment, it appears left-leaning due to the triangle’s pointed top and heavy base. Giggidy.
Optical Fix: To counterbalance this, I shifted the triangle slightly right and reduced the size to fit its points within the grid, though no longer aligned with the center unit cell.
This subtle adjustment ensures the play button feels centered and balanced instead of looking off-kilter.
Building design systems is as much about people as it is about components. Establishing shared goals, fostering collaboration, and adapting to feedback are key to success. Nielsen Norman Group emphasizes that “Cross-team collaboration is essential for the adoption of design systems, ensuring long-term scalability and usability.
Consistency, scalability, and accessibility are at the core of every system I create. My goal is to build tools that empower teams and delight users, all while maintaining a strong brand identity.
Looking to create or refine your design system? I’d love to bring my expertise to your team. Reach out to discuss how we can work together.
