🇵🇱 DevConf PL 2022

Slide 1

Slide 1 text

Hello, DevConf 🙋 🇵🇱 🌎 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT • THE 2ND OF SEPTEMBER, 2022.

Slide 2

Slide 2 text

MATHEUS ALBUQUERQUE CONSISTENT UX AT SCALE LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 3

Slide 3 text

🙋 I’M MATHEUS ↝ @YTHECOMBINATOR ON THE WEB ↝ SR. SOFTWARE ENGINEER @ MEDALLIA ↝ MENTOR @ TECHLABS BERLIN

Slide 4

Slide 4 text

Mostly, I discuss features build developer tools measure & optimize perceived perf write TSX code talk about these above

Slide 5

Slide 5 text

A bit of context CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 6

Slide 6 text

#QUESTION 🤔 Who here works with front-end? And React?

Slide 7

Slide 7 text

#QUESTION 🤔 Who here has worked on a design system?

Slide 8

Slide 8 text

#EXERCISE 📚 Let’s talk about experiences!

Slide 9

Slide 9 text

COMPANY #1 ⚛ APPLICATION BUILT IN REACT NATIVE WEB 👥 DISCOVERY SIDE-PROJECT (~3 PEOPLE) ⚙ MONOREPO 😬 SHARED COMPONENTS (REACT/REACT NATIVE) Let’s talk about experiences COMPANY #2 ⚛ APPLICATIONS BUILT IN REACT

Slide 10

Slide 10 text

COMPANY #2 ⚛ APPLICATIONS BUILT IN REACT 👥 STARTUP (~8 PEOPLE, INCLUDING FE, BE, ETC.) ⚙ MULTIPLE REPOS 😬 NO DESIGN GUIDELINES; STARTING 100% FRESH Let’s talk about Experiences COMPANY #3 ⚛ APPLICATIONS BUILT IN REACT & ANGULAR

Slide 11

Slide 11 text

COMPANY #3 ⚛ APPLICATIONS BUILT IN REACT & ANGULAR 👥 HUGE CORP (TONS OF ENG & DESIGN TEAMS) ⚙ MULTIPLE REPOS 😬 DIFFERENT STACKS + MULTIPLE UI SDKS Let’s talk about Experiences COMPANY #4 ⚛ APPLICATIONS BUILT IN REACT

Slide 12

Slide 12 text

COMPANY #4 ⚛ APPLICATIONS BUILT IN REACT 👥 HUGE CORP (TONS OF ENG & DESIGN TEAMS) ⚙ MULTIPLE REPOS 😬 APPS NOT BUILT WITH ACCESSIBILITY IN MIND Let’s talk about Experiences

Slide 13

Slide 13 text

#QUESTION 🤔 Who here has been in at least one of those scenarios?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

THE PRODUCT YOU SEE THE DEBT YOU DON’T SEE

Slide 18

Slide 18 text

This talk is about challenges results of teamwork common denominators moving across the eng. 㲗 design spectrum

Slide 19

Slide 19 text

This talk presents an overview accessibility dark mode delivery adoption conclusions

Slide 20

Slide 20 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT Overview

Slide 21

Slide 21 text

Design Ops CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT AN INDIVIDUAL OR A DEPARTMENT RESPONSIBLE FOR PLANNING, DEFINING, AND MANAGING THE ENTIRE DESIGN PROCESS.

Slide 22

Slide 22 text

Design Ops CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT THEY STREAMLINE DESIGN, REMOVE INEFFICIENCIES, ENABLE THE DESIGNERS TO FLOW, AND HELP OPERATIONALIZE WORKFLOWS.

Slide 23

Slide 23 text

Design System CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 24

Slide 24 text

↝ DESIGN: THE PLAN OF LOOK AND FUNCTION OF SOMETHING ↝ SYSTEM: A COMBINATION OF PARTS WORKING TOGETHER ↝ DESIGN SYSTEM: A COLLECTIVE OF DEFINITIONS THAT WILL DICTATE PATTERNS IN WHICH THE INTERCONNECTING PARTS OF A SYSTEM WILL LOOK, FEEL, AND WORK

Slide 25

Slide 25 text

Slide 26

Slide 26 text

