We all understand the value of collaboration, especially when it comes to building anything; digital products, a house, roads and I dare say, a family! We’ve seen how construction engineers work with architects, stonemasons, plumbers, electricians and so on, to build a house. Effective collaboration plays a vital role in how well constructed the house will be after completion.
Such collaboration is also needed when building digital products; product managers have to work with engineering, design, research, marketing, sales, and others to build the product the right way, right time, and the right people.
In the product development cycle, two teams who work closely together are Product Designers and Front-End Engineers. Designers design the product while the front-end engineers implement & build the design.
To help people understand how our designers and engineers understand how we collaborate at Flutterwave, we hosted a webinar on Thursday, 22nd July, 2021, titled “Design Handoffs: How Flutterwave Designers And Engineers Collaborate”.
Our guests were Felix Obinna, Product Designer and Vanessa Ejikeme, Front-End Engineer at Flutterwave. The webinar was moderated by Rotimi Okungbaye, one of our Product Marketing Managers.
This article is a short recap of the entire webinar, you can watch the recorded version of the webinar below.
During the webinar, our speakers focused on:
- What Is A Design Handoff?
- Handoffs Best Practices – Dos & Don’ts
- What A Good Engineer-Designer Collaboration Looks Like
- Challenges Most Teams Face During Design Handoffs
What Is A Design Handoff?
Design handoff is a point in the product development cycle where the designer passes on the completed design to developers for implementation. To have a successful design handoff, a good designer-engineer relationship/collaboration is important.
You can learn more about design handoffs in this insightful article by Katica Babarczi.
Handoffs Best Practices – Dos & Don’ts
Dos
Have a design system
A design system is an important must-have when designing digital products. This is the standard procedure for every element existing on the product(s) within an organisation. Here’s a helpful article on design systems by Audrey Hacq.
Get the engineer(s) involved early
One of our core values at Flutterwave is “we build trust capital” and when building trust with your colleague, good communication is important. When the engineers are involved early (before the handoff phase), they can give solid feedback on how the designs will be implemented.
Effective feedback loop
Designers and engineers should have an effective feedback loop after the handoff phase, this helps them stay updated on the latest developments. At Flutterwave, we use different tools for this and they are Slack, Notion, Figma, Google Meet, Zoom & Jira.
Don’ts
Keeping Designers & Engineers In Silos
Separating the designers from the engineers is never helpful for the product. Without this collaboration, the product will suffer a lack of insights and potential code issues. Not Having A Handoff Meeting
This is important because it allows the engineers to ask a lot of questions and gain as much clarity as is needed before they start the development process.
“My Mission With This Design Is To Kill The Engineer(s)”
This phrase is often used by product designers and can be a callous way of creating unrealistic elements that can lengthen the development process. Employing simplicity and functionality on every design element is of the essence. “Help me, don’t kill me!”
What Good Engineer-Designer Collaboration Looks Like
Get Engineers Involved Early
This is vital as it helps to tackle possible issues that might come up during the handoff. It doesn’t matter how good a designer or engineer is, poor communication will still lead to frustration in the development cycle.
Collaborate! Don’t handoff
“Handoff” makes it seem like the designer just dumps the prototype on the engineer, however, the success in the product development cycle depends on these two people collaborating well.
Account For All The States Of A Design
Don’t give room for assumptions! To reduce unnecessary back & forths between the designer(s) & engineer(s), all states of the design must be accounted for.
Don’t Over-Specify Or Be Over-Protective Of Your Work
We can sometimes be over-protective of our work and this usually leads to people not being willing to take valuable feedback about their work. It is necessary to maintain an open mind to accommodate suggestions, ideas, modifications and improvements where necessary.
Be Open To New Tools To Improve Collaboration Online & In-Person
It may seem simple but just sitting/working together improves collaboration by a lot. A designer and engineer pair who have worked together for years easily become enlightened as to how the other works. And this is very important if we’re looking to reduce friction, back and forth and unnecessary arguments during handoff.
Challenges Most Teams Face During Design Handoffs
- Handoff and done!
- Miscommunication
- Too many tools
- Edge cases and inconsistencies
This article isn’t exhaustive, to dig deeper into this conversation, watch the recording of the webinar on our YouTube channel. You can also subscribe and hit the notification button to know when new content goes up there.
We have an active design blog where our designers write about their processes and share valuable insights on design, visit www.flutterwave.design to read some of those helpful articles.
If you are thinking about integrating Flutterwave products into your project, visit our documentation page to learn more & start collecting payments in 5 minutes.
You can also follow our Design & Engineering teams on Twitter to get updates about our activities and of course, new webinars.