Upgrade to Pro — share decks privately, control downloads, hide ads and more …

🇩🇪 React Day Berlin 2022

🇩🇪 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.

Matheus Albuquerque

December 02, 2022
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

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?

  6. None
  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
  10. None
  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
  15. None
  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
  24. None
  25. #PROTIP💡 Always try to combine automated testing with ongoing manual

    testing. Manual testing is still the most reliable method to assess accessibility.
  26. None
  27. None
  28. None
  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
  30. None
  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
  40. None
  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?

  47. None
  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
  59. None
  60. None
  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
  65. None
  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.
  77. None
  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