Design Lead
Design & Strategy
2025 - 26
Leading the creation of a design system
As the organisation prepared to launch a new digital platform, it introduced a challenge that went beyond designing a product. Multiple teams were working toward the same vision, but there was no shared design language, brand foundation, or scalable system to support future growth.
Through conversations with the CEO and other key stakeholders, I proposed a strategy to establish the core foundations of the new platform.
Challenge
In the past, I have built UI kits / Style-guides but never something this big and scalable.The challenge was bigger than building a library of components. I had to build a system that could align teams, create consistency across the product, and give designers and engineers a foundation to work on, while getting it adopted into the product development cycle, all within a tight timeline.
Goal
Create a design system that brings consistency to the product, gives teams a shared design language, and can be adopted directly into the way we build.
Outcome
The implementation of design tokens established a common language between designers and developers, significantly improving collaboration and reducing design QA time.
Research
Stakeholder discussions
Initially I had a discussion with the CEO about the vision & strategy of the new platform. I understood that the ideas were broad and it was important to have frequent discussions and reviews to bring alignment.
I started with a few key questions for stakeholders to understand the product, business, and vision:
What problem are we solving?
How is this different from our existing products?
What business outcome are we aiming for?
What is the vision and messaging for the platform?
It was also important to understand not just what we wanted the product to be, but how we planned to position and sell it in a competitive market.
What I learned
It was clear through early product exploration that the key problems were the number of clicks to complete common tasks and lack of smart suggestions. This highlighted the need for intuitive design patterns that reduced navigation effort and supported faster decision-making. Other insights revealed the requirement for customisable dashboards and AI-driven recommendations.
We already had a handful of components and an existing style guide, so starting from scratch didn’t make sense, especially with the timeline we were working with.
After speaking with stakeholders and reviewing the existing UI, a few things became clear:
The foundation was there, but it wasn’t consistent. We had reusable components, but patterns and visual decisions varied across the product.
The system needed to scale. As more teams and features were added, we needed a structure that made it easier to design and build consistently.
The product needed a stronger visual identity. Stakeholders wanted the experience to feel more modern and distinctive, while still communicating reliability and trust.
Documentation was becoming just as important as the components themselves. Designers and developers needed a shared source of truth for how and when patterns should be used.
These findings shifted the goal from simply creating more components to building a system that could support the product as it grew.
My findings
I worked with the team to audit what we already had, identify what was worth keeping, and define where the system needed to evolve. Rather than replacing the existing foundation, we focused on creating a more scalable structure around it.
Conducted workshops
I realized that strong alignment and a smooth workflow required my team to understand how to create well-structured components with the intuitive variants and a standard naming convention. So I conducted a workshop for the team based on Atomic Design Principles before we began building components. This ensured consistency across the system and resulted in high-quality, standardized components.
Key Challenges
There was confusion among designers as multiple libraries were available simultaneously, making it difficult to determine which components were correct to use.
There was a misalignment between design, and production, as clear guidelines were lacking for various states, behaviors, interactions, and use cases.
Designers resorted to building components in separate local design files due to uncertainty regarding their reusability across different projects.
There existed a smaller style guide but nothing to adapt to a large scale product development lifecycle.
Realistic Design Process
Prior to commencing the design phase, I formulated a concise plan and established an estimated timeline. This served to assist senior management in visualizing the prioritization of resources and setting expectations regarding the subsequent steps and the anticipated final outcome within a specific timeframe.
I was aware that in the given timeline (initially discussed 6months) there would be multiple iterations and additions to the design system. We had to adapt as we went further into designing the applications. Hence to ensure there was no delay in delivery I sorted to prioritizing the necessary components & variants required and to extend them as we go. I made sure that every component addition went through a design audit and documented in the guidelines file.
Key Decisions That Shaped The System
1. Choosing the architecture
The architecture I chose was inspired by Brad Frost’s Atomic Design methodology.
I chose it because the structure made sense for the scale of the system. Organising components by complexity gave me a clear way to think about how they relate to each other, while also making the library easier to navigate and maintain as it grew.
It also suited the way I naturally organise information. Having a clear hierarchy meant I could quickly find what I needed without having to dig through an increasingly large component library.
2. Creating design tokens
We began by creating base tokens to define all fundamental values, including colors, typography, and spacing.
3. Accessibility built in
4. Configurable components
By making every component intuitively configurable, this led to easier and faster design process. We targeted keyboard navigation as well in the variants by including the focus states.
Responsive by design
I ensured we built the components with a responsive auto-layout system, allowing them to adapt across different viewport sizes without needing separate versions for every screen.
From 375px mobile layouts to 768px tablets, 1024px desktops and 1440px+ screens, designers could reuse the same components and create responsive layouts based on the needs of each product.
6. Documenting all guidelines
I distributed the documentation work across the team. We established a centralised documentation system covering design principles, component usage, interaction patterns, spacing rules, accessibility standards and implementation guidelines.
The documentation also became useful beyond product development. The marketing team used the same foundations and guidelines when creating campaigns for the platform launch, helping keep the product and its communication visually consistent.
7. Interactive and early demos to key stakeholders
Presenting the design to different stakeholders was an important part of the process. I presented the design concept, the intent & direction of the new design system, while I ensured the team was involved in presenting design elements and how it will be adopted. The demo was well received with positive feedback. I made sure everyone was well informed that few variants might evolve as we proceed based on the requirements.
8. Driving adoption across teams
We published the design system so that all files in the team project can access its assets.
The challenge was that as designers, developers, marketing team, and business stakeholders were working towards the same launch, there was a risk of teams creating their own patterns and workflows, leading to inconsistencies and fragmented experiences.
We ensured to take up the task of UI review as development went on to maintain consistency. This definitely proved to be a necessary task to ensure adoption.
Impact & Reflection
