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.

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

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 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

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 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

70. Sketch
Library

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

84. Thank you.