An Intro to Design Systems and The Value They Bring to Firms

Creative

An Intro to Design Systems, and The Value They Bring to Firms

Andrey Krusanov

Creative Director

Design systems play a pivotal role in product development, offering a comprehensive set of guidelines, standards, UI components or code snippets that ensure consistency, efficiency, and scalability across a product's user interface (UI) and user experience (UX). They also ensure a unified approach to creating the visual, interactive, and technical aspects of products or services. This consistency not only strengthens the brand but also saves money in the long run by making design work more efficient while reducing errors.

By building and maintaining a design system, organizations can streamline their design and development processes, define functionality paradigms, maintain brand consistency, and foster collaboration among cross-functional teams. This approach not only enhances the aesthetic appeal and usability of products but also significantly reduces time-to-market and development costs.

To apply a practical explanation to the structure and core benefit of a design system, here is an example to how a design system’s standardized components can be applied as a solution to a spectrum of challenges within a firm’s product development process.

The Mighty Call To Action (CTA) Button

Every digital experience has a lot of buttons. One button can be used on the homepage banner CTA, product page CTA, email newsletter CTA, mobile app CTA, user onboarding flow CTA, e-commerce checkout flow CTA, and so on. In this case, a designer can create the button once, while developers can then implement the button once, and then the button can be reused over 100 times throughout the website web application or mobile app.

Leveraging this single, perfect “component” many times provides better production efficiency, a more consistent experience, higher conversion rates, and easier maintenance in the future.

In a professional setting, adopting a design system is not merely about creating a library of UI components; it's about embracing a systematic approach to design and development that promotes best practices, enhances collaboration, and drives product excellence. By understanding and implementing design systems, organizations can achieve not only aesthetic and functional improvements in their products, but also operational efficiencies and strategic advantages in the marketplace.

Value of Design Systems for Small Businesses

Cost-Efficiency

Both types of businesses aim to present a unified brand image and user experience across their products or services. A design system ensures consistent design elements, such as colors, typography, and UI components, leading to a cohesive and recognizable brand identity.

Quick Scalability (fast Experiments)

Small businesses can grow rapidly, and a design system enables them to scale their product or service offerings efficiently. New features or products can be developed faster because design elements are already in place. It’s also crucial for small businesses to find the product-market fit and pivot quickly. Design system enables fast experimenting and a/b testing to fail fast.

Competitive Advantage

A well-executed design system can help small businesses stand out in crowded markets. Consistency in branding and user experience can make a small business appear more professional and trustworthy. Imagine a marketer, HR, or management with skills of a designer to represent your company on every level. It is a reality with components of a well-executed design system.

Effective Collaboration

Even with a small team, a design system fosters collaboration. It ensures that everyone is on the same page regarding design principles, leading to smoother workflows and fewer misunderstandings. Meaning less calls, questions, back and forths and more actual work.

User-Centered Approach

Small businesses often have a closer connection to their customers. A design system allows them to maintain a user-centered approach, ensuring that their products or services meet customer needs and preferences.

Value of Design System for Enterprise

Scale and Consistency

Large enterprises often have complex product ecosystems. A design system ensures consistency across a wide range of products and services, which is essential for maintaining a coherent brand identity and user experience.

Efficiency at Scale

Enterprises deal with a high volume of design and development work. A design system significantly streamlines this process, reducing duplication of efforts, saving time, and cutting costs.

Global Presence

For enterprises with a global presence, a design system helps adapt designs and user experiences to different markets and cultures while maintaining brand consistency. For example, Airbnb uses its design system to accommodate diverse user needs worldwide.

Risk Management

Large enterprises face substantial risks if design inconsistencies or user experience issues go unnoticed. A design system serves as a risk mitigation strategy by enforcing design best practices and accessibility standards.

Cross-Functional Collaboration

Enterprises often have numerous teams working on various aspects of a product or service. A design system acts as a bridge between these teams, promoting better communication and alignment.

Legacy Systems

Enterprises may have legacy systems and products that need to be updated or integrated. A design system aids in modernizing these systems while ensuring they align with current design standards.

Examples of Design System ROI from Top Brands

IBM has Carbon as their design system

IBM reported a 75% faster design process due to the implementation of their Carbon Design System.

47% faster to develop versus coding it from scratch.

