Towards comprise the Design System Applicability: A Multivocal

Literature Mapping
Sara Vendramini∗ Luana Belusso
saravendramini@[Link] TOTVS
Universidade Tecnológica Federal do Paraná Joinville , Santa Catarina, Brasil
Dois Vizinhos, Paraná, Brasil luanambelusso@[Link]

Francisco Carlos M. Souza Alinne C. Corrêa Souza

Universidade Tecnológica Federal do Paraná Universidade Tecnológica Federal do Paraná
Dois Vizinhos, Paraná, Brasil Dois Vizinhos, Paraná, Brasil
franciscosouza@[Link] alinnesouza@[Link]

ABSTRACT 1 INTRODUCTION
During the software development process, the standardization lack In recent years, there has been a growing evolution in the process
and consistency of software products are still present in companies. software products are developed. Different methodologies have
In this sense, considerable attention has been paid to Design System contributed to produce software faster, although maintaining the
since it seeks to improve the software development process making level of product quality. An improvement in this process is the
their products more consistent and scalable. This study presents experience prioritization provided by the products, i. e., the user
a Multivocal Literature Mapping that summarizes, analyzes, and is considered the central point of the development process. As the
characterizes the state-of-the-art Design System. We analyzed 23 software advances, there is an increase in different user profiles as
sources to identify key elements, essential resources, the main de- well as their needs and expectations.
veloper’s needs that lead to adopting a Design System, the proposed In addition to the user experience prioritization, it is essential to
solutions of the Design System, and the impacts generated from highlight the lack of standardization and consistency of software
this use. The results are based on 23 sources, from which 17 are products. Standardization issues are still present in companies due
sources in the gray literature and six are formally published sources. to the absence of documentation, modifications, and expansions
Summarizing on Design System, our Multivocal Literature Mapping of teams or product portfolios. Regarding the team, each practi-
identified four types of elements, three resources, seven different tioner can execute or create a component as they see suitable for
developer’s needs, four solutions, and seven impacts generated the software. This situation occurs when time solves problems in-
from the Design System. Our findings show that this research is dividually and not systematically, leading to product inconsistency
a starting point to understand the best strategies for adopting the and becoming increasingly unsustainable in companies. For this,
Design System among software companies. We also concluded that the Design System started to be applied by organizations. A Design
the needs, solutions, and impacts in the adoption of the Design System is defined as a set of consistently shared design standards
System identified in this Multivocal Literature Mapping can assist and practices to assist teams in developing digital products [5].
companies to improves the quality of their software products. In this context, several companies, such as Spotify, Airbnb, and
Atlassian, have been using Design Systems and noticed a positive
KEYWORDS difference because they can maintain a standardized experience in
various products. The principal Design System benefits are scalabil-
UX design, design system, mutivocal literature mapping
ity and consistency of the product since it is based on the develop-
ACM Reference Format: ment of complete documentation. This documentation allows the
Sara Vendramini, Luana Belusso, Francisco Carlos M. Souza, and Alinne C. companies to produce a more optimized product because they have
Corrêa Souza. 2021. Towards comprise the Design System Applicability: A the components library of the design and development level.
Multivocal Literature Mapping. In Vitória ’21: Simpósio Brasileiro de Quali- Design System has been discussed recently and applied by many
dade de Software, Novembro 08–11, 2021, Vitória, ES. ACM, New York, NY, organizations that aim to understand its applications and benefits.
USA, 10 pages. [Link] These discussions allow that professionals expose their experiences
about the use of Design Systems on the market labor, generating
debates and understandings about the positioning of companies
Permission to make digital or hard copies of all or part of this work for personal or concerning the Design System adoption.
classroom use is granted without fee provided that copies are not made or distributed
for profit or commercial advantage and that copies bear this notice and the full citation Based on this scenario, this paper resulted from the need to cen-
on the first page. Copyrights for components of this work owned by others than ACM tralize and categorize the discussed information by the community
must be honored. Abstracting with credit is permitted. To copy otherwise, or republish,
to post on servers or to redistribute to lists, requires prior specific permission and/or a
about the Design System in recent years. Therefore, this paper aims
fee. Request permissions from permissions@[Link]. to conduct a Multivocal Literature Mapping (MLM) to identify and
Vitória ’21, Novembro 08–11, 2021, Vitória, ES classify the possible needs regarding software development teams,
© 2021 Association for Computing Machinery. the solutions adopted to resolve the identified conflicts, and the
ACM ISBN 978-x-xxxx-xxxx-x/YY/MM. . . $15.00
[Link] impacts generated through these adoptions.
Vitória ’21, Novembro 08–11, 2021, Vitória, ES Vendramini, et al.