IT IS ABOUT EXPERIENCE! ↝ USER EXPERIENCE: WITH A RELIABLE AND FUNCTIONALLY CONSISTENT USER INTERFACE. ↝ DEVELOPER EXPERIENCE: WITH EASY-TO-INTEGRATE COMPONENTS AND DEFINED PATTERNS. ↝ STAKEHOLDER EXPERIENCE: WITH A GENERAL OVERVIEW OF HOW THE PRODUCT EVOLVES AND GROWS.

Slide 27

Slide 27 text

TWO APPROACHES: ↝ ORGANIC: TAKE AN EXISTING APP AS A REFERENCE, EXTRACT PIECES OF IT AND ABSTRACT THEM ENOUGH TO BE USED BY ANOTHER APP. ↝ INTENTIONAL: TOKENS, PATTERNS, AND COMPONENTS ARE THOUGHT AHEAD OF TIME.

Slide 28

Slide 28 text

1. CARRIES FEWER DECISIONS FROM THE GET-GO 2. REQUIRES MORE REACTIVE EFFORT FROM THE TEAM TO ACCOMMODATE NEWLY FOUND REQUIREMENTS 3. ARCHITECTURAL DECISIONS TEND TO BE MADE AS THE NEED ARISES ORGANIC

Slide 29

Slide 29 text

INTENTIONAL 1. HAVING GOALS AND REQUIREMENTS IS AN IMPORTANT STEP TO ALIGN EXPECTATIONS WITH STAKEHOLDERS 2. BOUNDARIES OF AN MVP ARE DEFINED AND THEN WORK STARTS 3. TOKENS, PATTERNS, AND COMPONENTS ARE THOUGHT AOT 1. CARRIES FEWER DECISIONS FROM THE GET-GO

Slide 30

Slide 30 text

Accessibility CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Keyboard Interactions CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 33

Slide 33 text

i18n (RTL layouts) CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 34

Slide 34 text

Typeahead CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 35

Slide 35 text

Autofill CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 36

Slide 36 text

Autofill CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

e.g. Press Interactions CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 39

Slide 39 text

THEY CAN HAPPEN ON: ↝ MOUSE CLICKS ↝ TOUCH TAPS ↝ ENTER OR SPACE KEY PRESSES ↝ SCREEN READER VIRTUAL CLICKS

Slide 40

Slide 40 text

TO PROPERLY HANDLE THEM, YOU’D HAVE TO: ↝ USE POINTER EVENTS WHERE AVAILABLE AND FALLBACK TO MOUSE AND TOUCH EVENTS ↝ DISABLE TEXT SELECTION ON MOBILE WHEN PRESSED ↝ HANDLE CANCELING PRESS INTERACTIONS ON SCROLL ↝ NORMALIZE A TON OF CROSS-BROWSER INCONSISTENCIES

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

↝ IT PROVIDES SEMANTICS ↝ IMPLEMENTATIONS PROVIDED BY THE WEB PLATFORM ARE EITHER NON-EXISTENT, LACKING IN FUNCTIONALITY, OR CANNOT BE CUSTOMIZED SUFFICIENTLY ↝ DEVELOPERS ARE FORCED TO BUILD CUSTOM COMPONENTS; AN INCREDIBLY DIFFICULT TASK

Slide 43

Slide 43 text

#PROTIP💡 Try not to spend too much time implementing keyboard navigation, discussing focus traps, and researching appropriate ARIA techniques for your components.

Slide 44

Slide 44 text

#PROTIP💡 Find an existing component library that is accessible and can be styled to match your brand and your design tokens.

Slide 45

Slide 45 text

THEY CAN BE: ↝ COMPOSITION PRIMITIVES: THE LOWEST LEVEL YOU CAN GET. YOU COMPOSE PRIMITIVES TO BUILD THE COMPONENT YOU NEED. ↝ UNSTYLED COMPONENTS: APPLY YOUR STYLING ON TOP OF THE PRE- BUILD UNSTYLED COMPONENTS. ↝ FULLY STYLED COMPONENTS: GET THE LIBRARY YOU LIKE, TUNE THE STYLING THROUGH THEIR THEMING SYSTEM AND GO.

Slide 46

Slide 46 text

REACT-ARIA DOWNSHIFT Composition Primitives

Slide 47

Slide 47 text

RADIX REACH UI Unstyled Components HEADLESS UI

Slide 48

Slide 48 text

HEADLESS UI REAKIT Unstyled Components

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

MUI CHAKRA UI Fully styled components NEXTUI

Slide 51

Slide 51 text

NEXTUI BASE WEB Fully styled components

