You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
2. Jess Clark
LinkedIn
San Francisco Bay Area
2010-Present
Front Desk Receptionist
Summer Intern
Brand & Marketing
Search
Mobile Redesign
Homepage
Design Systems
Honoring
In appreciation of
Signed Date
Jessica
her ability to count my
mistakes all year.
Mrs. Nelson 6/3/99
3. 01 Early Days 02 Toddler Years 03 Tween Years 04 All Grown Up
S T A G E S O F A D E S I G N S Y S T E M
4. P E O P L E
Write
Research
QA
Design
Code
Manage
Code
Docs Tools
Specs
Approval
Manage
Roadmap
Release
Comms
P I L L A R S O F A D E S I G N S Y S T E M
P E O P L E P R O D U C T P R O C E S S
18. • Your peers are still duplicating work
• Your system isn’t reaching enough
people
• Things are getting lost in translation
between design and code
G R O W I N G P A I N S
26. P R O D U C T
</>
html
1| <div class="hovercard-container">
2| <!-- Put hovercard trigger element here -->
3| <div role="tooltip" class="hovercard">
4| I am a hovercard
5| </div>
6| </div>
scss
1| .hovercard-container {
2| @include artdeco(Hovercard top);
3| }
27. P R O C E S S
The group responsible for the
foundations, principles, and
documentation that make up the
system. They manage each release
of new and updated patterns.
The group embedded with
product teams to closely
collaborate on new products and
feature builds. Help teams use,
extend, and evolve the system.
The leadership team that keeps everything everything
organized, resourced, and running smoothly.
R A L L Y
R E PR U N
30. T E A M S T A G E
Design
Communication Collaboration
Designers Engineers
Manager
Early Days
01 02 03 04
Toddler Years Tween Years Grown Up
P R O C E S S
P E O P L E
P R O D U C T
Platform
Documentation
31. “Run like mad and work with everyone”
T A K E A W A Y
32. • People are wondering what
you’re building towards
• You’re answering more questions
and building less things
• People see you as the pattern
police!
G R O W I N G P A I N S
41. P R O D U C T
Interaction & configuration Internationalization
42. Keyboard navigation
P R O D U C T
Keyboard navigationDatepicker Ranged
Text input focus/click/tap
Close calendar, defocus
Cursor: Not allowed
Which input method is used?
Increment/decrement both months
Text input error state. Error bar:
"Date unavailable"
Text input error state. Error bar:
"Dates must be in DD/MM/YY
format"
User cleared field
Validate input on confirm
Y N Y N
Y N
Y N
Date input Move focus off, click/tap outside of calendar
Text input keyboard Calendar click/tap
Both text inputs empty Both filled Start date only filled
Start date focused
Open calendar
Open calendar Open calendar
End date only filled
Calendar keyboard
Month controlsDate Date
Valid format?
In range?
Blackout? Blackout?
Cleared?
Open with current
date in le9 calendar
Open with start date
in le9 calendar
Open with end date
in right calendar
Error
Error
Error
1
1
1
1
1
Date format can be
customized/localized
Clear all errors except
start/end date issues
End date focused
43. P R O D U C T
</>
1| {{artdeco-slider max=100 min=0 step=10 value=50}}{{/artdeco-slider}}
2| {{artdeco-pill type="toggle" label="Las Vegas, NV"}}{{/artdeco-pill}}
3| {{artdeco-completeness-meter color="muted" max="100" value="45" benchmark="50"/}}
4| {{li-icon type="check-icon"}}{{/li-icon}}
5| {{li-icon type=“cancel-icon”}}{{/li-icon}}
44. P R O D U C T
11.7.15
Minor
(Feature)
Major
(Breaking)
Patch
(Fix)
</>
45. P R O C E S S
A systems designer who participates in all weekly
design reviews to provide insight on existing
components and note future pattern opportunities.
A team of distributed designers, across different
offices and competing objectives who work
together to create one cohesive product experience.
Systems designers who answer quick questions about
Art Deco foundations & components on Slack.
49. T E A M S T A G E
Design
Communication Collaboration Coordination
Designers Engineers
Manager
DPM / TPM
Early Days
01 02 03 04
Toddler Years Tween Years Grown Up
P R O C E S S
P E O P L E
P R O D U C T
Platform
Documentation
Tools
51. • You’re backlog is at capacity and
your calendar is full
• Your constantly fielding questions
about cross-platform support
• Your peers want to create larger
patterns and frameworks
G R O W I N G P A I N S
55. P R O D U C T
Gadgets are built for products, by products, from multiple components.
(Hovercard-Entity, Carousel-Ad, List-Action…)
56. P R O D U C T
</>
Menu op(on 3
Menu op(on 2
Menu op(on 1
Print this page
Copy
Upload
Share
Sort connec)ons by
All Categories
Games
Educa3on
Magazines & Newspapers
60. Design
Communication Collaboration Coordination Contribution
Extensions
& more!
Platforms
Designers Engineers
Manager
DPM / TPM
Early Days
01 02 03 04
Toddler Years Tween Years Grown Up
R E V I S I T O U R K E Y T E A M S T A G E S
P R O C E S S
P E O P L E
P R O D U C T
Platform
Documentation
Tools
QA
& more!
UX Writer
61. Say it, then
say it again
R E V I S I T O U R K E Y T H R E E T A K E A W A Y S
Run like mad and
work with everyone
Embrace change and
prepare to scale
Empower others and
never stop listening
02 03 0401