Design Language Systems

Working in the design industry for the past few years, I have learnt to work with different departments towards the same goal. A complete fully functional product that is easy on the eye and provides a pleasant, if not out of the world, experience. Key to this is following a design language. My talk is about Design Language Systems and how you can begin to curate one.

Transcript

1. DESIGN LANGUAGE SYSTEM
2. Hi ! Swetha Suresh Product Designer @ NGPVAN UX Architect UX Designer Architect @iamswethas
3. Be effective at your job Increase collaboration Create inclusive environments Enable teams to work towards common goal - Your Product
4. AGENDA 1. What is DLS 2. Employer buy in 3. Benefits of DLS 4. How to build a DLS
5. DESIGN LANGUAGE SYSTEM It is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem.
6. DIGITAL ECOSYSTEM Enterprises People Teams … Standardised 
 Digital 
 Platform
7. EMPLOYER BUY IN Team Product New Styles, Patterns, Ideas… From UX PIN New Styles, Patterns, Ideas… New Styles, Patterns, Ideas…
8. •What shade of blue are we using? •Can you redesign this, we can’t build it? •Where is our logo? •Was this pattern used somewhere else? •How much padding have we given for buttons before? •The assets are too heavy for this
 … Are designers spending 30 minutes/day on any of these? From UX PIN From UX PIN
9. Design System ROI for the Design Team $50 per hour. Team of 20 designers. 20 designer * 52 weeks * 2.5h/weeks * $50/h = $130,000/year From UX PIN From UX PIN
10. •Can you rebuild this, it doesn’t match the design? •What’s the latest documentation? •How do we build this pattern? •Does this meet the code standards? •Where’s our components? … Are developers spending 30 minutes/day on any of these? From UX PIN
11. From UX PIN Design System ROI for the Developer Team $75 per hour. Team of 50 developers. 50 devs * 52 weeks * 2.5h/weeks * $75/h = $487,500/year
12. BENEFITS TO THE BRAND USERS BUSINESS
13. BENEFITS TO THE BRAND •Recognizability
14. •Consistency BENEFITS TO THE BRAND
15. •Authenticity BENEFITS TO THE BRAND
16. •Usability •Enjoyability BENEFITS TO THE USER
17. •Efficiency & Cost BENEFITS TO THE BUSINESS “ to create a more beautiful and accessible design language. We wanted our designs be unified to drive greater efficiency through well-defined, reusable and cross-platform components.”
 
 — Karri Saarinen, Design Lead @ Airbnb
18. •Stability & Flexibility BENEFITS TO THE BUSINESS “ A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.”
 
 — Karri Saarinen, Design Lead @ Airbnb
19. •Innovation BENEFITS TO THE BUSINESS More time and resources for innovative thinking
20. WHAT NEXT ? Get every one ready and on the same page. Collaborate at healthy intervals The collective desire to provide good user experience while adding to internal efficiency.
21. “ THE SYSTEM BLOCKS “ Foundational building blocks that you can use to start building your Design Language Systems
22. 1. TOOLS
23. 2. FOLDER SYSTEM
24. 3. DOCUMENTATION Document all these standardizations. Create a one stop shop for every information related to the system followed.
25. 4. STYLE GUIDE A. UI Audit
26. THE SYSTEM BLOCKS 3. STYLE GUIDE Document all these standardizations. Create a one stop shop for every information related to the system followed. A. UI Audit
27. 4. STYLE GUIDE A. UI Audit • Consistency • Documentation • Retrofitting • Convince your boss for common interface language • Ground work for DLS
28. A. UI Audit B. Tool Box C. Grid System D. Naming Convention E. Typography & Text F. Pattern Library 4. STYLE GUIDE
30. 5. PERSONALITY A. Writing Style B. Colour C. Illustrations D. Typography
31. Progress UI - NGP VAN Design System
32. Lighting Design System - Salesforce
33. Atlassian’s Design System
34. SYSTEM BLOCKS Make your own
35. @iamswethas Thats it from me :)