Building
Socially-Inclusive Design Systems

TATIANA MAC

Designer

Journalist

Activist

SOLUTIONS

SEEK


JUSTICE

SEEK 


JUSTICE

for

SOLUTIONS

@tatianatmac

Female

Male

Truth

False

@tatianatmac

Female

Male

Truth

False

Nonbinary

Nonexistent

@tatianatmac

How did we get here?

@tatianatmac

How do we fix it?

How do we prevent it?

Component-Based

@tatianatmac

Reducing design elements to the smallest replicable unit

Dropdown

Form pattern

Product registration

Atom

Molecule

Organism

@tatianatmac

Form pattern

Sign up form

Atom

Molecule

Organisms

@tatianatmac

Product registration

Dropdown

Dropdown

Form pattern

Product registration

Atom

Molecule

Organism

@tatianatmac

Exclusionary

Exclusionary

Exclusionary

Product registration

Organisms

@tatianatmac

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 !== gender pronouns

Positive
feedback
loop

Exclusionary Ecosystem

Sustains
 bad practices, defines systemic issues

Exclusionary Atoms

Introduces
bad pattern, driven by systemic flaws

@tatianatmac

🙄

🧐

Chad @DevRelWearsPata

Chad @DeadLyftLyfe

Intent does not erase impact.

Intent

impact.

USER

DESIGNER

@tatianatmac

Form
follows
function

follows

@tatianatmac

Intent
follows
Impact

USER

DESIGNER

follows

@tatianatmac

USER

ATOM

COMPONENTS

SMALLEST
INDIVIDUAL UNITS

@tatianatmac

USER

ATOM

SMALLEST
INDIVIDUAL UNITS

COMPONENTS

Access

IMPACT

INTENT

@tatianatmac

ACCESSIBLE

@tatianatmac

Accessible

Component-Based

Comprehensive

@tatianatmac

Comprehensive

@tatianatmac

ATOM

all elements are present

type

colour

spacing

voice

tone

imagery

motion

video

ATOM

USER

COMPONENTS

SMALLEST
INDIVIDUAL UNITS

@tatianatmac

Comprehensive

@tatianatmac

USER

all users are present

GROUP

@tatianatmac

USER

USER

USER

USER

USER

USER

USER

USER

Who are we missing?

BENJAMIN EVANS

Delightful human,
Inclusive Design Lead, Airbnb

@tatianatmac

USER

Who are we missing?

BENJAMIN EVANS

Delightful human,
Inclusive Design Lead, Airbnb

Always somebody.

@tatianatmac

There's no place
for you here.

@tatianatmac

IMPACT

EXCLUSION*

*unintentional

@tatianatmac

IMPACT

USER

COMPONENTS

SMALLEST
INDIVIDUAL UNITS

@tatianatmac

DESIGNER

ATOM

HUMANS

Comprehensive

@tatianatmac

USER

all users are present

Nothing about us,

without us.

@tatianatmac

@tatianatmac

83% of tech executives are white

Men outnumber women 4:1 in STEM

TechRepublic

Forbes

when you unconsciously prefer people who share qualities with you or someone you like—relatable,  familiar

@tatianatmac

affinity bias

Opinions are like                   . Everyone's got one.

biases

@tatianatmac

is a 4 letter word

bias

@tatianatmac

@tatianatmac

So, we pretend like
we don't have them.

@tatianatmac

fairness, disinterestedness, factuality, and nonpartisanship;
all of these qualities.

journalistic
objectivity

@tatianatmac

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

@tatianatmac

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.

@tatianatmac

@tatianatmac

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.

@tatianatmac

race

 

orientation

ability

socioeconomic

religion

philosophy

nationality

language

@tatianatmac

gender

Comprehensive

@tatianatmac

ATOM

all elements are present

race

gender

orientation

ability

socioeconomic

religion

 

philosophy

nationality

language

Comprehensive

@tatianatmac

USER

all users are present

race

gender

orientation

ability

socioeconomic

religion

 

philosophy

nationality

language

INCLUSION

@tatianatmac

Accessible

Inclusive

Component-Based

Comprehensive

Cooperative

@tatianatmac

@tatianatmac

race

gender

orientation

ability

socioeconomic

religion

philosophy

nationality

language

Positive
feedback
loop

FEEDBACK

DESIGN

Designers

Customer Service Team

@tatianatmac

FEEDBACK

DESIGN

Designers

Customer Service Team

Theory

Reality

@tatianatmac

FEEDBACK

DESIGN

Designers

User

Theory

Reality

@tatianatmac

FEEDBACK

DESIGN

Designers

User

Theory

Reality

Impact

Intent

@tatianatmac

Positive
feedback
loop

FEEDBACK

DESIGN

RESEARCH

@tatianatmac

It's not their job
to educate you.

@tatianatmac

Positive
feedback
loop

FEEDBACK

DESIGN

RESEARCH, proactive

RESEARCH, reactive

@tatianatmac

Perpetual
audit

FEEDBACK

DESIGN

RESEARCH, proactive

RESEARCH, reactive

@tatianatmac

@tatianatmac

@tatianatmac

@tatianatmac

Learn how to properly apologise.

@tatianatmac

1️⃣ Resist the urge to centre yourself
      or to make excuses

2️⃣ Apologise for impact

3️⃣ Make a plan to fix

4️⃣ Remember for next time

ADAPTABLE

@tatianatmac

Accessible

Inclusive

Adaptable

Component-Based

Comprehensive

Cooperative

@tatianatmac

Within a design system's greatest power is also its greatest weakness.

@tatianatmac

A design system acts as the connective tissue that holds together your entire platform

@tatianatmac

ablelist

A design system acts as the connective tissue that holds together your entire platform

ablelist

@tatianatmac

sexist

A design system acts as the connective tissue that holds together your entire platform

sexist

@tatianatmac

A design system acts as the connective tissue that holds together your entire platform

transphobic

transphobic

@tatianatmac

racist

A design system acts as the connective tissue that holds together your entire platform

racist

@tatianatmac

@tatianatmac

GROUP

@tatianatmac

USER

USER

USER

USER

USER

USER

USER

@tatianatmac

THE REST
OF US

NEURO-
TYPICAL

MALE

HETERO

CIS

WHITE

ABLE-BODIED

GROUP

Capitalist
white
supremacist
patriarchy

racist

sexist

ableist

transphobic

homophobic

@tatianatmac

Accessible

Inclusive

Adaptable

Component-Based

Comprehensive

Cooperative

Inaccessible

Exclusive

Rigid

Understand its impact fully.

@tatianatmac

Work to dismantle its connective tissue...

@tatianatmac

Within yourself and the systems you build.

...

@tatianatmac

Resist relentlessly, at the atomic level.

@tatianatmac

Patterns

Organisms

Inclusionary

Products

Beings

Inclusionary

Industry

Ecosystem

Inclusionary

Atom

Components

Inclusionary

@tatianatmac

 THE REST OF US
 

NEURO-
TYPICAL

MALE

HETERO

CIS

WHITE

ABLE-BODIED

@tatianatmac

 THE REST OF US
 

NEURO-
DIVERSE

NONBINARY

QUEER

TRANS

BLACK

DISABLED

What if?

@tatianatmac

@tatianatmac

 THE REST OF US
 

NEURO-
DIVERSE

NONBINARY

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?

@tatianatmac

Move intentionally, fix things.