The ‘devsigner’ of the future – An exploration to eradicate the hand-off

Performed at Code ❤ Design, 2018 Sydney Australia
https://youtu.be/U5lD_ioCxIE

Designers expect developers to understand UX and developers expect designers to understand the technicalities of their platform. The back and forth of this is embodied by the dreaded hand-off.

Current tooling already makes the hand-off simpler and quicker. But, it also requires one role to know more about the other. Are the roles slowly fusing into a new one, ‘the devsigner’?

Allard an Raja will take you on a journey in their quest to eradicate the hand-off. What would a hand-off look like if there wasn’t one? What if a designer could influence production code? What if a developer could iterate the way a designer does? Is the future really that far away?

Transcript

1. #CHD18 ALLARD VAN HELBERGEN | SENIOR DESIGNER / ATLASSIAN | @VANHELBERGEN RAJA BELLEBON | SDET ENGINEER / ATLASSIAN
2. ALLARD VAN HELBERGEN | SR UX DESIGNER | @VANHELBERGEN RAJA BELLEBON | SDET ENGINEER The ‘devsigner’ of the future An exploration to eradicate the hand-off
3. “Raja, there is a mistake in the component I recently gave you the sketch file of.”
4. “No, the code is perfect! The design won’t match.”
5. Raja Allard
7. ?
8. Idea
9. Idea Code
10. Idea Code Generate Variations
11. Idea Code Generate Variations Platform
12. A NEW SHARED LANGUAGE AUGMENTED BY INTUITIVE TOOLS AND AI WILL REPLACE THE HAND-OFF.
14. We believe behind every great human achievement, there is a team. Our mission is to unleash the potential of every team. OUR MISSION
15. > 100 000 customers
16. > 15 products
17. > 4 platforms
18. 1 design system
19. WHAT WE WORK ON ADG www.atlassian.design Atlaskit atlaskit.atlassian.com Build and design tooling
20. WHAT WE WORK ON ADG www.atlassian.design Atlaskit atlaskit.atlassian.com Build and design tooling
21. WHAT WE WORK ON ADG www.atlassian.design Atlaskit atlaskit.atlassian.com Build and design tooling
22. WHAT WE WORK ON ADG www.atlassian.design Atlaskit atlaskit.atlassian.com Build and design tooling
23. WHAT WE WORK ON ADG www.atlassian.design Atlaskit atlaskit.atlassian.com Build and design tooling
24. THE HAND OFF - EXPECTATION VS REALITY
25. THE HAND OFF - EXPECTATION VS REALITY
26. Inconsistencies Challenges Scaling Communication
27. ?
29. A NEW SHARED LANGUAGE AUGMENTED BY INTUITIVE TOOLS AND AI WILL REPLACE THE HAND-OFF.
30. Tooling stages Static tooling Generative tooling Intuitive tooling
31. Tooling stages Static tooling Generative tooling Intuitive tooling
32. Design Code
33. Design Code Application
34. ? Design Code Application
35. Illustrations cannot accurately represent digital products. COLM TUITE, MODULZ https://twitter.com/colmtuite/status/1009890686869569536
36. Design Code Application
37. Design Code Application
38. Section message, Atlassian Design Guidelines, 2018
39. Section message, Atlassian Design Guidelines, 2018
40. Gallery, Google 2018
41. Design Code Application
42. Design Code Application
43. Atlaskit in UXpin, 2018
44. Atlaskit in FramerX, 2018 https://github.com/atlassian/atlaskit-framerx
45. Design Code Application
46. Design Source of truth Application
47. Inconsistencies Challenges Scaling Communication
48. Tooling stages Static tooling Generative tooling Intuitive tooling
49. Tooling stages Static tooling Generative tooling Intuitive tooling
50. Idea Seed variables
51. Idea Seed variables Generate Variants
52. Idea Seed variables Generate Variants
53. Idea Seed variables Generate Variants Solution
54. Generated drone in Project Dreamcatcher, Autodesk 2016
55. No man’s sky, Hello Games 2016
56. Trouble keeping Sketch and code in sync?
57. React-sketch-app, Airbnb 2017
58. Sketch React sketch app React
59. Inconsistencies Challenges Scaling Communication
60. Sketch React sketch app React
61. NATIVE Targets Renderer
62. Targets Renderer Canon NATIVE
64. color-y50: #fffae6; body-text-size: 16px section-message-bg-color: color-y50; section-message-text-size: body-text-size;
65. .css .js .json .xml .sass color-y50: #fffae6; body-text-size: 16px section-message-bg-color: color-y50; section-message-text-size: body-text-size;
66. color-y50: #fffae6; default-text-size: 16px section-message-bg-color: color-y50; section-message-text-size: default-text-size;
67. root: { type: view; params: { bgColor: color-y50; bodyTextSize: defaultTextSize; } }
68. Example of a .component file in Lona, Airbnb 2017
69. Lona, Airbnb 2017
70. Targets Renderer Canon NATIVE
71. Targets Renderer Canon NATIVE
72. Targets Renderer Canon
73. Design output Generation Function Data
74. Design output Generation Function Data
75. design = f(data)
76. Targets Renderer Canon NATIVE
77. Inconsistencies Challenges Scaling Communication
78. Tooling stages Static tooling Generative tooling Intuitive tooling
79. Amplifying human creativity with AI An interlude
80. Idea Generative A.I. Variations
81. Nutella Unica by Ogilvy & Mather, 2017
82. How could we generate component or design system variations?
83. Not a hotdog by Mathieu Dutour, 2018
84. Silicon Valley, HBO
85. Sketching Interfaces by Airbnb, 2017
86. How could we capture work on the design system more efficiently ?
87. Idea Recognition
88. Idea Recognition Generative A.I. Variations
89. Idea Recognition Generative A.I. Variations Platform Generative tooling
90. Tooling stages Static tooling Generative tooling Intuitive tooling
91. Tooling stages Static tooling Generative tooling Intuitive tooling
92. Idea Seed
 variables Intuitive
 tooling Variations Platform
93. !!! Idea Seed
 variables Intuitive
 tooling Variations Platform
95. Termination Selection Initialisation Cross-over Mutation
96. Idea Seed
 variables Intuitive
 tooling Variations Platform
97. Idea Seed
 variables Intuitive
 tooling Variations Platform
98. Test.ai, 2018
99. How could we see if changes in components affect the rest of the design system ?
100. Adobe Sensei, 2017
101. How could we apply knowledge to our design system and generate variations?
102. LuBan by Alibaba, 2017
103. Inconsistencies Challenges Scaling Communication
104. How could we apply user analytics to evolve our design system?
105. Tooling stages Static tooling Generative tooling Intuitive tooling
106. Tooling stages Static tooling Generative tooling Intuitive tooling
107. Design Code Application
108. Design Code Application
109. Design Source of truth Application
110. NATIVE Targets Renderer Canon
111. Idea Seed
 variables Intuitive
 tooling Variations Platform
112. Idea Seed
 variables Intuitive
 tooling Variations Platform
113. Inconsistencies Challenges Scaling Communication
114. A NEW SHARED LANGUAGE AUGMENTED BY INTUITIVE TOOLS AND AI WILL REPLACE THE HAND-OFF.
116. Fear is noticing your entire Design System. HORSE DESIGN SYSTEMS, @HORSE_DESIGNSYS https://twitter.com/horse_designsys/status/1058420469924282373
119. design code
120. design code
121. design code
123. Icons: Deep Learning by Noura Mbarki from the Noun Project Diamond by Three Six Five from the Noun Project
125. SKIPPED SLIDES