%20(1).png)
Building a multi-brand Design System for scalable efficiency & consistency
The Challenge
With future expansion in mind, NewDay needed help in creating strong Design Systems foundations to enhance collaboration among diverse teams and disciplines. This would enable teams to make unified decisions, especially when there are competing directions to take as various NewDay products evolve.
The Approach
Establishing a unified Design System was crucial for NewDay as it would offer significant time and cost savings by standardising design choices that could be applied at scale. Design Systems enable designers and developers to increase quality, efficiency, and delivery speed while ensuring compliance with current accessibility regulations. Additionally, they streamline overall product development and improve the UX for end customers, making it an obvious choice for NewDay to take on this project.
Our team at YLD provided product design expertise to help NewDay refine its product offerings and formed a unified Design System, aligning its diverse white-labelled brands to boost its growth strategy and improve customer experience.
Discovery phase
Through one-on-one stakeholder interviews, we identified key priorities, including achieving the desired flexibility across NewDay’s white-labelled brands and ensuring a consistent user experience.
Challenges we wanted to help improve:
- Slow rollout speed
- Duplication of efforts across teams
- Brand inconsistencies despite documentation
- Siloing issues affecting accessibility
- Manual work processes
Subsequently, our team conducted a thorough UI audit, examining inconsistencies among teams and disciplines. We explored several tooling options capable of seamlessly managing multiple brands and themes, which led us to introduce, “Tokens Studio” and “Supernova”. These tools assist with documentation and theme management, establishing a single source of truth for the Design System.
Building strong foundations
Throughout the foundational phase, we set up the fundamental rules governing the Design System and its components.
Global Foundations
Given that many NewDay products are white-labelled, we aimed to minimise visual variability by implementing a set of global foundations that standardise the following across all products and themes:
- Accessibility
- Colour
- Typography
- Grids
- Breakpoints
- Spacing
While maintaining consistency through the formed foundations, we ensured themes retained the flexibility needed to showcase their unique brand identities.
Theming
To understand the necessary level of flexibility for themes, we conducted a specialised theming workshop involving key stakeholders. The outcome of the workshop was the identification of flexible elements such as colour schemes, fonts, logos, and imagery, which led to the development of distinct theming kits comprising brand assets.
To enhance the efficiency of theming within Figma, we incorporated a plugin known as, “Tokens Studio”. This plugin enabled the tokenisation and management of elements beyond Figma's native capabilities, allowing us to instantly and consistently apply different themes to either complete user flows or specific components.
Accessibility
It was essential for both the global foundations and theming kits to adhere to the industry-standard accessibility requirements of the Web Content Accessibility Guidelines (WCAG) 2.1.
To achieve this, we implemented the following measures:
- Ensured colour contrast ratios met AA compliance
- Accounted for various zoom levels in typography.
- Provided alternative text for imagery to accommodate screen readers
- Established logical tab orders to assist keyboard users
- Incorporated ample clickable areas within components
By integrating these considerations at the Design level, we proactively identified potential issues before we reached production.
Components and documentation
To minimise ambiguity across disciplines, we developed a robust set of cross-platform components and comprehensive documentation within Supernova.
The documentation provided detailed information about each component's purpose, interactive considerations, usage guidelines, accessibility requirements, and included visual depictions of the component across various themes and platforms.
To ensure greater consistency and efficiency, we systemised and standardised as many foundational elements as possible.
Creating baseline components
We built baseline components created for Web, iOS, and Android. The accompanying documentation detailed best practices and usage guidelines, i.e.ensuring things were built using auto layout, the naming and structure are consistent using Figma variants, to name a few.
The Deliverables
- Reduction of 25 active component libraries down to 3.
- Reduction of 23 different Button Components down to 1.
- Reduction of time from 10-30 minutes to apply a new theme on simple and complex pages, down to 0.8 seconds.
- Onboarding sessions received a median rating of 4.25/5 from participants.
Closing the Engagement
As our collaboration concluded, a thorough handover played an instrumental role in transferring knowledge effectively to the NewDay team and establishing long-term governance of the Design System.
We facilitated hands-on educational sessions to empower the NewDay team to understand various aspects of the Design System. Each session involved specific exercises, promoting practical comprehension. To ensure clear ownership and accountability, we set up a Design System Council, consisting of representatives from different disciplines.
The respective roles are to facilitate, support, and safeguard the system. Finally, we implemented a transparent process for proposing, revising, and integrating new components, enabling NewDay to sustain and expand the framework provided by YLD.
View More Work
