8 Design System Best Practices that Top Enterprise Companies Follow
Together with Whitespace, we hosted a webinar for hundreds of tech professionals titled: How to Overcome Challenges of Scaling a Design System? DesignOps and Product Design Leadership expert Dave Malouf moderated the event with speakers from two enterprise multinationals:
- Ryan Kane: Head of UX Design at Weir Group
- Julien Vanière: Senior Design System Director at Sage
This webinar provided interesting insights into how two enterprise giants approach design systems, including maintenance, scaling, and governance.
Achieve design system maturity and a single source of truth with UXPin Merge. Visit our Merge page for more details and how to request access.
Benefits of a Design System
Before we get into the webinar, we wanted to highlight the high-level benefits of a design system:
- Improved consistency and coherence: Design systems establish a unified visual design language and functionality, ensuring a cohesive user experience across products and platforms.
- Enhanced collaboration and communication: By serving as a single source of truth, design systems facilitate better teamwork among designers, developers, and stakeholders, streamlining handoffs and reducing miscommunications.
- Faster design and development process: Reusable components and guidelines within a design system enable teams to accelerate their workflows, reducing the time spent on designing and coding individual elements.
- Scalability and maintainability: Design systems are built for adaptability, allowing product teams to easily update, expand, and maintain their products while preserving consistency and usability.
- Better user experience and product quality: By providing a structured approach to design, design systems help deliver a refined, high-quality user experience that meets user needs and expectations.
Do you recognize any challenges in your organization related to the benefits above? The next step is to build a business case. Here’s how teams at Sage and Weir Group secure funding and resources for their design systems.
Acquiring and Maintaining Funding and Resources for Design Systems
Building a case for large federated design teams at Weir Group
Ryan Kane, who works for the Weir Group–a large corporation with numerous federated design teams–argues that the efficiency savings realized from design systems can make a compelling case for funding.
The company can save significant resources by avoiding the redundancy of rebuilding and redesigning components across different projects.
Ryan explains this saving through the lens of coded and design components and considers the broader scope of design language systems that cater to teams relying on low-code or no-code solutions.
This broad approach ensures that all teams benefit from time-saving, consistency, trust, and a coherent product experience regardless of their development approach.
A fascinating part of the Weir Group’s strategy includes creating lighter versions of their React and React Native components to suit configuration needs. It also extends the design system’s benefits to teams not directly engaged in development but that use bought and configured solutions.
An additional layer of complexity in larger organizations is the various tech stacks, which may include systems like Salesforce and SAP, further reinforcing the need for an adaptable design system.
A creative approach from Dave Malouf
Dave Malouf described how his team at Northwestern Mutual used accessibility as a foundational argument for acquiring design system funding. Dave’s team partnered with legal to demonstrate the organization could build accessibility into the design system and avoid regulatory challenges–which could lead to potential fines and lawsuits in some jurisdictions.
Dave’s example shows how teams must assess the product and industry landscape holistically to build a case for a design system and other UX initiatives.
Learning from experience at Sage
Julian Vaniere’s experience at Sage differs slightly. His team started their design system proactively, based on knowledge from a manager who had previously created a design system at Intuit. They didn’t need to justify each step but instead focused on adoption and eventual constraints.
Vaniere’s team focuses on patterns more than components, which they see as making a significant difference. Sage’s global and diverse products drive this focus, including HR software, ERPs, accounting software, and more. Sage is working towards a seamless experience across these products and needs rather than perfect consistency.
The key to securing and maintaining funding and resources for a design system depends on an organization’s unique circumstances.
Demonstrating cost and efficiency savings, scalability, and the ability to deliver a seamless user experience across diverse products and regions can make a compelling case. It’s crucial to think beyond patterns and consider larger design language for a more inclusive and comprehensive design system.
Making the Development Process More Efficient
Julian Vaniere provides insight into how Sage structures its design system efforts and highlights the importance of focusing on accessibility. His team comprises various roles, with five UX/UI designers and an Accessibility Designer.
Julian drives the accessibility initiative in his organization, which adds another dimension to their design system. He indicates that having an Accessibility Designer on the team is crucial as it ensures that products are accessible to all users. This accessibility is essential to creating a seamless user experience, regardless of geographical location or user needs.
Developers want to build rather than make design decisions
According to Julian, developers at Sage are most interested in building features; they typically prefer not to spend time fixing accessibility or making design decisions. This tendency among developers can justify the cost of a design system team who can efficiently handle these aspects. This separation of responsibility allows developers to focus on what they do best – building features.
Vaniere’s team implemented the concept of “accessibility champions” within each team. These individuals can leverage their knowledge and expertise to guide the rest of the organization, clarifying precisely what everyone must do for accessibility.
How design systems enable devs to focus on development
A design system can facilitate the dev team’s desire to focus on building features rather than design decisions or accessibility by providing guidelines and components. This unified design language streamlines the development process and ensures consistency across different projects and products.
With roles like Sage’s Accessibility Champions, the knowledge and expertise about design considerations, including accessibility, can be efficiently distributed among design teams, creating a more focused and efficient development process while reinforcing the cost-effectiveness of a dedicated design team.
Maintaining Great Work When Things Get Tight
The Weir Group has a federated structure consisting of individual businesses with a corporate function on top. Each business uses the same design language but has autonomy regarding strategies and budgets.
The corporate level manages the design language, but Ryan emphasizes that no one truly “owns” the design language–it’s a living, breathing entity for which the entire community is responsible.
The challenge many design organizations face
The rationale for the so-called ownership at the corporate level is to have a dedicated resource that isn’t juggling too many responsibilities. In many companies, design teams often bear the dual burden of delivering design on products and projects while also maintaining and growing the design language. Inevitably, when resources become tight, maintaining the design language is deprioritized.
Join our next webinar: Strategies for Building a Resilient DesignOps Practice.
Distributed, shared responsibility
To compensate for this deprioritization, Ryan’s team segregates the design work and the maintenance of the design system. The federated businesses handle the hands-on design work, while the centralized design system team manages the maintenance and growth of the design system.
This delegation of responsibilities ensures the organization’s design teams focus on products and design projects while the corporate team manages design system maturity and maintenance.
Design systems are never complete
The Weir Group runs a “contribution model” for its governance. They acknowledge the design system is an evolving entity and should never be considered complete.
The design teams in the federated businesses are empowered to design and develop new components based on emerging use cases that the library doesn’t cater to. Teams then contribute these components back to the central library via UXPin Merge, similar to GitHub releases.
This approach has multiple benefits:
- Eliminates duplication of effort by allowing teams to contribute to one central library.
- Fosters efficiency, with empowered teams across the business contributing to a shared resource, guided by a corporate function overseeing it all.
- Ensures the maintenance and growth of the design system even when resources are limited.
Build, Scale, Mature, and Distribute Your Design System With UXPin Merge
The Weir Group uses UXPin Merge as a single source of truth for its federated design teams. Ryan Kane’s team utilizes UXPin Merge’s Version Control to sync and distribute changes to the entire organization. A complex task for traditional DesignOps teams is fully automated with UXPin Merge.
“With UXPin Merge, we’ve removed duplication and created efficiency where we’ve got empowered teams contributing to one central library–the design system’s repository–with a corporate function managing and maintaining it.” Ryan Kane, Head of UX Design at The Weir Group.
Are you still using multiple design tools for designing, prototyping, and testing your design projects? With DesignOps working tirelessly to sync and update design system changes?
Create a single source of truth and automate redundant, time-consuming tasks with UXPin Merge. Visit our Merge page for more details and request access.
