How designer – developer collaborations changed the way we think about projects

In this article, I’ll talk about 4 principles of good cooperation, how does it look in our case, and what teams can gain from it. Also, you’ll get some tips on how to make collaboration better and more effective — all of this basing on our experience. As a bonus, we talked to developers to check how they see our cooperation and what are the benefits from their perspective.

Why is it important?

There’s a project to be done, and two teams have to work together. However, with different environments, methodologies, mindsets and tools, it may be a bit difficult to accomplish. How to ensure that we’re doing it well? With the right approach, all these dissimilarities allow us to grow and learn from one another.

4 pillars of cooperation 

What are the benefits?

Through the eyes of designers:

• A new perspective of the product – due to close collaboration, developers and designers have a better understanding of one another’s part. Because of that, we can help each other. Results? Faster and more effective process. We can quickly adjust every change in design or code in the project. In this way, you’ll get a wholesome product with beautiful designs and creative solutions. Also, we can easily detect any potential mistakes or faults and fix them immediately.
• Business approach – by being involved in the process from the start, developers get to know the product much better. This allows them to suggest features that will make it more product-market fit. Higher customer satisfaction comes along with a more intuitive and functional outcome.
• Integral group – constant and transparent communication makes our collaboration a lot easier. Thanks to this, we can openly talk to them about functionalities that come to our mind. They can immediately tell us if it’s too time-consuming or if it’s possible to implement it from the technological point of view. What’s more, we complement each other – analytical perspective and creativity clash right here and make a whole. This collaboration lets us learn and grow.

Through the eyes of developers:

• The integrity of conception – this close collaboration gives us many benefits. Designers can be sure that everything they’ve envisioned, every single solution is implemented in the project. The same applies to developers; we know that we’ll make it in time and fit into the budget. Also, owing to such close cooperation, we learn each other’s workflow, we know what to expect from both teams etc.
• Understanding the project – because we take part in the early stages of the process, we have a chance to look at a product from a broader perspective and to get to know the project a little better. It allows us to contribute to product development by taking an active part in the process, for example, by suggesting our ideas that may be useful for the client’s business.
• Learning from each other – this close cooperation allows us to get to know something new. Designers begin to think with an engineering mindset. At the same time, developers get to know the designer’s tools which give them a deeper understanding of the whole process.

The process

Now that we know how two teams can benefit from it, it’s time to say a little bit about our process. What are the roles? And most importantly, how we cooperate?

Phase 1: Brainstorming

After the initial meeting with the client (Intro Day), we gather together and talk about everything that comes to our mind in the project. What’s interesting is that, during this step, there are no particular roles. Sometimes developers have some ideas about designs, and sometimes designers bring out interesting technological aspects. It’s a brainstorming session before we do flow, wireframes, research, etc. Our goal here is to make basic assumptions about the project.

Phase 2: Wireframes

Here, our collaboration is a bit closer. First of all, we, as designers, prepare the wireframes and then we have a meeting with the whole team when we present our vision of screens. It’s the point when we talk about how we want to see the product, explain the user flow, and how should it work. Developers help us from their point of view, to pick up everything that we couldn’t foresee. They see how it’s all connected so they can propose other solutions.

Phase 3: Design

For the developers, we prepare a wall of components that they can use. There, they have assigned and described elements such as styles, colours, etc. This makes their work a lot easier. Also, during our regular meetings, we tell them in detail, how should something work or what should it do. By doing it on something tangible, we make sure that we’re talking about the same thing and thus, we can understand it better. For us, visualization of a concept or a problem brings the best value and prevents any misunderstanding.

Phase 4: Development

During this stage, a designer is always present on the developers’ planning. It allows us to be up-to-date with their progress in the project and together agree on the next steps. Moreover, when developers click through our designs, we can see our work from a different perspective. We can notice some other missing things, improve interactions etc. After all, our primary goal is to create a digital product that not only provides excellent experience but is also smart. Thus, sometimes we have to change our initial designs to facilitate the developers’ work, while other times they adjust to us. It’s about integrity between designs and development for us.

Additional phases: design review

After every sprint, when certain features are implemented and ready, it’s our turn, to check them and confirm that they’re prepared to show our client. There are 3 options to do it: First and the best one is to do it in the office. In that way, when we click through screens, we can discuss it with the developers and come up with solutions if needed. The second option is to get a recording or a set of screenshots, which we can watch later and then make a list of any places that have to be fixed. And finally, during a call, one of the developers can share screen and show it to us. It all depends on the project itself and the working style (in the office or remote).

Final design review

This stage, we do only in one way – we get access to the application, and we check it screen by screen. This kind of in-depth review requires checking the application on all devices and display resolutions. Also, we have to click through every possible flow to pick up potential inadequacies. During this process, we also make a list of every place we’d want to fix along with the screenshots to locate them better. Then, we get together with our product owner and decide which changes are relevant for end-users or client’s business, and which are just a result of the designer’s perfectionist nature, and no one else will notice them. 

Most times, there are small adjustments that need to be made. Nevertheless, it has to be done as it impacts user experience.

How do we stay in touch during a design review?

Let’s talk about our communication style that is adjusted to what we want to send or do. How we exchange files in the project? We do it through:

• Communication channels – we have a particular Slack channel for some easy to fix issues. The development team usually sends us the screenshots, and then we comment on them.
• Quick meetings or calls – it’s for more complicated matters or when developing mobile apps, as it’s much more comfortable. When we meet in the office, we can see how something works, and we can immediately find a logical solution to any problem that may occur.
• Generated links to a web application – when developers send us the link to their work, we can check it out in our free time. Then, we do a screenshot of the places needed adjustments and send it along with our notes to developers.

Tools

Every working team should agree on tools on which they exchange ideas, manage work, and store all the related elements. Thanks to these tools, the teams have access to everything anytime they want.

• Figma/AdobeXD/Zeplin – finally, collaboration tools that help us store and organize everything in one place. Designers upload their elements such as colour palette, fonts, buttons, UI components etc. which are available for developers at all times. Thanks to that, we all have the same version of the files and are working in the same tool. It prevents any misunderstandings or delays in the project.
• Slack/Google Meet – as I mentioned before, this tool we use to communicate daily. Both Slack and Google Meet are great for giving quick feedback on what’s going on in the process. Also, when we’re working remotely, we can still message, meet and share screen. These kinds of tools facilitate the whole process and allow us to work from anywhere and always stay in touch.

Summary

Basing on our experience a close collaboration brings a lot of benefits. Not only we can better set our goals and meet customer’s requirements, but also we deliver more valuable solutions. Owing to transparent communication and sharing information, we’re more synchronized in everything, and there are fewer misunderstandings. Finally, we continually gain new abilities which we later use in other projects.

Editor’s note: We’ve originally published this post in November 2020 and updated it for comprehensiveness.