Crafting Consistency
The Transformation of the U.S. Asylum and Refugee Office’s Design System
When it comes to legacy design systems, turning complexity into cohesion is no small feat. During my time at USCIS, I had the chance to lead an exciting adventure – spearheading the redesign of their design system. Let's dive into the story!
Unraveling a Legacy System
My journey started with a design system that was a patchwork of U.S. Digital Services guidelines and personal designer choices. Imagine about 20 different grays across projects, a wide variety of padding, spacing, and radii, and inconsistent use of primary vs secondary UI elements. It was a bit of a wild ride.
Unearthing these inconsistencies displayed the need for a revamped design system - one that could be a definitive reference, creating a shared design language that could be relied upon.
Additionally, variables had just made their debut in Figma, and I was eager to be the go-to person for learning and sharing this new feature with the team.
Lastly, I had to approach the renovation of this design system considering our product designers as users. I worked closely with other designers to understand their needs, align our efforts, and ensure everyone was comfortable with the changes. Regular check-ins and discussions kept everyone on the same page.
Mapping Variables
I began by studying other design systems to identify best practices in structuring and naming our own variables. This led me to propose a three-layer structure for our variables: Primitives, Semantics, and Components.
Mapping the variables also functioned as a design audit of the existing system, allowing me to identify colors that were going unused and inconsistencies in interactions - such as button hover effects - in order to make this new design system optimized and concise.
My experience with coding greatly helped me understand variables and the value they bring to a design system. An interesting challenge of this endeavor was conveying both the use and value of variables to designers.
From Theory to Reality
Not stopping at structure, I created a range of highly adaptable components that brought our variables to life.
This process involved creating a new standard for component organization and property naming. I relied on a blend of best practices, user preferences, and a good dose of creative intuition to establish a practical framework. This framework ensured consistency and adaptability, which were key as our design system evolved.
Impact
This hard work paid off in tangible ways. The redesigned design system brought in a new level of efficiency, reducing confusion and rework. Our projects now boasted a harmonious design, quicker iterations, and an improved user experience.
Lessons Learned
This journey was more than just a design project – it was a transformative experience that allowed me to comprehend the nuances, intricacies, and challenges unique to legacy design systems. The lessons learned were invaluable; they underscored the importance of adaptability, strategic thinking, and the ability to harmonize existing elements while paving the way for innovation.