Design Systems Engineering

Designing experiences that scale

I approach design systems not just as a collection of visual components, but as a scalable product and a shared language between design and technology. Combining an engineering foundation with advanced UX frameworks, I specialize in architecting, scaling, and maintaining multi-platform design tokens and flexible component libraries. My goal is to reduce design debt, eliminate engineering silos, and streamline enterprise software utilization to drive measurable operational efficiency.

Case Study: Multi-Platform System — Point of Sale

Done in collaboration with Jason Chang, Emery Grearson, James Cradit & Teja Telikicherla.

The Challenge

Managing fragmented interfaces across entirely different user bases—internal corporate colleagues versus everyday consumers—leading to visual inconsistencies and redundant engineering work.

The Strategy

Co-architected and maintained a comprehensive design system and component library for Point of Sale (POS) infrastructure spanning two distinct platforms:

• Colleague-Facing System
• Customer-Facing System

The Impact

Created a unified foundational language that supported both platforms while allowing for unique, user-specific interaction patterns.

Case Study: Flexible & Optimized Enterprise Components

The Challenge

Enterprise software often suffers from performance lag or rigid UI layouts because components are hardcoded for specific use cases rather than built for modularity. The existing CVS design system was outdated and was architected for rigidity.

The Strategy

Designed and engineered highly flexible, customizable, and atomic UI components. By leveraging Figma's advanced features like variables, modes and slot components, I was able to optimize the number of components, while maintaining large levels of flexibility.

The Impact

Drastically accelerated time-to-market for new feature rollouts. Designers could seamlessly customize layouts within bounds, and developers could implement them using pre-approved, production-ready code blocks.

By leveraging variables, modes and a new atomic model for tokenizing values, I led the charge to make our design system responsive and facilitate web development.

Collaborating with engineers, I was able to establish the appropriate breakpoints, understand their restrictions and their needs. This helped bridge the gap between a responsive Figma design, and a ready to implement piece of code.

Through trial and error, I was able to architect a system that allowed designers enough flexibility to be creative, without straying away from a system or creating development issues.

By making use of Slots, I was able to create a component that was flexible and customizable, while still within the tokenized system.

By leveraging variables and modes, I created a single component that designers could transform with a single click into all 3 breakpoints. This cut our "development support" design time in half, allowing designers to focus on improving experiences and brainstorming, and not pushing pixels to 3 breakpoints.

Similarly, the app components suffered from outdated architecture that were not being maintained and were optimized for past versions of the app. This led to each product team implementing ad-hoc components that looked and felt different. As part of the larger FS team, I helped standardize the visual style and simplify the "base templates" for the home and child pages, creating blank slates that could be further customized to support a vast array of use cases.

Documentation and Collaboration at the Heart of Design Systems

The Challenge

The classic friction point where flexible and intentional design fails to translate into "feasible code," causing project delays and layout breaks.

The Strategy

Acted as the technical bridge and "central node" between design and development squads. I established rigorous hand-off documentation, ran weekly cross-functional system reviews, and paired directly with front-end engineers to audit code feasibility, test responsiveness, and ensure proper token implementation.

The Impact

Eliminated guesswork at the engineering hand-off phase. Built a team-first culture where developers were active participants in the design system lifecycle, ensuring 100% design fidelity upon product shipment.

By making use of Figma's native features, such as annotations and dev mode, as well as leveraging a close relationship with engineers, I was able to ensure the elements in the system were built with the flexibility required to:

• Scale a new program to new categories and markets
• Personalize the content as directed by the growth strategy
• Facilitate ease of development in future releases
• Reduce development effort by having a single "main" reusable component
• Standardize views in our app and .com experiences.

Standardization & Growth: A Loyalty Design System

The Challenge

As the Loyalty and Consumer Growth workstream lead, I inherited a fragmented digital ecosystem where legacy loyalty features were built on ad-hoc, rigid components that restricted rapid testing and optimization.

The Strategy

Directed the standardization of the enterprise Loyalty Design System. I audited, refactored, and unified atomic components across the entire loyalty enrollment and utilization experience.

The Impact

Empowered cross-functional teams to rapidly deploy A/B tests and scale growth features instantly, ensuring that every touchpoint remained visually cohesive and aligned with core brand guidelines.