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

2. Never sweat about pixels again Design System at Scale by Qubole
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
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 together
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
32. Add some Character
33. Align your thoughts with moodboarding
34. The Color Palette
35. Identify the primary colors using your interface inventory
37. The Typography
39. The Iconography
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 task
45. Templates are group of organisms stitched to form pages
48. Distributing your movie
49. Choose your tools
51. Use zeplin to sync the design system
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)