Website Design

Introduction
Design systems and style guides have become increasingly important in modern web and software development. They allow organisations to establish and maintain a consistent visual language, improve user experience, and increase efficiency and productivity. However, convincing stakeholders of the value of investing in a design system and style guide can be a challenge.
Design systems and style guides are sets of rules, principles, and guidelines that define the visual and functional aspects of a digital product or service. They help ensure consistency across all components, from typography and colour schemes to buttons and navigation. Design systems and style guides often include libraries of reusable components that can be easily implemented across various digital projects.
How to Sell the Value of Design Systems and Style Guides to Stakeholders
While design systems and style guides may seem like an obvious investment to those in the design and development fields, stakeholders may not immediately see their value. However, selling the benefits of these systems is crucial to securing buy-in and support from decision-makers.
Understand Your Stakeholders.
To effectively sell the value of design systems and style guides to stakeholders, it is essential to understand their goals, objectives, and concerns. Here are four ways to get you started.
Identify Your Stakeholders
Stakeholders can include anyone involved in the design and development process, from designers and developers to project managers and executives. Identifying your stakeholders and understanding their roles and responsibilities is critical to effectively communicating the value of design systems and style guides to them.
Understand Their Goals and Objectives
Each stakeholder will have their own goals and objectives when it comes to the design and development process. Understanding these goals and objectives is critical to demonstrating the value of design systems and style guides to them. For example, a project manager may be focused on delivering a project on time and budget, while a designer may be focused on creating a consistent and effective user experience.
Determine Their Level of Understanding of Design Systems and Style Guides
Some stakeholders may already be familiar with design systems and style guides, while others may not know about them at all. Determining the level of understanding of your stakeholders is critical to effectively letting them know the value of these systems. For instance, if a stakeholder is not familiar with design systems and style guides, you will need to provide a comprehensive overview and explain the benefits in more detail.

Address Their Concerns and Objections
Stakeholders may have concerns and objections when it comes to implementing a design system and style guide. For example, they might be thinking about the cost of implementation, the time it takes to develop the system, or the ongoing maintenance required. It is essential to address these concerns and objections head-on and provide clear and compelling responses.
A good practice is providing examples and case studies that can be particularly effective in addressing these concerns and objections. Understanding your stakeholders and their needs is essential to effectively selling the value of design systems and style guides to them.
Highlight the Benefits of Design Systems and Style Guides.
Design systems and style guides offer a range of benefits, from ensuring consistency and improving user experience to increasing efficiency and productivity. Here are some of the key benefits of design systems and style guides that you must communicate with your stakeholders.
Provide Examples and Case Studies.
To effectively sell the value of design systems and style guides to stakeholders, it can be helpful to provide real-world examples and case studies that illustrate the benefits of these systems. Here are some samples that you should mention and discuss.
Google’s Material Design System
As mentioned, Google’s Material Design system is a comprehensive design system that has become synonymous with Google’s brand. The system includes detailed guidelines for typography, colour schemes, layout, and interaction design, and provides a range of components and tools for designers and developers to use.
What It Has Done for Google: The system has helped Google ensure consistency across its digital products and services, enhance the user experience, and increase efficiency and productivity. The Material Design system is widely used by designers and developers around the world, and its success has inspired other organisations to develop their design systems.
Shopify’s Polaris Design System
Shopify’s Polaris design system is an excellent example of a design system that prioritises accessibility and inclusivity, ensuring that digital products and services are usable and accessible to all users. The system also includes tools and components for designers and developers to use, reducing the time and effort required to create new designs and features.
What It Has Done for Shopify: The Polaris design system has helped Shopify ensure consistency across its digital products and services, has enhanced user experience, and has increased efficiency and productivity.

