Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Techniques to scale UX teamwork

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.

4fc5a0507d7a8b84ff81ee1e21c516fd?s=128

Katrin Freihofner

June 06, 2018
Tweet

Other Decks in Technology

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

  16. None
  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

  77. None
  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

  85. None
  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