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


October 25, 2019


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


October 25, 2019

More Decks by uxindia

Other Decks in Design


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

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

    building a design system
  5. None
  6. People People

  7. Producers Producers Consumers Consumers

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

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

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

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

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

    Designer's or Designer's or Developer's Developer's? ?
  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
  15. A design system doesn’t A design system doesn’t exist until

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

  17. Quantitative Research - Survey

  18. Qualitative Research Qualitative Research

  19. Qualitative Research - User Interviews

  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?
  21. 1. Clear and concise pattern Clear and concise pattern documentation

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

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

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

    release before release
  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
  26. Process Process

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

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

  29. None
  30. Project Roadmap Project Roadmap

  31. None
  32. Guidelines Guidelines

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

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

  37. How can we incorporate How can we incorporate new patterns

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

    ◦ Documentation
  39. 1. Proposal Proposal

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

    this pattern be used?
  41. 2. Production Production

  42. None
  43. None
  44. Component API

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

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

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

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

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

  50. None
  51. None
  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
  53. Product Product

  54. UI Kit - Carbon Design System

  55. Pattern Library - Carbon Design System

  56. Documentation - Carbon Design System

  57. Front-end Prototyping Front-end Prototyping

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

  60. 2. One One master deliverable master deliverable

  61. None
  62. 3. Utilizing real data Utilizing real data

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

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

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

  66. Understand the Understand the problems & goals problems & goals

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

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

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

  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