Slide 52

Slide 52 text

#PROTIP💡 Which one you'll pick depends on the context, just keep in mind that accessibility is mandatory and they should be able to be styled to match your brand.

Slide 53

Slide 53 text

MY EXPERIENCE: ↝ COMPOSITION PRIMITIVES: WHEN REVAMPING SOME HUGE EXISTING COMPONENT CODEBASE TO BE ACCESSIBLE. ↝ UNSTYLED COMPONENTS: WHEN STARTING A BRAND NEW DESIGN SYSTEM FROM SCRATCH. ↝ FULLY STYLED COMPONENTS: ALL OF MY PERSONAL PROJECTS, INTERNAL TOOLS, HUGE FREELANCING PROJECTS, PROJECTS WITH NO FULL-TIME DESIGNERS, AND WHERE THE DESIGN GUIDELINES ARE A MATCH.

Slide 54

Slide 54 text

#PROTIP💡 Including automated accessibility testing throughout the development process can help quickly catch many accessibility errors.

Slide 55

Slide 55 text

↝ BUILD PROCESS: INTEGRATE A TOOL LIKE AXE-CORE, JSX- A11Y, LIGHTHOUSE AUDITS, OR ACCESSLINT.JS INTO YOUR PROJECT TO PROGRAMMATICALLY ADD ACCESSIBILITY TESTS AND CATCH ERRORS AS YOU BUILD OUT YOUR APP. ↝ CONTINUOUS INTEGRATION: USE A TOOL LIKE AXE-LINTER OR ACCESSLINT TO FIND ACCESSIBILITY ISSUES IN YOUR GITHUB PULL REQUESTS.

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

#PROTIP💡 Always try to combine automated testing with ongoing manual testing. Manual testing is still the most reliable method to assess accessibility.

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

↝ QUICK CHECK: USE A TOOL TO QUICKLY CHECK FOR COMMON ERRORS IN YOUR BROWSER. YOU CAN USE AXE, LIGHTHOUSE ACCESSIBILITY AUDIT, ACCESSIBILITY INSIGHTS, OR WAVE. ↝ SIMULATE IMPAIRMENTS: USE TOOLS TO SIMULATE COLOR BLINDNESS, LOW VISION, ZOOM, LOW CONTRAST, HIGH CONTRAST, AND MORE.

Slide 62

Slide 62 text

Dark Mode CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

#EXERCISE 📚 Let's build a color palette with contrast in mind.

Slide 65

Slide 65 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0

Slide 66

Slide 66 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0 LINK: BLUE[5] LINK: BLUE[4]

Slide 67

Slide 67 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0 ICON: GRAY[6] ICON: GRAY[3]

Slide 68

Slide 68 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0 ICON: GRAY[6] ICON: GRAY[3] ICON: GRAY[4]

Slide 69

Slide 69 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0 ACCENT: ORANGE[6] ACCENT: ORANGE[3]

Slide 70

Slide 70 text

0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0 ACCENT: ORANGE[6] ACCENT: ORANGE[3] ACCENT: ORANGE[6]

Slide 71

Slide 71 text

#PROTIP💡 Some colors move significant steps in the scale. Some require quite large adjustments.

Slide 72

Slide 72 text

WHICH IS BOLDER? WHICH IS BOLDER?

Slide 73

Slide 73 text

✅ WE CAN CONTROL ↝ PALETTE ↝ COMPOSITION ❌ WE CAN’T CONTROL ↝ CONTEXT ↝ OBSERVATION

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

#PROTIP💡 Dark mode is not an inversion—it's dimming the lights.

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

1. MUNSELL COLOR SYSTEM 2. THREE INDEPENDENT PROPERTIES OF COLOR WHICH CAN BE REPRESENTED CYLINDRICALLY IN THREE DIMENSIONS: ↝ HUE (BASIC COLOR) ↝ CHROMA (COLOR INTENSITY) ↝ VALUE (LIGHTNESS)

Slide 79

Slide 79 text

#QUOTE ✍ "[…] Desire to fit a chosen contour, such as the pyramid, cone, cylinder or cube, coupled with a lack of proper tests, has led to many distorted statements of color relations […]" — Albert H. Munsell, “A Pigment Color System and Notation

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

#PROTIP💡 Collaborate with designers and build extensions to their tools to optimize their work.

Slide 84

Slide 84 text

