Building a Design System for a SaaS Solution: A Year in Review
This past year, I’ve had the exciting challenge of building a design system for Keylane PDE, a SaaS platform designed to help maintain pensions. While tackling something as complex as pensions is no small feat, creating a unified design system that meets the platform’s diverse needs added an extra layer of complexity, whilst offering plenty of opportunities to grow and innovate.
8/1/20243 min read
Understanding the Design System
If you're new to the concept, a design system acts as the ultimate toolkit for designing and building digital products. It is a bundle of components, UI elements, and templates that provides structure and guidelines. Over the past year, I had the exciting challenge of constructing a design system for Keylane PDE, a SaaS platform tailored to assist in maintaining pensions.
Why a Design System is Key for SaaS
SaaS platforms often grow quickly and need to serve a wide range of clients and features—each with their own quirks. That’s where a design system shines.
Structure:
A design system lays out everything you offer, showing what you can currently do, what’s missing, and where future opportunities lie. It’s like a snapshot of your platform’s DNA.Efficiency:
Reusable components save time and effort. Instead of reinventing the wheel for every page or client, you can simply tweak what already exists.Growth Control:
SaaS platforms can grow chaotically if left unchecked. A design system keeps everything cohesive and scalable, no matter how many clients, products, or features are added
How We Built It
We started by creating an inventory of all components in the product, including their required variations. This gave us a clear roadmap of what to tackle. Using Brad Frost’s Atomic Design methodology, we organized the design system into three connected layers:
Foundation: Colors, typography, and icons; the brand’s visual identity.
Components: Reusable elements, from buttons to complex data tables.
Templates: Standard layouts showing how components combine into cohesive pages.
Rather than building everything at once, we focused on a small fraction of the product, learning as we went. With each new feature or update, we expanded the design system, ensuring it grew thoughtfully and stayed flexible.
The Challenges
The biggest challenge has been accommodating variations. Keylane offers a range of features, each tailored to different clients and scenarios. Balancing flexibility with consistency has been a delicate dance, but it’s one that pays off by creating a system that can evolve without losing its core
A Living, Breathing System
One of the coolest (and trickiest) things about a design system is that it’s never finished.
It has to adapt to:
New features
Adjustments to old features
Technology updates
Changes in accessibility rules
A design system isn’t a static rulebook, it’s a dynamic tool that evolves alongside the product.
What’s Next?
With the foundation in place, we’re already seeing the benefits of a clearer, more consistent platform. But the real magic comes as we continue to refine, expand, and adapt it. It’s a journey, not a destination, and I couldn’t be more excited for what’s ahead.
Let's grab a coffee and chat!
If you see potential for collaboration, have questions about my work, or just want to chat, I’d love to hear from you. I'm always open to discussing new ideas and exploring creative opportunities. Don’t hesitate to reach out—let’s see how we can work together. I look forward to connecting!
