Case Study:
Optimization for High-Fidelity Prototyping & Complex User Journeys

Led the architectural refactoring of an enterprise design system in Figma to overcome performance bottlenecks and unlock advanced interactive capabilities. By streamlining component structures and leveraging variables, I enabled design teams to model end-to-end user journeys and stateful edge cases within a single file.

By eliminating browser memory locks and aligning component logic directly with engineering standards, this optimization accelerated stakeholder alignment, enhanced usability testing accuracy, and significantly reduced design debt across cross-functional product teams.

Client and Location
Healthcare Platform Internal Project
Tempe, Arizona
October 2024 to July 2026

View Demo

Understanding the Problem

As product complexity scaled across our digital ecosystem, our Figma design systems encountered severe performance constraints. Figma operates within a strict 2GB browser WebAssembly memory limit per tab, where bloated component sets cause canvas lag, file crashes, and slow prototype rendering—impeding our ability to test complex user journeys.

01.

Technical Bottlenecks & Canvas Instability

Legacy component libraries relied on massive, redundant variant matrices. This approach consumed excessive memory, resulting in frequent tab crashes, slow publish times, and restricted prototyping capability. Designing edge-case scenarios required creating dozens of static, disconnected frames, slowing down reviews and confusing stakeholders.

02.

Mapping System Architecture

To eliminate canvas bloat without losing functionality, we audited the system architecture and component dependency graphs. We mapped legacy variants against front-end code bases to identify opportunities for consolidation, establishing a lean component framework that mirrored web and mobile development logic.

03.

Designing for Scalability & Alignment

Our objective was to build an enterprise-ready UI kit capable of supporting rapid, high-fidelity interaction design. By enabling dynamic, state-driven components, we empowered designers to model complete product journeys with minimal memory overhead, ensuring seamless handoffs and realistic stakeholder previews.

Optimize, simplify, and scale

"Refactoring the component architecture early created a resilient, high-performing foundation. By shifting from static frame multiplication to dynamic component logic, we reduced canvas memory usage while giving stakeholders an interactive, true-to-life preview of our proposed solutions."

The Solution

An optimized component engine built for enterprise scale

01.

Dynamic Component Consolidation

Instead of maintaining dozens of separate variant files, we unified legacy component sets into single, multi-functional master assets. For example, a single, dynamic input component was refactored using component properties and Figma variables to output all possible input states and validation types, drastically reducing file overhead.

02.

Memory Optimization & Performance

By streamlining variant trees, canvas memory consumption dropped by 60% to 80%. This optimization eliminated browser tab threshold lockups, drastically accelerated library publish/sync times across distributed teams, and ensured fluid canvas navigation regardless of file size.

03.

High-Fidelity Prototyping & Documentation

The updated architecture enabled logic-driven, stateful prototypes within single screen frames. These interactive models functioned as both living design documentation for engineering and realistic environments for usability testing, reducing design handoff friction and eliminating ambiguity around edge cases.

Outcomes & Impact

Elevating Team Velocity & Stakeholder Alignment

The upgraded design system transformed how cross-functional teams validate and execute product features. By enabling smooth, stateful prototypes without performance lag, research teams gathered richer behavioral insights during usability testing. Furthermore, aligning component properties with front-end code (e.g., React and SwiftUI props) narrowed the gap between design and development, resulting in faster production cycles and lower design debt.

Project Disclaimer

The screens used on this Case Study are variants not used on the actual prototype due to NDA agreements and Copyright, the Design System Library and the Screens are based on a generic Bootstrap Library that mirror some of the functionalities of the actual delivered prototype but not all of them, and most features are obscured and modified on purpose to reflect features used on the Case Study.

Case Study: Optimization for High-Fidelity Prototyping & Complex User Journeys