const theme = { colors: { black: "#1b1f23", white: "#fff", gray: ["#fafbfc", "#f6f8fa", "#e1e4e8"], green: ["#fOfff4", "#dcffe4", "#bef5cb"], dark: { black: "#000", white: "#fff", gray: ["#fafbfc", "#f6f8fa", "#e1e4e8"], green: ["#f5fff8", "#e5ffeb", "#cbf7d5"], }, }, };

Slide 85

Slide 85 text

ERROR? DANGER? CLOSE? DELETE? INFO? LINK? DEFAULT? NOTICE? SUCCESS? OPEN? SAVE? PRIMARY?

Slide 86

Slide 86 text

Slide 87

Slide 87 text

const theme = { colors: { text: gray[9], white: white, primary: green[5], dark: { text: gray[1], white: black, primary: green[4], }, }, };

Slide 88

Slide 88 text

#PROTIP💡 If we want to achieve color modes and theming, we need an abstraction that is functional and not presentational.

Slide 89

Slide 89 text

Delivery CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 90

Slide 90 text

Collaboration Workflow CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 91

Slide 91 text

THE STATE OF ADVERTISING IN THE 1940s: 1. THE COPYWRITER TOOK WHAT THE CLIENTS WANTED TO SAY 2. THEY TURNED IT INTO A HEADLINE AND BODY COPY 3. THEY’D HAND THAT COPY TO AN ACCOUNT EXECUTIVE 4. THE EXECUTIVE WOULD FORWARD THAT TO THE ART DEPARTMENT 5. ARTISTS THEN FOLLOWED THE COPYWRITER’S ORDERS COPYWRITER AND THE ARTIST RARELY COLLABORATED.

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

#QUOTE ✍ “This was my first encounter with a copywriter who understood visual ideas and who didn’t come in with a yellow copy pad and a preconceived notion of what the layout should look like.” — Paul Rand

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

DESIGNER DEVELOPER WEEKS → Waterfall — THE HOT POTATO PROCESS, BY DAN MALL

Slide 97

Slide 97 text

WEEKS → Hot Potato DESIGNER DEVELOPER — THE HOT POTATO PROCESS, BY DAN MALL

Slide 98

Slide 98 text

#PROTIP💡 Try to have a flow where ideas are passed quickly back and forth from designer to developer for the entirety of a product creation cycle.

Slide 99

Slide 99 text

#QUESTION 🤔 How do you identify the source of truth in a Design System? Is it code, UI, or documentation?

Slide 100

Slide 100 text

Design to Code CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 101

Slide 101 text

#QUESTION 🤔 Anyone here works—or has peers working—with Figma?

Slide 102

Slide 102 text

#QUESTION 🤔 Anyone here knows—or has used—its REST API?

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

#QUOTE ✍ "Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale." — Design Tokens W3C Community Group

Slide 106

Slide 106 text

STYLES COMPONENTS/VARIANTS

Slide 107

Slide 107 text

#COLORS 🎨

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

1. FETCHING + MAPPING STYLES + CODE GENERATION

Slide 110

Slide 110 text

2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

Slide 111

Slide 111 text

3. PROFIT!

Slide 112

Slide 112 text

3. PROFIT!

Slide 113

Slide 113 text

#FONTS 🔤

Slide 114

Slide 114 text

1. FETCHING + MAPPING STYLES + CODE GENERATION

Slide 115

Slide 115 text

2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

Slide 116

Slide 116 text

3. PROFIT!

Slide 117

Slide 117 text

3. PROFIT!

Slide 118

Slide 118 text

SVGO PRETTIER Other Tools FIGMINT

Slide 119

Slide 119 text

Other Tools FIGMINT FIGMA-EXPORT-ICONS

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

#GOTCHA 😱 Designers would still have to ask us to manually run the script!

Slide 124

Slide 124 text

ITERATION #1 ↝ CI TO AUTOMATICALLY CHECK FOR UPDATES ↝ VERSIONING RELIES ON A COMPARISON SYSTEM WITH DIFF FILES ↝ CHANGELOGS AND VERSION BUMPING BASED ON THE DIFF FILE Versioning & Packaging ITERATION #2 ↝ SCHEDULED RUNS WERE REPLACED WITH WEBHOOKS

Slide 125

Slide 125 text

