Empowering Designers to Code

If you're a designer who wants to code, you can learn a lot from online tutorials, side-projects, and contributing to Open Source. However, unless you get to work on something with a significant user base, you're unlikely to get exposed to the experiences that will help you write production-level code. For most designers the best way to learn serious front-end development is on the job. Many companies want to attract designer-coders, but they need to back this up with a culture that embraces them, and supports designers with training, tooling, and documentation. In this talk you’ll learn how you and your team can build a designer-friendly coding environment to improve design workflows, team collaboration, and product design decisions.

Transcript

1. designers 

   to
   code />
   Diana Mounter
   Senior Product Designer at Etsy
   

   View Slide

2. Diana Mounter
   @broccolini
   

   View Slide

3. View Slide

4. designers 

   to
   code />
   

   View Slide

5. This is not about whether
   designers should code or not
   

   View Slide

6. Or how to make designers
   code if they don’t want to
   

   View Slide

7. This is about ways you can
   empower designers to code,
   and some of it's benefits
   

   View Slide

8. The first website I built as part of
   my job was 10 years ago.
   

   View Slide

9. Etsy is the first place where I’ve
   really felt empowered to code.
   

   View Slide

10. My boss didn’t
    know what I
    was doing and
    just wanted the
    website built
    (for free)
    Started at Etsy
    

    View Slide

11. Setup dev
    environment?
    Git commit what?!
    How to push O_o
    Where is all the code?
    How to run tests?
    

    View Slide

12. Designers who could code,

    but don’t as part of their job
    Companies want designers
    who can code
    

    View Slide

13. View Slide

14. Where to start?
    

    View Slide

15. with
    onboarding />
    

    View Slide

16. Set up development
    environments from the beginning
    

    View Slide

17. Ship something
    

    View Slide

18. View Slide

19. View Slide

20. To deploy you have to:
    Install text editor
    Setup aliases in terminal
    Virtual Machine
    Authenticate SSH keys with GitHub
    Setup Bash files
    Know how to run tests
    Know the IRC commands for deploying
    

    View Slide

21. ?
    D
    E
    P
    L
    O
    Y
    I
    N
    G
    The first push
    program demystifies
    the process.
    Anyone can push
    code, given the right
    support.
    

    View Slide

22. The first push
    program demystifies
    the process.
    Anyone can push
    code, given the right
    support.
    

    View Slide

23. The
    buddy
    system
    

    View Slide

24. Build relationships during
    onboarding and training
    

    View Slide

25. confidence />
    

    View Slide

26. Give designers a safe way to
    practice with production code
    

    View Slide

27. Teach designers to use Git
    

    View Slide

28. Git is an empowering tool for designers to learn
    

    View Slide

29. Teach designers about branching
    

    View Slide

30. Encourage code reviews
    

    View Slide

31. Collaboration feels great
    

    View Slide

32. Prototyping
    (with production code)
    

    View Slide

33. Code gives engineers a better idea
    of your intent (even if it’s not
    production code)
    

    View Slide

34. Prototypes are used in usability testing
    

    View Slide

35. Designing in the browser
    

    View Slide

36. everything />
    

    View Slide

37. Documentation allows people to
    be autonomous
    

    View Slide

38. There’s no silver bullet to keeping
    documentation up-to-date
    

    View Slide

39. BUT THAT’S IMPOSSIBLE!
    

    View Slide

40. Keep documentation where the
    code is, if you can
    

    View Slide

41. Use routine events to review
    documentation
    

    View Slide

42. workflows
    with
    tooling />
    

    View Slide

43. Tooling can make designing in
    code much more enjoyable.
    

    View Slide

44. Make it easy to see how code
    impacts the user experience
    

    View Slide

45. Robots are better at testing
    than humans
    

    View Slide

46. Reduce the feedback loop
    

    View Slide

47. View Slide

48. View Slide

49. 
    

    View Slide

50. Make coding part of your
    design culture
    

    View Slide

51. View Slide

52. View Slide

53. happens
    when
    designers
    code? />
    

    View Slide

54. They build a new style guide
    

    View Slide

55. View Slide

56. It means engineers can get further
    without designers
    

    View Slide

57. 699 deletions
    

    View Slide

58. Designers collaborating to make a global font update
    

    View Slide

59. Designers Engineers
    

    View Slide

60. Start with onboarding
    Build confidence
    Document everything
    Improve workflows with tooling
    Made coding part of design culture
    

    View Slide

61. True collaboration isn’t throwing
    designs over the wall
    

    View Slide

62. It’s sharing the responsibility with
    your team to build a quality product
    

    View Slide

63. Thanks!
    

    View Slide