SlideShare uma empresa Scribd logo
1 de 67
Baixar para ler offline
Hello.Let’s talk about Design Systems!
DESIGN SYSTEMS:
ENTERPRISE UX EVOLUTION
Anne Grundhoefer
Senior UX Designer
@annegrundhoefer
Drew Loomer
Badass
@drewloomer
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
HOW CAN WE FIX THIS?
DESIGN SYSTEMS
http://www.multiscreen-ux-design.com (Wolfram Nagel / SETU GmbH)
http://www.multiscreen-ux-design.com (Wolfram Nagel / SETU GmbH)
“But I build applications, not
Legos…”
I KNOW WHAT YOU’RE THINKING
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
• Need to look and behave similarly
• Implement similar UI components
• Duplicate low-level functionality
• Must be white-labeled or themed
• Are built on different tech stacks
• Suffer from visual regression bugs
A Design System will provide value if your products…
D O I N E E D A D E S I G N S Y S T E M ?
• Provide a single source of truth for building UIs
• Save time and money
• Increase consistency
• Decrease maintenance
• UX teams focus on the experience; dev teams on
implementation
• Improve user experience through well-defined
and learned behaviors
BENEFITS OF A
DESIGN SYSTEM
THE NEW STANDARD
Salesforce’s Lightning Design System is a leader in
the space. It provides great accessibility guidelines.
U.S. Web Design Standards supplies assets and
direction for maintaining consistent experiences
across federal government websites.
IBM’s design language serves as an instructional tool
to help communicate their brand’s user interface
through many different kinds of products.
Duolingo creates a fun and consistent education
experience across different platforms and across
different continents.
Intuit Harmony has a great narrative of the reasoning
behind their component designs.
Shopify’s Polaris has a well-documented public
interface (API) for each component with guidelines
and well-defined conventions.
BOOTSTRAP?
WAIT… ISN’T THIS
WHY NOT?
• Those are rapid prototyping tools, not
design systems
• Their components do not consider your
unique context
• Not detailed enough
• You take power away from your
developers
• You are beholden to their timeline and
community
B O O T S T R A P O R F O U N D AT I O N
HOW TO GET STARTED
Pattern Library
UI Components, Page Templates, Reference Files
(.psd, .ai, .sketch)
Code
Coding Standards, Supported Browsers and Devices, Versioning,

