DUES Design System

PMI’s design work ran on three tools stitched together: components in Sketch, version control in Abstract, handoff in Zeplin. It worked, barely, until you added external agencies. Every agency partner meant another copy of the truth, and design outputs slowly stopped matching each other.

The everyday cost was real. Iterations were slow because every change travelled through three tools. New hires spent their first weeks just learning where files lived. And nobody could say with confidence which version of a component was the current one.

We set four: move every component out of Sketch, Abstract and Zeplin into Figma without disrupting live projects; refine components as they crossed over rather than copying flaws forward; organise everything into curated Figma libraries; and write documentation good enough that an agency designer could onboard without a call.

My role covered the full arc: research, UI and UX design, interaction design, and the documentation itself.

Before moving anything I audited the existing system component by component, asking the unglamorous questions: is this still used, is it duplicated, does it earn its place? Brad Frost’s Atomic Design gave the audit its structure. Breaking the system down to atoms first meant the rebuild started from a foundation instead of a pile.

The move itself was planned like an engineering migration, because that’s what it was. Working with stakeholders and the in-house design team, we mapped dependencies, sequenced components so nothing live broke, and kept both systems running until each library crossed over cleanly.

Migration was also the once-in-a-system chance to fix things. Components were refined as they moved: usability issues ironed out through iterative design sessions and testing, accessibility improved, redundant variants merged instead of carried forward.

The finished system covered interactive components, templates, and full documentation: usage guidelines, design principles, and worked examples for the people who’d never sat in our standups. Figma’s prototyping and animation tools carried the system into motion too, from micro-interactions to full transitions, so agencies inherited behaviour, not just static frames.

The clearest sign it worked: agency partners and new hires stopped needing hand-holding. The documentation answered the questions that used to become meetings, and one shared Figma source ended the “which version is current?” conversation for good.