SlideShare a Scribd company logo

Design System 101

•
•
M
Mayank Dhawan

The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan. Link of the event: https://bit.ly/2RwN4RF The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi. This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.

Related slideshows

Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
1 of 84
Design System 101 By Mayank Dhawan December 01, 2018 By Mayank Dhawan
By Mayank Dhawan December 01, 2018
Make design easier, better and faster. By Mayank Dhawan December 01, 2018 DESIGN SYSTEM 101
1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
Ever baked a Cake? 1. Intro to Design Systems
WHAT YOU NEED… • Ingredients • Recipe • Oven (and stuff) 1. Intro to Design Systems
Blue Cake Shop 1. Intro to Design Systems
The Blue Cake 1. Intro to Design Systems
WHEN IT STARTED… 1. Intro to Design Systems
WHEN YOU GET MORE CUSTOMERS YIKES 1. Intro to Design Systems
THEN, YOU HIRE SOMEONE YIKESPHEW 1. Intro to Design Systems
OVER SOME TIME… 1. Intro to Design Systems
BUT GROWING BY HIRING MAY NOT BE A SUSTAINABLE SOLUTION. 1. Intro to Design Systems
UNTIL YOU DECIDE TO BE SMART 1. Intro to Design Systems
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
BEFORE: THE BLUE BOOK 1. Intro to Design Systems Inconsistent. Slower. Not so Scaleable.
AFTER: THE BLUE BOOK 1. Intro to Design Systems
VOILA! 1. Intro to Design Systems Consistent. Faster. Better.
NOW, THEY CAN CREATE THESE. 1. Intro to Design Systems Different products. But from the same place.
This is what a Design System is for! 1. Intro to Design Systems
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
1. Style Guide: Colours, Typography, Icons and Illustrations, etc 2. Component Library: Buttons, Forms, Menu, Navigation, etc 3. Content Guide: Principles, Common Definitions, 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
How can a Design System benefit you? WHAT DO YOU THINK? 1. Intro to Design Systems
THE BENEFITS • Help Scale • Consistency • Quicker Iterations • Get into Details • Design Awareness • More Empathy 1. Intro to Design Systems
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
Some Examples 1. Intro to Design Systems
Duolingo Design
Duolingo Design
Duolingo Design
Duolingo DesignDuolingo Design
Shopify Polaris
Shopify Polaris
Shopify Polaris
Shopify Polaris Shopify Polaris
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
NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
PREPARING FOR IT • Making a List • Getting Buy-in • Forming a Team 2. Preparing for it
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
PREPARING FOR IT ✓ Making a List • Getting Buy-in • Forming a Team 2. Preparing for it
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
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
PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in • Forming a Team 2. Preparing for it
FORMING A TEAM • Designers to define 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
FORMING A TEAM Team Models by Nathan Curtis Solitary Model Centralised Model Federal Model 2. Preparing for it
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
PANTSUIT BY MINA MARKHAM A Solitary Model Example2. Preparing for it
HYBRID MODEL BY SALESFORCE By Jina Anne, Salesforce2. Preparing for it Using both Centralised and Federal Model
PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in ✓ Forming a Team 2. Preparing for it
NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
START FROM ANYWHERE • Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own
CSS Stats Facebook
A slide deck with screenshots to show inconsistency in UI
START FROM ANYWHERE ✓ Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own
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
Send 3. Creating your Own ✓ Colours ✓ Typography ✓ Spacing ✓ Images ✓ Visual Form ✓ Motion and Sound EVEN FOR A SIMPLE BUTTON, THESE ATTRIBUTES ARE INVOLVED
START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory • Component Library • Principles 3. Creating your Own
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
Atomic Design, Brad Frost
The Checklist by Nathan Curtis
An example of tracking progress
Big project into smaller sections
START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library • Principles 3. Creating your Own
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 specific to your organisation. Example: “Put Merchant First” by Shopify 3. Creating your Own
3. Creating your Own Principles, Shopify Polaris UNIVERSAL • • • • • EXPLICIT • • • • • •
3. Creating your Own Grow your Business Learn How We create Online Stores Learn How WHICH OPTION? REFER TO THE PRINCIPLE “PUT MERCHANT FIRST”
START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library ✓ Principles 3. Creating your Own
NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
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 files • 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
Sketch Library
Lonely Planet: Use Case Widgets
Lonely Planet: Use Case Widgets
Design System Club: Merchandise Ideas
NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
EVOLVING IT • Revisiting the System • Updating the System • Get into the Finer Details 5. Evolving it
REVISITING THE SYSTEM • Seek Feedback: From Contributors and Adopters • Governance: Revisit Team Models • Assess: Find things that break and iterate 5. Evolving it
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
GET INTO THE FINER DETAILS • Changes are inevitable: It is hard to do it well the first 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
EVOLVING IT ✓ Revisiting the System ✓ Updating the System ✓ Get into the Finer Details 5. Evolving it
TODAY’S AGENDA 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
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
Design System 101
mayankdhawan Workshop with UXGorilla and Design System 101 December 01, 2018 91springboard, Jhandewalan Extension, New Delhi
Thank you.

More Related Content

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 Definitions, 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
  • 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 define 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
  • 50. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  • 51. START FROM ANYWHERE • Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own
  • 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
  • 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 specific 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
  • 68. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  • 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 files • 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
  • 71. Lonely Planet: Use Case Widgets
  • 72. Lonely Planet: Use Case Widgets
  • 73. Design System Club: Merchandise Ideas
  • 74. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  • 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 first 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
  • 83. mayankdhawan Workshop with UXGorilla and Design System 101 December 01, 2018 91springboard, Jhandewalan Extension, New Delhi