Pattern Implementation
Brand Identity
Fonts, Colors, Meaning, Visual Language,
White Labeling Logo/marketing related
Editorial Guidelines
Voice and Tone, Word List, Capitalization and
Punctuation
Foundations and Principles
Guiding Design Principles, Accessibility
Targets, Animations, Scaling, Grids
“A Design System isn't a project. It
is a product, serving products.”
A design system is not simply a style guide. It is a living thing whose value is realized only
when products successfully implement the patterns of the system.
Nathan Curtis
Design System Evangelist
BUILDING A PATTERN LIBRARY
• Check up to 25 components you feel are most important to include
in the first version of the design system.
• Cross out at least two sections you think are unnecessary or
unimportant for your applications.
• Add a star by up to five components that you should expect to
spend extra effort getting right.
Participants:
Identify components
with a checklist
1A simple checklist can quickly identify which
components are essential to an organization.
The cut-up gives visibility on how you are doing
things today, and the level of complexity a
component needs to accommodate.
2Cut-up components
from various interfaces
• Organize and print out screenshots from the existing site and/or
applications
• Create categorized sections (forms/buttons/navigation/etc.) based
on the component checklist
• Participants cut up each page into components, separating
components into their assigned category
• This exercise generates momentum, brings clarity, and trims fat
Design Systems: Enterprise UX Evolution
Before you start designing components,
you need to establish a base.
• Establish low-level design principles
• Start with color, typography, iconography, units of
measure, grids, spacing
• Align on what you are going to name each component
3Lay a solid foundation
for your components
Rebuild each of your UI components, one
at a time, from the ground up.
• Identify the smallest pieces and build from there
• Define which pieces inform others
• Write down reasons why you made certain
design decisions
4Design components
from scratch
For a design system to thrive and survive,
it needs a sufficient level of management
and organization.
• Create the order for when you are going to tackle each
component
• Schedule weekly reviews with stakeholders and
developers
• Establish long-term governance
5Work closely with
your team
THINGS TO CONSIDER
BUILDING A PATTERN LIBRARY
43
Your Software’s Context
You cannot simply design whatever you want. Take into account all
of the software you have today when designing, and frequently
refer back to the results of the component cut up for reference.
Your Users
Who are you designing for? Are your users bank tellers, auto
mechanics, grandparents? How are they accessing your software?
For how many hours a day? Remember that designers and devs are
also users of the design system.
• Modern vs. legacy web browsers
• Native/web hybrid
• Native desktop app for Mac/Windows
• Native mobile app for iOS/Android
Which devices/environments do you need
to support?
Device Support
• Mobile
• Tablet
• Desktop
• Large Screens
• 4K/Retina
• Watch
What are your responsive breakpoints?
How does that affect our component design?
Responsive
• Create flexible systems that consider the
experiences of people with disabilities from
the start
• Maintain reasonable contrast ratio between
text and background colors
• 4:5:1 for small text
• 3:1 for large text
• Use online tools
• wave.webaim.org
• colorsafe.co
• hexnaw.com
Do you need Section 508 and WCAG 2.0
compliance?
Accessibility
• Make your CSS highly configurable
• Select smart defaults by making the contrast
between colors as high as possible
• Leverage color algorithms in your CSS
preprocessor for dummy-proof color schemes
• Consider providing a Light UI or Dark UI for
different environments
Does your experience need to be easily
themed or rebranded?
White-Label
• Nothing – the component exists but hasn’t started
• Loading – waiting for the component to render
• None – the component has initialized, but it’s empty
• One – you have some data
• Some – the ideal state for this component
• Too Many – Too many results/characters/etc.
• Incorrect/Correct – success/error
• Done – correct input has been received
Designing for all states
• Active/Hover/Focus – elements that can be interacted with
BUILDING AN IMPLEMENTATION
YOUR GOAL:
Enable faster and more consistent
design and development
A Design System is not an application framework and
should not be coupled to one.
Build self-contained components
• Create a prescriptive application template
• Build on or for one particular framework
DO NOT
• Focus on building long-lasting vanilla HTML/CSS/JS
• Keep your components “dumb”
• Consider all your systems
DO
Enable faster and more consistent developmentYOUR GOAL:
Provide useful assets and comprehensive documentation
of how and when to use each component in the system.
Deliver obvious value
Enable faster and more consistent developmentYOUR GOAL:
• Define required HTML structure
• Include production-ready CSS and JS
• Be semantic and accessible
• Make components configurable
• Ensure consistency
CODE STRUCTURE:
Small, configurable, and
well-documented components
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Small, configurable, and well-documented components
STRUCTURE
CODE
Central
Repository
ROLL IT OUT
Ensure adoption by making your Design System
easy to consume and update.
Publish multiple ways Make it collaborative
Update frequently Ensure reliability
A design system can be a large
investment of time and money,
but it pays clear dividends.
SELLING DESIGN SYSTEMS
http://www.usability.gov/what-and-why/benefits-of-ucd.html
*Benefits of User Centered Design
$1,652,400 annual savings or 21.25%time saved
Assumptions are in back up slides.
(x hrs)*($4050.00)*(48 weeks) = annual savings
100 devs
each save 2 hrs
per week
=
$388,800
annual savings*
100 devs
each save 30 min
per week
=
$97,200
annual savings*
100 devs
each save 5 hrs
per week
=
$972,000
annual savings*
100 devs
each save 1 hr
per week
=
$194,400
annual savings*
Time saved
when art direction
isn’t needed
Time saved
from rework
Time saved
when components
are compatible
Time saved
when assets
are available
adapted from an article written by Josh Clark at Big Medium
BEFORE AFTER
• Less, more productive meetings
• More alignment and collaboration
• More formalized processes
• Change in company culture to working
smarter, not harder
• Confidence that design will be
implemented correctly the first time
• Teams are less overwhelmed and not in
perpetual fire fighting mode
• Teams that are already stretched to
capacity will increase speed and quality
Dev
UX
Design
Brand
Strategy &
Insights
Digital
Marketing
Analytics
Design
System
DIGITAL TEAMS
DAY TO DAY IMPACT
Dev
UX
Design
Brand
Strategy &
Insights
Digital
Marketing
Analytics
Design
System
• Provide a single source of truth for
building UIs
• Save time and money
• Increase consistency
• Decrease maintenance
• UX teams focus on the experience, dev
teams on implementation
• Improve user experience through well-
defined and learned behaviors
DIGITAL TEAMS
BUSINESS IMPACT
Thanks! Anne Grundhoefer
@annegrundhoefer
http://www.usability.gov/what-and-why/benefits-of-ucd.html
*Benefits of User Centered Design
Hourly rate assumptions
ratio = 2:1:1 (2 offshore :1 onshore employee : 1 onshore contractor)
offshore rate = $18 x (50 devs) = $900.00 hrly
onshore FTE rate = $48 x (25 devs) = $1200.00 hrly
onshore contractor rate = $78 x (25 devs) = $1950.00 hrly
Avg hrly rate = $40.50 x 100 developers = $4050.00 hrly
Annual resource costs per 100 resources = $7,776,000
(x hrs)*($4050.00)*(48 weeks) = annual cost

