ROLE
Product Designer
SKILLS
Systems-Thinking
Asset Management
THE OUTCOME
Reduced design turnaround by 50% proven by timed-tests on design tasks and improved consistency from the design to development hand-off process
THE SUMMARY
Figma file -> Organized chaos
As the product designer at Titan C-UAS, I had the idea that an organized design system would help us move faster and increase consistency within the software. When I joined, I inherited an under-documented Figma file that lacked proper organization with assets from the legacy system.
Through this endeavor, I established documentation and a practice of regular governance on the design side to evolve the system, and had kick-started the process on the engineering side to make the design system a shared priority between design and engineering.
THE AUDIT AND PREPARATION
Laying the groundwork
When I joined Titan, I inherited a bloated, undocumented Figma file. At the time only a single designer had been working on it, and it had not been updated regularly.
The existing system relied heavily on screenshots and static images, leading to inefficiencies and miscommunication during the design hand-off process. Developers often faced significant technical debt due to an outdated codebase, where small changes could result in significant unintended consequences. The absence of documentation made onboarding new team members challenging, leaving them with more questions than answers.
The components themselves were complicated. Components did not cascade, and as a result any variations required breaking the component or adding onto the long list of properties.
How might I streamline the design-to-development workflow, enhance consistency, and ensure scalable efficiency?
I began by conducting a thorough audit of our existing component library, examining files and organization techniques left behind by the previous designer. This encompassed assessing whether a design system was the appropriate solution and justified the investment of time, energy, and resources. I identified key features required for the project’s success, given our cross-functional team's diverse needs. The findings highlighted that there were significant opportunities for growth within our current system, which needed to evolve from a mere component library into a true design system and source of truth.
In conjunction with this audit, I also focused on auditing and editing the design systems for both Citadel and Titan. This involved congregating and updating assets for Adobe Creative Cloud and Figma, ensuring that our tools were aligned and accessible across platforms. Additionally, I conducted a thorough audit of the current UI kit to identify gaps and areas for improvement.
The state of the other half of the asset system when auditing the design system holistically
DEVELOPMENT
My first take in putting the pieces together
With Figma's release of variables in the summer of 2023, I was able to translate the existing styles into variables to account for both light and dark mode.
For naming conventions I compared token-naming conventions from major systems such as Material, Atlassian Design System, Carbon Design System, and Apple's to find what worked best for our company’s engineers and the naming techniques they were currently using.
While I avoided re-building when possible, many of the more complicated components had to be refactored because of inaccuracies in documentation.
I pulled in developers to understand how and when we were using different variations and I thoroughly audited the UI. This helped me determine which properties to group together, which components to join as variants, and which to nest.
DOCUMENTATION
How to take care of your design system
Once I had stabilized the state of the design system components and documentation, I focused on the processes and structure that would help me and my team evolve it together.
Clear and accessible documentation
I assembled Figma prototypes that housed our documentation that anyone could reference. This included deep dives into the use and constraints for each component, and general information on contributing to the system, easily navigable for quick use.
Critiques and reviews
With each software release, I reviewed UI components, behaviors, and style changes to keep our documentation and Figma files current. This prevented inconsistencies when creating user materials and collateral at the end of each release cycle.
LESSONS LEARNED
I think I get it now
Design systems really come in handy, and after all the research, I realized much of the focus tends to be on the "atoms" of the system–components, libraries, styles, and so on. But the true success lies in how the system is used, how it evolves, and understanding why it matters.
Design flourishes best when it works closely with engineering through a shared roadmap that goes beyond just Figma components. It's this shared ideology that makes everything work.