Design System 101

1. Design System 101 By Mayank Dhawan December 01, 2018 By Mayank Dhawan

2. By Mayank Dhawan December 01, 2018

3. Make design easier, better and faster. By Mayank Dhawan December 01, 2018 DESIGN SYSTEM 101

4. 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA

5. 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA

6. Ever baked a Cake? 1. Intro to Design Systems

7. WHAT YOU NEED… • Ingredients • Recipe • Oven (and stuff) 1. Intro to Design Systems

8. Blue Cake Shop 1. Intro to Design Systems

9. The Blue Cake 1. Intro to Design Systems

10. WHEN IT STARTED… 1. Intro to Design Systems

11. WHEN YOU GET MORE CUSTOMERS YIKES 1. Intro to Design Systems

12. THEN, YOU HIRE SOMEONE YIKESPHEW 1. Intro to Design Systems

13. OVER SOME TIME… 1. Intro to Design Systems

14. BUT GROWING BY HIRING MAY NOT BE A SUSTAINABLE SOLUTION. 1. Intro to Design Systems

15. UNTIL YOU DECIDE TO BE SMART 1. Intro to Design Systems

16. 1. Ingredients 2. Recipe 3. Assembly Process 4. The Story 5. Customer Service 6. And More… THEY WROTE THE BLUE BOOK! THE BLUE BOOK 1. Intro to Design Systems

17. BEFORE: THE BLUE BOOK 1. Intro to Design Systems Inconsistent. Slower. Not so Scaleable.

18. AFTER: THE BLUE BOOK 1. Intro to Design Systems

19. VOILA! 1. Intro to Design Systems Consistent. Faster. Better.

20. NOW, THEY CAN CREATE THESE. 1. Intro to Design Systems Different products. But from the same place.

21. This is what a Design System is for! 1. Intro to Design Systems

22. A Design System is a collection of reusable components governed by clear standards. These components can be assembled together to build any number of products. WHAT IS A DESIGN SYSTEM? 1. Intro to Design Systems

23. 1. Style Guide: Colours, Typography, Icons and Illustrations, etc 2. Component Library: Buttons, Forms, Menu, Navigation, etc 3. Content Guide: Principles, Common Deﬁnitions, Voice and Tone, etc 4. Patterns Guide: User and Business Flows, etc 5. Reference Site: Documentation and Best Practices to use it all correctly DESIGN SYSTEM CONSISTS OF 1. Intro to Design Systems

24. How can a Design System benefit you? WHAT DO YOU THINK? 1. Intro to Design Systems

25. THE BENEFITS • Help Scale • Consistency • Quicker Iterations • Get into Details • Design Awareness • More Empathy 1. Intro to Design Systems

26. COMMON DOUBTS • “Won’t it be too restricting?” • “I won’t be able to explore a new style” • “What if something doesn’t work?” 1. Intro to Design Systems

27. Some Examples 1. Intro to Design Systems

28. Duolingo Design

29. Duolingo Design

30. Duolingo Design

31. Duolingo DesignDuolingo Design

32. Shopify Polaris

33. Shopify Polaris

34. Shopify Polaris

35. Shopify Polaris Shopify Polaris

36. CHECKOUT • Duolingo • Polaris by Shopify • Material by Google • Lightning by Salesforce • Carbon by IBM • Atlassian Design System • And many more… 1. Intro to Design Systems

37. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it

38. PREPARING FOR IT • Making a List • Getting Buy-in • Forming a Team 2. Preparing for it

39. MAKING A LIST • Reflect back on your last few projects: Look at the past few projects you did. How hectic was it? Were some tasks repetitive or took more time than they should have? • Audit to identify the pain points: See what worked or didn’t. Was there something you really wanted to do like a new illustration or an animation? • Components, Principles or Workflow: Were the problems related to lack of clarity in decision making or some problem with the workflow? Or was it something like re-doing smaller tasks such as recreating the same button? 2. Preparing for it

40. PREPARING FOR IT ✓ Making a List • Getting Buy-in • Forming a Team 2. Preparing for it

41. GETTING BUY-IN • Getting people excited may not be easy • Identify what’s in it for them: Look for ways that can help them and not you • Talk 1-on-1: Talk to people you work with. Suggest them to onboard their team members. Seek advice • Look at other examples: Show them some existing examples or case studies • A quick test case: Do a short exercise where you create a design system for a small flow so that the solution is specific to you • Get the final approval: Get the buy-in from the key people first 2. Preparing for it

42. GETTING BUY-IN: EXAMPLE • If Developers spend 30 minutes a day on: • Rebuilding the same component • Re-checking the code standards • Waiting for a Designer to review, etc  • Design System ROI: • 5 Developers, each charging INR 500/Hr • 2.5 hrs/week * 52 weeks * INR 500 * 5 = INR 3,25,000/year * UX Pin2. Preparing for it

43. PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in • Forming a Team 2. Preparing for it

44. FORMING A TEAM • Designers to deﬁne the visual components of the system • Front-end Developers to create code • Product Managers to ensure alignment with customer and business needs • Researchers to help understand user needs • Quality Experts to ensure smooth functioning • Content Strategists to help with voice and tone, principles • Leaders (VP and Directors) to align the vision and allocate resources * DS Handbook PROMPT: Who all you need to create a Product. So, does a DS which is a Product 2. Preparing for it

