Beyond the Waterfall — Rethinking How We Work

Designing for the web is complicated, and your process shouldn’t make it harder. Learn tools and techniques for engaging the full breadth of your team in the creative process, turning research, prototyping, design and development into a collaborative and highly effective effort.

Transcript

1. Beyond 
 the Waterfall RETHINKING HOW WE WORK // mbruck@etsy.com // @mayabruck
5. I working collaboratively.
8. SERIOUSLY?
10. The Epic Waterfall Fail.
11. RESEARCH UX DESIGN DEVELOPMENT QA
12. Photo via Brad Frost
13. #WATERFALLFAIL
14. #WATERFALLFAIL
15. ABOUT TO #WATERFALLFAIL
18. If it was with my dying breath, I would caution anyone against attempting the feat... ANNIE EDSON TAYLOR
19. I would sooner walk up to the mouth of a cannon, knowing it was going to blow me to pieces than make another trip over the Fall. ANNIE EDSON TAYLOR
20. #NEVERAGAIN
21. The post waterfall workflow.
22. Icon by Austin Condiff from the Noun Project
23. Being involved from the beginning gives me a greater sense of ownership over a project. I'm not just implementing a drawing someone hands me, I'm helping real people solve real problems… MAT T WONDRA , SENIOR DEVELOPER, APARTMENT THERAPY
24. …This not only makes me happier in my work, it also motivates me to make sure every detail is done just right. MAT T WONDRA , SENIOR DEVELOPER, APARTMENT THERAPY
25. SKETCH STUDIO TECHNIQUE
27. Include the full team.
28. UX DESIGN DEV
29. Keep it focused.
30. Come prepared.
31. FEATURE BRIEF
33. A Feature Brief establishes the sketch studio’s priorities FACT
34. Sketch. Erase. Repeat.
38. Capture decisions.
40. SKETCH STUDIO • Iterate & test ideas in real-time • Build a shared understanding • Create a sense of ownership
41. CRITIQUE, OFTEN TECHNIQUE
42. Team-wide critiques.
43. Review your designs early and often with a broad team TIP
45. “Wow, this design looks really nice. You obviously spent a lot of time on this. Unfortunately, we can’t build it.”
46. When the developer is involved in the process, they can warn about parts that are harder to implement. BRIAN WALTERS, FRONT-END DEVELOPER, PIXO
47. Informal critiques.
49. Design critiques.
50. CRITIQUE, OFTEN • Get feedback from a broad audience • Make sure our designs can be built • Push ourselves to innovate
51. And now, a story.
55. WORK IN PARALLEL TECHNIQUE
57. RESEARCH UX DESIGN DEVELOPMENT QA
58. RESEARCH UX DESIGN DEVELOPMENT QA
59. RESEARCH UX DESIGN DEVELOPMENT QA
60. RESEARCH UX DESIGN DEVELOPMENT QA
61. RESEARCH UX DESIGN DEVELOPMENT QA
65. WORK IN PARALLEL • Gives time to deal with complications • Allows you to respond to project needs • Encourages communication • Creates a sense of ownership
66. TASK BOARDS TECHNIQUE
67. TO DO IN PROGRESS BLOCKED DONE Task Task Task Task Task Task Task Task
74. Ticket for task
75. Backlog of tasks
76. Tasks added to board
77. TASK BOARDS • Provide transparency • Capture, organize, and prioritize the project’s tasks/issues • Help address bottlenecks immediately
78. TWEAK CODE TECHNIQUE IT’S OK! YOU CAN DO IT!
79. TWEAK ALL THE CODE!
82. I love when designers actively help implement their vision. LEONID GRINBERG, DEVELOPER, THE NEW YORK TIME S
84. 1. The right tools
87. 2. Version control
89. designer + developer = awesome
90. TWEAK CODE • Iterating a design in code can be hugely valuable • So. much. more. satisfying. • Creates a stronger relationship with developers
91. The secret sauce.
93. Without empathy, it doesn’t matter what you do with computers. Engineering success doesn’t come from technical means. It comes from understanding humans. JOHN ALLSPAW, CTO, ETSY
94. Beyond the waterfall.
96. Whatever tool or method you use, let it be one that empowers your team and allows them to be true partners.
97. Thank you! // mbruck@etsy.com // @mayabruck