Airbnb’s Design Language System
Airbnb’s Design Language System is a comprehensive design system that includes guidelines for typography, colour schemes, layout, and interaction design, as well as a library of components and tools for designers and developers to use.
What It Has Done for Airbnb: The system has helped Airbnb reduce the time and effort required to create new designs and features, saving the organisation over 16,000 hours of design work. It has ensured consistency across Airbnb’s digital products and services, has enhanced user experience, and increased efficiency and productivity.
Salesforce’s Lightning Design System
Salesforce’s Lightning Design System is a comprehensive design system that includes guidelines for typography, colour schemes, layout, and interaction design. It also provides a library of components and tools for designers and developers to use.
What It Has Done for Salesforce: The system has helped Salesforce scale its design and development efforts across multiple products and services while maintaining a consistent and effective user experience. The Lightning Design System has also helped Salesforce increase efficiency and productivity and reduce design and development costs.
IBM’s Carbon Design System
IBM’s Carbon Design System is a comprehensive design system that includes guidelines for typography, colour schemes, layout, and interaction design, as well as a library of components and tools for designers and developers to use.
What It Has Done for IBM: IBM reportedly reduced its design and development costs by an estimated $100 million as the Carbon Design System decreased the time and effort required to create new designs and features. The system also helped IBM ensure consistency across its digital products and services, enhance the user experience, and increase efficiency and productivity.
Address Implementation and Maintenance Concerns.
It is essential to address any concerns stakeholders may have about implementation and maintenance of design systems and style guides. Here are common concerns you may hear and how you should respond to them.
Demonstrate ROI
When convincing stakeholders about the value of a design system or style guide, it is crucial that you detail how and when their investment will return to them.
Quantitative ROI
This includes cost savings and increased efficiency. Some examples of how to calculate and demonstrate quantitative ROI include the following:
Cost Savings
A design system or style guide can help reduce costs by streamlining design and development processes, reducing rework, and improving quality. To demonstrate cost savings, you can calculate the time and cost savings achieved through the use of the system compared to previous methods.
For example, if a design system helps reduce the time and effort required to design and develop a website by 20%, you can calculate the cost savings achieved by multiplying the time saved by the hourly rate of designers and developers.
Increased Efficiency
Another way to demonstrate the ROI of a design system or style guide is through increased efficiency. By streamlining processes and reducing rework, a design system can help improve efficiency and productivity.
To demonstrate increased efficiency, you can track and measure key performance indicators (KPIs) such as design and development time, speed to market, and user satisfaction. By comparing these KPIs before and after implementing the design system, you can demonstrate the improvements achieved with the system.
Qualitative ROI
measures can help demonstrate the value of the system in terms of user experience and brand consistency. Here are some examples of how to demonstrate the qualitative ROI of a design system or style guide:
Improved User Experience
A design system or style guide can help improve the user experience by providing consistent and intuitive design patterns, improving accessibility, and reducing cognitive load. To demonstrate the improved user experience, conduct user testing and gather feedback from users to measure their satisfaction with the system.
Brand Consistency
A design system or style guide can also help ensure brand consistency across all touchpoints, from digital to print. Show the value of brand consistency by comparing brand awareness and recognition before and after implementing the system. Feedback from stakeholders, such as marketing and branding teams, will also be helpful in demonstrating the value of the system in maintaining brand consistency.

Presenting the ROI
Once you have calculated and demonstrated the ROI of a design system or style guide, it is important to present the findings clearly and compellingly. Some tips to consider for presenting ROI are the following:
- Use Visuals - Visuals such as graphs and charts can help illustrate the ROI clearly and compellingly.
- Tell a Story - Use anecdotes and case studies to illustrate the impact of the design system or style guide on real-world scenarios. This can help stakeholders understand the value of the system tangibly.
- Focus on the Big Picture - When presenting ROI, it is important to focus on the big picture and emphasise the long-term benefits of the system. By demonstrating the ROI in terms of long-term cost savings, increased efficiency, improved user experience, and brand consistency, you can help stakeholders see the value of the system beyond the initial investment.
Get Your Design System Rolling Today!
Are you ready to take your web design and development to the next level? JezNorthWeb is here to help you implement a design system and style guide that will streamline your processes, improve efficiency, and enhance your brand consistency.
Don’t let the fear of implementation and maintenance hold you back from achieving your business goals. Contact us today at 0455029199 or click here to request a quote, and let us help you get started on your design system journey.