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

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