Design Systems Are For People

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

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

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