Adekunle_Oduye_30_Min_E.pdf

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

Transcript

1. View Slide

2. View Slide

3. Adekunle Oduye
   Adekunle Oduye
   (Add-eh-koon-lay Oh-due-yay)
   (Add-eh-koon-lay Oh-due-yay)
   @adekunleoduye
   

   View Slide

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

   View Slide

5. View Slide

6. People
   People
   

   View Slide

7. Producers
   Producers Consumers
   Consumers
   

   View Slide

8. Design System
   Design System
   Direct Users
   Direct Users
   End Users
   End Users
   

   View Slide

9. Direct Users of a Design System:
   Direct Users of a Design System:
   ◦Designers
   ◦Engineers
   ◦Content Strategists
   ◦Data Scientists
   ◦QA Analysts
   

   View Slide

10. Design for the primary,
    Design for the primary,
    Support the secondary,
    Support the secondary,
    Accommodate the rest.
    Accommodate the rest.
    

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

14. Why focus on the developer
    Why focus on the developer
    experience?
    experience?
    ◦Execute the UI
    ◦Execute the IxD
    ◦ In-charge of performance and
    accessibility
    

    View Slide

15. A design system doesn’t
    A design system doesn’t
    exist until it’s in
    exist until it’s in code
    code
    

    View Slide

16. Quantitative Research
    Quantitative Research
    

    View Slide

17. Quantitative Research - Survey
    

    View Slide

18. Qualitative Research
    Qualitative Research
    

    View Slide

19. Qualitative Research - User Interviews
    

    View Slide

20. 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?
    

    View Slide

21. 1. Clear and concise pattern
    Clear and concise pattern
    documentation
    documentation
    

    View Slide

22. 2. Seamless integration into
    Seamless integration into
    design & development process
    design & development process
    

    View Slide

23. 3. Communicate design system
    Communicate design system
    updates and new features
    updates and new features
    

    View Slide

24. 4. Test & validate components
    Test & validate components
    before release
    before release
    

    View Slide

25. - 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
    

    View Slide

26. Process
    Process
    

    View Slide

27. What makes for a great process?
    What makes for a great process?
    ◦Predictable
    ◦Flexible
    ◦Seamless
    

    View Slide

28. Pattern Audit
    Pattern Audit
    

    View Slide

29. View Slide

30. Project Roadmap
    Project Roadmap
    

    View Slide

31. View Slide

32. Guidelines
    Guidelines
    

    View Slide

33. View Slide

34. View Slide

35. The process will be
    The process will be
    rough
    rough at first
    at first
    

    View Slide

36. Small
    Small steps,
    steps,
    Great
    Great distances
    distances
    

    View Slide

37. How can we incorporate
    How can we incorporate
    new patterns
    new patterns into a
    into a
    design system?
    design system?
    

    View Slide

38. New Pattern Process:
    New Pattern Process:
    ◦ Proposal
    ◦ Production
    ◦ Documentation
    

    View Slide

39. 1. Proposal
    Proposal
    

    View Slide

40. Proposal:
    Proposal:
    ◦Pattern Name
    ◦What is the purpose?
    ◦Where would this pattern be used?
    

    View Slide

41. 2. Production
    Production
    

    View Slide

42. View Slide

43. View Slide

44. Component API
    

    View Slide

45. Accessibility Checklist:
    Accessibility Checklist:
    ◦Keyboard navigation
    ◦Color Contrast
    ◦Images
    ◦Semantic Elements and Roles
    

    View Slide

46. https://a11yproject.com/checklist/
    

    View Slide

47. QA Checklist:
    QA Checklist:
    ◦Operating System
    (Windows, Mac, Andriod and IOS)
    ◦Cross browser compatibility
    (Chrome, Firefox, Safari, etc.)
    ◦Responsiveness
    (Desktop, Mobile, TV, etc.)
    

    View Slide

48. 3. Documentation
    Documentation
    

    View Slide

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

    View Slide

50. View Slide

51. View Slide

52. - 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
    

    View Slide

53. Product
    Product
    

    View Slide

54. UI Kit - Carbon Design System
    

    View Slide

55. Pattern Library - Carbon Design System
    

    View Slide

56. Documentation - Carbon Design System
    

    View Slide

57. Front-end Prototyping
    Front-end Prototyping
    

    View Slide

58. View Slide

59. 1. Design the
    Design the "real"
    "real" experience
    experience
    

    View Slide

60. 2. One
    One master deliverable
    master deliverable
    

    View Slide

61. View Slide

62. 3. Utilizing real data
    Utilizing real data
    

    View Slide

63. Move away from
    Move away from
    pixel perfection
    pixel perfection
    

    View Slide

64. Build the
    Build the right thing
    right thing
    instead of building the
    instead of building the
    thing right
    thing right
    

    View Slide

65. Front-end Prototypes for Great User Experience
    

    View Slide

66. Understand the
    Understand the
    problems & goals
    problems & goals
    of the
    of the people
    people
    

    View Slide

67. Create a
    Create a process
    process that
    that
    empowers the
    empowers the people
    people
    

    View Slide

68. Have a
    Have a product
    product that
    that
    provides value
    provides value
    to your company.
    to your company.
    

    View Slide

69. Thanks!
    Thanks!
    http://bit.ly/3ps-design-system-uxindia-2019
    

    View Slide

70. 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
    

    View Slide