The components of a successful design system : Architecting a system to facilitate culture change in an organization

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

Transcript

2. THE COMPONENTS OF A SUCCESSFUL DESIGN SYSTEM Socialization, partnerships, and prioritization Ken Skistimas Design Manager, Facebook
13. Design
14. Code Design
15. Code Tooling Design
16. HH:mm:ss HH:mm:ss Cancel Apply 8 2 1 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 Apply TO 09:12:33 AM UTC 03/28/2018 09:12:33 AM UTC 03/28/2018 List Item List Item List Item Selected Breadcrumb Breadcrumb Breadcrumb % 15 Alpha 75 Beta 60 Gamma 45 Delta 30 Epsilon 20 Regular 15 Zeta 12 Item Name Item Name Item Name Item Name Item Name 3 8 2 7 5 1 6 4 9 of 1800 11-20 Rows 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 4 Step 3 Step 2 Step 1
18. Product Surface Design System
19. Product Surface Design System
20. Product Surface Design System Backlog
21. A DESIGN SYSTEM IS A PRODUCT A design system needs to deliver value to the customers of the products it’s serving.
22. 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.
23. DESIGN SYSTEM + PRODUCT FEATURES = VALUE Styling + new features Redesign Styling only VALUE LOW HIGH
24. Products Design System
25. Code Tooling Design DELIVERY OF THE SYSTEM
26. Are you building the right things?
27. Socialization
28. Design can be a black box. TRANSPARENCY
29. Design can be a black box. Design systems are always evolving. TRANSPARENCY
30. Open the process. Design can be a black box. Design systems are always evolving. TRANSPARENCY
32. Product Management Engineering Content Strategy Data Science User Research Product Marketing INCLUDE CROSS FUNCTIONS
34. Socialization
35. Partnerships Socialization
36. Seek out influential product surfaces. Align on priorities and create shared goals. PARTNERSHIPS Make the system real as soon as possible.
37. ALIGN TO PRODUCT ROADMAPS New UI Feature Performance Improvements Perf + New UI Feature
38. ALIGN TO PRODUCT ROADMAPS New UI Feature Performance Improvements Perf + New UI Feature OPPORTUNITIES TO INTEGRATE
43. Partnerships Socialization Prioritization
46. Use data and metrics to prioritize. Cross reference with strategic initiatives. FOCUS YOUR EFFORTS Socialize who you’re supporting and why.
47. Partnerships Socialization Prioritization THE COMPONENTS OF A SUCCESSFUL SYSTEM
48. Code Tooling Design INFORM THE DELIVERY
49. Products Design System
50. What you need to build will be informed by the relationships you've built.
51. HH:mm:ss HH:mm:ss Cancel Apply 8 2 1 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 Apply TO 09:12:33 AM UTC 03/28/2018 09:12:33 AM UTC 03/28/2018 List Item List Item List Item Selected Breadcrumb Breadcrumb Breadcrumb % 15 Alpha 75 Beta 60 Gamma 45 Delta 30 Epsilon 20 Regular 15 Zeta 12 Item Name Item Name Item Name Item Name Item Name 3 8 2 7 5 1 6 4 9 of 1800 11-20 Rows 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 4 Step 3 Step 2 Step 1
52. Product Design System Product Product Product Product Product Product Product
53. A design system can influence cultural change at your company.
54. Start by identifying the value. Open the black box of design. MY ASKS TO YOU Ruthlessly prioritize. ...and make great products.
55. THANK YOU! Ken Skistimas @kskistimas /in/kskistimas