A presentation at Artifact in in Austin, TX, USA by Brad Frost
DESIGN SYSTEMS ARE FOR PEOPLE
THE YEAR IS 2013…
B-SIDE THIS IS NOT THE WEB.
WEB WEB
D http://alistapart.com/article/responsive-web-design
http://www.abookapart.com/products/responsive-web-design
RESPONSIVE WEB DESIGN: THE MOVIE SUMMER 2016
FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES
FLEXIBLE GRID .thingamajig { width: 38.38472682975934797%; }
FLUID MEDIA img { max-width: 100%; }
MEDIA QUERIES @media all and (min-width: 45rem) { .thingamajig { display: flex; } }
THE CODE IS THE EASY PART.
HOW DO I CONVINCE MY BOSS/CLIENTS/COLLEAGUES? WHAT TOOLS DO WE USE? WHAT DELIVERABLES DO WE CREATE? HOW DO I WORK WITH MY COLLEAGUES? HOW DO WE MANAGE CHANGE?
PRODUCTS SERVICES FUNCTIONALITY FEATURES CONTENTMEDIUMSFORMA COUNTRIES CUSTOMERS LANGUAGES PEOPLE USER BROWSERS DEVICESENVIRONMENTS SCREENSIZESFORMFACTORSCONTEXT MORE
“The haystack just got bigger.” –Chris Coyier
DESIGN SYSTEMS!
“JUST MAKE COMPONENTS”
“We don’t want to hyper-focus on the components part of design systems.” –Mina Markham
COMPONENTS ARE THE EASY PART.
HOW DO I CONVINCE MY BOSS/CLIENTS/COLLEAGUES? WHAT TOOLS DO WE USE? WHAT DELIVERABLES DO WE CREATE? HOW DO I WORK WITH MY COLLEAGUES? HOW DO WE MANAGE CHANGE? HOW DO I GET PEOPLE TO ADOPT THE SYSTEM?
“Design systems are complicated because they involve people” –Dave Rupert
Design Systems 10% 90% People Design/Dev/Tools
PRINCIPLES AND GUIDELINES
discipline team teams department company
discipline team teams department company
customer support engineering marketing management accounting sales hr r&d digital administration
customer support engineering marketing management accounting sales hr r&d digital administration
customer support engineering marketing management accounting sales hr r&d digital administration
customer support engineering marketing management accounting sales hr r&d digital administration principles & guidelines
https://www.charitywater.org/about/mission.php
ZAPPOS 10 CORE VALUES ๏ Deliver WOW Through Service ๏ Embrace and Drive Change ๏ Create Fun and A Little Weirdness ๏ Be Adventurous, Creative, and Open-Minded ๏ Pursue Growth and Learning ๏ Build Open and Honest Relationships With Communication ๏ Build a Positive Team and Family Spirit ๏ Do More With Less ๏ Be Passionate and Determined ๏ Be Humble https://www.zapposinsights.com/about/core-values
An organizational constitution specifies your team’s purpose, values and behaviors, strategies, and goals. It creates “liberating rules” that help leaders and team members understand exactly how they are expected to treat each other and their customers. –Chris Edmonds http://thecultureengine.com/
discipline team teams department company
creative services research management vp cmo public relations social analysis digital assistants
creative services research management vp cmo public relations social analysis digital assistants
creative services research management vp cmo public relations social analysis digital assistants
creative services research management vp cmo public relations social analysis digital assistants principles & guidelines
BRAND GUIDELINES
https://design.ubuntu.com/brand/
VOICE AND TONE GUIDELINES
voiceandtone.com
discipline team teams department company
team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8
team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8
SPECIAL SNOWFLAKE SYNDROME
team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8
team 3 team 1 team 7 team 10 team 9 team 2 team 5 team 6 team 4 team 8 principles & guidelines
discipline team teams department company
frontend backend manager ux backend content visual frontend ux qa
frontend backend manager ux backend content visual frontend ux qa
frontend backend manager ux backend content visual frontend ux qa
frontend backend manager ux backend content visual frontend ux qa principles & guidelines
discipline team teams department company
frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend principles & guidelines
CSS SYNTAX GUIDELINES code block .thisishowwedoit { }
CSS SYNTAX GUIDELINES code block .this-is-how-we-do-it { }
CSS SYNTAX GUIDELINES code block .thisIsHowWeDoIt { }
CSS SYNTAX GUIDELINES code block .this__is__how__we__do—-it { }
CSS SYNTAX GUIDELINES code block .- -…- - ..- - —— .….—— — { }
discipline team teams department company design systems
USER RESEARCH AND INTERVIEWS
“You can probably carbon date our UIs based on the design.”
“The main challenges are the existing thousands of lines of code, acquisitions, and existing suite of technologies that makes up a billion dollars a year. We’d like to not lose that billion dollars.”
“There’s a lot of institutional knowledge here locked up in people’s heads. Slack channels are great, but it becomes a scavenger hunt to find information about how something’s supposed to work.”
“For a basic expand/collapse pattern, the devs spent 2 days going to different teams to find the code, then still had to rebuild it themselves.”
USER INTERVIEWS ๏ Round up a diverse group of stakeholders, colleagues, and users who would impact/be impacted by a design system ๏ Talk about current workflow, pain points, hopes, fears, dreams, frustrations, and other things that can influence the success of the design project ๏ Latch onto poignant quotes and emerging themes ๏ Synthesize key themes in preparation for kickoff
DESIGN SYSTEM PRINCIPLES ๏ Make the best thing the easiest thing ๏ Design for “grab it quick” efficiency ๏ Design for contribution and community ๏ Crowd-proof the markup ๏ Fit the workflow ๏ Just enough documentation ๏ Technology agnostic ๏ Embed the brand in the code ๏ Consistent, not homogenous ๏ Opinionated defaults ๏ Make people smarter just by using it
DEATH TO THE WATERFALL COMPLEX NAVIGATION
comp production
design development
design frontend design development
MINIMUM VIABLE ARTIFACTS
http://trentwalton.com/2011/07/14/content-choreography/
whiteboard sketch that tool you’ve spent 7 years mastering working product
https://airbnb.design/sketching-interfaces/
COLLABORATION AND COMMUNICATION BEAT DELIVERABLES
COLLABORATION AND COMMUNICATION BEAT PROCESS
https://danmall.me/articles/designer-developer-workflow/
DESIGN SYSTEM TEAMS
https://flic.kr/p/cHPcBJ
https://flic.kr/p/KdvF6Z
DESIGN SYSTEM MAKERS ๏Have a birds-eye perspective of entire ecosystem ๏The ones responsible for maintaining the design system ๏Approve changes ๏Work with users and business to make sure it’s addressing product needs ๏Need to establish a pattern-driven, cross-disciplinary workflow https://flic.kr/p/cHPcBJ
DESIGN SYSTEM USERS ๏Provide an on-the-ground perspective focused on specific applications ๏May also be makers, separate development teams, junior-level developers, partner agencies, external development shops, and/or other third-parties ๏Should coordinate with makers to make sure the system is addressing their needs ๏May be widely distributed and process may be extremely waterfall https://flic.kr/p/KdvF6Z
SOLITARY https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
CENTRALIZED https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
FEDERATED https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
CYCLICAL https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4
“Inclusion at this deepest level is about respect.” –Kim Williams
A DESIGN SYSTEM IS A HUMBLE PRODUCT
https://coggle.it/diagram/V0hkiP976OIbGpy8/t/vanilla-pattern
PRODUCTS SERVICES FUNCTIONALITY FEATURES CONTENTMEDIUMSFORMA COUNTRIES CUSTOMERS LANGUAGES PEOPLE USER BROWSERS DEVICESENVIRONMENTS SCREENSIZESFORMFACTORSCONTEXT MORE
COLLABORATE. COMMUNICATE. BE THOUGHTFUL. BE GOOD TO PEOPLE. BE GOOD FOR PEOPLE.
“Our job isn’t just to build cool stuff; our job is to build stuff ethically.” –David Dylan Thomas
discipline team teams department company
discipline team teams department company humanity
THANKS! brad@bradfrost.com | bradfrost.com
My closing presentation for Artifact 2019 https://artifactconf.com/
for free. You
can too.