ITERATION #2 ↝ SCHEDULED RUNS WERE REPLACED WITH WEBHOOKS ↝ RESULTS: DESIGNERS WERE ABLE TO CHANGE HUES, ADD COLORS, AND CHANGE FONT VARIABLES WITH NO ENGINEERS’ HELP Versioning & Packaging ITERATION #3 ↝ AUTOMATION CALLS FOR MORE AUTOMATION!

Slide 126

Slide 126 text

ITERATION #3 ↝ AUTOMATION CALLS FOR MORE AUTOMATION! ↝ NOTIFICATIONS FOR FAILING BUILDS AND NEW RELEASES ↝ LINTING VIA CUSTOM FIGMA PLUGINS ↝ FULLY MOVING TO FIGMA TOKENS Versioning & Packaging

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

#PROTIP💡 Aim at version control systems that allow designers to work just like developers, and keep track of all changes.

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

Type Safety CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 133

Slide 133 text

AFTER A FEW WEEKS ONBOARD A SASS-BASED CODEBASE, I FOUND MYSELF WITH TWO ISSUES: 1. I HAD DECREASED PRODUCTIVITY WHEN STYLING COMPONENTS IF COMPARED TO OTHER CODEBASES USING UI KITS OR CSS-IN-JS APPROACHES 2. I FOUND QUITE A FEW COMPONENTS ACCESSING NON- EXISTENT STYLES; WHICH COULD RESULT IN UNEXPECTED EXPERIENCES TO THE USERS

Slide 134

Slide 134 text

1. I HAD DECREASED PRODUCTIVITY WHEN STYLING COMPONENTS IF COMPARED TO OTHER CODEBASES USING UI KITS OR CSS-IN-JS APPROACHES

Slide 135

Slide 135 text

2. I FOUND QUITE A FEW COMPONENTS ACCESSING NON- EXISTENT STYLES; WHICH COULD RESULT IN UNEXPECTED EXPERIENCES TO THE USERS.

Slide 136

Slide 136 text

2. I FOUND QUITE A FEW COMPONENTS ACCESSING NON- EXISTENT STYLES; WHICH COULD RESULT IN UNEXPECTED EXPERIENCES TO THE USERS. A TOTAL OF 96 ERRORS ON THE FIRST BUILD OF A CONDUCTED POC ILLUSTRATED HOW OFTEN THIS USED TO HAPPEN.

Slide 137

Slide 137 text

THE OVERALL EFFORT: 1. FIND AND SET UP A WEBPACK LOADER THAT GENERATES TS TYPINGS FOR CSS MODULES 2. FIX BROKEN BUILDS CAUSED BY EITHER INEXISTENT STYLES OR BY INSUFFICIENT TYPE SAFETY 3. RUN SOME TESTS TO CHECK WHETHER IT WORKS AS EXPECTED OR NOT

Slide 138

Slide 138 text

THE OVERALL EFFORT: 1. FIND AND SET UP A WEBPACK LOADER THAT GENERATES TS TYPINGS FOR CSS MODULES → ENABLES ITERATIVE DX 2. FIX BROKEN BUILDS CAUSED BY EITHER INEXISTENT STYLES OR BY INSUFFICIENT TYPE SAFETY 3. RUN SOME TESTS TO CHECK WHETHER IT WORKS AS EXPECTED OR NOT

Slide 139

Slide 139 text

THE OVERALL EFFORT: 1. FIND AND SET UP A WEBPACK LOADER THAT GENERATES TS TYPINGS FOR CSS MODULES → ENABLES ITERATIVE DX 2. FIX BROKEN BUILDS CAUSED BY EITHER INEXISTENT STYLES OR BY INSUFFICIENT TYPE SAFETY → E.G. INTERPOLATED VARIABLES 3. RUN SOME TESTS TO CHECK WHETHER IT WORKS AS EXPECTED OR NOT

Slide 140

Slide 140 text

Results CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 141

Slide 141 text

Results CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

/ / 😐 Manual and repetitive type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom';

Slide 144

Slide 144 text

/ / 😐 Manual and repetitive type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | ‘padding-bottom'; type Direction = 'left' | 'right' | 'top' | 'bottom'; type CssPadding = `padding-${Direction}` / / Result: 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'

Slide 145

Slide 145 text

Slide 146

Slide 146 text

Adoption CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 147

Slide 147 text

#PROTIP💡 A Design System has to be actively used to make the UX and DX better. Otherwise, it's a waste of effort.

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

#QUESTION 🤔 How do we define usage?

Slide 150

Slide 150 text

