Assembling a unified and scalable Design System

YLD’s design and engineering teams collaborated closely with our client, fostering strong integration and ensuring full buy-in and adoption across all stakeholders. We followed a multi-product approach by understanding the current client situation and evaluating products across the entire ecosystem, rather than focusing on a single solution.

Discovery phase

As part of the Discovery phase, we did a thorough audit and conducted stakeholder interviews with people who are directly and indirectly impacted by the Design Systems. Our Discovery report offered the most helpful insights and recommendations to address their challenges and delivered key insights into other areas of their business.

One of the main challenges we identified was the presence of multiple Design Systems; different approaches all trying to solve the same problem. This fragmentation led to siloed teams and limited communication. To address this, a dedicated team was created that championed the Design System through weekly newsletter updates, release notes, and end-of-sprint demos. The development of each component was tracked through clear stages: not started, in progress, in review, feedback to action, in documentation, and complete. This tracking was shared with all teams, providing instant visibility into the status of the Design System, and ensuring teams stayed informed and involved throughout the process.

Foundational phase

A key technical challenge was the scale of the project. Developing a unified Design System that could support a variety of areas and products, each with its own distinct needs and requirements, required a thoughtful and flexible approach. The diversity of our client’s projects meant we needed to balance providing teams with sufficient resources to get started while avoiding overly specific or niche solutions.

During the Foundational phase, we established strong guidelines, design principles, and technical standards to effectively support and shape the future Design System. One of our technical solutions was creating a micro frontend wrapper that would allow engineers to use multiple technologies, including React and Angular. Focusing on details such as ensuring compatibility with frameworks and identifying priority components was essential in engaging different teams and breaking the siloes. These efforts made the transition to integrating the Design System much smoother and more accessible.

Among other initiatives, we hosted prioritisation meetings and provided regular updates to design, product and engineering leads. These sessions ensured different teams remained informed and aligned with full transparency, capturing cross-team requirements and breaking down silos that had previously led to fragmented Design Systems. By fostering cross-department collaboration and bridging gaps between design and engineering, we helped the client adopt a more cohesive, cross-functional approach, breaking down long-standing silos and encouraging stronger and more unified ways of working across teams. 

Tools

From a design and engineering perspective, we leveraged Figma variables and design tokens to create a clear one-to-one mapping. This approach allowed us to standardise key design decisions and foundational elements while allowing for rapid, flexible updates, a crucial advantage for the client.

The Design System enabled designs to automatically adjust to different screen sizes: desktop, tablet, or mobile. By setting up variables correctly, designers no longer needed to rebuild pages for each breakpoint; they could simply toggle between them. This approach also made it easy to switch between themes, whether that’s light or dark mode, or even different branding themes, without affecting the overall design. The ability to instantly switch between layouts and themes without extra effort also led to a more efficient workflow and greater consistency across the platform.

With slot components, we streamlined component design, replacing multiple versions, such as a warning and a sign-in modal, with a single reusable modal. This simplified the process, as teams only needed to focus on the content inside the modal, rather than its structure or responsive behaviour.

For the client, this change brought two key benefits: faster delivery of features and updates, as reusable components sped up development, and a more consistent user experience, with uniform design and interaction patterns across the platform. Ultimately, this led to a more efficient development process and a better product for the client.

The Design System was built to be highly adaptable, making sure that any team within the client’s organisation could easily adopt it by simply adding a theme, enabling instant updates across their workflows. From both a design and engineering perspective, we ensured that implementing a global rebrand across any product would take only a fraction of the time compared to their legacy processes. As our client is embarking on a major rebrand, this adaptability will be especially impactful, saving significant resources, ensuring consistency at scale, and streamlining what would have otherwise been a time-consuming and costly process.

Accessibility

Accessibility was one of the core guiding principles. Every detail was approached with accessibility in mind, recognising the needs of the diverse audience served by all client products. With a dedicated accessibility expert on the client’s team, we were able to integrate accessibility standards from the outset and fully utilise their expertise. This focus extended beyond fundamental aspects such as legibility, contrast, and sizing to include considerations like screen reader compatibility and navigation for users tapping across the interface.