Setting Fire to Silos: How to Bridge the Divide Between Development and Design

The divide between design and development can be vast. Designers lob something over the wall for development without knowledge or perspective of technical limitations, and developers are left to sort out requirements and edge cases. No one is satisfied when designers' visions aren't implemented or developers are expected to explain why something can't be built. It doesn't have to be this way. This talk will introduce solutions you can implement on your team to bridge the divide and do your best work. We'll cover why upfront planning, identifying the problem before agreeing on a solution, and cross-disciplinary collaboration are crucial to successful projects.

This version of the talk was presented at Jazz Con in New Orleans, March 2018.

Transcript

1. How to Bridge the Divide Between Development and Design Setting Fire to Silos @glynnisritchie
2. Glynnis Ritchie Creative Director, Designer Clio + Calliope @glynnisritchie
3. How to Bridge the Divide Between Development and Design Setting Fire to Silos @glynnisritchie @glynnisritchie
4. @glynnisritchie
5. @glynnisritchie
6. Our current implementation of the phone system needs to be significantly improved through integration with our multiple customer relationship management systems. We also need improved search capabilities so that people answering the phones can more quickly assist customers. @glynnisritchie “
7. Our current implementation of the phone system needs to be significantly improved through integration with our multiple customer relationship management systems. We also need improved search capabilities so that people answering the phones can more quickly assist customers. @glynnisritchie “
8. Building Search (It’s easy, right?) @glynnisritchie
9. Zero to production in 4 months. @glynnisritchie
10. But what’s the secret? Yeah, yeah. That’s cool and all. @glynnisritchie
11. Let’s Talk about Silos @glynnisritchie
12. @glynnisritchie
13. @glynnisritchie
14. @glynnisritchie
15. @glynnisritchie
16. @glynnisritchie
17. When designers don't see their designs implemented the way they envisioned and developers must explain why it can’t be built, no one is happy. @glynnisritchie
18. No one enjoys working this way. @glynnisritchie
22. Without requirements or design, programming is the art of adding bugs to an empty text file. –Louis Srygley @glynnisritchie “
23. @glynnisritchie @glynnisritchie
24. BRIDGING THE DIVIDE @glynnisritchie Polish those soft skills!
25. Life outside the silo is scary. @glynnisritchie
26. Yes, and… @glynnisritchie “
27. Establish a safe space. @glynnisritchie
28. unicorn @glynnisritchie
29. Interdisciplinarity: the combining of two or more disciplines into one activity; creating something new by crossing boundaries as new needs emerge. https://en.wikipedia.org/wiki/Interdisciplinarity @glynnisritchie
30. I have experienced first-hand what happens to a project when there is a front-end dev with a strong design sensibility and when there is one without it. In terms of the final design, the difference is as stark as night and day. Agile UX in the Enterprise, UX Pin @glynnisritchie “
31. Interdisciplinary skills and team members are key.
32. Don’t be afraid to ask the obvious questions.
33. Repeat things back to your team mates.
34. DEFINE the problem @glynnisritchie before you argue about the solution.
35. Our current implementation of the phone system needs to be significantly improved through integration with our multiple customer relationship management systems. We also need improved search capabilities so that people answering the phones can more quickly assist customers. @glynnisritchie “
36. Our current implementation of the phone system needs to be significantly improved through integration with our multiple customer relationship management systems. We also need improved search capabilities so that people answering the phones can more quickly assist customers. @glynnisritchie “
37. collaboration FIRST @glynnisritchie Don’t let hand offs be the only time you talk to each other.
38. @glynnisritchie
39. @glynnisritchie
41. Share meetings. @glynnisritchie
42. @glynnisritchie wocintechchat.com
43. @glynnisritchie DESIGN DEVELOPMENT PLANNING 1 month 3 months 2 weeks Unsuccessful Project Timeline: Design as a Band-aid
44. @glynnisritchie FIXING DESIGN/UX ISSUES DEVELOPMENT DESIGN 2 months 3 months 2 months…??? Unsuccessful Project Timeline: Silos & Rework
45. @glynnisritchie Too little collaboration means information lost, and designs lack direction. Too much ‘heads-down time’ and the designers find themselves siloed from the rest of the process, handing off their work rather than building something better together. https://www.invisionapp.com/blog/tuning-design-process/ –Mel DeStefano “
46. @glynnisritchie ITERATIVE DEVELOPMENT & DESIGN COLLABORATIVE VISION 2 weeks 3 months Successful Project Timeline: Agile Cross-Disciplinary Collaboration DESIGN DEV DESIGN DEV DESIGN DEV
47. @glynnisritchie DESIGN DEVELOPMENT estimates of effort technical feasibility performance considerations high-level vision user flows visual check of requirements
48. @glynnisritchie DESIGN DEVELOPMENT user testing to validate revisions for scope review implementation of design recommended alternatives review of feasibility
49. @glynnisritchie http://www.gv.com/sprint/ “The sprint gives you a superpower: You can fast- forward into the future to see your finished product and customer reactions, before making any expensive commitments.”
50. @glynnisritchie ITERATIVE DEVELOPMENT & DESIGN COLLABORATIVE VISION via KICK-OFF SPRINT DESIGN DEV DESIGN DEV DESIGN DEV The whole team! Successful Project Timeline: Agile Cross-Disciplinary Collaboration
51. @glynnisritchie wocintechchat.com
52. DESIGN FOR THE IDEAL STATE @glynnisritchie then scale back to define iterative releases.
54. The team and your company’s perception of them benefit from a common, visible goal. @glynnisritchie
55. @glynnisritchie
56. What does that actuallY look like? @glynnisritchie
57. Start with research. @glynnisritchie
58. User research concerns the whole team, not just designers. @glynnisritchie
59. Help developers help the user. @glynnisritchie
60. If everyone starts with the same information, they can make better decisions on behalf of the team. @glynnisritchie
61. Developers should vet designs early and be involved in design review. @glynnisritchie
62. @glynnisritchie
63. Do you have all the information you need to implement this today? @glynnisritchie
64. Vetting technical feasibility helps identify problems sooner. @glynnisritchie
65. @glynnisritchie
66. @glynnisritchie
67. Designers should be involved in pull request review. @glynnisritchie
68. @glynnisritchie
69. Screen share, pair, or walk through something together in person. @glynnisritchie
70. @glynnisritchie ITERATIVE DEVELOPMENT & DESIGN COLLABORATIVE VISION via KICK-OFF SPRINT DESIGN DEV DESIGN DEV DESIGN DEV The whole team! Successful Project Timeline: Agile Cross-Disciplinary Collaboration Design at least one sprint ahead so there’s time for feedback before development on a feature begins.
71. @glynnisritchie SPRINT 1 Ideal Agile Workflow Design task defined & prioritized 2 week sprint begins Designer collaborates with dev to determine appropriate deliverable and technical feasibility Designer consults with project manager as necessary if priority may be affected Designer completes deliverable by end of sprint SPRINT 2 Requirements and design reviewed by dev for clarity 2 week sprint begins Developer builds feature based on design deliverable Dev demos with designer for accuracy and/or designer engages in PR review Designer approves PR and feature moves to QA
72. Once all parties have reviewed and approved, only then is the PR merged. @glynnisritchie
73. @glynnisritchie SPRINT 1 Ideal Agile Workflow with User Testing Design task defined & prioritized 2 week sprint begins Designer collaborates with dev to determine appropriate deliverable and technical feasibility Designer consults with project manager as necessary if priority may be affected Designer completes deliverable by end of sprint SPRINT 3 Requirements and design reviewed by dev for clarity 2 week sprint begins Developer builds feature based on design deliverable Dev demos with designer for accuracy and/or designer engages in PR review Designer approves PR and feature moves to QA SPRINT 1 SPRINT 2 Tightly scoped user testing to verify assumptions and answer design questions before development begins. Designs revised as necessary. Sometimes questions still exist at this stage and need research or user testing to confirm assumptions.
74. We all need somebody to lean on @glynnisritchie
75. Developers would much rather leave design decisions to designers. They may not even know when they’re making a design decision. @glynnisritchie
76. Developers can’t involve you as a designer if you aren’t there. @glynnisritchie
77. Designers should review the implementation of their work before it gets merged. @glynnisritchie
78. As a product manager, being involved in design and development can help you keep your team focused. @glynnisritchie
79. You can’t accomplish any of this (especially shipping an ambitious project quickly) if you aren’t in the room. @glynnisritchie
80. @glynnisritchie clioandcalliope.com • @glynnisritchie