Mais conteúdo relacionado

Mais procurados

Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestPaya Do
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design SystemDrew Burdick
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internallyEugene Kardash
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityuxpin
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterpriseuxpin
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design SystemLewis Lin 🦊
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System ProposalCharlie Weston
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a ProductThoughtworks
 
DesignOps Handbook Condensed
DesignOps Handbook CondensedDesignOps Handbook Condensed
DesignOps Handbook CondensedPeter Weibrecht
 
Building compelling business cases for Design Systems
Building compelling business cases for Design SystemsBuilding compelling business cases for Design Systems
Building compelling business cases for Design SystemsLaura Van Doore
 
How to build a design system
How to build a design systemHow to build a design system
How to build a design systemFaizur Rehman
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentVolodymyr Melnyk
 

Mais procurados (20)

Design System 101
Design System 101Design System 101
Design System 101
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
Design System
Design SystemDesign System
Design System
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalability
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Process
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System Proposal
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
 
Design System
Design SystemDesign System
Design System
 
DesignOps Handbook Condensed
DesignOps Handbook CondensedDesignOps Handbook Condensed
DesignOps Handbook Condensed
 
Building compelling business cases for Design Systems
Building compelling business cases for Design SystemsBuilding compelling business cases for Design Systems
Building compelling business cases for Design Systems
 
Atomic design
Atomic designAtomic design
Atomic design
 
How to build a design system
How to build a design systemHow to build a design system
How to build a design system
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product Development
 

Semelhante a Design Systems: Enterprise UX Evolution

Implementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelImplementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelProduct School
 
Building Design Systems - Columbus Web Group
Building Design Systems - Columbus Web GroupBuilding Design Systems - Columbus Web Group
Building Design Systems - Columbus Web GroupBurton Smith
 
Zeeto Tech Exchange: Design for Scalability - UX
Zeeto Tech Exchange: Design for Scalability - UXZeeto Tech Exchange: Design for Scalability - UX
Zeeto Tech Exchange: Design for Scalability - UXZeetoSlides
 
MB Design Systems slides.pdf
MB Design Systems slides.pdfMB Design Systems slides.pdf
MB Design Systems slides.pdf1508 A/S
 
4 Steps to Start a Design System
4 Steps to Start a Design System 4 Steps to Start a Design System
4 Steps to Start a Design System Matthieu Lerat
 
Distributed teams
Distributed teamsDistributed teams
Distributed teamsKush Shah
 
Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...HostedbyConfluent
 
Modern software architect post the agile wave
Modern software architect post the agile waveModern software architect post the agile wave
Modern software architect post the agile waveNiels Bech Nielsen
 
