Better together

The Peanut Butter and Jelly Effect: Why Designers and Developers Are Better Together

Collaboration.

It’s the secret sauce that binds two parts into one whole and manages to make both of them better for it. Like peanut butter and jelly, when two parties come together to offer up their skills and to support the skills of the other, that’s when the magic happens, when the whole becomes greater than the sum of its parts.

And our favourite collaborative pairing of all time? Designers and developers. (Sorry pb&j, you’re a solid second place.)

We work with large, enterprise scale organizations, which means we regularly encounter things like multiple, often conflicting stakeholder perspectives and seemingly endless layers and levels of approval. It also means working within — and on — complex structures that require deft handling and precision insights in order to find a solution.

If our teams weren’t active, enthusiastic collaborators with a team-oriented energy that spilled over to our clients, our projects would fall apart before they even began.

As with any digital shop, our designers and developers are constantly working to build solutions that compel, delight, satisfy, perform, enable, and grow business on behalf of our clients. But for us, the key to success is that those teams be cross-functionally collaborative. Designers don’t only work with other designers and developers don’t silo their skill-sets either. They work together at regular intervals to ensure the solutions we produce are the best they can be.

Finding ways to make the two disciplines work cohesively to create those solutions has been a focus of our culture and team-building efforts from day one.

To help explain how we’ve managed to take two distinct disciplines and merge them to create stronger, Megazord-like teams with skills that enable us to create end-to-end solutions that go beyond expectations for our enterprise clients, we spoke with two of our Associate Directors: Nathalie Crosbie, Associate Director of Design at Myplanet and Andre Molnar, Associate Director of Technology.

With nearly 30 years combined experience working in digital design and development, we wanted to know why they believe so strongly in collaboration across functions and what their top recommendations for implementing a collaborative workflow would be.

Why Collaborate?

Most of us have worked in environments where we mostly worked only with other people within our function area. Sure, we’d have some basic interaction when the designs were handed off to the development team, but that would be it until an issue came up.

That kind of siloed structure is a common set-up to this day. Getting segmented off into just your element of a project, almost assembly-line style, is often an integral part of how organizations get things done.

But siloing skillsets can leave a lot of incredible potential on the table.

“The general concept of the design team being separate from the development team entirely, I think, is a really outdated mode of thinking,” says Andre. “Having the designers walk away from a project while development’s going on, or not including developers early on, is not going to lead to the optimal result.”

And Nathalie agrees: “We see so many gains and benefits from increased collaboration. Benefits like efficiencies in our process because we’re better at doing things right from the beginning; increase of our knowledge across both functions as we work together and learn from one another; and an increase in the level of excellence in the work that we produce.”

By leaving designers with designers and developers with developers, we exclude the incredible power of knowledge share and early identification of issues from our process, thereby limiting our potential. Making sure both parties are part of the planning and ideation process can yield big rewards.

For designers, it can be helpful to have developers on board early to suggest solutions that they may never have even known were possible. “On one of my current projects, two of the really great ideas for how to approach a design came as a result of the developers being in the design studio,” notes Nathalie. Bringing the developers — who typically look at problems from different angles — into earlier discussions around design solutions can make a big difference to the end result.

And Andre says the benefits are equal for the developers: “Having the developers involved early is actually key, because they can start thinking about what items are potential problem areas. Get the developers in at the beginning so they can at least flag some of those potential pitfalls and plan for the more complicated components.”

Early developer involvement lets everyone know from the start what may or may not be possible for the project at hand, saving everyone time in the long run.

Because often the ideas are simply beyond the scope of the particular project. As Andre notes, “It’s not that it can’t be done — quite literally anything can be done. But what are the other constraints on this project?” Knowing that up front means designers don’t have to double-back and re-design elements halfway through a project.

Getting both sides of the creation process on the same page early on can introduce greater creative output, gain efficiencies by identifying potential pitfalls early on, and ultimately yield a better final product as teams who are more aligned work in tandem to create, instead of simply “throwing it over the fence”.

Collaboration produces excellent work, but how do we get there? And what if you’re not in a collaborative environment? How can you introduce a more collaborative process and start to take advantage of the benefits?

Below are our top four tips for how to get your designers and developers connecting.

Four Tips To Successful Collaboration

Tip #1: Establish Checkpoints

