UX India Design Systems Presentation

1. THE COMPONENTS OF A
SUCCESSFUL DESIGN SYSTEM
Socialization, partnerships, and prioritization
Ken Skistimas
Design Manager, Facebook

12. Design

13. CodeDesign

14. Code ToolingDesign

15. HH:mm:ssHH:mm:ss
Cancel Apply
8
21
9
3 4
11
5
12
6
13
7
14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
10
Su Mo Tu We Th Fr Sa
April 2018
4 5 7
1
8
2
9
3
10
11 12 13 14 15 16 17
18 19 20 21
28 29 30 31
22 23 24
25 26 27
6
Su Mo Tu We Th Fr Sa
March 2018
Option
Option
Option
Action
Input Text
LABEL
Hint Text
Cancel ApplyTO 09:12:33 AM UTC03/28/201809:12:33 AM UTC03/28/2018
List Item
List Item
List Item
SelectedBreadcrumbBreadcrumbBreadcrumb
%15
Alpha 75
Beta 60
Gamma 45
Delta 30
Epsilon 20
Regular 15
Zeta 12
Item NameItem NameItem NameItem NameItem Name
3 82 751 64 9of 180011-20Rows per page 10
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
LAST OCCURRENCE
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
ASSET PATH
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
POINT
psi
m/s
psi
m/s
psi
m/s
psi
psi
m/s
m/s
UNITS
crank-frame-dischargepressure
crank-frame-compressionratio
crank-frame-suctionpressure
crank-frame-compressionratio
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-compressionratio
crank-frame-suctionpressure
crank-frame-dischargepressure
crank-frame-compressionratio
METER
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim.
Dialog Title
Cancel Save
1
Status update: Hey this is a message about
the status of a bad machine.
View
Tab Navigation Tab Navigation Tab Navigation Tab Navigation
Search
Option
Option
Option
Default CTA
Step 4Step 3Step 2Step 1

17. Product SurfaceDesign System

18. Product SurfaceDesign System

19. Product SurfaceDesign System
Backlog

20. A DESIGN SYSTEM IS A PRODUCT
A design system needs to deliver value to
the customers of the products it’s serving.

21. A DESIGN SYSTEM IS A PRODUCT
A design system needs to deliver value to
the customers of the products it’s serving.
While solving a problem for product
teams inside your company.

22. DESIGN SYSTEM + PRODUCT FEATURES = VALUE
Styling + new features RedesignStyling only
VALUE
LOW HIGH

23. ProductsDesign System

24. Code ToolingDesign
DELIVERY OF THE SYSTEM

25. Are you building the right things?

26. Socialization

27. Design can be a black box.
TRANSPARENCY

28. Design can be a black box.
Design systems are always evolving.
TRANSPARENCY

29. Open the process.
Design can be a black box.
Design systems are always evolving.
TRANSPARENCY

31. Product Management
Engineering
Content Strategy
Data Science
User Research
Product Marketing
INCLUDE CROSS FUNCTIONS

33. Socialization

34. PartnershipsSocialization

35. Seek out influential product surfaces.
Align on priorities and create shared goals.
PARTNERSHIPS
Make the system real as soon as possible.

36. ALIGN TO PRODUCT ROADMAPS
New UI FeaturePerformance Improvements Perf + New UI Feature

37. ALIGN TO PRODUCT ROADMAPS
New UI FeaturePerformance Improvements Perf + New UI Feature
OPPORTUNITIES TO INTEGRATE

42. PartnershipsSocialization Prioritization

45. Use data and metrics to prioritize.
Cross reference with strategic initiatives.
FOCUS YOUR EFFORTS
Socialize who you’re supporting and why.

46. PartnershipsSocialization Prioritization
THE COMPONENTS OF A SUCCESSFUL SYSTEM

47. Code ToolingDesign
INFORM THE DELIVERY

48. ProductsDesign System

49. What you need to build will be informed
by the relationships you've built.

50. HH:mm:ssHH:mm:ss
Cancel Apply
8
21
9
3 4
11
5
12
6
13
7
14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
10
Su Mo Tu We Th Fr Sa
April 2018
4 5 7
1
8
2
9
3
10
11 12 13 14 15 16 17
18 19 20 21
28 29 30 31
22 23 24
25 26 27
6
Su Mo Tu We Th Fr Sa
March 2018
Option
Option
Option
Action
Input Text
LABEL
Hint Text
Cancel ApplyTO 09:12:33 AM UTC03/28/201809:12:33 AM UTC03/28/2018
List Item
List Item
List Item
SelectedBreadcrumbBreadcrumbBreadcrumb
%15
Alpha 75
Beta 60
Gamma 45
Delta 30
Epsilon 20
Regular 15
Zeta 12
Item NameItem NameItem NameItem NameItem Name
3 82 751 64 9of 180011-20Rows per page 10
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
2014-02-17, 19:33:51
LAST OCCURRENCE
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
.../Unit1/HRSG/
ASSET PATH
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
POINT
psi
m/s
psi
m/s
psi
m/s
psi
psi
m/s
m/s
UNITS
crank-frame-dischargepressure
crank-frame-compressionratio
crank-frame-suctionpressure
crank-frame-compressionratio
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-compressionratio
crank-frame-suctionpressure
crank-frame-dischargepressure
crank-frame-compressionratio
METER
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim.
Dialog Title
Cancel Save
1
Status update: Hey this is a message about
the status of a bad machine.
View
Tab Navigation Tab Navigation Tab Navigation Tab Navigation
Search
Option
Option
Option
Default CTA
Step 4Step 3Step 2Step 1

51. ProductDesign System
Product
Product
Product
Product
ProductProduct
Product

52. A design system can influence cultural
change at your company.

53. Start by identifying the value.
Open the black box of design.
MY ASKS TO YOU
Ruthlessly prioritize.
...and make great products.

54. THANK YOU!
Ken Skistimas
@kskistimas
/in/kskistimas