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

1. Evolving your Design System
PEOPLE, PRODUCT, AND PROCESS

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

6. +
A R T D E C O

7. Enable quality design and development as scale
O U R M I S S I O N

8. At LinkedIn our system supports over 100 products,
150 designers, and 3000 engineers.
O U R C U R R E N T R E A C H

9. 01
Early Days
THE

10. 2003 2012

11. P E O P L E
A few designers and engineers,
working part-time.
2 0 1 2

12. P R O D U C T

13. P R O D U C T

14. P R O D U C T

15. P R O C E S S

16. T E A M S T A G E
Design
Communication
Designers
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

17. “Say it, then say it again”
T A K E A W A Y

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

19. 02
Toddler Years
THE

21. P E O P L E
Dedicated designers and engineers,
working alongside a manager.
2 0 1 3 – 2 0 1 5

22. P R O D U C T

23. P R O D U C T

24. P R O D U C T

25. P R O D U C T

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

28. P R O C E S S
Wiki status Email status

29. P R O C E S S

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

33. Tween Years
03
THE

34. P E O P L E
A cross-functional team,
with DPM or TPM support.
2 0 1 6 – 2 0 1 7

35. P R O D U C T
Foundations are the smallest, indivisible parts of our design system
(Color, Typography, Icons, Grids…)

36. P R O D U C T
Components are built from multiple parts of our Foundations.
(Alerts, Carousels, Hovercards, Dropdowns…)

37. P R O D U C T

38. P R O D U C T

39. P R O D U C T

40. P R O D U C T

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.

46. P R O C E S S

47. P R O C E S S

48. P R O C E S S

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

50. “Embrace change and prepare to scale”
T A K E A W A Y

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

52. 04
Grown Up
ALL

53. An expanded platform team,
with QA, UX Writing, and more!
P E O P L E
2 0 1 8 +

54. P R O D U C T
Overview Internationalization

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

57. P R O C E S S

58. P R O C E S S

59. “Empower others and
never stop listening”
T A K E A W A Y

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

62. T H A N K Y O U
JESS CLARK, LINKEDIN