Creating + Maintaining + ❤️
Design System
Picture this: Unily was embarking on an exciting redesign of its platform, aiming for a fresh, modern look that matched the dynamic needs of its clients.
"Yeah, we've been wanting to update this for a while..."
But as we dug deeper into the CMS a glaring issue emerged—our design system was seriously out of date. The components weren’t consistent, duplicates lurked in every corner, and variables? Let’s just say they weren’t being used quite as they should have been.
Even worse! our clients loved using their own branding for a unique, tailored experience, but there was a catch. Often, their preferred colors clashed with the platform, either breaking accessibility standards or creating a frustratingly inconsistent experience for users. We had to fix it—and fast.
The Work
The mission? Build a sleek, consistent, and future-proof design system that worked effortlessly across our platform. It had to not only fit our updated look but be flexible enough for clients to customize with their own branding. We wanted to give them the freedom to choose their own colors while ensuring they stayed within accessibility standards. To make things even smoother, we aimed to create a preview site where clients could test out their branding choices and receive real-time warnings if their colors didn’t make the cut.
📋Task:
I knew this was no small feat, so I assembled a dream team that included our UI lead, front-end developers, and a QA specialist. Together, we set out to rewrite the entire design system from scratch, following the Atomic Design model—breaking down every element into modular components. Figma became our single source of truth, with a master branch as the gold standard for our devs.
To keep things on track, I organised weekly stand-ups and refinements with our Product Manager. We combed through user stories, prioritized tasks, and ensured every design met our vision before sign-off. The documentation was a beast in itself, so I managed it through Zeroheight—creating a living, breathing resource that could be easily updated by anyone on the team as we ticked off tasks.
But that wasn’t all. I rolled up my sleeves and personally went through our entire component library, reimagining each design with a fresh, modern look. I wanted the styles to evoke a sense of modernity and peace—something that resonated with our enterprise clients while maintaining a professional, calm aesthetic.
Results
The final product? A living design system that became the backbone of our platform’s new look. We proudly presented it to stakeholders, pitching the value of a dedicated team to maintain and evolve the system. We explained how this new design system wasn’t just a visual upgrade—it was scalable, customizable, and would save both time and money in the long run.
Thanks to our efforts, Unily’s CMS now boasts a cohesive, modern look that’s easy to maintain and a joy for clients to personalize—all while staying accessible and frustration-free.