A Multivocal Literature Review (MLM) is a process to carry It is essential to highlight that added the UX design another
out the Systematic Literature Mapping (SLM) that includes gray term relevant to this context is the UI. It is related to aspects that
literature, as well as white (formal) literature [39]. Therefore, the the end-user notices, i.e., its focus is on that user’s visual contact,
MLMs summarize the state of arts and the practice of a specific area, typography, color, spacing, grid, icons, and buttons which are a part
thus they are notably beneficial for researchers and professionals. of the elements these users interact within product’s interface [35].
Overall, this paper is relevant for academics and practitioners The UI is associated with all points of visual contact, i. e., when
because it answers the main questions and problems arising in this the user’s interacting with a UI, they navigate between cores, ty-
area. These questions are regarding the lack of standardization prob- pography, inputs, buttons, and even between system flows. Thus,
lems, product inconsistency, and the difficulty of handoff between the designers facilitate the interface’s use, once enables the user
teams. Therefore, the benefits are related to the culture change to accomplish a task with as little effort as possible. Therefore, the
aspects, as it facilitates the change between the design and devel- designers applying user-centered design methods aiming to under-
opment teams; consistency improvement, which is the result of the stand the target audience’s needs and to develop UIs more intuitive
standardization and componentization of the interface elements; and that provide a better experience [4].
and the scalability and efforts reduction that are items acquired Attached to the benefits provided by the UX and UI, several
through the reuse of components. companies are changing the design they create their products and
The remainder of this paper is organized as follows: Section 2 services. However, the challenge is how to maintain consistency
provides the background needed for this paper. Section 3 describes of usability for all users. In this context, the Design System has
the design of the MLM. Section 4 presents the results and discuss of become a popular resource to solve this problem.
the study and provides insights into the topic. Section 5 presents the
limitations and solutions of the MLM. Finally, Section 6 concludes
this research paper and suggests future work. 2.2 Design System
The term Design System is still recent within the software devel-
2 BACKGROUND opment community. It is defined as a set of shared and coherently
organized standards and practices to assist teams in developing
This section presents concepts and definitions about the User Ex-
digital products [5]. These standards are related to the elements
perience (UX), User Interface (UI) Design and, Design System ap-
used to create an interface containing interactions, buttons, text
plication and importance.
fields, icons, colors, and typography. On the other hand, the prac-
tices regarding mechanisms that are considered essential for the
2.1 UX & UI Design conception and use of these standards [5].
The User Experience (UX) is related to the person’s perception The Design System meets teams around a common visual lan-
when interacting with a product or service. Ceccacci [34] cites guage for the product, from typography, colors, icons, components,
that UX gathers factors such: brand image, functionality, system style, and documentation guides to the communication product
performance, interactive and assistive behavior, interactive system process. Thus, all of these elements are consolidated through a
capabilities, user internal and physical state resulting from previous Design System. In summary, a Design System can be defined as a
experiences, attitudes, skills, personality, and the context of use. feature that unifies and guides all aspects of the experience, from
Peter Morville [31] complements other factors that also influence product concept blocks to UI details. However, for consistency, the
the UX, for instance: the level of utility that the product adds to the product must be more than just one group of reusable UI elements.
user; accessibility along with ease of use; desire and appreciation It must have structure and meaning, i. e., when creating a Design
of the product, involving design aspects emotional; and credibility System, we must not only group general interface elements but
generated by the maturity of the product. represent the product concepts at various levels [32].
A good experience when using a product is to meet the user’s Several companies like Google, IBM, Spotify, and Atlassian make
needs through easy understanding and interaction. Thus, UX De- publicly available their Design System implemented. These compa-
sign provides tools and resources to build products with positive nies have become a reference for designers who use their documen-
experiences for those who use them [10]. It is worth mentioning tation as a model for developing their particular products. It occurs
that the UX is different for each person and, hence it is essential to because in these documents it is possible to find the availability of
know the different types of persons who will use the product. At visual patterns, such as componentization, the layouts definition,
this point, it must be analyzed and understood the characteristics, and usage patterns. The reference taken by these companies is re-
needs, and motivations of these personas seeking to comprise most garding the high level of satisfaction of their customers and the
of the target audience [14]. growing need to create more consistent products. These products
UX Design establishes the user as the central point of the process aim to meet good usability practices, in which the user is seen as the
and, it proposes research phases to gather inputs and achieve results central point, thus enabling its results to become more satisfactory.
that meet the different user profiles. The main tasks involved in this One of the main benefits of the Design System is assists in prod-
process include user research, personas identification, wireframe uct scalability. However, it is arduous to maintain a common design
prototyping, creating interactive prototypes and, conducting design language for each party interested in the development. In this con-
tests. These activities can be carried out in different ways by orga- text, the Design System documentation concedes that products are
nizations. However, the users and their needs must be considered to be developed faster, with visual consistency, using the best UX
as the center of efforts for product development [1]. practices through the design standards and the reuse of components.
Towards comprise the Design System Applicability: A Multivocal Literature Mapping Vitória ’21, Novembro 08–11, 2021, Vitória, ES

These characteristics enable the products to achieve a greater level Table 1: Research Questions (RQs) and Rationale.
of consistency and improve the core design language for all teams
involved [37]. Another Design Systems contribution is the agility RQ1 : What are the key elements of the Design System? This ques-
of teams since having access to a single source of information al- tion is intended to investigate/determine which key elements are essen-
lows different teams to benefit from the design standards and UX tial in the Design System.
RQ2 : What resources are essential to assist Design System prac-
guidelines already established by the company [23].
tice? This question seeks to identify which resources types are most
It is essential to highlight that one of the most popular ap- needed in the Design System. These resources can be humans or tech-
proaches to building a Design System is the Atomic Design pro- niques.
posed by Frost [7]. This approach is composed of five stages: RQ3 : What are the designers’ and developers’ needs? This ques-
tion aims at identifying the crucial needs regarding the Design System
i) atoms, that represent the fundamental elements for building
presented by product development teams.
an interface, such as buttons, form labels, and input fields;
RQ4 : How can Design System improve the designers’ and devel-
ii) molecules, made up of groups of elements that form a unit, opers’ needs? This question aims to analyze which solutions of De-
for example, a search form consisting of a form label, an sign System are most used to improve the product development teams’
input field, and a button; needs.
iii) organisms composed of molecules, atoms and also other RQ5 : What are the impacts from Design System adoption? The
organisms, an example to be cited would be a website header; goal is to analyze which impacts are generated from Design System
iv) templates that are page-level objects made up of layout com- adoption. These impacts can be related to organization, process, time,
ponents, such as a website homepage template; and product.
v) the pages, which are instances of templates that present the
user interface, that is, a home page template evolved with
3.2 Search process
images, texts, and media.
This step aims to define the search strategy to select the relevant
Therefore with a prominent Design System is possible to pre- sources. The first activity of this step is to identify the keywords
vent product development teams from spending countless hours and synonyms related to the research question. After performing
creating detailed design specifications. Thus, it can provide bet- such tasks, to get the formally published papers from the digital
ter clarity on design processes, standards, and components, which libraries, we combined these keywords forming a search string
helps the teams to maintain good product quality and impacts the as follow: (“design system” OR “guidelines design”) AND (UX OR
user experience. “user experience” OR “UX design”). For the grey literature, our search
strings were: design system elements, design system solutions,
3 MULTIVOCAL LITERATURE MAPPING design system impacts, and guidelines design.
A MLM is a review comprised of the sources on a specific area The search string was composed of essential terms related to
which includes White Literature (WL) or formal literature and Gray the area. The generalization of these terms was used to reach a
Literature (GL) as a data source [38]. The WL consists of formally more significant number of sources that responded to the RQs.
published literature in journal papers, conference proceedings, and Furthermore, in our first string we had all terms, however, we
books; while de GL is obtained through blogs, email, technical noticed few sources in GL. For this reason, we decided to change
reports, lectures, emails, presentations, videos, specific web pages, and add some terms to soft the search and to analyze more sources.
and Q/A sites [29]. The formally (white literature) published papers search was
This study was developed based on the systematic process pro- performed in the following search engines: IEEE Xplore, SCOPUS,
posed by Garousi et al. [39], composed by five steps: (i) setting SpringerLink, ACM Digital Library, Science Direct, and Google
the MLM needs, the goal and the research questions (Section 3.1); Scholar. On the other hand, we conducted the search of the grey
(ii) presenting the search process (Section 3.2); (iii) describing the literature through the general web site as Theseus1 and specific sites
source selection (Section 3.3); (iv) design of data extraction (Section like: Medium2 , UX Collective3 , Figma4 , and UX Collective Brasil5 .
3.4); and (v) data extraction and (vi) data synthesis (Section 3.5). We also utilized the relevance ranking of the search engines (e.g.,
Google’s PageRank algorithm) to restrict the search space. Thus,
we checked the first ten pages (i.e., slightly a search “saturation”
3.1 Goal and Research Questions effect) and only continued when results from the 10th page were
To plan a MLM, we raised their needs, defined the goal, and formu- still relevant.
lated the research questions. The motivation of the MLM started
with the industry designer’s and developer’s challenges to create 3.3 Source selection
a Design System and to keep a digital product consistent while
The source selection process is composed of four steps: (i) selection
dealing with different teams.
of the initial pool; (ii) conduction of snowballing; (iii) application
The main goal of this MLM is to obtain knowledge about the De-
of inclusion/ exclusion criteria (voting); and (iv) obtaining the final
sign System. Thus, we intend to identify the key elements, resources,
1 [Link]
solutions, impacts, and the designer’s and developers’ needs con-
2 [Link]
cerning the Design System to characterize the field of study and 3 [Link]
identify open problems. To achieve this goal, we defined the re- 4 [Link]

