Cost and Quality in a Design System

August 19, 2022
BACK TO INSIGHTS

Efficiency

The efficiency and standardization of design, production, and delivery of a custom tech solution can: 

  • Allow design and front-end development work to be created and replicated quickly, and at scale. 
  • Alleviate strain on design and engineering resources to focus on larger, more complex problems. 
  • Serve as an educational tool and reference for both junior-level designers, front-end engineers, and content contributors.  
  • Creates a unified language within and between cross-functional teams, and as a result contributes to better rapport across departments. 
  • Create visual consistency across products, channels, and (potentially siloed) departments.

Cost & Quality

Consider the questions of cost and quality:

  • How much less could the same amount of work cost? 
  • How much more work could we deliver for the same cost? 
  • How much could we improve the quality of the work delivered? 
  • How much would quality improvement be worth?  

Let’s consider the button. You say, “but it’s just a button!” 

It seems like buttons are simple and easy to implement. But have you ever seen a submit button look completely different in different places within the same app? The truth is buttons have a wide range of criteria, uses, and styles that require specific design and engineering solutions. That doesn’t even address the differences in button design for mobile and desktop applications. Designers must solve for things like unique states (default, hover, active, disabled), workflow priority and placement, and specialized outliers for specialized features. Designers might also incorporate icons and increasingly complex interactions, like utilizing split buttons with a primary action and a drop-down menu trigger. Have you considered how all of this appears in a range of light and dark themes?  

Source: And You Thought Buttons Were Easy

Buttons aren’t that easy. Nor are they cheap.  

Let’s say it takes one engineer eight hours at $150 per hour to build, implement, and maintain button variations for one application effort. Now, add to that one designer defining and styling button variations across features and prototypes, which takes 8 hours at $150 per hour. The cost of buttons alone for that app is $2400. Assuming 10 unique projects this year, that’s $24,000 in hours just for buttons. Buttons! 

If that’s the cost for a simple button, how much do more complex UI components cost to build again and again?  

The lowly button proves it! 

A well-implemented and fully utilized design system delivers efficiencies and standardizations that save time and money. A great design system will also impact employee engagement and morale by alleviating communication problems and frustrations between your design and engineering teams. They are free to solve more interesting, challenging, and important parts of your projects. You’ll provide a functional, user-friendly, attractive, and scalable solution more quickly to market and at a more reasonable cost because you don’t waste time or energy on building every aspect from scratch! 

Want to know more about agile design and how to implement it across your team? Read the blog The Agile Paradigm: Why every Agile team should include UX.