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