search questions presented in Table 1. 5 [Link]

Vitória ’21, Novembro 08–11, 2021, Vitória, ES Vendramini, et al.

pool. During the process, the first two authors, who are industry pro- Table 2: Final classification used in the MLM.
fessionals and experts in the Design System, performed the search
independently and applied the inclusion and exclusion criteria to RQs Attributes Categories
include only relevant sources that answered the RQS. - Literature type Formal Literature (WL), GL
As a result of the initial search phase, we ended up with a small - Source type Conference, Journal, General site web,
Specific site
initial pool of 90 articles. To ensure all the relevant source’s inclu-
- Classification Evaluation, Opinion, Experience
sion, we conducted backward snowballing [12], as recommended RQ1 Elemenys type Components Libraries, Design Guide-
by systematic review guidelines, on the set of papers already in the lines, Style Guide
pool. According to the MLM process presented, our initial search in RQ2 Resources type Prototyping Tools, Documentation Tools,
the search engines fielded 90 sources. With backward snowballing, Human Resources
eight sources were added, totaling the pool ready for voting to 98 RQ3 Designers’ and Interface redesign, Improvement of the
sources. developers’ software production process, Design con-
After the conducted backward snowballing, it was necessary to needs sistency,UX design, Product documenta-
establish inclusion and exclusion criteria to ensure including all the tion, Product scalability
RQ4 Solutions type Componentization and reuse of inter-
relevant sources and not including the out-of-scope sources. We
face elements, Optimized development
defined five inclusion criteria and five exclusion criteria such as: process, Definition usage standards and
• Inclusion Criteria (IC): rules, Simplification between design and
IC1 : sources that present the key elements of the Design Sys- communication
tem; RQ5 Impacts of design Time optimization, Reduction of efforts,
IC2 : sources that describe resources types needed in the Design system adoption Culture, Scalability, Usability, Consis-
System; tency, Process quality
IC3 : sources that list the product development teams needs;
IC4 : sources that present solutions of Design System to improve
the product development teams’ needs; on a set of five sources. This process was performed to obtain a con-
IC5 : sources that describe the impacts from Design System sensus about sources classification and to ensure that the authors
adoption. share a common understanding of terminology. For each source, we
• Exclusion Criteria (EC): assigned a third person as a peer reviewer to check the extracted
EC1 : sources whose main objective is not related to Design data. In case of disagreements, discussions were made between the
System; two or even three authors to correct the extracted data.
EC2 : sources not written in English; After researchers finished data extractions, we conducted sys-
EC3 : duplicate sources (same paper retrieved from different tematic peer-reviewing in which researchers peer-reviewed the
resources); results of each other’s analyses and extractions. In the case of dis-
EC4 : sources with the abstract and the full text unavailable; agreements, discussions were conducted to ensure the quality and
EC5 : sources of the same research with an earlier version of a validity of our results. Finally, the attributes and their categorization
more complete. presented in the paper were the results of a formal and system-
From the initial pool of 90 sources, which all authors voted atic synthesis done collaboratively between the two researchers
on, 67 sources were excluded. Thus, the pool final obtained 23 following a systematic qualitative data analysis approach [30].
sources, from which six (26%) were formally published sources (e.g.,
conference and journal papers) and 17 (74%) were sources in the 4 RESULTS
gray literature (e.g., internet articles). In this section, we describe the findings of our MLM in light of
our research questions presented in Section 3.1. Some sources were
3.4 Design of data extraction chosen to illustrate examples of each RQ’s result. We consider that
To develop our MLM, we analyzed the sources in the final pool they are relevant and make an important contribution to the Design
and identified the initial list of attributes. We then used attribute System. Section 4.1 provides an overview of the sources selected
generalization and iterative refinement to derive the final map. for this study. Sections 4.2–4.6 describe the results for the research
For sources identified as relevant, we recorded them in a shared questions RQ1 –RQ5 , respectively.
spreadsheet (hosted in the online Google Docs spreadsheet to facili-
tate further analysis. Our next goal was to categorize the sources to 4.1 Overview of the sources
building a complete picture of the research area and answering the As previously mentioned, we identified 23 sources. Table 3 presents
RQs. The Table 2 presents the final classification scheme developed the distribution of the sources according to ID (first column), refer-
and used in the MLM, which was composed of eight attributes. ence (second column), title (third column), year (fourth column),
literature type (fifth column), source type (sixth column), and classi-
3.5 Data extraction and synthesis fication according to the source evaluation type (seventh column).
During the extract and analysis, each of the two researchers ex- Of the 23 sources, 26% (6/23) were selected from formal literature,
tracted and analyzed data of the sources (assigned to him). Before which were published in conferences and journals; and 74% (17/23)
each researcher extracts all the sources, a pilot phase was conducted from GL, which were published in specific sites as and general web.
Towards comprise the Design System Applicability: A Multivocal Literature Mapping Vitória ’21, Novembro 08–11, 2021, Vitória, ES

Table 3: List of sources selected in the MLM.

ID Reference Title Year Literature Type Source Type Classification

S1 [22] User Experience and Usability in agriculture: Selected Aspects for De- 2019 WL Journal Evaluation
sign Systems
S2 [13] Scaling UX with Design Systems 2019 WL Journal Evaluation
S3 [3] Laying the Foundation for Design System Ontology 2020 WL Conference Evaluation
S4 [21] Design and Development of a Standard Interface Component to High- 2019 WL Conference Evaluation
light Automated AI Recommendations in the Conta Azul Software
S5 [27] Adaptation: the Continuing Evolution of the New York Public Li- 2018 WL Periodical Evaluation
brary’s Digital Design System
S6 [25] Design Systems: A Community Case Study 2020 WL Conference Evaluation
S7 [28] A Design System Business Case Business Benefits: The Ultimate Guide 2020 GL Specific Site Opinion
S8 [2] State of Design Systems 2018 2018 GL Specific Site Evaluation
S9 [24] State of Design Systems 2019 2019 GL Specific Site Evaluation
S10 [19] Design system: A Tool for Scaling Product Design in Large Technol- 2018 GL General Web Evaluation
ogy Companies
S11 [33] Mahoe: Know The Trajectory of Banco PAN’s Design System 2020 GL Specific Site Experience
S12 [16] Slinky: The DogHero Design System 2019 GL Specific Site Experience
S13 [15] Creating Virgin Atlantic’s Digital Design System — Part 1 2020 GL Specific Site Experience
S14 [18] Spotify Design System 2020 GL Specific Site Experience
S15 [20] Conta Azul Design System 2020 GL Specific Site Experience
S16 [17] You Need A Design System — Here’s Why 2019 GL General Web Evaluation
S17 [11] Measuring the value of design systems 2019 GL Specific Site Experience
S18 [26] Why Having a Design System is Good for Business 2018 GL Specific Site Experience
S19 [8] How Much is a Design System Worth? 2018 GL Specific Site Experience
S20 [6] Design Systems: What, How, and Why Your Digital Product Needs 2020 GL General Web Opinion
One
S21 [9] Getting Executive Buy-in for Your Design System 2018 GL General Web Opinion
S22 [40] A Comprehensive Guide to Design Systems 2019 GL General Web Opinion
S23 [37] Designed for Growth 2016 GL General Web Experience

Figure 1 shows the number of sources by type of literature. In to the popularity of Blogging that has been increasing in recent
the formal literature category, of the six sources selected the Scopus years as many design professionals are using it for communication
and Springer have the highest number of sources with two each, and professional development.
followed by ACM and Google Scholar with one source each. On the Among the 23 sources selected, it was possible to note that 13%
other hand, in the GL eight sources were identified on specialized (3/23) were conducted predominantly in Brazil, 9% (2/23) in the
websites and one on the general website. We also include eight USA, 9% (2/23) in the Czech Republic, while that 69% (16/23) of
sources using the snowballing method, of which 90% (7/8) were the sources not informed the origin country. Table 3 shows the
from specific websites and 10% (1/8) general web. classification of the selected source into four categories.
C1 - Evaluation: this category includes case studies, surveys
Formally Literature (WL) General Web (GL) Specific Sites (GL)
and experiment;
9
8
C2 - Experience: this category includes the sources that pro-
7 posed solutions to the identified problems based on lived
Number of sources

6
5 experiences;
4
C3 - Opinion: this category includes the sources that described
3
2 the authors’ views.
1
0
Brasil UX Figma Medium UX Theseus Google ACM Springer Scopus
According to categories, 44% (10/23) of the sources were classified
Collective Collective Scholar
as Evaluation, followed by Experience with 39% (9/23) and finally,
Literature type
Opinion with 17% (4/23). Among the data presented, we identified
that the sources are classified mainly as Evaluation and Experience.
Figure 1: Number of sources selected by Formally and Grey The sources classified as Evaluation performed research on the
Literature. subject and sources categorized as Experience bring experiences
and perceptions within the software production market.
The GL seems to have surpassed the formally published literature It is relevant to highlight that the results of each RQ were grouped
since the year 2018, denoting the higher attention of practitioners by similarity. Based on this similarity, the categories were defined
on this important topic. An alternative explanation may be related and later refined. Furthermore, the results for each RQ did not
Vitória ’21, Novembro 08–11, 2021, Vitória, ES Vendramini, et al.

diverge, i.e., the essential elements, sources, needs, solutions, and result obtained was the 18% of respondents work in medium-sized
impacts for the conception and adoption of the design system are organizations from 51 to 200 individuals and 18% in large companies
similar in WL and GL. with 10.000 individuals or more.
According to the discussions presented by the authors, we no-
4.2 RQ1 : What are the key elements of the ticed that the vast majority of the community considers the compo-
design system? nent library to be the central artifact related to the Design System.
This RQ purpose is to identify the essential elements for a Design Therefore, the results indicate that the C1 category received the
System. From the analysis of the sources, we clustered the data highest prominence because the component library is the principal
extracted into three categories. resource for creating a Design System.
C1 - Components Libraries (CL): this category is composed 4.3 RQ2 : What resources are essential to assist
of user interface design components used for prototyping
like buttons, radio button, drop-down, input, table, form,
Design System practice?
checkbox, and others; The purpose of this RQ is to identify the resources needed to sup-
C2 - Design Guidelines (DG): this category addressing design port a Design System. We classified the resources according to the
principles based on the context of use, such as recommenda- analysis of 23 sources into three categories:
tions to apply good practices, objectives, values and Design C1 - Prototyping tools: this category includes tools used to
System purposes; create software prototypes;
C3 - Style Guide (SG): this category includes the documenta- C2 - Documentation tools: this category is composed by tools
tion to assist in defining how the visual style of the Design used to create Design Systems documentation;
System should be applied, covering topics like behavior, prin- C3 - Human Resources: this category comprises the human
ciples, color palette, typography, iconography, and others. resources necessary for the development of a Design System.
Figure 2 shows the total number of sources by key elements Frost [7] presents the roles of UX Designers, Visual Designers,
types. Of out 23 sources, the Components Libraries appeared in and Front-end Developers as primarily responsible for designing
43% (10/23), and Design Guidelines in 43% (10/23) and, Style Guide and maintaining the Design System data. Furthermore, some peo-
in 35% (8/23). Another 52% (12/23) of the sources did not inform ple are often referred to as the roles of Back-End Developers and
the key elements for the Design System development. Executives that aim to ensure that the Design System meets your
prospects.
9 Figures 3 and 4 present the humans and tools resources identified,
8 respectively. Figure 3 presents that 57% (13/23) of the sources (S3 ,
7
S4 , S5 5, S6 , S7 , S11 , S12 , S13 , S14 , S15 , S16 , S20 , S23 ) mention that
Number of sources

6
designers and developers are human resources essential for using a
5
4
Design System. Only 4% (1/23) of sources cite Designers, Developers,
3 and Lead Roles, and 43% (10/23) of the sources did not inform which
2 resources are considered essential to support Design Systems in
1 practice.
0
CL DG CL and DG CL, DG and SG
Key elements
14

12
Figure 2: Key elements of a Design System. 10
Number of sources

Two sources (S6 and S8 ) address information about the Design 6

Systems community’s considerations. In the S8 source, the authors 4
performed a survey with 451 professionals Clarity Conference par- 2
ticipants and asked about which artifacts belong to a Design System. 0
The results indicated that 87% of participants mentioned compo- Designers, Developers and Lead Roles Designers and Developers
Human resources
nents library, 83% style guide, and 57% design guidelines.
In the S6 source, a new survey was carried out in the 2019 edition
of the Clarity Conference with 991 respondents about the artifacts Figure 3: Human resources for a Design System develop-
belonging to a Design System. This source found that 87% consider ment.
the component library as an artifact belonging to the Design System,
86% consider style guides, and 63% consider design guidelines. The Figure 4 illustrates that 70% (16/23) of the sources did not cite
authors also analyzed the profile of the interviewees, 46% of them which tools are used, while 8% (2/23) present the use of only proto-
were Junior and had 1 to 4 years of experience in the area. And the typing and documentation tools. 22% (5/23) report the combined
principal three roles played were Designer with 47%, followed by use of prototyping and documentation tools. Sketch and Figma are
Senior/Leader with 36%, and finally Designer and Developer, as a the most used prototyping tools, while Storybook and ZeroHeight
hybrid role with 17%. Regarding the size of the organizations, the are documentation tools.
Towards comprise the Design System Applicability: A Multivocal Literature Mapping Vitória ’21, Novembro 08–11, 2021, Vitória, ES

Prototyping Documentation Prototyping and Documention

Table 4 shows the needs types identified in the selected sources.
3
61% (14/23) of the sources (S1 , S3 , S3 , S9 , S10 , S12 , S15 , S16 , S18 , S19 ,
S20 , S22 , S23 ) contemplated only one need. 13% (3/23) (S5 , S13 , S14 )
addressed two needs, and only source (S4 ) that approached five
Number of sources

2
needs. We notice that the predominant need is the improvement
of the software production process with 43% (10/23), followed by
1
design consistency with 39% (9/23), product scalability with 17%
(4 /23), effort reduction with 13% (3/23), product documentation
0 with 9% (2/20), interface redesign with 4% (1/23), and UX design
Adobe XD and Encore Figma, Storybook Sketch and Jira, Figma, Figma, Sketch and
Steck and ZeroHeight ZeroHeight Zeroheight and
Storybook
Storybook also with 4% (1/23).
Tools type

Table 4: Identification of needs cited by designers and devel-

Figure 4: Prototyping and documentation tools to create pro- opers.
totypes and documents in Design System.
Needs Source ID #papers
Kaninsky [28] (S7 ) mentioned that companies with less than 10 N1 S1 1
employees commonly do not have the staff or capacity to adopt a N2 S2 , S4 , S6 , S9 , S11 , S12 , S16 , S17 , S18 , S19 10
N3 S3 , S4 , S5 , S10 , S11 , S13 , S14 , S17 , S20 9
Design System. Therefore, these organizations can choose to use
N4 S4 , S11 , S23 , 3
Design Systems that have ready-to-use components and guidelines, N5 S4 1
such as Google’s popular Material Design. However, corporations N6 S5 , S17 3
with more than 10.000 employees have teams dedicated to building N7 S13 , S14 , S15 , S22 4
and maintaining their own Design Systems.
The work of Neto et al. [21] (S4 ) address a professional approach
In addition, 70% (16/23) of sources presented needs classified as
from the Conta Azul company and presents a project carried out
N2 and N3 . The software production process improvement (N2 ) is
for the definition, development, and documentation of components,
considered one of the principal needs between the teams because it
which was conducted by a team of Design Ops professionals con-
results from failures such as difficulty in communication between
sisting of front-end engineers and designers. The project also had a
the design and engineering teams. In this sense, the need to adopt
design leadership committee with the aim of promoting designers’
an approach to assist the product design creation, minimize the
systemic thinking. The authors concluded that the Design System
learning curve of the new employees, and reduce team rework. In
mindset is a solution that provides support and scalability for the
contrast to the consistency design (N3 ), the principal issue is no
growth of the companies.
components pattern in the product interfaces.
According to the results, we conclude that developers and de-
Furthermore, of out 16 sources that reported N2 and N3 needs,
signers are involved with the Design System development and
only three sources (S4 , S11 , S17 ) addressed these needs simultane-
maintenance. On the other hand, professionals with leadership
ously. Neto et al. [21] (S4 ) reports that due to the rapid growth of the
roles accompany the improvement and advance of the Design Sys-
development team, it was necessary to improve the user experience,
tem. Finally, other professionals involved as software engineers can
reduce the learning curve, and standardize processes and interface
be characterized as users of the Design System.
components. In this sense, the Design System use was evaluated as
4.4 RQ3 : What are the designers’ and a solution to minimize these needs and consequently support the
product scalability.
developers’ needs? In the work of Filho [33] (S11 ) was identified that the principal
This RQ aims to identify the needs presented by product devel- needs are the lack of communication between teams, the question-
opment teams, more specifically by designers and developers. We ing about standards, the visual inconsistency between products, and
classified the needs into seven categories: the excess of time invested in development. These needs generated
N1 - Interface redesign: practice that proposes new solutions discussions between the design and development teams, motivat-
for an existing interface; ing the creation of a Design System. Slack [11] (S17 ) presents the
N2 - Improvement of the software production process: im- conduction of an experiment to evaluate the time savings obtained
provement of the activities of the software development among designers who make use of a Design System. In the ex-
process; periment, designers were instructed to perform two tasks: (i) the
N3 - Design consistency: user interface standardization; creation of a screen to view financial transactions and trends for
N4 - Effort reduction: reduction of costs related to develop- a specific account; and (ii) the creation of a user flow to connect a
ment time, human resources, and training; new account to the profile. Designers used the Design System to
N5 - UX design: improvement of usability and product experi- perform one of the two tasks. As a result, participants were able to
ence; complete their goals 34% faster when using a Design System.
N6 - Product documentation: creation of a document to assist We observed that the software production process improvement
the product development; is one of the principal needs of the teams. Thus, with the evolu-
N7 - Product scalability: promotes growth in product scale. tion of the software, the lack of standardization also becomes a
Vitória ’21, Novembro 08–11, 2021, Vitória, ES Vendramini, et al.

consequence. Therefore, as a result of these failures, professionals

adopted Design System to: (i) create alignment within teams; (ii)
define a place for reference official patterns and styles; (iii) use
standardized components to spend less time and develop a better
user experience; (iv) create a library of components to improve SL4 1 2 1 1

usability; (v) implementation of built in accessibility.

SL3 5 3 1 1 3

Solutions
4.5 RQ4 - How can Design System improve the
designers’ and developers’ needs? SL2 1 4 2 1

This RQ aims to identify the solutions arising from the Design

SL1 1 6 7 1 2 2
System application to improve the designers’ and developers’ needs.
We categorized the solutions into four categories:
N1 N2 N3 N4 N5 N6 N7
SL1 - Componentization and reuse of interface elements: Designers and Developers needs
the transformations of interface elements used in compo-
nents allow reuse in creating new interfaces;
SL2 - Optimized development process: reduction of time by
reusing existing components and modules.
Figure 5: Distribution of solutions according to the de-
SL3 - Definition usage standards and rules: creation of standards-
signer’s and developer’s needs.
based guidelines and rules to guide teams during product
development;
SL4 - Simplification between design and communication:
other two (S5 , S17 ) improved N6 . Finally, the N5 brings SL3 as a
creation of a smoother interaction between design and de-
solution, mentioned by S4 source.
velopment teams.
In the work of Yew et al. [25] (S6 ) was evaluated that profession-
Table 5 shows the solutions identified according to sources. als are motivated to adopt a Design System due to its design and
Around 31% (7/23) of the selected sources used an single solution, efficiency development; the ability to maintain the user interface;
of these sources 71% (5/7) used the SL3 solution, and 29% (2/7) SL1 . brand consistency; handoff between design and engineering. Fur-
Another 39% (9/23) of the sources used two solutions, five of them thermore, the authors also identified that Design Systems improved
(S1 , S3 , S9 , S17 , S18 ) were grouped on SL1 and SL2 , two (S2 , S12 ) product-centric results such as consistency and quality and team
on SL1 and SL3 , one (S10 ) on SL1 and on SL4 , one (S19 ). 13% (3/23) processes such as development speed. Wood [36] presents Spotify’s
used three solutions (S4 , S14 , S23 ) classified on SL1 , SL3 , and SL4 , GLUE (Design Language System) for Spotify’s styles, components,
and the last 17% (4/23) of sources (S6 , S7 , S8 , S21 ) did not address and standards documentation. The authors obtained a shared defi-
any solution. nition of the interfaces, which improved consistency and efficiency
and created an optimized vocabulary between designers and de-
Table 5: Identification of solutions cited by teams. velopers. And finally, they made all the features available in an
internally produced framework so that all teams could consult the
Solutions Source ID #papers different Design Systems in one place with centralized information.
Therefore, we conclude that these two sources report as the
SL1 S1 , S2 , S3 , S5 , S9 , S10 , S11 , S12 , S13 , S14 , S17 , 13
S18 , S23 principal solution for their needs the componentization and reuse
SL2 S1 , S3 , S9 , S17 , S18 , S19 6 of interface elements. We also observed that for both sources, there
SL3 S2 , S4 , S12 , S14 , S15 , S16 , S19 , S20 , S22 , S23 10 was a need to maintain the design consistency.
SL4 S6 , S10 , S14 , S23 4
4.6 RQ5 - What are the impacts of Design
System adoption?
The relationship between needs and solutions is shown in Figure
5, highlighting the number of sources that identified them. The This RQ aims to identify impacts generated from Design System
bubble chart in Figure 5 shows a summary of the solutions ad- adoption. From the analysis of the sources, we categorized the data
dressed according to each category of the needs presented in Table extracted into seven categories:
4. According to Figure 5, 16 and 14 sources adopted four solutions I1 - Time optimization: related to development speed and
(SL1 , SL2 , SL3 and SL4 ) to improve the needs grouped on N2 and efficiency;
N3 , respectively. I2 - Reduction of efforts: related to cost reduction in devel-
Of the needs identified in Figure 5, N2 and N3 adopted the four opment time, human resources, and training;
solutions (SL1 , SL2 , SL3 and SL4 ) as possible means of resolution I3 - Culture: related to sharing knowledge and practices, com-
and represent 70% (16 sources). On the other hand, N4 and N7 use munication and collaboration between teams;
only three solutions, namely SL1 , SL3 , and SL4 . N1 and N6 adopted I4 - Scalability: related to the possibility of product scale in-
SL1 and SL2 as a solution. Of the three sources that adopted only crease;
the SL1 and SL2 solutions, one of them (S1 ) improved N1 , and the I5 - Usability: related to the level of the product use ease;
Towards comprise the Design System Applicability: A Multivocal Literature Mapping Vitória ’21, Novembro 08–11, 2021, Vitória, ES

I6 - Consistency: related to user interface standardization; with 13% (3/23) (S6 , S14 , e S23 ). The I5 is related to usability and
I7 - Process quality: related to the activities improvement generated only by SL1 because its proposal suggests performing
involved in the software development process. the componentization and reuse of interface elements. When these
We analyzed impacts generated by the adoption of the Design suggestions are automatically executed, there is an improvement
System from the relationship between needs and solutions pre- in usability since it is possible to create a standardization between
sented in Figure 5. Table 6 shows the impacts identified according the different screens and devices.
to sources. In the study of Suarez [37] (S23 ), the Design System adoption
generated an impact on the increased efficiency in the product
Table 6: Identification of impacts cited by teams. development. For the author, the benefits of the design system prac-
ticing were related to responsiveness, accessibility, and consistency.
Impacts Source ID #papers A cultural impact was also obtained because it is expected that the
I1 S1 , S3 , S17 , S19 4 team can contribute to the Design System evolution and trends as
I2 S2 , S5 , S11 , S16 , S20 5 a model for the company.
I3 S2 , S10 , S12 , S16 , S17 5 Filho [33] (S11 ) presents a Pan bank’s Design System develop-
I4 S4 , S13 , S14 , S15 , S22 , 5 ment journey. In addition, the authors building the Design System,
I5 S5 1 applying changes to the team processes, and sought to improve
I6 S5 , S6 , S9 , S11 , S13 , S14 , S15 ,S17 , S18 , S20 , S22 , S23 12
communication between the design and development team. From
I7 S6 , S9 , S12 3
this, a customer satisfaction survey was conducted, through which
were obtained positive results concerning the customer’s percep-
Around 52% (12/23) of sources identified the consistency as prin- tion of the product. These results are related to the motivations
cipal impact, followed by effort reduction, culture, and scalability that led them to Design System adoption, such as the lack of com-
with 22% (5/23) each, time optimization with 17% (4/23), process munication between the team, the questioning about standards,
quality with 13% (3/23) and finally, usability with only 4% (1/23). the visual inconsistency between products, and the time excess
Based on the impacts identified, Figure 6 shows the impacts ob- invested in development. When analyzing these motivations and
tained through the solutions presented in Table 5. The SL1 solution relating them to the main impacts identified in this study (consis-
application generated all the identified impacts (I1 , I2 , I3 , I4 , I5 , I6 tency, effort reduction, culture, and scalability), we understand why
and I7 ). it is beneficial to adopt the Design System.
Therefore, we note that the sources (S23 e S11 ) identified the
same impacts are mentioned in this paper. The Design System use
is highly related to aspects of culture change because: (i) facili-
SL4 1 1 3 1
tates the exchange between the design and development teams; (ii)
improves consistency, which is the result of the standardization
SL3 1 3 3 4 5 1
and componentization of the interface elements; and (iii) promotes
Solutions

scalability and effort reduction, which are items acquired through

SL2 4 1 3 1
the reuse of components.

SL1 3 3 4 2 1 8 2

5 THREATS TO VALIDTY
I1 I2 I3 I4 I5 I6 I7

Impacts of design system adoption

During the planning and execution of this MLM, we identified
potential threats that are discussed to guide the interpretation of this
work. The first threat (conclusion validity) regarding data extracted
Figure 6: Distribution of impacts for each solution adopted. by two authors was peer-reviewed and each disagreement between
authors was resolved by consulting a third judge. By following
It is important to highlight that the I6 impact had the highest the MLM procedure, we ensured replicability of this MLM by the
relevance with 35% (8/23)(S5 , S9 , S11 , S13 , S14 , S17 , S18 e S23 ) and detailed description of the steps that govern the protocol presented
followed I3 with 17% (4/23) (S2 , S10 , S12 e S15 ). The SL3 solution in Section 3.
also generated the seven identified impacts, of which I6 also has The second threat (external validity) concerns our ability to
the highest relevance with 22% (5/23) (S14 , S15 , S20 , S22 e S23 ). generalize the results of this study. This study provides a compre-
According to the results, we notice that by adopting the SL1 and hensive review of Design System applicability (overall 23 sources
SL3 solutions, there is a higher positive impact on the applied are selected). The results of this MLM cannot be generalized be-
environment. cause they are based on a specific set of keywords, and a set of
In contrast, SL2 and SL4 solutions generated four impacts each specific sites were used for data collection. However, significant
for the applied environment. SL2 presents impacts I1 , I3 , I6 , and I7 , effort was invested in producing strategies such as the definition
of which I1 has the highest prominence with 17% (4/23) (S1 , S3 , S17 e of a broader search string, the inclusion by snowballing, and use
S19 ). SL2 produces the impacts I3 , I4 , I6 , and I7 , of which repeatedly of the general web have been taken to obtain a higher number of
the I6 receives the highest prominence compared to the others possible sources, then we believe that this threat could be reduced.
Vitória ’21, Novembro 08–11, 2021, Vitória, ES Vendramini, et al.

6 CONCLUSION [15] Vinicombe E. 2020. Creating Virgin Atlantic’s Digital Design System — Part
1. Retrieved April 22, 2021 from [Link]
This paper presents a MLM that can assist in the creation and creating-virgin-atlantics-digital-design-system-part-1-e91f9100804b
implementation of a Design System in software development teams. [16] Borges F. 2019. Slinky: The DogHero Design System. Retrieved April 24, 2021
from [Link]
This MLM was performed following the guidelines available in 9a7250301672
Garousi et al. [39] seeking to research and categorize all existing [17] Bhawalkar G. 2019. You Need A Design System — Here’s Why. Retrieved April 24,
and available literature on Design Systems. 2021 from [Link]
[18] Kaiser G., Posniak M., and Bent S. 2020. Reimagining Design Systems at Spotify.
Of the 90 initial pool, we obtained 23 sources, from which six Retrieved April, 22, 2021 from [Link]
were formally published sources and 17 were sources in the gray systems-at-spotify
literature between 2016 and 2020. We selected these sources, in [19] Nguyen G. 2018. Design system: A Tool for Scaling Product Design in Large
Technology Companies. Technical Report. Theseus.
which identified: (i) the essential elements of a Design Systems; [20] Xavier G. 2020. Design System in a Magic Pass. Retrieved April 22,
(ii) the principal resources for Design System creation; (iii) the 2021 from [Link]
magica-1477a9f270a1
principal needs of the product development teams; (iv) how the [21] Neto J., Cruz B., Schroeter H., and Feitosa L. 2019. Design and Development of a
Design System use can solve the needs found; and (v) the principal Standard Interface Component to Highlight Automated AI Recommendations in the
impacts generated from Design System adoption. Conta Azul Software. 347–360. [Link]
[22] Novák J., Masner J., Vaněk J., Šimek P., and Hennyeyová K. 2019. User Experience
The main results achieved present that several sources proposed and Usability in Agriculture – Selected Aspects for Design Systems. Agris on-line
solutions for componentizing and reusing interface elements. The Papers in Economics and Informatics 11, 4 (2019), 75–83. [Link]
combination of solutions as principal impact consistency, that is, aol.2019.110407
[23] Thoms J. 2017. Your guide to design systems from the world’s leading brands.
the standardization of the user interface. We notice that the Design Retrieved June 6, 2021 from [Link]
System adoption is commonly discussed on specific sites and the systems/
general web. However, in scientific databases, the subject is little [24] Yew J. 2019. State of Design Systems 2019. Retrieved April 22, 2021 from https:
//[Link]/google-design/state-of-design-systems-2019-ff5f26ada71
cited, needing more research with empirical evaluation. [25] Yew J., Convertino G., Hamilton A., and Churchill E. 2020. Design Systems: A
Therefore, we expected that this research is a starting point to Community Case Study. 1–8. [Link]
[26] Medic K. 2018. Why Having a Design System is Good for Business. Retrieved
investigate the best ways to Design System adoption among com- April 24, 2021 from [Link]
panies. Furthermore, the needs, solutions, and impacts presented good-for-business-2e528cd31f2a.
in this MLM can help companies identify which shreds of evidence [27] Anderson J. L. and Guzman E. 2018. Adaptation: the Continuing Evolution of
the New York Public Library’s Digital Design System. Code Four Lib (2018).
can be adopted to improve the quality of their digital products. [28] Káninský M. 2020. A design system business case business benefits — the ulti-
As future work, we intend to complement the results achieved by mate guide. Retrieved April 22, 2021 from [Link]
searching for new sources in other databases and specific sites. business-case-business-benefits-the-ultimate-guide-cc2e09715ab
[29] Storey M., Zagalsky A., Figueira F., Singer L., and German D. 2017. How social and
communication channels shape and challenges participatory culture in software
development. EEE Transactions on SoftwareEngineering 43, 2 (2017), 185–204.
[30] M. B. Miles, A. M. Huberman, and J. Saldana. 2014. Qualitative Data Analysis: An
REFERENCES Expanded Sourcebook (3rd ed.). SAGE Publications Inc.
[1] [n.d.]. User Experience (UX) Design. Retrieved April 22, 2021 from [Link] [31] Peter Morville. 2004. User Experience Design. Retrieved June 8, 2021 from
[Link]/literature/topics/ux-design [Link]
[2] 2018. State of Design Systems 2018. Retrieved April 22, 2021 from [Link] [32] Adams P. and Connolly E. 2017. Product trends with Intercom’s
[Link]/blog/state-of-design-systems-2018/ Paul Adams and Emmet Connolly. Retrieved June 4, 2021 from
[3] 2020. Laying the Foundation for Design System Ontology. In Trends and Innova- [Link]
tions in Information Systems and Technologies, Slifka J. and Pergl R. (Eds.). Vol. 05. intercoms-paul-adams-and-emmet-connolly/
WorldCIST 2020, 778–787. [33] Filho A. P. 2020. Mahoe: know the trajectory of Banco PAN’s Design Sys-
[4] Dix A. [n.d.]. You Need A Design System — Here’s Why. Retrieved June 8, 2021 tem. Retrieved April 22, 2021 from [Link]
from [Link] trajetoria-do-design-system-do-banco-pan-93a0f47296f9
[5] Kholmatova A. 2017. Design Systems: A practical guide to creating design languages [34] Ceccacci S., Giraldi L., and Mengoni M. 2016. Product Usability: Is it a Criterion to
for digital products. Smashing Magazine. Measure "Good UX" or a Prerequisite? Technical Report.
[6] Zielonko A. 2020. Design Systems. What, How, and Why Your Digital Product [35] Gibbons S. 2021. UX vs. UI. Retrieved July 1, 2021 from [Link]
Needs One. Retrieved April 22, 2021 from [Link] com/videos/ux-vs-ui/
is-a-design-system [36] Wood S. 2016. Design Doesn’t Scale. Retrieved April 22, 2021 from [Link]
[7] Frost B. 2016. Atomic Design. Brad Frost. com/@hellostanley/design-doesnt-scale-4d81e12cbc3e
[8] Ray B. 2018. How Much is a Design System Worth? Retrieved April 22, 2021 from [37] M. Suarez. 2016. Designed for Growth. Retrieved April 22, 2021 from https:
[Link] //[Link]/etsy-design/designed-for-growth-cdc2a01a8a8a
[9] Termini S. B. and Martin D. 2018. Getting Executive Buy-in for Your Design [38] Ogawa R. T. and Malen B. 1991. Towards Rigor in Reviews of Multivocal Lit-
System. Retrieved April 22, 2021 from [Link] eratures: Applying the Exploratory Case Study Method. Review of Educational
design/getting-executive-ok-design-system/ Research 61, 3 (1991), 265-286. [Link]
[10] Rusu C., Rusu V., Roncagliolo S., and González C. 2015. Usability and User [39] Garousi V., Felderer M., and Mäntylä M. V. 2019. Guidelines for including grey
Experience: What Should We Care About? International Journal of Information literature and conducting multivocal literature reviews in software engineering.
Technologies and Systems Approach (IJITSA) 8 (2015), 1–12. [Link] Information and Software Technology 106 (2019), 101–121. [Link]
4018/IJITSA.2015070101 1016/[Link].2018.09.006
[11] Slack C. 2019. Measuring the Value of Design Systems. Retrieved April 22, 2021 [40] Fanguy W. 2019. A comprehensive guide to design systems. Retrieved April 15, 2021
from [Link] from [Link]
[12] Wohlin C. 2014. Guidelines for snowballing in systematic literature studies and
a replication in software engineering. In Proceedings of the 18th International
Conference on Evaluation and Assessment in Software Engineering. 1–10. https:
//[Link]/10.1145/2601248.2601268
[13] E. F. Churchill. 2019. Scaling UX with Design Systems. Interactions 26, 5 (2019),
22–23. [Link]
[14] Quiñones D., Rusu C., Arancibia D., González S., and Saavedra M. J. 2019. A Set
of Usability and User EXperience Heuristics for Social Networks. 11578 (2019),
128–139. [Link]