Scalable Design Systems with Sketch
Scalable Design Systems with SketchScalable Design Systems with Sketch
Scalable Design Systems with SketchLaura Van Doore
 
VSTS Migration Briefing
VSTS Migration BriefingVSTS Migration Briefing
VSTS Migration BriefingAngela Dugan
 
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...Microservices at Scale: How to Reduce Overhead and Increase Developer Product...
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...DevOps.com
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Design systems in organisations
Design systems in organisationsDesign systems in organisations
Design systems in organisationsAnnalisa Valente
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Agileand saas davepatterson_armandofox_050813webinar
Agileand saas davepatterson_armandofox_050813webinarAgileand saas davepatterson_armandofox_050813webinar
Agileand saas davepatterson_armandofox_050813webinarRoberto Jr. Figueroa
 

Semelhante a Design Systems: Enterprise UX Evolution (20)

Implementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravelImplementing a Design System in a Small Team by SnapTravel
Implementing a Design System in a Small Team by SnapTravel
 
Building Design Systems - Columbus Web Group
Building Design Systems - Columbus Web GroupBuilding Design Systems - Columbus Web Group
Building Design Systems - Columbus Web Group
 
Zeeto Tech Exchange: Design for Scalability - UX
Zeeto Tech Exchange: Design for Scalability - UXZeeto Tech Exchange: Design for Scalability - UX
Zeeto Tech Exchange: Design for Scalability - UX
 
MB Design Systems slides.pdf
MB Design Systems slides.pdfMB Design Systems slides.pdf
MB Design Systems slides.pdf
 
The UX of Security
The UX of SecurityThe UX of Security
The UX of Security
 
4 Steps to Start a Design System
4 Steps to Start a Design System 4 Steps to Start a Design System
4 Steps to Start a Design System
 
Distributed teams
Distributed teamsDistributed teams
Distributed teams
 
Distributed_teams
Distributed_teamsDistributed_teams
Distributed_teams
 
Design systems
Design systemsDesign systems
Design systems
 
Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...
 
Modern software architect post the agile wave
Modern software architect post the agile waveModern software architect post the agile wave
Modern software architect post the agile wave
 
Scalable Design Systems with Sketch
Scalable Design Systems with SketchScalable Design Systems with Sketch
Scalable Design Systems with Sketch
 
VSTS Migration Briefing
VSTS Migration BriefingVSTS Migration Briefing
VSTS Migration Briefing
 
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...Microservices at Scale: How to Reduce Overhead and Increase Developer Product...
Microservices at Scale: How to Reduce Overhead and Increase Developer Product...
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Design systems in organisations
Design systems in organisationsDesign systems in organisations
Design systems in organisations
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Agileand saas davepatterson_armandofox_050813webinar
Agileand saas davepatterson_armandofox_050813webinarAgileand saas davepatterson_armandofox_050813webinar
Agileand saas davepatterson_armandofox_050813webinar
 
The Modern Software Architect
The Modern Software ArchitectThe Modern Software Architect
The Modern Software Architect
 

Último

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Último (20)

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

