Building
Socially-Inclusive Design Systems
TATIANA MAC
Designer
Journalist
Activist
SOLUTIONS
SEEK
JUSTICE
SEEK
JUSTICE
for
SOLUTIONS
Female
Male
Truth
False
Female
Male
Truth
False
Nonbinary
Nonexistent
How did we get here?
How do we fix it?
How do we prevent it?
Building
Socially-Inclusive Design Systems
TATIANA MAC
Component-Based
Reducing design elements to the smallest replicable unit
Dropdown
Form pattern
Product registration
Atom
Molecule
Organism
Form pattern
Sign up form
Atom
Molecule
Organisms
Product registration
Dropdown
Dropdown
Form pattern
Product registration
Atom
Molecule
Organism
Exclusionary
Exclusionary
Exclusionary
Product registration
Organisms
Exclusionary
Products
Beings
Exclusionary
Industry
Ecosystem
Exclusionary
Female
Male
Male
Nonbinary
Female
Custom choices
It depends™
Nonbinary
Custom choices
It depends™
He/Him
They/Them+
She/Her
Male
Null
Female
/cue eternal scream
gender !== pronouns
Words matter.
Dropdown
Form pattern
Product registration
Atom
Molecule
Organism
Product registration
Organisms
Exclusionary
Products
Beings
Exclusionary
Industry
Ecosystem
Exclusionary
Positive
feedback
loop
Exclusionary Ecosystem
Sustains
bad practices, defines systemic issues
Exclusionary Atoms
Introduces
bad pattern, driven by systemic flaws
Industry
Ecosystem
Society
World
Positive
feedback
loop
Exclusionary Society
Sustains
bad practices, defines systemic issues
Exclusionary Ecosystem
Introduces
bad pattern, driven by systemic flaws
🙄
🧐
Chad @DevRelWearsPata
Chad @DeadLyftLyfe
Intent does not erase impact.
Intent
impact.
USER
DESIGNER
Form
follows
function
follows
LOUIS S SULLIVAN
Intent
follows
Impact
USER
DESIGNER
follows
Move fast,
break things.
Didn't give a Zuck
about people.
USER
ATOM
COMPONENTS
SMALLEST
INDIVIDUAL UNITS
USER
ATOM
SMALLEST
INDIVIDUAL UNITS
COMPONENTS
Access
IMPACT
INTENT
ACCESSIBLE
Accessible
Component-Based
Comprehensive
Comprehensive
ATOM
all elements are present
type
colour
spacing
voice
tone
imagery
motion
video
ATOM
USER
COMPONENTS
SMALLEST
INDIVIDUAL UNITS
Comprehensive
USER
all users are present
GROUP
USER
USER
USER
USER
USER
USER
USER
USER
Who are we missing?
BENJAMIN EVANS
Delightful human,
Inclusive Design Lead, Airbnb
USER
Who are we missing?
BENJAMIN EVANS
Delightful human,
Inclusive Design Lead, Airbnb
Always somebody.
There's no place
for you here.
IMPACT
EXCLUSION*
*unintentional
IMPACT
USER
COMPONENTS
SMALLEST
INDIVIDUAL UNITS
DESIGNER
ATOM
HUMANS
Comprehensive
USER
all users are present
Nothing about us,
without us.
83% of tech executives are white
Men outnumber women 4:1 in STEM
TechRepublic
Forbes
Opinions are like . Everyone's got one.
biases
is a 4 letter word
bias
So, we pretend like
we don't have them.
when you unconsciously prefer people who share qualities with you or someone you like—relatable, familiar
affinity bias
fairness, disinterestedness, factuality, and nonpartisanship;
all of these qualities.
journalistic
objectivity
requires that a journalist not be on either side of an argument—must report only the facts and not a personal attitude toward the facts.
journalistic
objectivity
a style of journalism created without claims of objectivity, often including the journalist as part of the journalist via first-person narrative.
gonzo
journalism
Admit our biases without shame.
a style of design created without claims of objectivity, often including the designer as part of the system via first-person narrative.
gonzo
design
Show the makeup of your team.
race
orientation
ability
socioeconomic
religion
philosophy
nationality
language
gender
Comprehensive
ATOM
all elements are present
race
gender
orientation
ability
socioeconomic
religion
philosophy
nationality
language
Comprehensive
USER
all users are present
race
gender
orientation
ability
socioeconomic
religion
philosophy
nationality
language
INCLUSION
Accessible
Inclusive
Component-Based
Comprehensive
Cooperative
race
gender
orientation
ability
socioeconomic
religion
philosophy
nationality
language
Positive
feedback
loop
FEEDBACK
DESIGN
Designers
Customer Service Team
FEEDBACK
DESIGN
Designers
Customer Service Team
Theory
Reality
FEEDBACK
DESIGN
Designers
User
Theory
Reality
FEEDBACK
DESIGN
Designers
User
Theory
Reality
Impact
Intent
Positive
feedback
loop
FEEDBACK
DESIGN
RESEARCH
It's not their job
to educate you.
Positive
feedback
loop
FEEDBACK
DESIGN
RESEARCH, proactive
RESEARCH, reactive
Perpetual
audit
FEEDBACK
DESIGN
RESEARCH, proactive
RESEARCH, reactive
Learn how to properly apologise.
1️⃣ Resist the urge to centre yourself
2️⃣ Apologise for impact
3️⃣ Make a plan to fix
5️⃣Pay that knowledge forward
4️⃣Remember for next time
ADAPTABLE
Accessible
Inclusive
Adaptable
Component-Based
Comprehensive
Cooperative
greatest power
greatest
weakness
==
A design system acts as the connective tissue that holds together your entire platform
ablelist
A design system acts as the connective tissue that holds together your entire platform
ablelist
sexist
A design system acts as the connective tissue that holds together your entire platform
sexist
A design system acts as the connective tissue that holds together your entire platform
anti-trans
anti-trans
A design system acts as the connective tissue that holds together your entire platform
anti-queer
anti-queer
racist
A design system acts as the connective tissue that holds together your entire platform
racist
GROUP
USER
USER
USER
USER
USER
USER
USER
THE REST
OF US
NEURO-
TYPICAL
MALE
HETERO
CIS
WHITE
ABLE-BODIED
GROUP
Capitalist
white
supremacist
patriarchy
racist
sexist
ableist
anti-trans
anti-queer
Accessible
Inclusive
Adaptable
Component-Based
Comprehensive
Cooperative
Inaccessible
Exclusive
Rigid
Understand its impact fully.
Work to dismantle its connective tissue...
Within yourself and the systems you build.
...
Resist relentlessly, at the atomic level.
@tatianatmac
Patterns
Organisms
Inclusionary
Products
Beings
Inclusionary
Industry
Ecosystem
Inclusionary
Atom
Components
Inclusionary
NEURO-
TYPICAL
MALE
HETERO
CIS
WHITE
ABLE-BODIED
THE REST OF US
THE REST OF US
NEURO-
DIVERGENT
NON
BINARY
QUEER
TRANS
BLACK
DISABLED
What if?
THE REST OF US
NEURO-
DIVERGENT
NON
BINARY
QUEER
TRANS
BLACK
DISABLED
Accessible
Inclusive
Adaptable
Component-Based
Comprehensive
Cooperative
Innovative
Creative
Interdiscipliary
Let's burn this
shit down. 👩🏼🏭🔥
And build something better...
Oh, and this time?
Move intentionally, fix things.
Building Socially Inclusive Design Systems
By Tatiana Mac
Building Socially Inclusive Design Systems
Design systems have become the de facto approach for teams of all sizes to design anything and everything. As prototyping and development tools evolve to accommodate these systems, the barrier to entry is becoming lower and adaptation is becoming simpler. The love for design systems makes sense: they provide a scalable, flexible infrastructure that allows a team to create consistent work far into the future. Dissecting its social impact through its technical traits, we'll look at how to build a design system conscientiously, resisting systematic problems in order to create more accessible and inclusive systems.