Carbon's shared design language led to a 300% increase in design reuse, saving time and effort across projects.

Source 1: https://www.ibm.com/downloads/cas/Z4WBDR8Q

Source 2: https://sparkbox.com/foundry/design_system_roi_impact_of_design_systems_business_value_carbon_design_system

Total benefits of implementation Carbon design system by IBM.

Designers are 34% more efficient when using a design system, according to Figma research.

Source: https://www.figma.com/fr/blog/measuring-the-value-of-design-systems/

American Express’s teams could deliver work in 31% fewer person hours with an 18% relative improvement in quality.

Source: https://uxdesign.cc/how-much-is-a-design-system-worth-d72e2ededf76

LLoyds Banking group saves £190k per project by using their design system called Constellation. And that overall has already saved the group more than £3.5M

Source: https://www.youtube.com/watch?v=w5rVkLFSkJk&t=148s

Introducing design system and a live data Figma plugin provided 1250% increase in design delivery speed at Deliveroo

Source: https://medium.com/deliveroo-design/how-to-understand-your-design-systems-health-and-eventually-its-success-9cbcdae13a2f

At Scalio we archive 200% ROI on average on design system implementation for our projects. This includes time designers save with reusable design components, developers save on reusable code base, and QA team saves on testing only new components.

How to Calculate The ROI of Design Systems For Your Firm

1. Identify Costs:

Implementation Costs: Calculate the initial expenses for creating and implementing the design system. This includes design and development hours, software tools, and any external consultancy or training costs.

Maintenance Costs: Determine ongoing expenses related to updating and maintaining the design system. This includes design and development efforts, documentation updates, and any additional software or tool costs.

2. Quantify Benefits:

Time Savings: Estimate the time saved by designers, developers, and other team members due to the use of the design system. Consider factors like reduced design iteration time, quicker development cycles, and streamlined collaboration.

Consistency and Branding: Calculate the value of improved brand consistency, which can lead to increased brand recognition, loyalty, and customer trust.

Reduced Rework: Measure the reduction in design-related errors, rework, and bug fixes. This can result in significant cost savings over time.

User Experience Improvements: Estimate the impact of a better user experience on customer satisfaction, retention, and potentially increased revenue.

Efficiency Gains: Quantify the increased productivity of design and development teams. Consider the number of projects completed, reduced development time, and faster time-to-market for new features or products.

3. Calculate ROI:

Subtract the total costs (implementation and maintenance) from the total benefits (time savings, consistency improvements, reduced rework, etc.).

Divide the net benefit by the total costs and multiply by 100 to get the ROI percentage.

ROI Formula:

ROI = ((Total Benefits - Total Costs) / Total Costs) * 100

4. Consider Intangible Benefits: While some benefits may be challenging to quantify in monetary terms (e.g., improved user satisfaction), they still contribute to the overall value of the design system. Consider assigning qualitative values or making conservative estimates.

5. Continuous Monitoring: After implementing the design system, continue to monitor its impact on key metrics such as design and development efficiency, user satisfaction, and overall business performance. This will help validate and refine your ROI calculations over time.

6. Compare and Analyze: Compare the calculated ROI with your organization's expectations and industry benchmarks. Analyze the results to identify areas where the design system is delivering the most value and areas that might need further improvement.

Remember that the ROI calculation provides an estimate and may evolve as the design system matures and as business conditions change. Additionally, the qualitative benefits, such as improved brand perception and user satisfaction, may not be fully captured in monetary terms but still contribute significantly to the overall success of the design system.

Conclusion

Design systems create value for businesses large to small by providing a unified and efficient framework for building products or services. They have allowed small organizations to scale quickly and reduce costs, while larger firms benefit from increased operational efficiency, maintaining speed in their product development, and ensuring consistency in process, branding and workflows across the portfolio of products or projects.

In our follow-up article, we will share our best practices for implementation, budgeting, adoption and process for design systems.

Learn more about how we use data-driven design solutions to engage, retain and monetize users to drive growth

Visit our Design & Creative Services page, and download the free Playbook today

About Scalio

Scalio is a global digital product agency driving digital success in over 30 industries. Through expert engineering, strategy, and design, we build and scale platforms and digital experiences for global brands.

Learn more about our expertise in your industry.