The 3ps of a Design System

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