Design System 101

Design System 101

• 1.
  Design System 101 ByMayank Dhawan December 01, 2018 By Mayank Dhawan
• 2.
  By Mayank DhawanDecember 01, 2018
• 3.
  Make design easier, betterand faster. By Mayank Dhawan December 01, 2018 DESIGN SYSTEM 101
• 4.
  1. Intro toDesign Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
• 5.
  1. Intro toDesign Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
• 6.
  Ever baked aCake? 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 GETMORE CUSTOMERS YIKES 1. Intro to Design Systems
• 12.
  THEN, YOU HIRESOMEONE YIKESPHEW 1. Intro to Design Systems
• 13.
  OVER SOME TIME… 1.Intro to Design Systems
• 14.
  BUT GROWING BYHIRING MAY NOT BE A SUSTAINABLE SOLUTION. 1. Intro to Design Systems
• 15.
  UNTIL YOU DECIDETO 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 BLUEBOOK 1. Intro to Design Systems Inconsistent. Slower. Not so Scaleable.
• 18.
  AFTER: THE BLUEBOOK 1. Intro to Design Systems
• 19.
  VOILA! 1. Intro toDesign Systems Consistent. Faster. Better.
• 20.
  NOW, THEY CANCREATE THESE. 1. Intro to Design Systems Different products. But from the same place.
• 21.
  This is whata Design System is for! 1. Intro to Design Systems
• 22.
  A Design Systemis 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 aDesign System benefit you? WHAT DO YOU THINK? 1. Intro to Design Systems
• 25.
  THE BENEFITS • HelpScale • Consistency • Quicker Iterations • Get into Details • Design Awareness • More Empathy 1. Intro to Design Systems
• 26.
  COMMON DOUBTS • “Won’tit 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. Introto 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 • Polarisby 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. Introto 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 • Gettingpeople 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 TeamModels by Nathan Curtis Solitary Model Centralised Model Federal Model 2. Preparing for it
• 46.
  FORMING A TEAM TeamModels 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 MINAMARKHAM A Solitary Model Example2. Preparing for it
• 48.
  HYBRID MODEL BYSALESFORCE 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. Introto 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
• 52.
  CSS Stats Facebook
• 53.
  A slide deckwith 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 Someof 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 yourOwn ✓ 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 theComponents 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, BradFrost
• 60.
  The Checklist by NathanCurtis
• 61.
  An example of trackingprogress
• 62.
  Big project into smallersections
• 63.
  START FROM ANYWHERE ✓Do an Audit, first ✓ Visual Design Inventory ✓ Component Library • Principles 3. Creating your Own
• 64.
  PRINCIPLES • They areyour “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 yourOwn Principles, Shopify Polaris UNIVERSAL • • • • • EXPLICIT • • • • • •
• 66.
  3. Creating yourOwn 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. Introto Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
• 69.
  USING IT • Makeit 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
• 70.
  Sketch Library
• 71.
  Lonely Planet: UseCase Widgets
• 72.
  Lonely Planet: UseCase Widgets
• 73.
  Design System Club:Merchandise Ideas
• 74.
  NEXT UP 1. Introto Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
• 75.
  EVOLVING IT • Revisitingthe 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 Allat 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 THEFINER 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 ✓ Revisitingthe System ✓ Updating the System ✓ Get into the Finer Details 5. Evolving it
• 80.
  TODAY’S AGENDA 1. Introto Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
• 81.
  WHAT WE LEARNEDSO 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 UXGorillaand Design System 101 December 01, 2018 91springboard, Jhandewalan Extension, New Delhi
• 84.
  Thank you.