Building
Socially-Inclusive Design Systems

TATIANA MAC

By coming to this talk, you accept...

@tatianatmac

Journalist

Designer

Activist

@tatianatmac

What makes a design system successful AF?

@tatianatmac

Component-Based

@tatianatmac

Reducing design elements to the smallest replicable unit

Input label

Form pattern

Nav search bar

Atom

Molecule

Organism

@tatianatmac

Input label

Form pattern

Nav search bar

Atom

Molecule

Organism

@tatianatmac

Input label

Form pattern

Sign up form

Atom

Molecule

Organisms

Nav search bar

@tatianatmac

Input label

Form pattern

Sign up form

Atom

Molecule

Organisms

Nav search bar

@tatianatmac

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

Type

Colour

Spacing

Voice

Tone

 

Imagery

Motion

Video

Comprehensive

@tatianatmac

ATOM

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

EXCLUSION*

*unintentional

@tatianatmac

Think of your 12 closest friends.

@tatianatmac

@tatianatmac

USER

COMPONENTS

SMALLEST
INDIVIDUAL UNITS

@tatianatmac

DESIGNER

ATOM

HUMANS

Opinions are like                   . Everyone's got one.

biases

@tatianatmac

is a 4 letter word

bias

@tatianatmac

Journalistic objectivity

fairness, disinterestedness, factuality,
and
nonpartisanship, but most often encompasses all of these qualities.

@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.

@tatianatmac

Journalistic objectivity

Gonzo journalism

a style of journalism that is created without claims of objectivity, often including the journalist as part of the story via a first-person narrative.

@tatianatmac

Admit our biases—without shame.

@tatianatmac

Gonzo design

a style of design that is created without claims of objectivity, often including the designer(s) as part of the system via a first-person narrative.

@tatianatmac

Comprehensive

@tatianatmac

USER

all users are present

Affinity bias

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

@tatianatmac

Sit at a different table.

@tatianatmac

Follow somebody
different than you.

@tatianatmac

@tatianatmac

proporti.onl

@tatianatmac

race

gender

orientation

ability

socioeconomic

religion

philosophy

nationality

language

@tatianatmac

Diversity is
hard.

@tatianatmac

@tatianatmac

race

gender

orientation

ability

socioeconomic

religion

philosophy

nationality

language

Diversity is uncomfortable.

@tatianatmac

they · them · theirs

Normalize inside.
Normalize outside.

@tatianatmac

Get comfortable with being uncomfortable.

@tatianatmac

Comprehensive

@tatianatmac

USER

all users are present

race

gender

orientation

ability

socioeconomic

religion

 

philosophy

nationality

language

Diversity is being invited to the party. Inclusion is being asked to dance.

VERNĀ MYERS

VP, Inclusion, LinkedIn

@tatianatmac

Nothing about us,

without us.

@tatianatmac

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

Positive
feedback
loop

FEEDBACK

DESIGN

RESEARCH, proactive

RESEARCH, reactive

@tatianatmac

Perpetual
audit

FEEDBACK

DESIGN

RESEARCH, proactive

RESEARCH, reactive

@tatianatmac

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

The 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

What if?

@tatianatmac

Accessible

Inclusive

Adaptable

Component-Based

Comprehensive

Cooperative

Innovative

Creative

Interdiscipliary

@tatianatmac

 THE REST OF US
 

NEURO-
TYPICAL

MALE

HETERO

CIS

WHITE

ABLE-BODIED

@tatianatmac

 THE REST OF US
 

ALL
MINDS

ALL
EXPRESSIONS

ALL ORIENTATIONS

ALL GENDERS

ALL
RACES

ALL
BODIES

We are all responsible for tearing this shit down.

@tatianatmac

If you are neutral in situations of injustice, you have chosen the side of the oppressor.

@tatianatmac

DESMOND TUTU

South African Theologian

...If an elephant has its foot on the tail of a mouse and you say that you are neutral, the mouse will not appreciate your neutrality.

@tatianatmac

DESMOND TUTU

South African Theologian

@tatianatmac

Resources on Race

I intentionally didn't link these to encourage you to use either:
1    Support your local independent bookstore (NOT AMAZON!)
2    Use your local library!

· So You Want to Talk About Race, Ijeoma Oluo

· Why I No Longer Want To White People Talk About Race, Reni Eddo-Lodge

· How To Be Less Stupid About Race, Crystal M Fleming

· Seeing White Podcast

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.

  • 503
Loading comments...