The 2019 Design Systems Survey is intended to illuminate how design systems are created, used, and maintained. Design systems have the ability to solve real-life problems by establishing consistency in design and code, promoting efficiency when creating products, communicating usage guidance, encouraging reuse instead of rework, increasing the accessibility and usability of digital properties, and so much more.
For the second year in a row, Sparkbox, a web design and development firm, has conducted this survey to learn more about both the challenges and benefits of building and using design systems. By analyzing the reflections of in-house teams who use a design system and agencies who’ve helped organizations build new or maintain existing design systems, we look to inform those who want to build or improve their own.
This survey had 256 responses comprised of two respondent types:
- In-house teams who use a design system for their organization
- Agencies who build or contribute to design systems for clients
The two respondent types were asked different sets of questions with some common questions. As each audience brings different expertise to the survey, we will be acknowledging both types of responses.
This survey was shared across social media, Slack channels, at conferences attended by Sparkbox, and was emailed directly to web design and development professionals.
These 148 in-house team respondents came from various company sizes ranging from a couple of team members to over 10,000 employees. Industries include e-commerce, finance, healthcare, advertising and marketing, education, and many others.
The in-house team survey respondents came from various job disciplines. 49% are designers or user experience professionals, 39% are developers, 8% are managers, and 4% are from other job disciplines.
In-house Respondents Breakdown
- Designers
and UX 49% - Developers 39%
- Managers 8%
- Other 4%
92% of the in-house team respondents stated that their organization is actively maintaining its design system. When asked who is primarily responsible for the design system, 50% said designers or user experience professionals, 30% said developers, 11% said a cross-functional team, 4% said project managers, and 5% said others.
Of these 108 agency respondents, 81% work at firms with 200 or fewer employees. These agency respondents include people from traditional advertising or digital-only agencies, IT professional services firms, small studios, and freelancers.
The agency survey respondents came from various job disciplines. 51% are designers or user experience professionals, 42% are developers, and 7% are in management disciplines.
In total, this survey captured 92% of responses from individuals in the design (38%), user experience (13%), or development (41%) fields. Only 8% were in product/project management, marketing, strategy, management or other disciplines combined.
Over 70% of the in-house respondents and 65% of agency respondents said they first learned about design systems by reading articles about design systems. And 77% of in-house respondents and 70% of agency respondents stated reading articles about design systems is the most helpful resource for understanding design systems.
In this survey, in-house and agency respondents were asked what was contained in the design systems they or their clients use. Over half of the respondents said their design system included the following elements.
Top Design System Features
163 In-House and Agency Responses
Respondents could select multiple from 19 options and fill out a response to “other”
-
Color System92%
-
Typography System89%
-
Form Components88%
- Navigation Components 79%
- CSS Code 70%
- HTML Code 69%
- Usage Guidelines 69%
- Grid System 68%
- Spacing System 66%
- Layout System 66%
- Content Blocks 63%
- Brand Guidelines 62%
- Design Files 59%
- JavaScript Code 56%
- Accessibility Guidelines 55%
- Framework-specific Components 53%
When in-house teams were asked which parts of the design system were most useful to their day-to-day work, the responses varied based on the discipline of each individual. The following shows the top 5 responses for designers/user experience professionals and developers. Color system and typography system ranked in the top 5 for day-to-day usage by both job types.
Designer or User Experience
- Color System
- Typography System
- Layout System tie
- Form Components tie
- Design Files tie
Developer
- Color System
- Spacing System tie
- Framework-Specific Components tie
- Typography System
- Usage Guidelines
When asked how they deliver a design system to a consumer, two-thirds of in-house respondents said they distribute the design system via automation or integration into the codebase, while just under a quarter ask developers to copy/paste or download code from a standalone website.
Q: How is your design system delivered to the consumers of the design system?
108 In-House Responses
Respondents were asked to select one answer
| In an external codebase and consumed via package manager | 36% |
|---|---|
| On a standalone documentation site where users primarily copy paste, or download files | 24% |
| Included in the main codebase | 16% |
| In an external codebase and consumed by the main codebase’s build pipeline | 14% |
| I am not sure | 6% |
| Other | 4% |
- In an external codebase and consumed via package manager
- On a standalone documentation site where users primarily copy paste, or download files
- Included in the main codebase
- In an external codebase and consumed by the main codebase’s build pipeline
Along with the growing adoption of design systems, there are dozens of tools on the market to help organizations build and maintain their design system. In-house and agency respondents were asked to share what design system tools they have used, and they answered with the following:
Top Design System Tools
108 In-House Responses
Respondents were asked to select one answer
-
Storybook 34%
-
InVision Design System Manager32%
-
Pattern Lab23%
- UXPin 16%
- Fractal 10%
- KSS 8%
- A Homegrown Solution 7%
- zeroheight 6%
- Sketch 5%
- Vue 4%
- Abstract 4%
- Figma 4%
Survey respondents were invited to share whether they have a favorite tool and why. Top reasons for why they preferred a tool included specific features or compatibility, ease of use, collaboration abilities, speed and performance, and display and showcase ability. Storybook and Pattern Lab were the top tools among developers while Invision Design System Manager and Storybook were the top tools among designers or user experience professionals.
Designer or User Experience
146 Responses
- InVision Design System Manager 60 responses
- Storybook 38 responses
- Pattern Lab 33 responses
- UXPin 31 responses
- Fractal 11 responses
Developer
117 Responses
- Storybook 47 responses
- Pattern Lab 26 responses
- InVision Design System Manager 18 responses
- Fractal 12 responses
- UXPin 11 responses
The top motivating factors for in-house respondents included the reusability of code, efficiency in development design, and consistency in UX/UI and in development. This matches last year’s survey findings.
Q: How strongly did each of the following factors motivate your organization to establish a design system?
108 In-House Responses
Respondents were asked to rate on a 1 to 5 scale where 1 = Not a motivator and 5 = A strong motivator
| 1 | 2 | 3 | 4 | 5 | |
|---|---|---|---|---|---|
| Code reusability | 5% | 3% | 9% | 16% | 67% |
| Increased efficiency in design | 1% | 3% | 13% | 21% | 63% |
| Increased efficiency in development | 2% | 2% | 10% | 25% | 61% |
| UX/UI consistency | 0% | 3% | 8% | 28% | 61% |
| Maintaining brand standards | 8% | 6% | 24% | 24% | 38% |
| Accessibility compliance | 16% | 13% | 23% | 22% | 25% |
| Rapid prototyping | 13% | 15% | 24% | 31% | 16% |
When agencies suggest a design system to clients, the top reasons mirror what motivated in-house teams to consider a design system: consistency, the ability to reuse code, and greater efficiency in their work.
Q: What about a client engagement leads you to suggest or not suggest a design system?
79 Agency Responses
Respondents were asked to select all that apply
| The client struggles with consistency across web properties | 58% |
|---|---|
| The client has many web properties that could all benefit from a unified system | 57% |
| The client needs a more efficient way to work | 52% |
| The client has many contributors to their web properties | 38% |
| The client needs “out of the box” solutions to fill UX/UI developer gaps | 33% |
| We always suggest a design system | 30% |
| We never suggest a design system | 8% |
| Other | 8% |
- The client struggles with consistency across web properties
- The client has many web properties that could all benefit from a unified system
- The client needs a more efficient way to work
- The client has many contributors to their web properties
- The client needs “out of the box” solutions to fill UX/UI developer gaps
- We always suggest a design system
- We never suggest a design system
48 respondents said consistency and 46 respondents mentioned efficiency when in-house teams and agencies were asked to describe the most valuable aspect of having a design system.
When in-house individuals were asked about their biggest concerns as their organization considered implementing a design system, top responses included the following:
- adoption and acceptance
- buy-in from the team
- maintenance and evolution
- investing the time needed to build the system
When agencies were asked what they think concerned their clients most about building/having a design system, the most common responses were the following:
- the investment required (both cost and time)
- the long-term maintenance of the design system
When in-house teams were asked about the biggest challenges of having a design system, common answers included updating the system, getting teams and leaders to see the value of the system, getting everyone to use the system the same way, and not having a dedicated team to maintain the system.
The survey had 71 in-house respondents give reasons why they felt their design system was unsuccessful. The most common reasons were adoption, maintenance, staffing, and lack of an executive champion, mirroring the major challenges of implementing a design system.
Q: If you feel that your organization’s design system was not successful, what were the primary reasons?
71 In-House Responses
Respondents were asked to select all that apply
| Adoption difficulties | 52% |
|---|---|
| Maintenance difficulties | 42% |
| Staffing difficulties | 38% |
| Lack of an executive champion | 35% |
| Funding difficulties | 15% |
| Other | 15% |
In-house teams were also asked what they would do differently if they could go back in time to when they were creating their design system. Some common answers included bringing in more people earlier (such as other developers, technical architects, or executive champions), making different technology/build decisions, and doing better planning.
The 49% of in-house team respondents who ranked their design system as successful follow three commonalities:
- Have a dedicated team to maintain the design system
- Integrate the design system into the developer workflow
- Source at least 50% of work product from the design system
Have a dedicated team to maintain the design system.
20 of 26 in-house respondents with a successful design system answered an open-ended question that both designers and developers were assigned to support the design system in either a part-time or full-time capacity.
More often than not, the list of team members was cross-functional, expanding beyond designers, user experience, and developers to include product owners, copywriters, and managers.
Integrate the design system into the developer workflow.
Of respondents with a successful design system, 79% integrated the design system into the developer’s workflow or tooling. The following are how respondents with successful design system deliver it to the consumers of the design system:
- 49% deliver their design system by an external codebase and consumed via package
- 15% deliver their design system by an external codebase and consumed by the main codebase’s pipeline
- 15% deliver the design system in the main codebase
These delivery models make the design system a way of life for developers.
Source at least 50% of work product from the design system.
Of responders who said they felt their design system was very successful or successful, 62% were sourcing 50% or more of their website from the design system. And of those who perceived their design system as very successful, 63% had over 75% of their web properties sourced from their design system.
As we reflect on the results of this year’s survey, we feel the experiences of in-house teams and agencies shared a common theme: the greatest values of design systems are consistency and efficiency. These two benefits are related. Consistency is not just good for user experience or for design cohesiveness across a brand or brands, but it begets efficiency because there is no need to reinvent the wheel—either in concept or code.
Efficiency suggests speed, and speed can result in time and cost savings. This is the ultimate return on investment for an organization that adopts a design system—freeing up designers and developers to do more innovative work and freeing up budget to pursue organizational growth, product innovations, or other goals.
Sparkbox has become an expert in design systems and hopes to continue helping others through writing articles about design systems.
Are you looking for help building, adjusting, or maintaining your design system? Reach out to us for more information on how we can help!
Or are you interested in the full data set of this survey to run your own analysis? Download the CSV file on Dropbox.
The 2019 Design Systems Survey is just the start! Sign up and receive one to two emails each month with more information on design systems and other web design and development content right to your inbox.
The 2019 Design Systems Survey is just the start. Sign up and receive one to two emails each moth with more information on design systems and other web design and development content right to your inbox.