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

The 3ps of a Design System

9627abc56bc436faecbe45f2645159d6?s=47 Adekunle Oduye
September 10, 2019

The 3ps of a Design System

Building a design system that scales is hard. You have to get stakeholder buy-in and then establish style guide and then build out a UI components library and then develop a voice and tone that captures the brand and and and… There’s so much to do! That can fuel envy when we look at popular design systems on the web and say, “We want to have something like that.” But how do we get there? What are the specific steps we can take to build a successful design system?

9627abc56bc436faecbe45f2645159d6?s=128

Adekunle Oduye

September 10, 2019
Tweet

Transcript

  1. None
  2. Adekunle Oduye Adekunle Oduye (Add-eh-koon-lay Oh-due-yay) (Add-eh-koon-lay Oh-due-yay) @adekunleoduye

  3. My first experience My first experience building a design system

    building a design system
  4. None
  5. People People

  6. Producers Producers Consumers Consumers

  7. Design System Design System Direct Users Direct Users End Users

    End Users
  8. Direct Users of a Design System: Direct Users of a

    Design System: ◦Designers ◦Engineers ◦Content Strategists ◦Data Scientists ◦QA Analysts
  9. Design for the primary, Design for the primary, Support the

    secondary, Support the secondary, Accommodate the rest. Accommodate the rest.
  10. None
  11. Which experience is most important: Which experience is most important:

    Designer's or Developer's? Designer's or Developer's?
  12. Which experience is most important: Which experience is most important:

    Designer's or Designer's or Developer's Developer's? ?
  13. Why focus on the developer Why focus on the developer

    experience? experience? ◦Execute the UI ◦Execute the IxD ◦ In-charge of performance and accessibility
  14. A design system doesn’t A design system doesn’t exist until

    it’s in exist until it’s in code code
  15. Quantitative Research Quantitative Research

  16. Quantitative Research - Survey

  17. Qualitative Research Qualitative Research

  18. Qualitative Research - User Interviews

  19. Key questions to ask: Key questions to ask: ◦ What

    are some of the major pain points the design process? ◦ How can the design system make your job easier? ◦ What are some of your future goals?
  20. 1. Clear and concise pattern Clear and concise pattern documentation

    documentation
  21. 2. Seamless integration into Seamless integration into design & development

    process design & development process
  22. 3. Communicate design system Communicate design system updates and new

    features updates and new features
  23. 4. Test & validate components Test & validate components before

    release before release
  24. - Magera Moon, "We realized that ultimately for our systems

    to succeed long-term, it needed to be thought of as everyone’s responsibility." The People Part of Design Systems
  25. Process Process

  26. What makes for a great process? What makes for a

    great process? ◦Predictable ◦Flexible ◦Seamless
  27. Pattern Audit Pattern Audit

  28. None
  29. Project Roadmap Project Roadmap

  30. None
  31. Guidelines Guidelines

  32. None
  33. None
  34. The process will be The process will be rough rough

    at first at first
  35. Small Small steps, steps, Great Great distances distances

  36. How can we incorporate How can we incorporate new patterns

    new patterns into a into a design system? design system?
  37. New Pattern Process: New Pattern Process: ◦ Proposal ◦ Production

    ◦ Documentation
  38. 1. Proposal Proposal

  39. Proposal: Proposal: ◦Pattern Name ◦What is the purpose? ◦Where would

    this pattern be used?
  40. 2. Production Production

  41. None
  42. None
  43. Component API

  44. Accessibility Checklist: Accessibility Checklist: ◦Keyboard navigation ◦Color Contrast ◦Images ◦Semantic

    Elements and Roles
  45. https://a11yproject.com/checklist/

  46. QA Checklist: QA Checklist: ◦Operating System (Windows, Mac, Andriod and

    IOS) ◦Cross browser compatibility (Chrome, Firefox, Safari, etc.) ◦Responsiveness (Desktop, Mobile, TV, etc.)
  47. 3. Documentation Documentation

  48. Documentation structure: Documentation structure: ◦Purpose ◦Variants ◦Live Example ◦Code snippents

  49. None
  50. None
  51. - Una Kravets, Despite how much control the other engineers

    have on the process, they need to feel like they have input, and feel heard. Why Design Systems Fail
  52. Product Product

  53. UI Kit - Carbon Design System

  54. Pattern Library - Carbon Design System

  55. Documentation - Carbon Design System

  56. Front-end Prototyping Front-end Prototyping

  57. None
  58. 1. Design the Design the "real" "real" experience experience

  59. 2. One One master deliverable master deliverable

  60. None
  61. 3. Utilizing real data Utilizing real data

  62. Move away from Move away from pixel perfection pixel perfection

  63. Build the Build the right thing right thing instead of

    building the instead of building the thing right thing right
  64. Front-end Prototypes for Great User Experience

  65. Understand the Understand the problems & goals problems & goals

    of the of the people people
  66. Create a Create a process process that that empowers the

    empowers the people people
  67. Have a Have a product product that that provides value

    provides value to your company. to your company.
  68. Thanks! Thanks! http://bit.ly/3ps-design-system-uxindia-2019

  69. Resources Resources ◦ - Josh Clark ◦ - Jerry Cao

    ◦ - Atif Azam Only One Deliverable Matters How & Why Prototypes Are Mandatory for Good Design The Master Prototype | @adekunleoduye #uxindia2019