🇩🇪 React Day Berlin 2022

ℹ️ Consistent UX at Scale: Lessons learned when I wore the DesignOps hat

The need for Design Systems comes with the need for scale, efficiency, and consistency in design. Those have been one of the major talking points in the design—and front-end—community for the past years. Some love it; some are more skeptical.

In this session, I'm gathering the common denominators I've noticed while working on Design Systems across small, medium, and huge companies, with an eye on points like consistency, themeability, accessibility, the path to deliver designs to actual code, and their adoption.

Transcript

1. Hello, React Day Berlin 🤘 🇩🇪 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT • THE 2ND OF DECEMBER, 2022.
2. MATHEUS ALBUQUERQUE CONSISTENT UX AT SCALE LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
3. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT ↑ ALL THE LINKS! 🤓 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia
4. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT ↑ ALL THE LINKS! 🤓 🍺 LET’S DISCUSS MORE AFTER!
5. #QUESTION 🤔 Who here has worked on a design system?
7. This talk is about challenges results of teamwork common denominators moving across the eng. 㲗 design spectrum
8. This talk presents accessibility delivery adoption conclusions
9. Accessibility CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
11. #EXERCISE 📚 Let's think about press interactions.
12. THEY CAN HAPPEN ON: ↝ MOUSE CLICKS ↝ TOUCH TAPS ↝ ENTER OR SPACE KEY PRESSES ↝ SCREEN READER VIRTUAL CLICKS PRESS INTERACTIONS
13. 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
14. 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
16. ↝ 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
17. #PROTIP💡 Try not to spend too much time implementing keyboard navigation, discussing focus traps, and researching appropriate ARIA techniques for your components.
18. #PROTIP💡 Find an existing component library that is accessible and can be styled to match your brand and your design tokens.
19. ↝ COMPOSITION PRIMITIVES ↝ REACT-ARIA DOWNSHIFT ↝ UNSTYLED COMPONENTS ↝ RADIX, REACH UI, HEADLESS UI, REAKIT ↝ FULLY STYLED COMPONENTS ↝ MUI, CHAKRA UI, NEXTUI, BASE WEB ACCESSIBLE LIBRARIES
20. #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.
21. ↝ 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
22. #PROTIP💡 Including automated accessibility testing throughout the development process can help quickly catch many accessibility errors.
23. ↝ 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
25. #PROTIP💡 Always try to combine automated testing with ongoing manual testing. Manual testing is still the most reliable method to assess accessibility.
29. ↝ 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
31. #EXERCISE 📚 Let's build a color palette with contrast in mind.
32. 0 1 2 3 4 5 6 7 8 9 9 8 7 6 5 4 3 2 1 0
33. 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]
34. 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]
35. 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]
36. 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]
37. 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]
38. #PROTIP💡 Some colors move significant steps in the scale. Some require quite large adjustments.
39. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
41. #PROTIP💡 Collaborate with designers and build tools to optimize their work.
42. Delivery CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
43. #QUESTION 🤔 How do you identify the source of truth in a Design System? Is it code, UI, or documentation?
44. Design to Code CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
45. #QUESTION 🤔 Anyone here works—or has peers working—with Figma?
46. #QUESTION 🤔 Anyone here knows—or has used—its REST API?
48. #QUOTE ✍ "Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale." — Design Tokens W3C Community Group
49. DESIGN TOKENS STYLES COMPONENTS/VARIANTS
50. DESIGN TOKENS STYLES COMPONENTS/VARIANTS
51. COLORS
52. CODE GENERATION
53. ENGAGING DX
54. PROFIT
55. FONTS
56. SVGO PRETTIER FIGMINT OTHER TOOLS
57. FIGMINT FIGMA-EXPORT-ICONS OTHER TOOLS
58. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
61. #GOTCHA 😱 Designers would still have to ask us to manually run the script!
62. ↝ 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
63. ↝ SCHEDULED RUNS WERE REPLACED WITH WEBHOOKS ↝ DESIGNERS WERE ABLE TO CHANGE HUES, ADD COLORS, AND CHANGE FONT VARIABLES WITH NO ENGINEERS’ HELP ITERATION #2
64. ↝ NOTIFICATIONS FOR FAILING BUILDS AND NEW RELEASES ↝ LINTING VIA CUSTOM FIGMA PLUGINS ↝ FULLY MOVING TO FIGMA TOKENS ITERATION #3
66. Type Safety CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
67. 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
68. ↝ 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)
69. Results CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
70. Results CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
71. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
72. / / 😐 Manual and repetitive type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'; TEMPLATE LITERAL TYPES
73. / / 😐 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
74. / / 😐 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
75. Adoption CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
76. #PROTIP💡 A Design System has to be actively used to make the UX and DX better. Otherwise, it's a waste of effort.
78. #QUESTION 🤔 How do we define usage?
79. / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / NOT Homebrew const Button = () = > <BaseButton>Click me<BaseButton/>; HOMEBREW COMPONENTS
80. ↝ FIND HOMEBREW COMPONENTS ↝ FIND DESIGN SYSTEM IMPORTS ↝ COLLECT USAGES OF BOTH ↝ CALCULATE PROPORTION ↝ REPEAT FOR COMMITS IN CODEBASE HISTORY USAGE SHARE
81. / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / NOT Homebrew const Button = () = > <BaseButton>Click me<BaseButton/>; USAGE SHARE
82. / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / Scenario #1 const StyledButton = BaseButton; const Button = () = > <StyledButton>Click me<StyledButton/>; USAGE SHARE
83. / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / Scenario #2 const StyledButton = () = > <View mainButton={BaseButton} /> USAGE SHARE
84. / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / Scenario #3 const withProps = (Component) = > (props) = > <Component { . . . props} />; const ButtonWithProps = withProps(BaseButton); const Button = () = > <ButtonWithProps>Click me</ButtonWithProps>; USAGE SHARE
85. / / Homebrew export const BaseButton = ({ children }) = > <button>{children}</button>; / / Scenario #4 import { BaseButton as Button } from './button' const StyledButton = () = > <Button>Click me</Button> USAGE SHARE
86. #PROTIP💡 Usage in code is a complicated concept. Find a static analysis tool that does the work for you.
87. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
88. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
89. ABSOLUTE USAGE DESIGN SYSTEM HOMEBREW ↑ USAGE LEVELS ← WEEKS AGO — RADIUS TRACKER, BY RANGLE
90. DESIGN SYSTEM SHARE ↑ DESIGN SYSTEM SHARE ← WEEKS AGO — RADIUS TRACKER, BY RANGLE
91. SHARE % TIME ❌ BAD ✅ GOOD DESIGN SYSTEM SHARE
92. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT Conclusions
93. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT IS YOUR DESIGN SYSTEM BEING ADOPTED? SPOILERS: EVANGELISM IS VERY HARD! #1
94. 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
95. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT "PERFECT IS THE ENEMY OF GOOD" — VOLTAIRE #3
96. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT "PERFECT IS THE ENEMY OF GOOD" EARLY PREVIEW = EARLY FEEDBACK #3
97. 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
98. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT CSS CLASSES, TOKEN DEFINITIONS, TYPEFACES… #5
99. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT TOOLING, ACTIVE SUPPORT, AND ADVOCACY CSS CLASSES, TOKEN DEFINITIONS, TYPEFACES… #5
100. 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
101. THAT’S ALL, FOLKS! THANKS! 🤘 🇩🇪 QUESTIONS? MATHEUS ALBUQUERQUE ↑ ALL THE LINKS! 🤓 CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT