Good design isn’t just about how it looks—it’s about how it works. Here’s my take on both.  

Design System Component Synchronization

Led a cross-platform design system synchronization initiative using the Phoenix Framework to improve scalability, visual consistency, and handoff clarity across design and development teams.

  • Project Type Design System Audit & Scaling, UX Governance, Cross-Platform Consistency, Enterprise UX, Component Rationalization
  • My Role UX Lead (Research, Component Auditing, Collaboration)
  • Tools Used Figma, InVision, Sketch, Phoenix Design System
  • Duration 3 Months
  • Company Bank of America
VIEW PROJECT

Confidentiality Note:

This project is confidential. Visuals and internal data cannot be publicly shared. Please contact me for more information.

This project focused on auditing and synchronizing core design components across different tools (Sketch, InVision, Figma) and environments to improve consistency, scalability, and design-to-dev collaboration. As UX Lead, I spearheaded a comprehensive system-level alignment initiative to future-proof the Phoenix Design System across teams and platforms.

The Challenge

✘ Design inconsistencies were emerging across platforms and environments due to fragmented tooling and undocumented changes.
✘ Component variants were duplicative, outdated, or out of sync, impacting efficiency and developer handoffs.
✘ The Phoenix Design System lacked governance processes for scale and cross-functional ownership.

The Goal

✔ Audit and synchronize components across platforms (Figma, InVision, Sketch, and live environments).
✔ Ensure system-wide alignment with business and engineering goals.
✔ Establish scalable, documented components that support rapid design and development workflows.

My UX Process & Approach

Research & Component Auditing
  • Conducted a full audit of design components across design libraries, live code, and internal tools.
  • Mapped inconsistencies in naming, spacing, color usage, and interactions.
  • Documented system gaps and areas of overlap to inform consolidation strategy.
Cross-Functional Collaboration
  • Facilitated workshops with developers, PMs, and designers to identify friction points and sync component usage.
  • Created a shared alignment map of component states, variants, and intended use cases.
  • Worked with QA to map visual differences between code and design artifacts.
System Integration & Governance
  • Updated and streamlined Phoenix Design System components in Figma, ensuring 1:1 parity with codebase versions.
  • Created documentation templates and usage guidelines to reduce future divergence.
  • Established governance rituals (reviews, audits, documentation standards) to maintain quality and consistency.

Final Outcome & Impact

✔ Reduced redundant components by 35%, improving design efficiency and library usability.
✔ Improved design-to-development parity, reducing UI implementation errors across teams.
✔ Enhanced cross-team collaboration by aligning vocabulary, expectations, and documentation.
✔ Established a scalable, maintainable design system that’s ready for future product expansion.

Key Takeaways & Learnings

✔ Even the best design systems degrade without governance and active collaboration.
✔ System-level thinking requires empathy for both designers and developers.
✔ Consistency isn’t just visual—it’s about creating trust and speed across teams.