Project summary
What
A platform design system, product design systems, and strategy serving 3 distinct products.
My role
Platform design system team lead, main design contributor, mentor and educator, and strategist. This work was contributed to by a junior product designer.
Key moment
Solving a classic design nightmare - tables and grids. By working with developers and using powerful Figma features, I created a full-featured table system that could easily keep up with edits and has an equivalent code library ready to go. This was absolutely critical during this project.
Outcomes
A balanced, easy-to-use design system
Grew usage from 0% to 100%
Enabled multiple products to complete complex rebuilds and visual overhauls
Created coherence through a cross-product visual language and user interactions
Minimized disruption to product teams through usability testing, transparency, support, and coaching
Raised efficiency of product team workflows through code parity
Increased company awareness of design systems through presentations and demos
Examples
Finding balance between flexibility and adherence
Design system components get pushed to the limits, and that's when designers start detaching components from the system or demanding new versions. To keep the system lightweight and my maintainance tasks low, I created components that used detaching intentionally. This allowed designers to re-order and scale their designs while remaining connected to the design system and equivalent code library.
Working with designers to fit workflows, mitigate risks, and propagate powerful Figma features.
By interviewing designers, running in-Figma usability tests, prioritizing communication and support, and thoroughly testing how updates would impact design files, I created components that fit into designers' workflows and minimized disruption.
One advantage to the design system was utilizing brand new, time-saving Figma features that would otherwise take more time to propagate into designer workflows. My coworkers had all learned Figma quite recently, and their designs were less likely to use components at all. I've used Figma since its Beta version and await new releases with excitement, as I've seen how impactful these updates can be on my efficiency and how well designs align to code. New Figma features allowed me to build components that could be fully adjusted using the properties panel and performed very similarly to their code library equivalents. When new features promised raise efficientcy, I refactored components to take advantage of them. One large change was the ability to edit text labels in the Properties panel, and to toggle layers off and on - features that save time, act more like code, and greatly simplify the design assets required to power a component.
By using visual cues and nested components, I created components that made use of new features like labels and Booleans while being easy to learn for designers who wouldn't typically design with these features.
Navigating high-risk updates and change
Design system updates can be scary, especially with first-generation components with outdated Figma tech already in use. To help designers feel informed and empowered, we delivered design systems presentations that covered topics including detachability, design-code parity, and how to use beta components without worrying it would break designs.
These slides were presented live in Figma, where I could show how detachability worked in real time. Here, I introduce new Detachable components and address fears that updates will break designers' work.
Empowering overrides and customization
During usability tests and discussions with designers, I discovered that some products had some incompatible needs. To accommodate this without creating a Platform system with too many components for our small team to support, I created a baseline component and invited individual teams to layer their own Product system over the top. This worked well with detachabile components. By adjusting their Product copy of a componet, designers could adapt the same grid to a dense expert data grid or to an airy student e-learning table without needing changes at the design system level. I also opened the door for designers to share their product design systems with each other and the Platform team.
This early version of a table component (built before text labels existed in the properties panel) saved me a ton of time when working on the Cyber Security Service Delivery product, which included many pages of adjustable data grids and many, many rounds of iteration. It's also an example of a component with true code-parity: if you can build it in Figma, it already exists in code.