Developing a Design System for Scalable UI
As VIAVI transitioned its current CMS to Drupal 9, it became increasingly important to define design consistency across all aspects of VIAVI’s global marketing products. As the only product designer on the team, I recognized the need for a cohesive design system and took the initiative to work with the engineering and creative teams to build it out. Built in InDesign, the new design system will establish a unified working process and consistent visual aesthetic for their cross-functional teams and for the product itself. This not only helps to improve the user experience but also saves time and resources by streamlining future web design and development.
My Role
I led the creation of this scalable design system, working closely with engineering and product teams to ensure consistency across the platform. I facilitated alignment across teams and iterated based on implementation needs.
Insights
Early audits revealed significant inconsistencies across VIAVI’s UI. I conducted a full inventory of existing patterns and spoke with developers and designers to understand pain points. Their feedback highlighted the need for a unified system to streamline collaboration and reduce design debt.
Design Process
I began by defining VIAVI’s design foundations, typography, color, spacing, and grid, while ensuring accessibility and scalability. I collaborated with engineers to build responsive, reusable components in Adobe XD and provided them with development-ready code. Documentation was created in tandem to guide usage and adoption. Throughout the process, I ran feedback sessions with designers and developers to refine components and ensure the system met both teams’ needs.
Outcome
The new design system reduced development time, improved UI consistency, and created shared language between teams. It supported multiple products and allowed designers to work faster with less duplication. I also built documentation in Figma and SharePoint to onboard new contributors efficiently.
Deliverables
As the lead UX/UI designer, I was able to complete my design objectives 30% faster with the new design system which resulted in fewer changes to main components, which increased consistency.
Our front-end developers reported a 40% increase in their work speed when implementing designs thanks to the clear guidelines provided by the new design system, which eliminated the need for manual decision-making regarding design implementations.