Bulletproof your Design System

The hardest part of Design Systems is neither the coding nor the deploying; it’s the adoption. Encouraging teams to use it and to integrate it as part of their workflow is no easy task and it is the key to avoid the dreaded “Failure of the Design System”. In this talk, we are going to explore multiple tools and strategies that will help you and your teams increase the adoption of your design system across your company. From simplifying testing, to smooth implementation and maintenance. Join us to make your design system truly bulletproof.

Transcript

1. Bulletproof
   your Design System
   Eva Ferreira –Shift Conference, 2023
   

   View Slide

2. Hi, I’m Eva!
   Front-end Engineer @ mabl
   Google Developer Expert & CSSConf Argentina organizer
   @evaferreira92
   

   View Slide

3. Design Systems
   Short survey
   @evaferreira92
   

   View Slide

4. Who has one at
   their company?
   @evaferreira92
   

   View Slide

5. Who likes it?
   Do you feel like it makes your work faster? Of better quality?
   Or… do you feel like it gets in the way?
   @evaferreira92
   

   View Slide

6. Some
   Design Systems fail
   @evaferreira92
   

   View Slide

7. What is a
   Design System?
   It’s the way your organization designs and builds new products 💅
   

   View Slide

8. It might include…
   • UI Style guide
   • UX Guidelines
   • Development Guidelines
   • Writing Guidelines
   • Component Library
   • Repositories
   • Processes
   • Working agreements
   • And much more…
   

   View Slide

9. Basically…
   It’s a set of tools
   @evaferreira92
   

   View Slide

10. Design Systems
    empower
    Engineers and Designers
    To do their work better, faster and with higher quality.
    @evaferreira92
    

    View Slide

11. Benefits of
    a Design System
    

    View Slide

12. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members
    

    View Slide

13. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members
    

    View Slide

14. Mirta Legrand
    

    View Slide

15. View Slide

16. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members
    

    View Slide

17. Visual consistency
    Consistency is one of the most powerful
    usability principles:
    When things always behave the same, users
    don't have to worry about what will happen.
    Instead, they know what will happen based
    on earlier experience.
    Top 10 Mistakes in Web Design (nngroup.com)
    

    View Slide

18. IF THEY ARE SO GOOD
    WHY DO THEY FAIL?
    

    View Slide

19. Why do Design
    Systems fail?
    

    View Slide

20. Why do Design Systems fail?
    • It wasn’t sold correctly
    • It didn’t have enough research when created
    • It wasn’t built with team collaboration in mind
    • It was built at the wrong time
    @evaferreira92
    

    View Slide

21. “Let’s just
    use Bootstrap”
    A kitten dies. A Front-end engineer cries. A Designer is desolated.
    @evaferreira92
    

    View Slide

22. How to avoid
    failure?
    How do we get people to actually use it?
    

    View Slide

23. Avoiding failure
    • Research
    • Adoption
    • Maintenance
    @evaferreira92
    

    View Slide

24. Research
    Is there a pilot project?
    What’s the current state of our apps?
    

    View Slide

25. Pilot Project
    Test your Design System in a real application, in a controlled environment.
    @evaferreira92
    

    View Slide

26. Pilot project
    • Potential for components and common patterns
    • Scope
    • Technically independent
    • Champion
    

    View Slide

27. What’s the current
    state of our apps?
    Style round-up and Interface inventory
    

    View Slide

28. cssstats.com
    

    View Slide

29. Style Round-up
    

    View Slide

30. Style Round-up
    

    View Slide

31. Interface inventory
    • Screenshot party 🎉
    • Find common patterns
    • Find awfully old components
    • Keep / Kill
    • Beginning of a shared vocabulary
    https://bradfrost.com/blog/post/interface-inventory
    

    View Slide

32. Adoption
    Who are the users of our Design System?
    What tools do they currently use?
    

    View Slide

33. Who are the users
    of the Design System?
    Mostly designers and engineers
    @evaferreira92
    

    View Slide

34. Who are the users
    of the Design System?
    Mostly designers and engineers. Cross-team.
    @evaferreira92
    

    View Slide

35. Who are the users
    of the Design System?
    Mostly designers and engineers. Cross-team.
    @evaferreira92
    

    View Slide

36. https://bradfrost.com/blog/post/design-system-interview-questions/
    

    View Slide

37. Design System Interview
    • What does success look like? Fast forward a year
    from now, things are going great, everyone is
    thrilled with the design system. How did
    that happen?
    • What’s going to sink this ship? Fast forward a
    year from now and the design system
    initiative is a total failure. Why did it fail?
    

    View Slide

38. It’s never
    about the stack.
    React? Angular? Figma? Sketch? It does not matter.
    @evaferreira92
    

    View Slide

39. Whatever workflow
    your company uses
    is the right workflow
    

    View Slide

40. Maintenance
    Your Design System needs to stay relevant and healthy
    

    View Slide

