Purpose Before Action: Why You Need a Design Language System
- 1. Purpose Before Action: Why you need a Design Language System UXPA Boston 2018 1 Chris Reckling Director of Design, IBM Carrie Lloyd Visual Design Lead, IBM
- 2. The big controversy of 2004! 2
- 3. Version 2.1 circa 2007
- 4. Version 3 circa 2012
- 5. Agenda 5 Why do you need a design language system? What is a design language system? The guide to the system Lessons Learned Q&A
- 6. Why do you need a design language system? 6
- 7. 2 Designers, Same Outcome Different Results 7 Reckling’s Law 1: Given the same outcome, no two designers will come up with the same design.
- 8. 2 Developers, Same Design Different Code 8 Reckling’s Law 2: Given the same design, no two developers will implement it exactly the same way.
- 9. Benefits of a Design Language System Move faster, save money, reduce risk, innovate. 9 Efficiency AgilityConsistency Flexibility
- 10. Efficiency 10
- 11. Consistency 11 "Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience." - Jakob Nielsen
- 12. Flexibility 12
- 13. Agility 13
- 14. What is a design language system? 14
- 16. 16
- 17. “We solve challenging interactions at the outset…”
- 18. What is a design language system? 18 Pattern Library What is <the thing>? Components Patterns Best Practices Usage Guidelines How do I use <the thing>? Context When to use it Why to use it Tools How is <the thing> implemented? CSS HTML Javascript React components Sketch Library Style What does <the thing> look like? Colors Typography Grid Icons Writing
- 19. Should I use someone else’s system? 19
- 20. Should I use someone else’s system? Considerations. 20 Do you need to fit into the ecosystem of apps? (iOS or Android, for example) Do you have the time and skills to make a system from scratch? Can you start with someone else’s and make it your own?
- 22. Assemble Team Project Definition Tools to collaborate Mood Boards Develop Personas Market Research Define Core Values And user test along the way… Element Collages Code as you go Prioritize Patterns Document rationale Style Tiles Interface Inventory Process
- 23. Assemble your team ID FED ManagerVDUX UXR
- 24. Developers Who are the users of the design system? 24 Designers Customers & Partners User Researchers
- 26. Seamless The experience IS the product Human By people, for people 26 Thoughtful Delightful decision-making Measurable Assess success Evolving Restlessly reinvent
- 27. Get Inspired 27
- 28. Inspiration comes in many forms 28 Market trends - what’s hot, what’s not Competition - how will you be better Mood boards - the world around you
- 30. What is market research? 30 Look at best of breed: Market leaders Studying cutting edge behaviors and patterns Look at the brand family as expressed in apps and sites Look at specifics (icons, login, onboarding, features, etc) zoom in on those particular aspects Different from competitive research, which is looking at your direct competitors feature by feature
- 31. 31 Spotify
- 32. 32 AirBnB
- 33. 33 Etsy
- 34. 34 Common elements of success • Intentional use of colors was purposeful • Primary actions clean and simple • Consistent platforms - UI for Web, tablet, and mobile apps were • Use of micro-animation delighted users and increased usability • Limited palette was essential for brand communication • Trending gradients, illustrations, photography dimension and playful
- 35. Mood boards 35
- 36. What is a mood board? 36 Communicates style to help define what the project is about Kickstarts creative ideas Reflects core values, market trends, goals of the project Each team member creates a collage from things that inspire them or things they see in the world Define common themes that emerge Benefits: It’s fun! And gets you into the right frame of mind to define your style.
- 37. 37
- 38. 38
- 39. 39
- 40. 40 Mood board conceptual ideas Personal individualized, diverse, expressive Playful bright, unabashed, human Dimensional spacious, luminous material Focused minimal, provides clarity Organic soft, atmospheric, natural Valuable quality, craftsmanship Cohesive (but not homogenous)
- 41. Know Yourself 41
- 42. What is an Interface Inventory? 42 Takes stock and categorize common components and patterns. Comprehensive collection of all your stuff. We used Mural to do this together, as a group. Benefit: See what you are using today and what you will need to prioritize in your new system. Discover what a mess you have. :)
- 43. 43
- 46. What is a Style Tile? 46 Design Deliverable: 1 -2 pages Typography Color Interface elements Essence of brand Benefit: Low cost method to quickly communicate style to stakeholders, helps formulate direction, etc.
- 47. 47
- 48. 48
- 49. 49
- 50. 50
- 52. What is an Element Collage? 52 Apply the styles from Style Tiles to the same set of components on each collage to see how they work. Not meant to be a complete design story. Each designer does their own. Benefit: Quickly test concepts, styles, and assumptions you are making about your style.
- 53. 53
- 54. 54
- 55. 55
- 56. 56
- 58. 58
- 59. 59
- 60. 60
- 61. 61
- 62. 62
- 63. Typical Process 63 Identify component Craft user Outcome Wires/Process Flow Research industry behaviors Synthesis findings Sketch File/Code parity User Test Tweak Source: If applicable, describe source origin Define Sketch Test Code
- 64. Show me it! 64
- 69. Agile Practices 69 1 week sprints Iteration planning (github + zenhub) End of iteration demos Retrospectives Benefits: Keeps team on track, engaged. Only sign up for as much as you can produce. Stakeholders can see status and blockers.
- 70. User Research 70 Research everything! Test with clients, stakeholders Quantitative and Qualitative Benefits: Adjust designs early on in the process Builds confidence in direction
- 71. Code as You Go 71 Implement the system in the guide Front-end developers part of the team Benefits: Feedback loop to design is immediate Ready to use as code is completed Reduce technical debt
- 72. What about mobile apps? 72 Follow the OS guidelines first Use the native controls and styles as much as possible You decide the user experience and interactions, colors, icons, etc.
- 73. Key Takeaways 73 Design Language Systems help you deliberately plan and execute Consider adopting an existing system if it provides enough flexibility to make it your own. Start small and iterate. Read Brad Frost’s Atomic Design book.
- 74. Q&A 74 Carrie Lloyd carrene@us.ibm.com Chris Reckling chris_reckling@us.ibm.com ibm.biz/ics-design to see the guide in action