The business case for adopting a design system

And so, the enterprise app has become “consumerized”, with many organizations striving to cater to these users through well-designed, UX-first applications that provide new features fast. 

Design systems emerged as a natural solution to the problems faced by product teams in implementing these mandates, such as balancing consistency with agility, bottlenecks in design, and untenable maintenance requirements.

Simply put, a design system provides designers and developers with a curated, shared and synchronized set of UI building blocks and patterns to base their work on.

However, implementing a design system is not without risk, and can involve significant investment and resources. This has often been the cause of friction between executives and product teams, who find it difficult to convey the impact of a design system on an organization.

This article examines three key challenges that product teams commonly strive to solve with design systems, and maps the impact of these challenges on organizations.

The insights provided are primarily based on Vaadin’s 10+ years of experience in building consistent, reusable UI features for industry leaders.

Consistency in user interface design

Maintaining consistency and coherency in application user interfaces (UIs) can be challenging, especially as businesses strive to be more agile. 

Consistency issues in UIs manifest in different ways, such as:

• Graphical details, like the colors used for actions and links, or the icons used to represent recurring actions;
• Layout and structure, such as the placement and order of buttons in a form;
• Behavior and interactions, for example the way search fields work, or how form validation errors are presented;
• Workflows, for example the way multi-step tasks, such as bulk actions on a set of selected items, are performed;
• Information architecture and navigation;
• Terminology and tone of voice, like the way in which buttons are labelled, or how error messages are phrased.

It might be tempting to dismiss these as minor nitpicks or quirks that have limited or no tangible impact on your organization’s bottom line and ROI. However, design inconsistencies can have far-reaching consequences throughout an organization.

For starters, the very act of creating inconsistent UI designs is inefficient, distracts designers from adding meaningful value to an application, and drags down development velocity. For example, calculate the number of hours a day designers spend on repetitive tasks, such as:

• Redesigning something that has already been designed at least once before, instead of reusing, adapting or referring to an existing solution.
• Extrapolating which shade of a specific color was previously used in a specific application view.
• Going up and down the approvals chain for minor changes.

This all detracts from designers focusing on useful design work, implementing meaningful innovation, solving end-user and business problems, and creating new value. 

Inconsistent designs also means more unnecessary work for developers, as they are unable to reuse existing implementations of a specific design asset (for example a button or a form field). Inadequate code reuse naturally means that more code is written, and more code inevitably means more bugs. 

From the perspective of your end users, inconsistencies in the final product inevitably lead to a deterioration of the overall user experience, which will likely result in an increase in user error rates.

“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience.”  –Jakob Nielsen

If your end users are employees, this means degraded productivity and efficiency, along with more costly onboarding and training costs. If the end users are customers, it results in increased support requests, more high-touch sales cycles and more complex upsell paths.

In addition, it leaves the door open for your competitors to swoop in with a better-designed product and lure your customers away, much like Figma, Shopify and Lemonade did in their respective industries.

Designer-developer collaboration

Friction between designers and developers in a product team is an all too common occurrence: 38% of UX professionals found collaborating with developers challenging in the State of UX in the Enterprise 2019 report.

Contrary to popular belief, this friction is not due to some fundamental difference in personality types, value systems or [insert common trope here]. Instead, the root cause can be found in the fact that designers and developers are mostly unable to work in the same medium, resulting in developers having to interpret and translate designs into specifications for UI implementation. Much of the confusion occurs during the ritual known as the “handover”, during which design deliverables are passed on to developers for implementation.

In many cases, the primary challenge lies in finding a common language and communication medium that allows designers to effectively convey the nuances of a design to developers. For example:

• Various possible states of UI elements, such as focused, empty, invalid, expanded, collapsed...;
• Scaling of UI elements, for example for different screen sizes or amounts of data, and whether an element has a fixed size or scales with the UI;
• Scrolling areas, and other ways to manage content overflow.

This can greatly impact development velocity, thereby increasing time to market and causing budget overruns in a project. In addition, frustration can increase turnover in your team, ultimately increasing your hiring and onboarding costs, while further impacting development velocity and time to market.

In addition, according to the Enterprise UX Industry Report 2017/ 2018, larger organizations tend to be more distributed, and the ratio of designers to developers is skewed (in favor of developers in many instances. This often exacerbates the friction, and causes bottlenecks in design, that lead to further impaired development velocity and time to market.

Maintenance overhead

The problems articulated above don’t end when an application goes into production. On the contrary, they in fact grow in severity as the application moves into maintenance mode, gets updated and has new features added. 

High recurring onboarding costs are yet another concern, as any newcomers to your team need to be onboarded and familiarized with the nuances of your application.

More fundamentally, inconsistent UI implementations themselves are a form of technical debt, some of which will likely need to be paid at some point by refactoring the code to be more consistent – a costly and resource-intensive process for larger applications, or large portfolios of applications. 

The role of design systems in mitigating these problems

A design system is a set of standardized UI building blocks and patterns, such as components, layouts, visual styles and icons, together with clear and comprehensive guidelines for their usage, both in terms of UI design and UI implementation.

In practical terms, this means providing components and stylesheets for developers, and corresponding graphical assets for designers for use in their toolchain. In addition to the code, design assets, and associated documentation, a design system also encourages a systematic, team-wide methodology to UI design and implementation work.

Ultimately, this system results in the entire team having a shared understanding of the foundations on top of which all UI work is done, in order to facilitate collaboration within the team, promote code-reuse, streamline UI development, and eliminate consistency issues.

The consistent, clearly defined and standardized nature of a design system can also have benefits in democratizing design, by allowing non-designers to handle less complex, routine design tasks pertaining to their work, without disproportionately sacrificing design quality.

This means that from a business perspective, design systems can positively affect the ROI of an organization’s applications by:

• Improving design and development velocity, and speeding up time to market.
• Decreasing maintenance costs by reducing technical debt.
• Providing users with intuitive, coherent UX that decreases onboarding time, user error rates and support requests.
• Increasing agility, allowing applications to adapt to external forces faster and add more value for users.
• Mitigating design bottlenecks by standardizing simpler, repetitive design tasks for developers and other non-designers.

If you want to learn more about design systems, check out this concise and practical introductory article aimed at executives and developers seeking to understand design systems.

Vaadin will include design system tooling in future versions of the platform, starting from Q2 2021. This will allow organizations to reap the benefits of a design system, while minimizing the initial investment and challenges related to organizational buy-in.

Stay tuned to our social media accounts for more information:

• Twitter
• Facebook
• LinkedIn