🇩🇪 React Day Berlin 2022

Slide 1

Slide 1 text

Hello, React Day Berlin 🤘 🇩🇪 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT • THE 2ND OF DECEMBER, 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

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

Slide 4

Slide 4 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT ↑ ALL THE LINKS! 🤓 🍺 LET’S DISCUSS MORE AFTER!

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

This talk presents accessibility delivery adoption conclusions

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

#EXERCISE 📚 Let's think about press interactions.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 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 PRESS INTERACTIONS

Slide 14

Slide 14 text

TO PROPERLY HANDLE THEM, YOU’D HAVE TO: ↝ HANDLE CANCELING PRESS INTERACTIONS ON SCROLL ↝ NORMALIZE A TON OF CROSS-BROWSER INCONSISTENCIES ↝ AND SO ON… PRESS INTERACTIONS

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

↝ COMPOSITION PRIMITIVES ↝ REACT-ARIA DOWNSHIFT ↝ UNSTYLED COMPONENTS ↝ RADIX, REACH UI, HEADLESS UI, REAKIT ↝ FULLY STYLED COMPONENTS ↝ MUI, CHAKRA UI, NEXTUI, BASE WEB ACCESSIBLE LIBRARIES

Slide 20

Slide 20 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 21

Slide 21 text

↝ COMPOSITION PRIMITIVES ↝ WHEN REVAMPING SOME EXISTING CODEBASE TO BE ACCESSIBLE. ↝ UNSTYLED COMPONENTS ↝ WHEN STARTING A BRAND NEW DESIGN SYSTEM FROM SCRATCH. ↝ FULLY STYLED COMPONENTS ↝ WHEN NO FULL-TIME DESIGNERS AND WHERE THE GUIDELINES MATCH. ACCESSIBLE LIBRARIES

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

↝ BUILD PROCESS ↝ CATCH ACCESSIBILITY ERRORS AS YOU BUILD OUT YOUR APP. (e.g. axe-core, jsx-a11y, Lighthouse Audits, AccessLint) ↝ CONTINUOUS INTEGRATION ↝ FIND ACCESSIBILITY ISSUES IN YOUR GITHUB PULL REQUESTS. (e.g. axe-Linter, AccessLint) AUTOMATED TESTING

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

↝ QUICK CHECK ↝ QUICKLY CHECK FOR COMMON ERRORS IN YOUR BROWSER. (E.G. 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. MANUAL TESTING

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

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

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

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

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

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

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

DESIGN TOKENS STYLES COMPONENTS/VARIANTS

Slide 50

Slide 50 text

DESIGN TOKENS STYLES COMPONENTS/VARIANTS

Slide 51

Slide 51 text

COLORS

Slide 52

Slide 52 text

CODE GENERATION

Slide 53

Slide 53 text

ENGAGING DX

Slide 54

Slide 54 text

PROFIT

Slide 55

Slide 55 text

FONTS

Slide 56

Slide 56 text

SVGO PRETTIER FIGMINT OTHER TOOLS

Slide 57

Slide 57 text

FIGMINT FIGMA-EXPORT-ICONS OTHER TOOLS

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

↝ CI TO AUTOMATICALLY CHECK FOR UPDATES ↝ VERSIONING RELIES ON A COMPARISON SYSTEM WITH DIFF FILES ↝ CHANGELOGS AND VERSION BUMPING BASED ON THE DIFF FILE ITERATION #1

Slide 63

Slide 63 text

↝ SCHEDULED RUNS WERE REPLACED WITH WEBHOOKS ↝ DESIGNERS WERE ABLE TO CHANGE HUES, ADD COLORS, AND CHANGE FONT VARIABLES WITH NO ENGINEERS’ HELP ITERATION #2

Slide 64

Slide 64 text

↝ NOTIFICATIONS FOR FAILING BUILDS AND NEW RELEASES ↝ LINTING VIA CUSTOM FIGMA PLUGINS ↝ FULLY MOVING TO FIGMA TOKENS ITERATION #3

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

AFTER A FEW WEEKS BACK TO SASS, I FOUND MYSELF WITH TWO ISSUES: ↝ I HAD DECREASED PRODUCTIVITY WHEN STYLING COMPONENTS IF COMPARED TO TYPED APPROACHES ↝ I FOUND QUITE A FEW COMPONENTS ACCESSING NON-EXISTENT CLASSNAMES TYPE SAFETY

Slide 68

Slide 68 text

↝ FIND AND SET UP A WEBPACK LOADER THAT GENERATES TS TYPINGS FOR CSS MODULES ↝ FIX BROKEN BUILDS CAUSED BY INEXISTENT STYLES OR INSUFFICIENT TYPE SAFETY ↝ RUN SOME TESTS TO CHECK WHETHER IT WORKS AS EXPECTED OR NOT TYPE SAFETY (FIXING IT)

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 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' TEMPLATE LITERAL TYPES

Slide 74

Slide 74 text

/ / 😐 Manual and repetitive type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'; type Direction = 'left' | 'right' | 'top' | 'bottom'; type CssPadding = `padding-${Direction}` type CssMargin = `margin-${Direction}` TEMPLATE LITERAL TYPES

Slide 75

Slide 75 text

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

Slide 76

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

Slide 77 text

No content

Slide 78

Slide 78 text

#QUESTION 🤔 How do we define usage?

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

↝ FIND HOMEBREW COMPONENTS ↝ FIND DESIGN SYSTEM IMPORTS ↝ COLLECT USAGES OF BOTH ↝ CALCULATE PROPORTION ↝ REPEAT FOR COMMITS IN CODEBASE HISTORY USAGE SHARE

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

ABSOLUTE USAGE DESIGN SYSTEM HOMEBREW ↑ USAGE LEVELS ← WEEKS AGO — RADIUS TRACKER, BY RANGLE

Slide 90

Slide 90 text

DESIGN SYSTEM SHARE ↑ DESIGN SYSTEM SHARE ← WEEKS AGO — RADIUS TRACKER, BY RANGLE

Slide 91

Slide 91 text

SHARE % TIME ❌ BAD ✅ GOOD DESIGN SYSTEM SHARE

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT ENFORCE THE MOST IMPORTANT CODE THINGS BY TOOLS AND AUTOMATION PS.: DOCUMENT THE PROCESS! #4

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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