Website Design

dots

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.

Understand Your Stakeholders

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.

Consistency

Design systems and style guides help ensure consistency across all components of a digital product or service, from typography and colour schemes to buttons and navigation. Consistency helps build brand recognition, enhances the user experience, and reduces cognitive load for users. For example, Google’s Material Design system has become synonymous with Google’s brand and is instantly recognisable to users.

Improved User Experience

Designers and developers can create a consistent and effective user experience using design systems and style guides. By establishing clear guidelines for layout, typography, and interaction design, design systems and style guides help ensure that users can easily navigate and interact with digital products and services. Shopify’s Polaris design system, for example, includes detailed guidelines for accessibility. This ensures that Shopify’s digital products are inclusive and accessible to all users.

Increased Efficiency and Productivity

Design systems and style guides provide libraries of reusable components, reducing the time and effort required to create new designs and features. This improves efficiency and productivity for designers and developers, allowing them to focus on more complex and creative tasks.
Case in point is Airbnb’s design system called “Design Language System.” It has reportedly saved their design team over 16,000 hours of design work and helped reduce the time it takes to launch new products.

Scalability

Design systems and style guides enable organisations to scale their design and development efforts by providing a framework for consistency and efficiency. As organisations grow and develop new products and services, design systems and style guides help ensure that the brand and user experience remain consistent and effective.
For example, Salesforce’s Lightning Design System has enabled them to scale their design and development efforts across multiple products and services, all while maintaining a consistent and effective user experience.

Cost Savings

Design systems and style guides can provide significant savings over time. By reducing the time and effort required to design and develop new features, organisations can save money on design and development costs, among others. With clear guidelines for design and development, organisations can likewise reduce the time and effort required for testing and quality assurance.
Case in point: IBM’s Carbon Design System. This system has apparently saved the organisation a whopping $100 million in design and development costs.

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.

Provide Examples and Case Studies

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.

Time and Resources

One of the most common concerns about implementing a design system or style guide is the time and resources required to develop and implement it. To address this concern, emphasise the long-term benefits of a design system or style guide. These include increased efficiency and productivity, improved user experience, and reduced design and development costs.
It may also be helpful to break down the implementation process into manageable stages, such as conducting a design audit, developing guidelines and standards, and creating a library of components and tools.

Resistance to Change

Another common concern about implementing a design system or style guide is resistance to change. Some stakeholders may be hesitant to adopt new processes or tools or may prefer to stick with existing processes.
To address this concern, it is important to involve stakeholders in the development and implementation process. Solicit feedback and input from stakeholders, and address any concerns or objections they may have. It can also be helpful to provide training and support to stakeholders to help them understand and adopt to the new system.

Sustainability

Another concern about design systems and style guides is their long-term sustainability. Stakeholders may worry that the system will become outdated or will not be maintained over time.
Respond to this by suggesting the establishment of a governance model for the system that includes clear roles and responsibilities for maintenance and updates. It can also be helpful to establish a regular review and update process to ensure that the system remains relevant and up-to-date.

Maintenance Costs

Stakeholders may also be concerned about the costs of maintaining a design system or style guide over time. To address this concern, emphasise the long-term cost savings that can result from the system. For example, the stakeholder may want to take advantage of reduced design and development costs and increased efficiency and productivity.
It may also be helpful to develop a maintenance plan that includes clear guidelines for maintenance activities and associated costs. By providing a clear plan and budget for maintenance, you can alleviate concerns about ongoing costs.

Communication and Collaboration

Effective communication and collaboration are essential to the successful implementation and maintenance of a design system or style guide. It is important to establish clear channels of communication and collaboration among stakeholders, designers, and developers to ensure that the system is effective and relevant.
If concerns about the lack of communication and collaboration are raised, suggest to establish a governance model that includes regular meetings and check-ins, as well as clear guidelines for communication and collaboration.

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.

Demonstrate ROI

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.

Contact us now to arrange a free consultation about your website

Make an AppointmenT