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. Never sweat about pixels again
    Design System at Scale by Qubole

    View full-size slide

  2. Direct your design system movie

    View full-size slide

  3. So, what is a Design System?

    View full-size slide

  4. "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 full-size slide

  5. Design system the mysterious hero?

    View full-size slide

  6. Mailchimp Voice and tone

    View full-size slide

  7. Material Design Guidelines

    View full-size slide

  8. The bad guys

    View full-size slide

  9. Inconsistency

    View full-size slide

  10. Inefficiencies

    View full-size slide

  11. Collaboration

    View full-size slide

  12. Now, characterize your hero

    View full-size slide

  13. "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 full-size slide

  14. Finding Producers

    View full-size slide

  15. People with Budget, Authority, Need

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. How do you get started?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Start Directing

    View full-size slide

  23. Start with Interface Inventory

    View full-size slide

  24. Add some Character

    View full-size slide

  25. Align your thoughts with moodboarding

    View full-size slide

  26. The Color Palette

    View full-size slide

  27. Identify the primary colors using your
    interface inventory

    View full-size slide

  28. The Typography

    View full-size slide

  29. The Iconography

    View full-size slide

  30. Components that talk to each other

    View full-size slide

  31. Atoms are basically our basic html tags

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Templates are group of organisms stitched to
    form pages

    View full-size slide

  35. Distributing your movie

    View full-size slide

  36. Choose your tools

    View full-size slide

  37. Use zeplin to sync the design system

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. One important thing...

    View full-size slide

  41. Add enough color contrast

    View full-size slide

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

    View full-size slide

  43. Space (Qubole Design System)

    View full-size slide