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.

 

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.

  • 3,244
Loading comments...

More from Tatiana Mac