Presented at FITC Toronto 2016 See details at www.fitc.ca Overview Designer passes comp to developer. Developer develops. Project done. Unfortunately, this traditional ‘waterfall’ approach is riddled with missed opportunities. Given the complexity of our web projects today, collaborative workflows can dramatically increase the efficiency and quality of the final product. In this session, Maya Bruck will share concrete tools and techniques she has used to make all members of the team (including clients!) active participants instead of passive recipients. All while having a lot more fun in the process. Objective 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. Target Audience Designers, developers, project managers Takeaways Engage clients and the full breadth of your team from the beginning of the process. Turn research, sketching, prototyping and beyond into a collaborative effort. Discover missed opportunities in the traditional web design workflow.

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 EDS ON 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 EDS ON 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 WON DR A , SENIOR DE VE LOPER, 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 WON DR A , SENIOR DE VE LOPER, 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, DEVE LOP E R, 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.
JO HN 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