$30 off During Our Annual Pro Sale. View Details »

Adekunle_Oduye_30_Min_E.pdf

uxindia
October 25, 2019

 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

uxindia

October 25, 2019
Tweet

More Decks by uxindia

Other Decks in Design

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