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

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

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.
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign


October 28, 2019

More Decks by uxindia

Other Decks in Design


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

  3. Direct your design system movie

  4. So, what is a Design System?

  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."
  6. Design system the mysterious hero?

  7. Mailchimp Voice and tone

  8. Material Design Guidelines

  9. The bad guys

  10. Inconsistency

  11. Inefficiencies

  12. Collaboration

  13. Now, characterize your hero

  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."
  15. Finding Producers

  16. People with Budget, Authority, Need

  17. None
  18. ~$.5M/Yr (277-190) hours × $45.00 × 11 deliveries × 6

    teams) / 55% = $469,800
  19. gradual growth of design system = gradual decline in inconsistency

    + gradual increase in the speed of software development
  20. How do you get started?

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

  22. None
  23. None
  24. None
  25. None
  26. Define metrics Define success criteria and key metrics early as

    a team
  27. Some common metrics Time saved per feature Delivery Increase Bugs

    Reduction Usability metrics improvement
  28. Start Directing

  29. Start with Interface Inventory

  30. None
  31. None
  32. Add some Character

  33. Align your thoughts with moodboarding

  34. The Color Palette

  35. Identify the primary colors using your interface inventory

  36. None
  37. The Typography

  38. None
  39. The Iconography

  40. None
  41. Components that talk to each other

  42. Atoms are basically our basic html tags

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

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

  45. Templates are group of organisms stitched to form pages

  46. None
  47. None
  48. Distributing your movie

  49. Choose your tools

  50. None
  51. Use zeplin to sync the design system

  52. None
  53. None
  54. Finally documentation, the heart of the Design System.

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

    it doesn’t exist"
  56. One important thing...

  57. Add enough color contrast

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

  59. Space (Qubole Design System)

  60. None
  61. None