45. FORMING A TEAM Team Models by Nathan Curtis Solitary Model Centralised Model Federal Model 2. Preparing for it

46. FORMING A TEAM Team Models by Nathan Curtis2. Preparing for it Solitary Model • PRO: Single person governs the system. Fast and scrappy • CON: The person becomes a bottleneck for changes or decisions Centralised Model • PRO: A dedicated team for the system. In-depth work • CON: May get disconnected with what’s really happening Federal Model • PRO: Key members from each team are involved • CON: Slower progress since everyone has their day-to-day work as well

47. PANTSUIT BY MINA MARKHAM A Solitary Model Example2. Preparing for it

48. HYBRID MODEL BY SALESFORCE By Jina Anne, Salesforce2. Preparing for it Using both Centralised and Federal Model

49. PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in ✓ Forming a Team 2. Preparing for it

51. START FROM ANYWHERE • Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own

52. CSS Stats Facebook

53. A slide deck with screenshots to show inconsistency in UI

54. START FROM ANYWHERE ✓ Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own

55. VISUAL DESIGN INVENTORY Some of the fundamental elements are: • Colours: Brand and UI Palette, States, Data Viz., Hierarchy, Contrast • Typography: Fonts and Weights, Type Scale, Leading, Tracking, etc. • Spacing: Margins, Padding, Borders, Grid • Images: Icons, Illustrations, Images, File Formats • Visual Form: Material Quality such as Shadow, Elevation and Texture • Motion and Sound: Animation Properties, Sound Prompts, etc 3. Creating your Own

56. Send 3. Creating your Own ✓ Colours ✓ Typography ✓ Spacing ✓ Images ✓ Visual Form ✓ Motion and Sound EVEN FOR A SIMPLE BUTTON, THESE ATTRIBUTES ARE INVOLVED

57. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory • Component Library • Principles 3. Creating your Own

58. COMPONENT LIBRARY Break the Components into: • Elements: Buttons, Icons (Stand-alone elements: Atoms) • Modules: Search, Menu, Form (Assembly of Elements: Molecules) • Regions: Left-hand Navigation, Header (Organisms) • Layouts: Product Page, Listing Page (Templates) 3. Creating your Own Pieces like: Buttons, Cards, Lists, etc Take stock of all the interface elements Don’t be disheartened with inconsistencies Screenshots, Sketch Inventory Terms by Brad Frost, Atomic Design

59. Atomic Design, Brad Frost

60. The Checklist by Nathan Curtis

61. An example of tracking progress

62. Big project into smaller sections

63. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library • Principles 3. Creating your Own

64. PRINCIPLES • They are your “Guiding Light”: Helps articulate vision into words. Leads to better decision-making • Universal Principles: They are the principles that can work for many organisations such as “Cohesive Experience” • Explicit Principles: The principles that are speciﬁc to your organisation. Example: “Put Merchant First” by Shopify 3. Creating your Own

65. 3. Creating your Own Principles, Shopify Polaris UNIVERSAL • • • • • EXPLICIT • • • • • •

66. 3. Creating your Own Grow your Business Learn How We create Online Stores Learn How WHICH OPTION? REFER TO THE PRINCIPLE “PUT MERCHANT FIRST”

67. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library ✓ Principles 3. Creating your Own

69. USING IT • Make it easy to Integrate and Use: Share a Sketch library to the design team. Or, code samples, Github libraries with developers. Help them integrate the system into their working ﬁles • Create Pilot Projects or Use Cases: Create test websites, widgets, tutorial videos, etc., to show them how to put the system in use. • Get People involved: People like to be a part of something. Appeal to their softer side and keep the system as opt-in and not mandatory. Introduce systems to new hires, have them use it and take feedback 4. Using it

70. Sketch Library

71. Lonely Planet: Use Case Widgets

72. Lonely Planet: Use Case Widgets

73. Design System Club: Merchandise Ideas

75. EVOLVING IT • Revisiting the System • Updating the System • Get into the Finer Details 5. Evolving it

76. REVISITING THE SYSTEM • Seek Feedback: From Contributors and Adopters • Governance: Revisit Team Models • Assess: Find things that break and iterate 5. Evolving it

77. UPDATING THE SYSTEM All at Once • Make multiple changes in a single update • But, have to wait for the next update 5. Evolving it Piece by Piece • Don’t have to wait for the entire system to update • But, you would need a set of dedicated people

78. GET INTO THE FINER DETAILS • Changes are inevitable: It is hard to do it well the ﬁrst time • The V 1.0 is foundational: Principles will evolve • Go for the Long Run: Be technologically agnostic • Don’t stop Talking: It is meant for collaboration 5. Evolving it

79. EVOLVING IT ✓ Revisiting the System ✓ Updating the System ✓ Get into the Finer Details 5. Evolving it

80. TODAY’S AGENDA 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it

81. WHAT WE LEARNED SO FAR ✓ What are Design Systems ✓ How to prepare for it ✓ How to create it ✓ How to implement it ✓ How to evolve it

82. mayankdhawan Workshop with UXGorilla and Design System 101 December 01, 2018 91springboard, Jhandewalan Extension, New Delhi

83. Thank you.