Homebrew Components CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT / / Homebrew const BaseButton = ({ children }) = > {children}; / / NOT Homebrew const Button = () = > Click me;

Slide 151

Slide 151 text

/ / Homebrew const BaseButton = ({ children }) = > {children}; / / NOT Homebrew const Button = () = > Click me;

Slide 152

Slide 152 text

CALCULATE THE USAGE SHARE: 1. FIND HOMEBREW COMPONENTS 2. FIND DESIGN SYSTEM IMPORTS 3. COLLECT USAGES OF BOTH 4. CALCULATE PROPORTION 5. REPEAT FOR COMMITS IN CODEBASE HISTORY

Slide 153

Slide 153 text

/ / Homebrew const BaseButton = ({ children }) = > {children}; / / NOT Homebrew const Button = () = > Click me;

Slide 154

Slide 154 text

/ / Homebrew const BaseButton = ({ children }) = > {children}; / / Scenario #1 const StyledButton = BaseButton; const Button = () = > Click me;

Slide 155

Slide 155 text

/ / Homebrew const BaseButton = ({ children }) = > {children}; / / Scenario #2 const StyledButton = () = >

Slide 156

Slide 156 text

/ / Homebrew const BaseButton = ({ children }) = > {children}; / / Usage scenario #3 const withProps = (Component) = > (props) = > ; const ButtonWithProps = withProps(BaseButton); const Button = () = > Click me;

Slide 157

Slide 157 text

/ / Homebrew export const BaseButton = ({ children }) = > {children}; / / Usage scenario #4 import { BaseButton as Button } from './button' const StyledButton = () = > Click me

Slide 158

Slide 158 text

#PROTIP💡 Usage in code is a complicated concept. Find a static analysis tool that does the work for you.

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

Absolute Usage CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT — RADIUS TRACKER, BY RANGLE

Slide 162

Slide 162 text

DESIGN SYSTEM HOMEBREW ↑ USAGE LEVELS ← WEEKS AGO

Slide 163

Slide 163 text

Design System Share CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT — RADIUS TRACKER, BY RANGLE

Slide 164

Slide 164 text

↑ DESIGN SYSTEM SHARE ← WEEKS AGO

Slide 165

Slide 165 text

SHARE % TIME ❌ BAD ✅ GOOD

Slide 166

Slide 166 text

#PROTIP💡 Usage share is about the entire team, not just the engineers and thus it should be part of your regular governance.

Slide 167

Slide 167 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT Conclusions

Slide 168

Slide 168 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 1. IS YOUR DESIGN SYSTEM BEING ADOPTED?

Slide 169

Slide 169 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 1. EVANGELISM IS VERY HARD! IS YOUR DESIGN SYSTEM BEING ADOPTED?

Slide 170

Slide 170 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 2. BUILD IN ACCESSIBILITY AS YOU GO

Slide 171

Slide 171 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 2. IF YOU PRIORITIZE AT THE COMPONENT LEVEL YOU GET IT FOR “FREE” BUILD IN ACCESSIBILITY AS YOU GO

Slide 172

Slide 172 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 3. DARK MODE IS NOT AN INVERSION; IT'S DIMMING THE LIGHTS

Slide 173

Slide 173 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 4. "PERFECT IS THE ENEMY OF GOOD" — VOLTAIRE

Slide 174

Slide 174 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 4. EARLY PREVIEW = EARLY FEEDBACK "PERFECT IS THE ENEMY OF GOOD"

Slide 175

Slide 175 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 5. ENFORCE THE MOST IMPORTANT CODE THINGS BY TOOLS AND AUTOMATION

Slide 176

Slide 176 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 5. DOCUMENT THE PROCESS IMPORTANT CODE THINGS BY TOOLS AND AUTOMATION

Slide 177

Slide 177 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 6. CSS CLASSES, TOKEN DEFINITIONS, TYPEFACES…

Slide 178

Slide 178 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 6. CSS CLASSES, TOKEN DEFINITIONS, TYPEFACES… TOOLING, ACTIVE SUPPORT, AND ADVOCACY

Slide 179

Slide 179 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT 7. "IN GOD WE TRUST. ALL OTHERS MUST BRING DATA." — W. EDWARDS DEMING

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

We’re hiring! 🗺 Mostly in… 🇺🇸🇲🇽🇦🇷🇺🇾🇪🇸🇨🇿🇮🇱🇮🇳