How to Get Non-Designers to Use and Support the Design System?

Getting stakeholder and organizational support is crucial for ongoing investment and the future success of your design system. The DS team must prove that employees use the design system and that it delivers a positive return on investment.

In our January 2022 webinar, Defending Your Design System, Carola Cassaro talked about the challenges DS teams face, “We’re all dedicated to designing products that change people’s lives, but we don’t always have the right framework and vocabulary to communicate that impact, especially in the design system space.”

Many designers have a tough time explaining why they need resources to evolve and scale a design system. Tracking the design system’s impact and identifying successes and opportunities can help DS teams get stakeholders’ buy-in to improve and scale.

Design systems are usually a design team initiative. yet, they can help the whole organization. They also help developers in making sure that the front-end is consistent. Tools like UXPin Merge make it easy to use the interactive UI components from your team’s design system across design and development.

You can import Git, Storybook or NPM components to UXPin and create interactive prototypes that you can quickly hand off to developers. Request access to UXPin Merge.

Why do You Need Support from Non-Designers?

Design systems require time and resources to maintain and scale. The DS team must prove the design system’s value to acquire those resources. 

Demonstrating the design system’s value means team members must adopt it. So, the DS also needs to engage with teams across the organization to encourage usage and gather feedback for improvements.

Getting people to contribute to the design system gives them ownership, resulting in wider use, thus building your case for more resources and support.

How to Encourage Adoption of Your Design System

Many organizations use internal workshops and training sessions to demonstrate the design system, why it was created, how to use it, best practices, and other relevant information.

Invite representatives from all departments so you can generate organization-wide excitement and buy-in. These workshops are also a fantastic opportunity to invite teams outside of design and development to share feedback and ideas. Remember, contribution = ownership = adoption.

Don’t only use workshops to encourage feedback. Set up communication channels (Slack, Asana, Jira, etc.) for teams to submit feedback and ideas. 

Once teams start adopting and evangelizing your design system, it’s time to start measuring its impact across the organization.

Getting Support for Design Systems: Three Areas of Focus

The design system team must look at three areas to determine its impact on the product and organization:

• Teams: How does the design system improve workflows?
• Products: What is the design system’s impact on products and business value?
• End-users: How does the design system impact usability?

Let’s look at these three areas in more detail.

Teams

There are three primary metrics you can use to evaluate a design system’s impact on teams:

• Design system adoption
• Saved resources
• Time to market

You can evaluate a design system’s adoption by checking for elements present in repositories and determining the active use percentage–a strategy used by UK Gov Design outlined at GOVDESIGN 2020.

By regularly collecting and plotting this data, you can demonstrate the design system’s adoption over time. You can also plot uptake post workshops to determine their success.

It’s important to measure time on task and other performance metrics before implementing a design system to get a baseline. And then use this baseline to measure the design system’s impact. 

PayPal conducted similar tests when switching from image-based design tools to UXPin Merge. Building a single-page prototype using an image-based tool took over an hour vs. eight minutes with Merge–demonstrating an 8X increase in speed resulting in cost and time savings.

Time-to-market is critical for products to compete and stay within budgets. Reducing time-to-market demonstrates to stakeholders that investing and optimizing your design system can provide a competitive edge with fewer resources.

Products

Next, you want to identify design system wins in product performance. Again, we’ll look at three key metrics:

• Component coverage
• Stability
• Brand value alignment

DS teams can test which components are used in products and which are not. These metrics determine the design system’s coverage and relevance across products.

Product stability impacts the entire organization, including the brand itself. DS teams can measure the number and severity of product defects before and after design system implementation to demonstrate how it reduces errors.

Measuring brand affinity is challenging, but in Defending Your Design System, Carola talks about how eBay tested brand alignment by asking customers to rate several brand attributes for page designs pre and post design system. eBay found that design system pages scored higher for overall brand affinity.

End-Users

Lastly, and most importantly, how does your design system impact customers and user experience? Here are three examples of end-user metrics relating to your design system:

• Performance
• Usability
• Customer satisfaction

Load time is an excellent way to measure a product’s performance, a vital metric for customer satisfaction and user experience. Design system components are optimized for performance and reduce bloat, so you should notice faster load times after implementation.

DS teams can use time-on-task, conversion rates, and other task-related activities to test the design system’s impact on usability and accessibility. IBM tested user task completion rates before and after design system adoption and discovered a three-fold increase.

DS teams can use surveys, product reviews, interviews, and other customer feedback to create a trend for before vs. after the design system’s adoption. They can also use these metrics to measure the success of usability and accessibility releases to demonstrate how a design system fixes usability issues and increases customer satisfaction over time.

Pitching a Design System to Stakeholders

In our free download, Evangelizing a Design System, we share a proven template for getting executive and stakeholder buy-in. Here is a three-step process to evangelize your design system:

1. Collect data to validate the design system’s impact
2. Identify wins and create a compelling story
3. Project what the company stands to gain

Step 1 – Collect Data

Collect data as outlined in the Three Areas of Focus above. If you’re unsure where to start, find resources and use cases from successful design systems relevant to your product and company.

Also, check out these resources from our blog for guidance and direction:

• Evangelizing a Design System
• On Design Systems: An Interview with Dan Mall of Superfriendly

Collecting and analyzing data can be lengthy and time-consuming, but it’s a crucial part of building your design system success narrative.

Step 2 – Identify Wins and Create a Compelling Story

In our free download, Evangelizing a Design System, we share a 40+ slide template that’s ready for you to present to stakeholders and executives. 

We include actual data from successes at Dropbox, IBM, LinkedIn, Atlassian, and others to strengthen your case and demonstrate what the future holds for your organization.

Highlight your wins in the presentation and use storytelling to explain how you used objective testing to arrive at your final results.

Step 3 – Project What the Company Stands to Gain

To acquire investment, you must demonstrate what the company will gain from allocating resources to scale the design system, that is finding the return on investment (ROI). Combine future projections with case studies from other successful design systems to show the possible return on investment.

Investing in the Right Design System Tools

Investing in the right tools can improve many of the metrics outlined in the Three Areas of Focus above. UXPin Merge is a code-based design tool that allows you to sync a design system hosted in a repository to UXPin’s editor so designers can build prototypes using fully functional code components.

This single source of truth increases adoption and collaboration between departments, even among non-designers, as was the case with PayPal. PayPal also noticed a significant reduction in time-to-market and higher quality feedback from stakeholders who were able to interact with Merge prototypes better than previous image-based design tools.

With a single source of truth, companies also achieve higher rates of consistency and cohesion between design and development. Design handoffs are much smoother because designers use production-ready components to build prototypes, making it easy for engineers to copy/paste and begin development.

When the DS team changes the design system or introduces new patterns and components to the repository, UXPin automatically updates the editor and notifies team members of the latest release.

Request access to Merge and take your design system and workflows to the next level with code-based design from UXPin Merge.