41. Maintenance
    • Testing
    • Growth
    

    View Slide

42. Testing
    Are your components working as expected?
    @evaferreira92
    

    View Slide

43. Testing
    Are your components working as expected?
    @evaferreira92
    *
    

    View Slide

44. Unit tests
    • More confidence on your codebase
    • Spot bugs before they get to production
    • Use it as a way of documentation
    • Enables Continuous Integration (CI)
    

    View Slide

45. Unit test
    it('renders with content', () => {
    render(
    This is an alert
    );
    // Assert
    screen.getByText(This is an alert');
    expectNoConsoleErrors();
    });
    

    View Slide

46. A11y on the
    Design System
    Take some pressure away from your Java developer.
    Let designers and Front-end engineers handle the heavy work.
    

    View Slide

47. Unit + a11y tests
    React testing library meets axe-core
    

    View Slide

48. Adding axe-core to unit tests
    • Run accessibility tests on your components
    • Look for violations on different states
    • Add it to your pipelines
    

    View Slide

49. Unit + a11y tests
    import { axe, toHaveNoViolations } from 'jest-axe';
    expect.extend(toHaveNoViolations);
    it('should not have a11y issues', async () => {
    const {container} = render();
    expect(await axe(container)).toHaveNoViolations()
    });
    

    View Slide

50. A11y add-on for Storybook
    

    View Slide

51. View Slide

52. View Slide

53. Integrate into
    your workflow
    Use those unit tests on your continuous integration
    

    View Slide

54. Wait,
    what about
    the add-on?
    Not yet! But it’s in the roadmap ➡️
    https://storybook.js.org/addons/@storybook/addon-a11y
    

    View Slide

55. View Slide

56. name: Here you go, axe!
    # Controls when the workflow will run
    on:
    # Triggers the workflow on push or pull request events
    but only for the "main" branch
    push:
    branches: [ "main" ]
    pull_request:
    branches: [ "main" ]
    

    View Slide

57. # Steps represent a sequence of tasks that will be executed
    as part of the job
    steps:
    # Runs a set of commands using the runners shell
    - name: Install dependencies
    run: npm ci
    - name: Create build
    run: npm run build
    - name: Run tests
    run: npm run test
    

    View Slide

58. # Steps represent a sequence of tasks that will be executed
    as part of the job
    steps:
    # Runs a set of commands using the runners shell
    - name: Install dependencies
    run: npm ci
    - name: Create build
    run: npm run build
    - name: Run tests
    run: npm run test
    

    View Slide

59. # Steps represent a sequence of tasks that will be executed
    as part of the job
    steps:
    # Runs a set of commands using the runners shell
    - name: Install dependencies
    run: npm ci
    - name: Create build
    run: npm run build
    - name: Run tests
    run: npm run test
    

    View Slide

60. Growth
    Scaling in a healthy way
    @evaferreira92
    

    View Slide

61. Documenting
    the component library
    Stories!
    

    View Slide

62. Stories
    • Stories capture the rendered state of a component
    • It takes arguments that modify its state
    • Provides controls so non-engineers can play
    around with it
    

    View Slide

63. Stories for components
    

    View Slide

64. Stories for components
    WITH A GREAT COMPONENT
    COMES A GREAT STORY
    

    View Slide

65. New component
    means new story
    

    View Slide

66. Force story creation
    https://stackoverflow.com/questions/75459508/ensure-every-component-has-a-storybook-story
    

    View Slide

67. View Slide

68. @evaferreira92
    

    View Slide

69. Maintaining
    the component library
    Who? How? When?
    

    View Slide

70. Team models
    • Solidary
    • Centralized
    • Federated
    https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
    

    View Slide

71. Solidary
    “I made this for my team,
    I hope it works for yours”
    • Created based on the
    needs of one team
    • No scalability plans for
    other teams
    

    View Slide

72. Centralized
    • Helps lots of teams and
    products
    • Evangelize and teach how
    to use it correctly
    • Lack of participation
    • Lack of visibility into the
    day-to-day of the projects
    and its needs
    

    View Slide

73. Federated
    • Governance
    • Group of developers and
    designers representing
    each team
    • Decision making takes
    longer
    

    View Slide

74. Foster collaboration
    The more people participates, the more people will use it
    

    View Slide

75. Measure success
    UI Library Market Share
    @evaferreira92
    

    View Slide

76. https://rangle.io/blog/market-share-success-design-system
    

    View Slide

77. UI Library Market share
    

    View Slide

78. Takeaways
    

    View Slide

79. Takeaways
    • Design Systems are an investment💸
    • They require time to build and to maintain⏱️
    • It’s a set of tools 🧰
    • With loads of benefits✨
    • And teamwork🫂
    

    View Slide

80. Software is
    a living thing!
    As such, it needs to be taken cared of 🌿
    

    View Slide

81. Thank you!
    @evaferreira92
    

    View Slide