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

๐ŸŒ React Global Online Summit 2023

๐ŸŒ React Global Online Summitย 2023

โ„น๏ธ 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

April 10, 2023
Tweet

More Decks by Matheus Albuquerque

Other Decks in Technology

Transcript

  1. Hello, React Global ๐Ÿ‘‹ ๐ŸŒ CONSISTENT UX AT SCALE: LESSONS

    LEARNED WHEN I WORE THE DESIGNOPS HAT โ€ข THE 19TH OF APRIL, 2023.
  2. โ†‘ ALL THE LINKS! ๐Ÿค“ ๐Ÿง‘๐Ÿซ @techlabs ๐Ÿฆ @ythecombinator ๐Ÿ‘จ๐Ÿ’ป

    @medallia โšก Perf GDE CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT
  3. This talk is about challenges results of teamwork common denominators

    moving across the eng. ใฒ— design spectrum
  4. 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.
  5. 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.
  6. โ† 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
  7. โ† 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
  8. 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.
  9. 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.
  10. 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
  11. 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
  12. THEY CAN HAPPEN ON: โ† MOUSE CLICKS โ† TOUCH TAPS

    โ† ENTER OR SPACE KEY PRESSES โ† SCREEN READER VIRTUAL CLICKS
  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 โ† HANDLE CANCELING PRESS INTERACTIONS ON SCROLL โ† NORMALIZE A TON OF CROSS-BROWSER INCONSISTENCIES
  14. โ† 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
  15. #PROTIP๐Ÿ’ก Try not to spend too much time implementing keyboard

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

    can be styled to match your brand and your design tokens.
  17. 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.
  18. #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.
  19. 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.
  20. โ† 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.
  21. #PROTIP๐Ÿ’ก Always try to combine automated testing with ongoing manual

    testing. Manual testing is still the most reliable method to assess accessibility.
  22. โ† 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.
  23. 0 1 2 3 4 5 6 7 8 9

    9 8 7 6 5 4 3 2 1 0
  24. 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]
  25. 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]
  26. 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]
  27. 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]
  28. 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]
  29. โœ… WE CAN CONTROL โ† PALETTE โ† COMPOSITION โŒ WE

    CANโ€™T CONTROL โ† CONTEXT โ† OBSERVATION
  30. 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"], }, }, };
  31. 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"], }, }, };
  32. const theme = { colors: { text: gray[9], white: white,

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

    we need an abstraction that is functional and not presentational.
  34. 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.
  35. #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
  36. #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.
  37. #QUESTION ๐Ÿค” How do you identify the source of truth

    in a Design System? Is it code, UI, or documentation?
  38. #QUOTE โœ "Design tokens are indivisible pieces of a design

    system such as colors, spacing, typography scale." โ€”โ€‰Design Tokens W3C Community Group
  39. 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
  40. 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
  41. 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
  42. #PROTIP๐Ÿ’ก Aim at version control systems that allow designers to

    work just like developers, and keep track of all changes.
  43. 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
  44. 1. I HAD DECREASED PRODUCTIVITY WHEN STYLING COMPONENTS IF COMPARED

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

    STYLES; WHICH COULD RESULT IN UNEXPECTED EXPERIENCES TO THE USERS.
  46. 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.
  47. 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
  48. / / ๐Ÿ˜ Manual and repetitive type CssPadding = 'padding-left'

    | 'padding-right' | 'padding-top' | 'padding-bottom';
  49. / / ๐Ÿ˜ 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'
  50. / / ๐Ÿ˜ 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}`
  51. #PROTIP๐Ÿ’ก A Design System has to be actively used to

    make the UX and DX better. Otherwise, it's a waste of effort.
  52. 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/>;
  53. / / Homebrew const BaseButton = ({ children }) =

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

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

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

    > <button>{children}</button>; / / Scenario #2 const StyledButton = () = > <View mainButton={BaseButton} />
  58. / / 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>;
  59. / / Homebrew export const BaseButton = ({ children })

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

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

    WORE THE DESIGNOPS HAT โ€” RADIUS TRACKER, BY RANGLE
  62. Design System Share CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN

    I WORE THE DESIGNOPS HAT โ€” RADIUS TRACKER, BY RANGLE
  63. #PROTIP๐Ÿ’ก Usage share is about the entire team, not just

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

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

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

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

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

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

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

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

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

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

    DESIGNOPS HAT 6. CSS CLASSES, TOKEN DEFINITIONS, TYPEFACESโ€ฆ TOOLING, ACTIVE SUPPORT, AND ADVOCACY
  75. 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
  76. THATโ€™S ALL, FOLKS! THANKS! QUESTIONS? MATHEUS ALBUQUERQUE โ†‘ ALL THE

    LINKS! ๐Ÿค“ CONSISTENT UX AT SCALE: LESSONS LEARNED WHEN I WORE THE DESIGNOPS HAT