$30 off During Our Annual Pro Sale. View Details »

๐Ÿ‡ต๐Ÿ‡ฑ DevConf PL 2022

๐Ÿ‡ต๐Ÿ‡ฑ DevConf PLย 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

September 02, 2022
Tweet

More Decks by Matheus Albuquerque

Other Decks in Technology

Transcript

  1. Hello, DevConf ๐Ÿ™‹ ๐Ÿ‡ต๐Ÿ‡ฑ ๐ŸŒŽ CONSISTENT UX AT SCALE: LESSONS

    LEARNED WHEN I WORE THE DESIGNOPS HAT โ€ข THE 2ND OF SEPTEMBER, 2022.
  2. MATHEUS ALBUQUERQUE CONSISTENT UX AT SCALE LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT
  3. ๐Ÿ™‹ Iโ€™M MATHEUS โ† @YTHECOMBINATOR ON THE WEB โ† SR.

    SOFTWARE ENGINEER @ MEDALLIA โ† MENTOR @ TECHLABS BERLIN
  4. Mostly, I discuss features build developer tools measure & optimize

    perceived perf write TSX code talk about these above
  5. A bit of context CONSISTENT UX AT SCALE: LESSONS LEARNED

    WHEN I WORE THE DESIGNOPS HAT
  6. #QUESTION ๐Ÿค” Who here works with front-end? And React?

  7. #QUESTION ๐Ÿค” Who here has worked on a design system?

  8. #EXERCISE ๐Ÿ“š Letโ€™s talk about experiences!

  9. 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
  10. 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
  11. 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
  12. 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
  13. #QUESTION ๐Ÿค” Who here has been in at least one

    of those scenarios?
  14. None
  15. None
  16. None
  17. THE PRODUCT YOU SEE THE DEBT YOU DONโ€™T SEE

  18. This talk is about challenges results of teamwork common denominators

    moving across the eng. ใฒ— design spectrum
  19. This talk presents an overview accessibility dark mode delivery adoption

    conclusions
  20. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE

    DESIGNOPS HAT Overview
  21. 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.
  22. 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.
  23. Design System CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT
  24. โ† 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
  25. โ† 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 MORE THAN LOOKS
  26. 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.
  27. 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.
  28. 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
  29. 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
  30. Accessibility CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE

    THE DESIGNOPS HAT
  31. None
  32. Keyboard Interactions CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

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

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

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

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

    THE DESIGNOPS HAT
  37. None
  38. e.g. Press Interactions CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN

    I WORE THE DESIGNOPS HAT
  39. THEY CAN HAPPEN ON: โ† MOUSE CLICKS โ† TOUCH TAPS

    โ† ENTER OR SPACE KEY PRESSES โ† SCREEN READER VIRTUAL CLICKS
  40. 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
  41. None
  42. โ† 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
  43. #PROTIP๐Ÿ’ก Try not to spend too much time implementing keyboard

    navigation, discussing focus traps, and researching appropriate ARIA techniques for your components.
  44. #PROTIP๐Ÿ’ก Find an existing component library that is accessible and

    can be styled to match your brand and your design tokens.
  45. 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.
  46. REACT-ARIA DOWNSHIFT Composition Primitives

  47. RADIX REACH UI Unstyled Components HEADLESS UI

  48. HEADLESS UI REAKIT Unstyled Components

  49. None
  50. MUI CHAKRA UI Fully styled components NEXTUI

  51. NEXTUI BASE WEB Fully styled components

  52. #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.
  53. 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.
  54. #PROTIP๐Ÿ’ก Including automated accessibility testing throughout the development process can

    help quickly catch many accessibility errors.
  55. โ† 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.
  56. None
  57. #PROTIP๐Ÿ’ก Always try to combine automated testing with ongoing manual

    testing. Manual testing is still the most reliable method to assess accessibility.
  58. None
  59. None
  60. None
  61. โ† 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.
  62. Dark Mode CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT
  63. None
  64. #EXERCISE ๐Ÿ“š Let's build a color palette with contrast in

    mind.
  65. 0 1 2 3 4 5 6 7 8 9

    9 8 7 6 5 4 3 2 1 0
  66. 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]
  67. 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]
  68. 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]
  69. 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]
  70. 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]
  71. #PROTIP๐Ÿ’ก Some colors move significant steps in the scale. Some

    require quite large adjustments.
  72. WHICH IS BOLDER? WHICH IS BOLDER?

  73. โœ… WE CAN CONTROL โ† PALETTE โ† COMPOSITION โŒ WE

    CANโ€™T CONTROL โ† CONTEXT โ† OBSERVATION
  74. None
  75. #PROTIP๐Ÿ’ก Dark mode is not an inversionโ€”it's dimming the lights.

  76. None
  77. None
  78. 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)
  79. #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
  80. None
  81. None
  82. None
  83. #PROTIP๐Ÿ’ก Collaborate with designers and build extensions to their tools

    to optimize their work.
  84. 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"], }, }, };
  85. ERROR? DANGER? CLOSE? DELETE? INFO? LINK? DEFAULT? NOTICE? SUCCESS? OPEN?

    SAVE? PRIMARY?
  86. 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"], }, }, };
  87. const theme = { colors: { text: gray[9], white: white,

    primary: green[5], dark: { text: gray[1], white: black, primary: green[4], }, }, };
  88. #PROTIP๐Ÿ’ก If we want to achieve color modes and theming,

    we need an abstraction that is functional and not presentational.
  89. Delivery CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE

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

    WORE THE DESIGNOPS HAT
  91. 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.
  92. None
  93. #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
  94. None
  95. None
  96. DESIGNER DEVELOPER WEEKS โ†’ Waterfall โ€” THE HOT POTATO PROCESS,

    BY DAN MALL
  97. WEEKS โ†’ Hot Potato DESIGNER DEVELOPER โ€” THE HOT POTATO

    PROCESS, BY DAN MALL
  98. #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.
  99. #QUESTION ๐Ÿค” How do you identify the source of truth

    in a Design System? Is it code, UI, or documentation?
  100. Design to Code CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN

    I WORE THE DESIGNOPS HAT
  101. #QUESTION ๐Ÿค” Anyone here worksโ€”or has peers workingโ€”with Figma?

  102. #QUESTION ๐Ÿค” Anyone here knowsโ€”or has usedโ€”its REST API?

  103. None
  104. None
  105. #QUOTE โœ "Design tokens are indivisible pieces of a design

    system such as colors, spacing, typography scale." โ€”โ€‰Design Tokens W3C Community Group
  106. STYLES COMPONENTS/VARIANTS

  107. #COLORS ๐ŸŽจ

  108. None
  109. 1. FETCHING + MAPPING STYLES + CODE GENERATION

  110. 2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

  111. 3. PROFIT!

  112. 3. PROFIT!

  113. #FONTS ๐Ÿ”ค

  114. 1. FETCHING + MAPPING STYLES + CODE GENERATION

  115. 2. RUNNING THE AUTOMATION SCRIPTS (LOCALLY/CI)

  116. 3. PROFIT!

  117. 3. PROFIT!

  118. SVGO PRETTIER Other Tools FIGMINT

  119. Other Tools FIGMINT FIGMA-EXPORT-ICONS

  120. None
  121. None
  122. None
  123. #GOTCHA ๐Ÿ˜ฑ Designers would still have to ask us to

    manually run the script!
  124. 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
  125. 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!
  126. 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
  127. None
  128. None
  129. None
  130. #PROTIP๐Ÿ’ก Aim at version control systems that allow designers to

    work just like developers, and keep track of all changes.
  131. None
  132. Type Safety CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT
  133. 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
  134. 1. I HAD DECREASED PRODUCTIVITY WHEN STYLING COMPONENTS IF COMPARED

    TO OTHER CODEBASES USING UI KITS OR CSS-IN-JS APPROACHES
  135. 2. I FOUND QUITE A FEW COMPONENTS ACCESSING NON- EXISTENT

    STYLES; WHICH COULD RESULT IN UNEXPECTED EXPERIENCES TO THE USERS.
  136. 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.
  137. 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
  138. 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
  139. 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
  140. Results CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE

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

    THE DESIGNOPS HAT
  142. None
  143. / / ๐Ÿ˜ Manual and repetitive type CssPadding = 'padding-left'

    | 'padding-right' | 'padding-top' | 'padding-bottom';
  144. / / ๐Ÿ˜ 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'
  145. / / ๐Ÿ˜ 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}`
  146. Adoption CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE

    THE DESIGNOPS HAT
  147. #PROTIP๐Ÿ’ก A Design System has to be actively used to

    make the UX and DX better. Otherwise, it's a waste of effort.
  148. None
  149. #QUESTION ๐Ÿค” How do we define usage?

  150. Homebrew Components CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT / / Homebrew const BaseButton = ({ children }) = > <button>{children}</button>; / / NOT Homebrew const Button = () = > <BaseButton>Click me<BaseButton/>;
  151. / / Homebrew const BaseButton = ({ children }) =

    > <button>{children}</button>; / / NOT Homebrew const Button = () = > <BaseButton>Click me<BaseButton/>;
  152. 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
  153. / / Homebrew const BaseButton = ({ children }) =

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

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

    > <button>{children}</button>; / / Scenario #2 const StyledButton = () = > <View mainButton={BaseButton} />
  156. / / Homebrew const BaseButton = ({ children }) =

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

    = > <button>{children}</button>; / / Usage scenario #4 import { BaseButton as Button } from './button' const StyledButton = () = > <Button>Click me</Button>
  158. #PROTIP๐Ÿ’ก Usage in code is a complicated concept. Find a

    static analysis tool that does the work for you.
  159. None
  160. None
  161. Absolute Usage CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I

    WORE THE DESIGNOPS HAT โ€” RADIUS TRACKER, BY RANGLE
  162. DESIGN SYSTEM HOMEBREW โ†‘ USAGE LEVELS โ† WEEKS AGO

  163. Design System Share CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN

    I WORE THE DESIGNOPS HAT โ€” RADIUS TRACKER, BY RANGLE
  164. โ†‘ DESIGN SYSTEM SHARE โ† WEEKS AGO

  165. SHARE % TIME โŒ BAD โœ… GOOD

  166. #PROTIP๐Ÿ’ก Usage share is about the entire team, not just

    the engineers and thus it should be part of your regular governance.
  167. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE

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

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

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

    DESIGNOPS HAT 2. BUILD IN ACCESSIBILITY AS YOU GO
  171. 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
  172. CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE

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

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

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

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

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

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

    DESIGNOPS HAT 6. CSS CLASSES, TOKEN DEFINITIONS, TYPEFACESโ€ฆ TOOLING, ACTIVE SUPPORT, AND ADVOCACY
  179. 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
  180. None
  181. Weโ€™re hiring! ๐Ÿ—บ Mostly inโ€ฆ ๐Ÿ‡บ๐Ÿ‡ธ๐Ÿ‡ฒ๐Ÿ‡ฝ๐Ÿ‡ฆ๐Ÿ‡ท๐Ÿ‡บ๐Ÿ‡พ๐Ÿ‡ช๐Ÿ‡ธ๐Ÿ‡จ๐Ÿ‡ฟ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡ฎ๐Ÿ‡ณ

  182. Weโ€™re hiring! ๐Ÿ—บ

  183. None
  184. None
  185. None
  186. THATโ€™S ALL, FOLKS! THANKS! QUESTIONS? MATHEUS ALBUQUERQUE