Design ROI – How to Calculate the Value of Design Investments?

Due to its subjective nature, UX design is not simple to quantify and measure. UX also indirectly affects other areas of the business, namely sales, marketing, support, and engineering. But, for UX design to succeed within an organization, design leadership must demonstrate the value of its design investments.

A 2016 report from Forrester, The Six Steps For Justifying Better UX, found that “…on average, for every dollar you spend on UX, there’s a 100X return!” So, design leaders need a way to identify and measure that ROI.

Forrester’s report also found that when companies used UX based on excellent design systems, their websites:

• Converted 400% more consumers.
• Improved the willingness of customers to recommend products by 16.6%.
• Increased customer willingness to spend money by 14.4%.

Increasing conversions by 400% grab your attention?

It should! And it actually makes sense. UX design is about understanding users and fulfilling their needs. If your UX department maximizes value for users, then it makes sense that this would translate to higher conversions and profits.

Does your current design tool provide you with a comprehensive end-to-end solution to maximize value for your customers? UXPin is the world’s most advanced code-based user experience design tool. Take your prototyping and testing to the next level with UXPin’s enhanced fidelity and functionality. Sign up for a free trial today!

What is ROI of Design?

In business, ROI is a performance measurement usually presented as a percentage. It calculates the direct return relating to an investment – hence the acronym return on investment. 

You calculate ROI as follows:

ROI = (gain from investment – cost of investment) / cost of investment

While you measure the ROI of design similarly, it’s a little more complex than the standard measurement. You must financially separate:

• The gain from UX.
• The gain from all other efforts – for example, the development of new features.

One of the challenges when calculating these gains is that stakeholders might perceive these calculations as biased or that you’re cherry-picking the most favorable results. To overcome this, we’ll demonstrate how to calculate design ROI properly later in this article.

ROI of Design Examples

Here are some ROI of design examples:

• Increase sales/conversions
• Reduced tech support calls
• Customer loyalty
• Customer satisfaction
• Customer retention
• Reduced time-to-market (how this impacts design & development)
• Reduced rework or errors
• Employee retention
• Labor cost savings

Choosing a KPI

When talking about ROI, another acronym we often see is KPI (key performance indicators). KPI is also a performance measurement but relates to the benchmarks or milestones that track progress towards the desired goal.

Examples of KPIs include:

• Profit
• Cost
• Time
• Customer Lifetime Value (CLU)
• Employee-Turnover Rate (ETR)
• Employee productivity

How to Calculate ROI of Design Projects?

ROI of design calculations vary depending on what you’re trying to measure. In an informative webinar Aaron Powers, Principal Design Researcher at Athena Health, demonstrates how to Calculate UX ROI with Financial Models.

Aaron also shows how ROI of design calculations draw from different fields, including:

• Finance: Textbook financial modeling, including complex formulas.
• Decision Models: Textbook models for simulating & guiding decision making.
• Marketing Analytics: Many similar goals in connecting user behavior to business results.
• Machine Learning: Regression modeling can cut through the noise and build models between user behavior and business results.

These are not simple calculations, so for the financial modeling, you might want to use a website Human Factor that provides online UX ROI calculators, for:

• Increased productivity
• Reduced reliance on help desks
• Increased conversion rate
• Reduce costs on formal training
• Decreased drop-off rate
• Reduced learning curve

We also highly recommend the book Cost-Justifying Usability by Randolph Bias and Deborah Mayhew. The book looks at calculating how much of an investment you should fund. And how to sell usability to others.

3 Ways to Increase Design’s Business Value

Now that you have an idea for identifying and measuring design’s return on investment, here are three ways to increase the value of UX across the organization.

Implement Design System

One of the ways to increase design’s business value is by building a design system that serves your customers and the organization.

Building a design system takes time and requires a considerable investment of resources. So, you must prove its value. This calculation includes presenting the potential ROI and the KPIs for stakeholders to track the design system’s success–all of which we outline above!

Here are some ways to present the benefits of a design system for your organization.

A comprehensive design system means design teams don’t have to start from scratch for every project. They can go to the design system and grab what they need to start building prototypes using approved:

• Color schemes
• Icons
• UI patterns & components
• Design system documentation
• Assets (images, videos, logos, etc.)
• Interactions

With a design system in place, the business can benefit from:

• Faster time-to-market for new products and features
• Fewer errors because designers all use the same building blocks
• Easier onboarding
• Better collaboration between teams and departments
• Improved consistency resulting in a better customer experience

KPIs to Measure a Design System’s Value

Measuring the value of a design system is crucial to getting buy-in from designers and stakeholders. There are three important KPIs you’ll want to measure to track a design system’s performance over time:

1. Team efficiencies – measure how long it takes teams to build a new product using the organization’s design system
2. Speed to market – measure how long it takes teams to build and test prototypes
3. Effect on code – measure how much code developers change with each release

You should first measure these metrics without a design system to get a baseline and then with a design system to calculate its impact.

Create Business Value with DesignOps

The primary goal of DesignOps is to optimize design workflows and find ways to reduce inefficiencies. So, it’s another way you can increase the design department’s business value.

Another function of DesignOps is to collaborate with other departments to create partnerships and maximize design’s impact across the business. The goal is to find quantitative data from other departments to trace back to DesignOps efficiencies.

So, not only does DesignOps create efficiencies and value, but it actively looks for examples of this inside and outside of design.

In an informative webinar hosted by UXPin, Patrizia Bertini, Associate Design Operations Director at Babylon, provides a framework for measuring DesignOps’ impact on design, business value, and the organization.

Use the Right Prototyping Tools

Creating design efficiencies is the best way to reduce costs and produce a higher ROI, which you can achieve by using the right UX tools. PayPal revolutionized its design and development process by switching to UXPin Merge–creating massive efficiencies and value in the process.

PayPal’s challenge was to scale UX without scaling the design department or hiring new designers. As Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, put it, “to scale design effectively, we had to include developers and product managers in the design process.”

By switching to UXPin Merge, PayPal empowered its product teams to build new products and features eight times faster than experienced UX designers using traditional vector-based design tools.

Merge helped PayPal:

• Create a single source of truth between design and development
• Significantly reduce time-to-market
• Reduce errors
• Increase product quality
• Improve consistency and overall user experience
• Empower non-designers to design, prototype, and test new products
• Increase collaboration between UX, product teams, and development
• Allow UX designers to focus on creating value through larger UX initiatives that impact the organization globally

How Does UXPin Merge Work to Create This Value?

Merge allows you to sync UXPin’s design editor to a repository hosting your organization’s design system. Because UXPin is a code-based design tool, these design system components have the same functionality and fidelity as those in the repository. 

Designers can use these code components to build fully functioning high fidelity prototypes that usability participants and stakeholders can interact with like they would using the final product.

Designers, product teams, and developers all use a single design system hosted in a repository (via Git or Storybook integrations). Any changes to the repo automatically sync back to UXPin’s editor and notify team members of the updates, thus creating a single source of truth. 

• Using a single, code-based design system allows designers to quickly drag-and-drop components to build fully functioning prototypes for testing.
• Usability participants can interact with the prototypes like they would the final product resulting in higher quality testing and meaningful feedback.
• At design handoffs, engineers can copy/paste components from the repository and make slight JSX/CSS changes to build new products and features.
• Quality assurance produces fewer errors because prototypes and the final product have the same fidelity and functionality–meaning less rework, reduced labor costs, fewer usability issues, and fewer support tickets.

Ready to optimize design with a tool that delivers significant value for the entire organization? Find out more about UXPin Merge and how to request access to this revolutionary technology.