Techniques to scale UX teamwork

On any meet-up or conference I attend, I overhear the same thing: developers and designers struggle to collaborate every single day. Although we all strive for the ultimate user experience, the way we approach it is very different.

The goal is to fix this by showing easy steps everybody can implement in their daily office life. No more vague ‘talk to each other’ advices! There are differences in how we are thinking. Tested on several projects, I will show applicable ways to improve the collaboration between developers and designers. On this basis, you will learn how we as designers and developers can work smoother with each other. For better results and more effective teamwork. But most importantly more enjoyable work environment for everybody.

Transcript

1. Techniques to scale UX teamwork js conf be Mai 30, 2018 @Ka_TriN_F freihofner.at
2. @Ka_TriN_F Design Operations Engineer at Dynatrace
3. Design System @Ka_TriN_F
4. Barista
5. Workflow What can/will go wrong? Challenges 6 tips for better teamwork
6. @Ka_TriN_F
7. Workflow @Ka_TriN_F
8. @Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
9. developer designer @Ka_TriN_F
10. @Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
11. @Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
12. @Ka_TriN_F
13. @Ka_TriN_F
14. @Ka_TriN_F
15. @Ka_TriN_F
17. @Ka_TriN_F
18. @Ka_TriN_F
19. @Ka_TriN_F
20. @Ka_TriN_F
21. @Ka_TriN_F
22. It‘s not fine @Ka_TriN_F
23. ...let‘s find out why. @Ka_TriN_F
24. @Ka_TriN_F
25. @Ka_TriN_F
26. I’m a programmer. I like clean code. @Ka_TriN_F developer
27. I’m an artist. I want a beautiful look & feel. @Ka_TriN_F designer
28. Challenges from the developer‘s perspective @Ka_TriN_F
29. Corner cases are not covered in the design @Ka_TriN_F developer
30. It‘s not possible to implement as designed (without hacking it) @Ka_TriN_F developer
31. Challenges from the designer‘s perspective @Ka_TriN_F
32. Things are not at all implemented as designed @Ka_TriN_F designer
33. Developers did not pay any attention to details @Ka_TriN_F designer
34. Example @Ka_TriN_F
35. @Ka_TriN_F
36. @Ka_TriN_F
37. @Ka_TriN_F
38. @Ka_TriN_F
39. @Ka_TriN_F Default Hover Active
40. @Ka_TriN_F Default Hover Active
41. .beautifulBtn:hover { border-width: 2px; } @Ka_TriN_F
42. .beautifulBtn:hover { border-width: 2px; } @Ka_TriN_F
43. 1px border inside 14px font 2px border inside 14px font @Ka_TriN_F
44. 1px border inside @Ka_TriN_F
45. @Ka_TriN_F 2px border inside
46. Let‘s solve this @Ka_TriN_F
47. .beautifulBtn:hover { outline: 1px solid #00a1b2; } @Ka_TriN_F
48. .beautifulBtn:hover { outline: 1px solid #00a1b2; } @Ka_TriN_F
49. .beautifulBtn:hover { box-shadow: inset 0 0 1px #00a1b2; } @Ka_TriN_F
50. .beautifulBtn:hover { box-shadow: inset 0 0 1px #00a1b2; } @Ka_TriN_F
51. @Ka_TriN_F A lot of implementation details ???
52. @Ka_TriN_F
53. @Ka_TriN_F
54. @Ka_TriN_F
55. @Ka_TriN_F
56. Structure + logic vs. Look + feel @Ka_TriN_F
57. @Ka_TriN_F 6techniques for better ux teamwork
58. Put yourself in their shoes @Ka_TriN_F 1
59. A B C @Ka_TriN_F Designers need to see things!
60. A B C @Ka_TriN_F
61. @Ka_TriN_F Meet early and review 2
62. Full picture and requirements @Ka_TriN_F
63. Full picture and requirements @Ka_TriN_F
64. @Ka_TriN_F
65. @Ka_TriN_F Invalid font-size Wrong active state Is this centered?
66. @Ka_TriN_F Recognize the other’s skills 3
67. @Ka_TriN_F
68. @Ka_TriN_F
69. @Ka_TriN_F Speak one language 4
70. @Ka_TriN_F
71. @Ka_TriN_F
72. @Ka_TriN_F
73. padding: 16px color: #00a1b2 @Ka_TriN_F
74. @Ka_TriN_F Find a common ground 5
75. @Ka_TriN_F vs.
76. @Ka_TriN_F
78. @Ka_TriN_F Get a checklist 6
79. ü Define use case and behavior of the component and separate it from other components ü Define how this component behaves with different amounts of text/content ü Define how this component behaves on different screen sizes ü Define accessibility rules and keyboard support ü Define different variations and/or themes ü Define animations ü Define the combination with other components/a huge amount of this component ü Define loading and empty state of the component ü Define if the component needs a validation/gives feedback and how it should work Dynatrace ui components checklist
80. Example barista.dynatrace.com @Ka_TriN_F
81. Full picture and requirements @Ka_TriN_F
82. @Ka_TriN_F
83. @Ka_TriN_F
84. @Ka_TriN_F
86. Put yourself in their shoes How will designers and developers work with it Meet early Developers and designers included in the process Recognize the other’s skills Clearly defined responsibilities Speak one language Component naming Find a common ground Code and style on one page Get a checklist It works for projects too @Ka_TriN_F
87. What (the hell) is she trying to tell us? @Ka_TriN_F
88. • Put yourself in their shoes • Meet early • Recognize the other’s skills • Speak one language • Find a common ground and learn from each other • Get a checklist @Ka_TriN_F
89. @Ka_TriN_F katrin.freihofner@gmail.com freihofner.at