Design Systems: Enterprise UX Evolution

  • 1. Hello.Let’s talk about Design Systems! DESIGN SYSTEMS: ENTERPRISE UX EVOLUTION
  • 2. Anne Grundhoefer Senior UX Designer @annegrundhoefer Drew Loomer Badass @drewloomer
  • 8. HOW CAN WE FIX THIS? DESIGN SYSTEMS
  • 11. “But I build applications, not Legos…” I KNOW WHAT YOU’RE THINKING
  • 22. • Need to look and behave similarly • Implement similar UI components • Duplicate low-level functionality • Must be white-labeled or themed • Are built on different tech stacks • Suffer from visual regression bugs A Design System will provide value if your products… D O I N E E D A D E S I G N S Y S T E M ?
  • 23. • Provide a single source of truth for building UIs • Save time and money • Increase consistency • Decrease maintenance • UX teams focus on the experience; dev teams on implementation • Improve user experience through well-defined and learned behaviors BENEFITS OF A DESIGN SYSTEM
  • 25. Salesforce’s Lightning Design System is a leader in the space. It provides great accessibility guidelines.
  • 26. U.S. Web Design Standards supplies assets and direction for maintaining consistent experiences across federal government websites.
  • 27. IBM’s design language serves as an instructional tool to help communicate their brand’s user interface through many different kinds of products.
  • 28. Duolingo creates a fun and consistent education experience across different platforms and across different continents.
  • 29. Intuit Harmony has a great narrative of the reasoning behind their component designs.
  • 30. Shopify’s Polaris has a well-documented public interface (API) for each component with guidelines and well-defined conventions.
  • 32. WHY NOT? • Those are rapid prototyping tools, not design systems • Their components do not consider your unique context • Not detailed enough • You take power away from your developers • You are beholden to their timeline and community B O O T S T R A P O R F O U N D AT I O N
  • 33. HOW TO GET STARTED
  • 34. Pattern Library UI Components, Page Templates, Reference Files (.psd, .ai, .sketch) Code Coding Standards, Supported Browsers and Devices, Versioning,
 Pattern Implementation Brand Identity Fonts, Colors, Meaning, Visual Language, White Labeling Logo/marketing related Editorial Guidelines Voice and Tone, Word List, Capitalization and Punctuation Foundations and Principles Guiding Design Principles, Accessibility Targets, Animations, Scaling, Grids
  • 35. “A Design System isn't a project. It is a product, serving products.” A design system is not simply a style guide. It is a living thing whose value is realized only when products successfully implement the patterns of the system. Nathan Curtis Design System Evangelist
  • 37. • Check up to 25 components you feel are most important to include in the first version of the design system. • Cross out at least two sections you think are unnecessary or unimportant for your applications. • Add a star by up to five components that you should expect to spend extra effort getting right. Participants: Identify components with a checklist 1A simple checklist can quickly identify which components are essential to an organization.
  • 38. The cut-up gives visibility on how you are doing things today, and the level of complexity a component needs to accommodate. 2Cut-up components from various interfaces • Organize and print out screenshots from the existing site and/or applications • Create categorized sections (forms/buttons/navigation/etc.) based on the component checklist • Participants cut up each page into components, separating components into their assigned category • This exercise generates momentum, brings clarity, and trims fat
  • 40. Before you start designing components, you need to establish a base. • Establish low-level design principles • Start with color, typography, iconography, units of measure, grids, spacing • Align on what you are going to name each component 3Lay a solid foundation for your components
  • 41. Rebuild each of your UI components, one at a time, from the ground up. • Identify the smallest pieces and build from there • Define which pieces inform others • Write down reasons why you made certain design decisions 4Design components from scratch
  • 42. For a design system to thrive and survive, it needs a sufficient level of management and organization. • Create the order for when you are going to tackle each component • Schedule weekly reviews with stakeholders and developers • Establish long-term governance 5Work closely with your team
  • 43. THINGS TO CONSIDER BUILDING A PATTERN LIBRARY 43
  • 44. Your Software’s Context You cannot simply design whatever you want. Take into account all of the software you have today when designing, and frequently refer back to the results of the component cut up for reference. Your Users Who are you designing for? Are your users bank tellers, auto mechanics, grandparents? How are they accessing your software? For how many hours a day? Remember that designers and devs are also users of the design system.
  • 45. • Modern vs. legacy web browsers • Native/web hybrid • Native desktop app for Mac/Windows • Native mobile app for iOS/Android Which devices/environments do you need to support? Device Support • Mobile • Tablet • Desktop • Large Screens • 4K/Retina • Watch What are your responsive breakpoints? How does that affect our component design? Responsive
  • 46. • Create flexible systems that consider the experiences of people with disabilities from the start • Maintain reasonable contrast ratio between text and background colors • 4:5:1 for small text • 3:1 for large text • Use online tools • wave.webaim.org • colorsafe.co • hexnaw.com Do you need Section 508 and WCAG 2.0 compliance? Accessibility • Make your CSS highly configurable • Select smart defaults by making the contrast between colors as high as possible • Leverage color algorithms in your CSS preprocessor for dummy-proof color schemes • Consider providing a Light UI or Dark UI for different environments Does your experience need to be easily themed or rebranded? White-Label
  • 47. • Nothing – the component exists but hasn’t started • Loading – waiting for the component to render • None – the component has initialized, but it’s empty • One – you have some data • Some – the ideal state for this component • Too Many – Too many results/characters/etc. • Incorrect/Correct – success/error • Done – correct input has been received Designing for all states • Active/Hover/Focus – elements that can be interacted with
  • 49. YOUR GOAL: Enable faster and more consistent design and development
  • 50. A Design System is not an application framework and should not be coupled to one. Build self-contained components • Create a prescriptive application template • Build on or for one particular framework DO NOT • Focus on building long-lasting vanilla HTML/CSS/JS • Keep your components “dumb” • Consider all your systems DO Enable faster and more consistent developmentYOUR GOAL:
  • 51. Provide useful assets and comprehensive documentation of how and when to use each component in the system. Deliver obvious value Enable faster and more consistent developmentYOUR GOAL: • Define required HTML structure • Include production-ready CSS and JS • Be semantic and accessible • Make components configurable • Ensure consistency
  • 52. CODE STRUCTURE: Small, configurable, and well-documented components
  • 53. Small, configurable, and well-documented components STRUCTURE CODE
  • 54. Small, configurable, and well-documented components STRUCTURE CODE
  • 55. Small, configurable, and well-documented components STRUCTURE CODE
  • 56. Small, configurable, and well-documented components STRUCTURE CODE
  • 57. Small, configurable, and well-documented components STRUCTURE CODE
  • 58. Small, configurable, and well-documented components STRUCTURE CODE
  • 59. Small, configurable, and well-documented components STRUCTURE CODE
  • 60. Central Repository ROLL IT OUT Ensure adoption by making your Design System easy to consume and update. Publish multiple ways Make it collaborative Update frequently Ensure reliability
  • 61. A design system can be a large investment of time and money, but it pays clear dividends. SELLING DESIGN SYSTEMS
  • 62. http://www.usability.gov/what-and-why/benefits-of-ucd.html *Benefits of User Centered Design $1,652,400 annual savings or 21.25%time saved Assumptions are in back up slides. (x hrs)*($4050.00)*(48 weeks) = annual savings 100 devs each save 2 hrs per week = $388,800 annual savings* 100 devs each save 30 min per week = $97,200 annual savings* 100 devs each save 5 hrs per week = $972,000 annual savings* 100 devs each save 1 hr per week = $194,400 annual savings* Time saved when art direction isn’t needed Time saved from rework Time saved when components are compatible Time saved when assets are available
  • 63. adapted from an article written by Josh Clark at Big Medium BEFORE AFTER
  • 64. • Less, more productive meetings • More alignment and collaboration • More formalized processes • Change in company culture to working smarter, not harder • Confidence that design will be implemented correctly the first time • Teams are less overwhelmed and not in perpetual fire fighting mode • Teams that are already stretched to capacity will increase speed and quality Dev UX Design Brand Strategy & Insights Digital Marketing Analytics Design System DIGITAL TEAMS DAY TO DAY IMPACT
  • 65. Dev UX Design Brand Strategy & Insights Digital Marketing Analytics Design System • Provide a single source of truth for building UIs • Save time and money • Increase consistency • Decrease maintenance • UX teams focus on the experience, dev teams on implementation • Improve user experience through well- defined and learned behaviors DIGITAL TEAMS BUSINESS IMPACT
  • 67. http://www.usability.gov/what-and-why/benefits-of-ucd.html *Benefits of User Centered Design Hourly rate assumptions ratio = 2:1:1 (2 offshore :1 onshore employee : 1 onshore contractor) offshore rate = $18 x (50 devs) = $900.00 hrly onshore FTE rate = $48 x (25 devs) = $1200.00 hrly onshore contractor rate = $78 x (25 devs) = $1950.00 hrly Avg hrly rate = $40.50 x 100 developers = $4050.00 hrly Annual resource costs per 100 resources = $7,776,000 (x hrs)*($4050.00)*(48 weeks) = annual cost