A guide to a successful designer-developer collaboration
Despite an elaborate design system and cohesive design-handoff documentation, our third quarter retro session at Divar’s job vertical was mainly a discussion about designer-developer collaboration. We all agreed that optimizing this process would smoothen our design handoff and product development and create less friction within our team.
At the end of the retro session decisions were made, actions were noted, and I, as the team’s UX designer, took ownership of the optimization.
To take things a step further, I planned two weeks of multiple one-on-one interviews with designers, developers, and QA specialists across different verticals at Divar to gather insight beyond our team. In the following article, I share my conclusion from my personal experience and that of my colleagues, considering that characteristics of team players and working conditions can slightly affect this process.
For better transparency, I will address the subject separately during the design and handoff process.
Designer-developer collaboration during the design phase
1. The presence of developers in product ideation sessions
Every designer I interviewed agreed that the presence of developers during ideation workshops is a bonus. A developer’s perspective and mindset sometimes vary from that of product positions and this diversity can bring groundbreaking ideas to the table. Not to mention, this contribution will lead to additional product awareness in technical teams and increase their commitment. If you’re working in a cross-functional team, this is a perk you don’t want to lose.
However, it’s good to keep in mind that developers come to the meeting with less information about the product which can make them shy away from giving verbal opinions. You want to ensure you’re using the right tools and creating the right environment for everyone to interact. You can read my colleague, Atefe Rahdan’s article on running a design ideation workshop to get some insight.
2. Designer-developer continuous communication during the design phase
An effective step taken at Divar’s jobs vertical was assigning a developer (preferably the one responsible for the design development) to every design task from the very beginning. This meant that I, as the designer, knew exactly which developer to reach out for my questions and they would be responsible to respond. Consequently, the final design solution had been already communicated with the developer at multiple stages and we had a clear estimation of its implementation cost preventing any surprises during handoff!
I take note of all the development limitations I am told by the developer as it would come in very handy in case the developer is substituted during the process.
This communication helps me make design decisions while being conscious of development costs.
3. Increasing designer’s knowledge of the company’s back-end structure
UX designers are recommended to have basic knowledge of HTML and CSS, but there’s little advocacy for back-end knowledge. As a designer, I ought to know why a particular design would be costly compared to another in order to make informed decisions.
To gain this knowledge gradually, it’s best to go beyond the technical team’s response of “this can’t be done” or “this will take a lot of effort” and try to get to the bottom of things.
I also scheduled a one-on-one session with our team leader to get an overall understanding of our technologies which proved to be very enlightening.
4. Pushing the designer’s MVP mindset when dealing with new features
In the real world, research and data are not always the backbone of a designer’s decision. At times, they will have to test assumptions, especially when designing new features. In this case, we want to lower the cost of our mistakes and advocate a MVP perspective. This is when the designer has to override the perfectionist mindset and push for a design that’s small enough to test the assumptions before going full swing during an iterative process.
Designer, developer, and QA specialist collaboration during handoff
1. Writing a cohesive design and handoff documentation
As a member of Divar’s UX guild, documentation is a crucial deliverable of my work. Each design task comes with a document covering the related OKR objective, metrics, discoveries, and the process leading to the design decision.
We also deliver a handoff document covering all the details that the developer and QA specialist might need beyond the design file. This document includes user flows, error messages, and action logs that are required for later evaluation.
2. Documenting user scenarios with QA specialist right after handoff
One of the people I interviewed was Ali, who is currently our QA chapter lead at Divar. During our talk, we came to the conclusion that it’s best if QAs and designers take note of user scenarios right when the design is delivered.
Occasionally, there are time gaps between delivering the final design and development due to a change of plans or priorities within the team. So at the time of development, the designer might be already focused on a different task. Although the design & handoff document are there to prevent our memory shortage, designers are most conscious of the details of their work during delivery. This is the perfect time for a QA specialist to document the details of different scenarios with designers for later use.
3. Accompanying developers during the development phase
The tips mentioned in this article are ultimately trying to optimize a friction-less product implementation. But as designers, we are responsible for the outcome of the product and should be available to answer any doubts developers might have during their work.
4. Designers testing features alongside QA specialist
No matter how precise we estimate the development process, surprises are inevitable when doing the actual work, and slight changes will occasionally be made to the user journey and design. Designers must ensure that QAs are aware of these changes and attend feature testing sessions if needed.
The above tips have been proven effective for our team at Divar, and we saw rising satisfaction by the next quarter. However, I’m fully aware that some of them do not apply to small design-centric teams. I found this video by former Uber product designer, Femke, on design handoff quite efficient and probably useful for smaller teams.
If you’re dealing with designer-developer collaboration issues within your team, feel free to share your insights in the comments. And you can always get in touch with me on Linkedin.