When new projects come in, everyone is eager to get going. But before you get too deep into the actual project work, establish some guidelines for the team. “It’s definitely not just a collaboration in terms of doing the work,” says Nathalie, “but also a collaboration in terms of determining the touch-points that are of value.”

You know you need to get developers in some of the early stage meetings, and you know your designers need to be involved during the implementation stage to offer inputs and assist with things like experience and quality control testing. But if you leave those as vague “somewhere along the way” plans, it’ll be easy to let them fall by the wayside.

“Having integrated teams that are capable of not only doing one thing or the other, but that have a process in place where the design side and the development side can work iteratively together, and analyze the results as they’re going through the development of the product — having that feedback loop between the two groups ongoing, that’s the way forward,” says Andre.

Set clear touch-points out as part of your planning process, ensuring that both the developers and designers know when to expect feedback and collaboration opportunities. When it’s an established part of the process, the risk of it falling by the wayside drops to nearly zero.

Tip #2: Collaborate Early

“Integrate early. Get in the habit of it,” says Andre. “Early engagement, early understanding, continual communication — those are the key elements of great collaboration.”

For developers, that means helping the designers from the get-go, even just by articulating a bit better what’s possible earlier on in the process. And for designers, that means thinking along those collaborative lines before the first design ideas even enter the picture.

“Being really iterative and agile and checking daily is fantastic, but let’s do something in advance to not even be bringing to those daily iterations issues that maybe we could’ve flagged earlier,” suggests Nathalie. “Either asking, ‘Where can we bring in developers?’ or going to the developers and saying ‘We’ve got these touch points with you, where else can we do that that would be valuable? And where would you like to be that you are not right now and think you could add value?’”

Uncovering where your own team members would value having more contact and communication along the way will ultimately make for a happier, more productive team.

Tip #3: Demonstrate Benefits

When bringing a more collaboration-focused approach to a team, it can be hard to get buy-in — especially when people are used to a more rigid, separate-departments approach. Sometimes, however, the best approach is to just dive in.

If this is a new thing for you and your team, start by simply opening the lines of communication. “If you still have to have a traditional workflow where you might have more silos, at least open up the lines of communication earlier on, even if the design has to be kind of thrown over the fence as it were,” suggests Andre. “Just being mindful of the different disciplines can make a big difference.”

Once you’ve opened the door a crack, it should be much easier to get your team to expand their collaboration efforts. “It’s all about mindset,” says Andre, “but the benefits are so immediate, so apparent to everybody involved that they can’t imagine doing it any other way moving forward.”

“I think it takes people experiencing the rewards of the collaborative system to understand the huge value of it,” says Nathalie. “People are more receptive to things when they can see the benefit that’s in it for them, so if you can show people the benefit that they gain from the collaborative approach, then you’re much more likely to get an engaged designer or developer. They don’t have to re-do their work, they gain an opportunity to learn and become more cross-functional themselves as a result of the collaboration, and they don’t have to keep going back and re-asking questions that have been asked before.”

Tip #4: Embrace Opportunities

In the end, the collaborative work environment is only as good as the people engaging with it. Designers and developers will only benefit by working with one another (as opposed to merely alongside them) by asking questions, sharing workflows, incorporating them into discussions and learning from their expertise.

Uncovering those unknown thoughts and answers is the major advantage of collaboration. If we don’t know how the other side thinks, we end up guessing and sometimes we limit our ideas based on a lack of knowledge about what’s really possible.

“I say come with everything. Pre-optimizing is never a good idea. You never really know how tough or easy it might be. Yes, your instinct may be correct that yes, that’s a really big one. But always bring it to the developer and see.” — Andre Molnar, Associate Director of Technology, Myplanet

As Nathalie says, “It’s definitely a practice that we recommend and aspire to. I think in a lot of teams, historically, this is not done. In our teams, we believe very strongly in collaboration, and in designers and developers working together and leveraging each other’s knowledge because we’ve seen the pay-off. Efficiencies that we gain from working collaboratively and the quality increasing because we’re not releasing a product that’s got issues in it.”

If you’ve got an idea, sharing it lets you know what kind of legs it has and gives others the opportunity to build on it in a way you may not have imagined. Leverage those benefits throughout the process and the end results will speak for themselves.

Written by: Leigh Bryant

Portions of this article were taken from an interview conducted by Cahill Puil

Do you have any tips for getting better collaborations out of your designers and developers? Share your insights in the comments and while you’re at it, share this article with your colleagues!