Product success through better Design-Engineering collaboration

Todor Rusanov • Dec 23, 2022 • 5 min read

Effective collaboration between designers and engineers is an essential requirement for the success of any product. However, I know that working together is not always straightforward and can bring its own set of challenges. Communicating design ideas can sometimes be difficult, as designers and engineers often have different skills and perspectives. Additionally, designers may struggle to grasp the technical constraints or be unaware of the engineering team's capabilities. As a result, that can lead to unrealistic expectations or missed opportunities for innovation.

With that in mind, in this post, I illustrate how I navigate the design and development processes in a way that aims to foster better communication and collaboration between design and engineering.

An imade featuring the app icons of popular design and developer tools: Sketch app, Figma, Apple xCode, Microsoft Visual Studio Code
An image of popular design and development tool icons arranged from left to right, including Sketch, Figma, Apple Xcode, and Microsoft Visual Studio Code.

Learn the engineering lingo

Entering the world of product design or software development can be daunting when you don't speak the language of the other discipline. My experience has led me to believe that designers should have at least a basic understanding of technical terms and concepts, such as APIs, frameworks, cache, Git, React, etc. On the other hand, engineers may need to become familiar with design-related terms and concepts, such as ideation, user journey, cognitive load, information architecture, usability testing, and so on. This process may require some initial effort and learning on both sides, but the benefits of improved communication and collaboration are well worth it as it enables both teams to lead more productive discussions.

Harness the full potential of your toolkit

I have found that holding a kick-off session at the start of a project with a new engineering team can help build a strong foundation for collaboration. In this session, designers can introduce engineers to the design tools they use, such as Figma and Sketch, and demonstrate how to turn designs into specifications and how to export UI assets for development. Meanwhile, designers may need to be given access to staging environments or test builds, allowing them to use and review the latest version of the product throughout the development process. This can help both teams to stay on track, keeping the quality in check along the way and ensuring that everyone is working towards the same goals.

Another way to further boost collaboration is using no-code tools like Webflow, Framer, and Play (or SwiftUI, HTML/CSS for more technical designers) to quickly prototype and test design ideas. These tools can be particularly useful for prototyping complex interactions and animations and can help designers communicate their ideas in a more interactive and engaging way.

As design software continues to evolve and mature, designers should use a combination of these new tools and techniques to continue to effectively convey their design solutions, staying up-to-date with the industry and its direction.

Work towards a shared vision

Having a shared understanding of the product vision and strategy helps ensure that everyone is working towards the same goals and can help prevent misunderstandings and miscommunications down the line.

Here are a few strategies that I use to get and keep everybody on the same page:

  • Make sure to communicate the problem the product strives to solve to all members of the team. The product manager plays a key role in aligning the team as a whole and can serve as a valuable resource for answering questions and providing guidance as the team works towards achieving the product goals.
  • Involve the entire team in the design process. Encourage participation from stakeholders, managers, and engineers. Doing so can help ensure everyone has a stake in the final product and gets their voice heard.
  • Use visual aids such as mockups and interactive prototypes to demonstrate the vision for the design "North Star" and why what we are building is exciting.

Involve engineers early in the design process

Throughout my experience, I have discovered that involving engineers early in the design process is an effective way to achieve seamless and efficient collaboration. This approach can help designers gain a timely understanding of technical constraints and also highlight new opportunities, allowing designers to make better-informed design decisions. As a result, both teams can work together to address challenges as they arise rather than waiting to fix them in the later stages of the project.

For instance, walking through the user flow maps with engineers allows them to understand the intended direction of the product's design and provides an opportunity for them to offer feedback on technical feasibility before any design work commences. In this way, both teams can contribute their expertise and prevent wasted effort on design solutions that are not viable to build.

Inspire teamwork and creativity

By working together and leveraging each other's expertise, the team can come up with innovative concepts that may not have been considered otherwise. There are a few specific techniques that can help foster a culture of teamwork and creativity:

  • Ideation sessions
    These can be informal or structured, but the goal is to bring together team members from different disciplines to come up with as many ideas as possible. Encourage everyone to share their thoughts, even if they seem off-beat or unconventional.
  • Design sprints
    These are focused sessions where the team works together to solve a specific problem or explore a new idea. Design sprints can be an effective way to get everyone on the same page and move the project forward quickly.
  • Dev/Design prototyping
    Pairing up with an engineer to build a prototype can be a great way to test different ideas, identify technical constraints, and foster a strong designer/developer relationship.

Remember that no matter how well you research and plan during the design stage, unforeseen issues and new challenges will naturally arise. That is where close collaboration between designers and engineers becomes especially important. By working together, designers and engineers can find creative solutions to these unexpected challenges and keep the project on track.

Be adaptable

It is essential to regularly check in with the engineering team, seeking feedback on the feasibility and practicality of proposed solutions. In turn, engineers must provide constructive feedback that helps designers understand and address any issues. Compromise may be necessary at times, as designers may need to adapt their designs to meet the constraints of the engineering team. By finding a middle ground and working together, both teams can keep the development process moving forward smoothly.