🌐 React Global Online Summit 2023

Slide 1

Slide 1 text

Hello, React Global 👋 🌐 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT • THE 19TH OF APRIL, 2023.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

↑ ALL THE LINKS! 🤓 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia ⚡ Perf GDE CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

This talk presents an overview accessibility dark mode delivery adoption conclusions

Slide 8

Slide 8 text

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

Slide 9

Slide 9 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 10

Slide 10 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 11

Slide 11 text

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

Slide 12

Slide 12 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 13

Slide 13 text

Slide 14

Slide 14 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 15

Slide 15 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 16

Slide 16 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 17

Slide 17 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 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 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 text

No content

Slide 24

Slide 24 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 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 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 28

Slide 28 text

REACT-ARIA DOWNSHIFT Composition Primitives

Slide 29

Slide 29 text

RADIX REACH UI Unstyled Components HEADLESS UI

Slide 30

Slide 30 text

HEADLESS UI REAKIT Unstyled Components

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

MUI CHAKRA UI Fully styled components NEXTUI

Slide 33

Slide 33 text

NEXTUI BASE WEB Fully styled components

Slide 34

Slide 34 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 35

Slide 35 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 36

Slide 36 text

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

Slide 37

Slide 37 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 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 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 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 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 49

Slide 49 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 50

Slide 50 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 51

Slide 51 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 52

Slide 52 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 53

Slide 53 text

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

Slide 54

Slide 54 text

WHICH IS BOLDER? WHICH IS BOLDER?

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 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 62

Slide 62 text

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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 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 69

Slide 69 text

No content

Slide 70

Slide 70 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 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 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 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

STYLES COMPONENTS/VARIANTS

Slide 84

Slide 84 text

#COLORS 🎨

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

1. FETCHING + MAPPING STYLES + CODE GENERATION

Slide 87

Slide 87 text

2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

Slide 88

Slide 88 text

3. PROFIT!

Slide 89

Slide 89 text

3. PROFIT!

Slide 90

Slide 90 text

#FONTS 🔤

Slide 91

Slide 91 text

1. FETCHING + MAPPING STYLES + CODE GENERATION

Slide 92

Slide 92 text

2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

Slide 93

Slide 93 text

3. PROFIT!

Slide 94

Slide 94 text

3. PROFIT!

Slide 95

Slide 95 text

SVGO PRETTIER Other Tools FIGMINT

Slide 96

Slide 96 text

Other Tools FIGMINT FIGMA-EXPORT-ICONS

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 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 ↝ RESULTS: DESIGNERS WERE ABLE TO CHANGE HUES, ADD COLORS, AND CHANGE FONT VARIABLES WITH NO ENGINEERS’ HELP

Slide 102

Slide 102 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! ↝ NOTIFICATIONS FOR FAILING BUILDS AND NEW RELEASES ↝ LINTING VIA CUSTOM FIGMA PLUGINS ↝ FULLY MOVING TO FIGMA TOKENS

Slide 103

Slide 103 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 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

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

Slide 109

Slide 109 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 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 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 113

Slide 113 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 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

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

Slide 118

Slide 118 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 119

Slide 119 text

Slide 120

Slide 120 text

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

Slide 121

Slide 121 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 122

Slide 122 text

No content

Slide 123

Slide 123 text

#QUESTION 🤔 How do we define usage?

Slide 124

Slide 124 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 125

Slide 125 text

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

Slide 126

Slide 126 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 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

DESIGN SYSTEM HOMEBREW ↑ USAGE LEVELS ← WEEKS AGO

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

↑ DESIGN SYSTEM SHARE ← WEEKS AGO

Slide 139

Slide 139 text

SHARE % TIME ❌ BAD ✅ GOOD

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 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 144

Slide 144 text

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

Slide 145

Slide 145 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 146

Slide 146 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 147

Slide 147 text

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

Slide 148

Slide 148 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 149

Slide 149 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 150

Slide 150 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 151

Slide 151 text

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

Slide 152

Slide 152 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 153

Slide 153 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 154

Slide 154 text

THAT’S ALL, FOLKS! THANKS! QUESTIONS? MATHEUS ALBUQUERQUE ↑ ALL THE LINKS! 🤓 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT