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

Never sweat about pixels again – Design System at Scale by Qubole

uxindia
October 28, 2019

Never sweat about pixels again – Design System at Scale by Qubole

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 28, 2019
Tweet

More Decks by uxindia

Other Decks in Design

Transcript

  1. View Slide

  2. Never sweat about pixels again
    Design System at Scale by Qubole

    View Slide

  3. Direct your design system movie

    View Slide

  4. So, what is a Design System?

    View Slide

  5. "Design System is essentially are collection of rules, constraints and
    principles, implemented in design and code. These 3 attributes serve
    distinct functions and provide coherent systematic order in systems
    from buttons to single page applications."

    View Slide

  6. Design system the mysterious hero?

    View Slide

  7. Mailchimp Voice and tone

    View Slide

  8. Material Design Guidelines

    View Slide

  9. The bad guys

    View Slide

  10. Inconsistency

    View Slide

  11. Inefficiencies

    View Slide

  12. Collaboration

    View Slide

  13. Now, characterize your hero

    View Slide

  14. "The purpose of this design system is to provide
    uniform set of guidelines for all varied user
    interfaces of Qubole. Space is designed with the
    mission of adding breath of fresh air to the
    everyday UI, turning even mundane tasks in to
    delight for qubole's customer."

    View Slide

  15. Finding Producers

    View Slide

  16. People with Budget, Authority, Need

    View Slide

  17. View Slide

  18. ~$.5M/Yr
    (277-190) hours × $45.00 × 11 deliveries × 6 teams) / 55% = $469,800

    View Slide

  19. gradual growth of design system = gradual
    decline in inconsistency + gradual increase in
    the speed of software development

    View Slide

  20. How do you get started?

    View Slide

  21. Put on a pilot show - bring all the
    stakeholders together

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Define metrics
    Define success criteria and key metrics early as a team

    View Slide

  27. Some common metrics
    Time saved per feature Delivery Increase Bugs Reduction Usability metrics
    improvement

    View Slide

  28. Start Directing

    View Slide

  29. Start with Interface Inventory

    View Slide

  30. View Slide

  31. View Slide

  32. Add some Character

    View Slide

  33. Align your thoughts with moodboarding

    View Slide

  34. The Color Palette

    View Slide

  35. Identify the primary colors using your
    interface inventory

    View Slide

  36. View Slide

  37. The Typography

    View Slide

  38. View Slide

  39. The Iconography

    View Slide

  40. View Slide

  41. Components that talk to each other

    View Slide

  42. Atoms are basically our basic html tags

    View Slide

  43. Molecules combining atoms to do something
    together and define meaning

    View Slide

  44. Organisms are group of molecules combined
    together to a relative task

    View Slide

  45. Templates are group of organisms stitched to
    form pages

    View Slide

  46. View Slide

  47. View Slide

  48. Distributing your movie

    View Slide

  49. Choose your tools

    View Slide

  50. View Slide

  51. Use zeplin to sync the design system

    View Slide

  52. View Slide

  53. View Slide

  54. Finally documentation, the heart of
    the Design System.

    View Slide

  55. "Write as much as possible, because if
    you don’t document it doesn’t exist"

    View Slide

  56. One important thing...

    View Slide

  57. Add enough color contrast

    View Slide

  58. Don’t use color alone to make critical
    information understandable

    View Slide

  59. Space (Qubole Design System)

    View Slide

  60. View Slide

  61. View Slide