Improving the Designer-Developer Partnership (a Designer’s Take)
The team over at Figma recently published a report titled Decode the Developer, much of which focused on what developers want out of a designer-developer relationship. There were some great insights and discussion points. As a designer, this got me thinking about the ways we collaborate with our dev team here at Four Nine. We are always learning and adapting to each project, but some learnings have stuck with us. Here are some key approaches that we have found can help strengthen the partnership between the two professions.
Bring the Dev Team in Early
One area we feel has been important to consider is when to engage the dev team during a project. This not only impacts the partnership between the designers and developers, but can benefit the entire project as a whole. Working in an agency environment can make it easier to consult our dev teams early and often, but we still feel it is important even for larger in-house teams or projects with multiple contractors. Here are a few reasons why:
- Big Picture Input: It is worthwhile to bring in team members on the technology side early so that they can contribute to conversations about strategy and systems architecture. Key decisions early on can impact the entire project as well as how designers and developers will work together.
- Catching Potential Build Issues: Throughout the design process our designers consult with developers on ideas they have for new features. These quick check-ins help us understand how much effort the designs will be to build and what sort of issues may arise for things like scalability or maintenance. Catching these issues early in the design process can save time later on, helping you stay on schedule and on budget.
- A Different Perspective: This collaboration also leads to new ideas or directions we as designers may have not considered without their input. We have confidence in the fact that our developers are both analytical and creative thinkers with valuable insight in the design of digital products. They can contribute far beyond writing code.
Bringing the dev team in early also keeps a consistent line of communication open and creates excitement around the project. Understanding the goals of the project and strategy behind it helps everyone be the most effective at their specific tasks.
Find Common Ground
Designers and developers are working towards the same goal — ship a great product to market on time. In order to achieve these goals together we need to be able to communicate effectively. Finding common ground in the ways in which we work can help:
- Terminology: It is important wherever possible to use the same terminology when discussing different aspects of the project. Often confusion and misunderstanding can be attributed to using different words for the same thing. This can be design elements or principles, business terms, project management terms or even what defines a particular part of the process. Using common terminology wherever possible can reduce time, effort and avoid setbacks.
- Language and Principles: We can take this beyond terminology that crosses over between designers and developers and look at the languages and principles each position uses. The more understanding a designer has of writing code and the development process the more likely they will be able to produce designs that are possible to build. This can go in the other direction with developers understanding UX and UI principles and best practices. Obviously there is a limit, and we don’t expect our designers to become full-fledged developers or vice versa. The idea is that through understanding each perspective and the constraints involved, it will be easier to adapt where needed.
- Technical Approach: The way designers build their files can also impact understanding for the dev team. Agreed upon approaches to building components and layouts can help developers clearly interpret the designs in Figma (or other design software) and result in less inconsistency, minimizing design review time.
- Software: The evolution of design software like Figma that allows for more collaboration between both teams has really helped with the three points above. It still has a way to go but Dev Mode and some of the new features Figma is coming out with will only further improve mutual software use.
Give the Handoff Process the Time and Space it Needs
Having a structured, consistent process for handoff is crucial. Here are some things that we do to help this key moment in the project go smoothly:
- Set aside time for a feedback cycle: We book a proper kickoff meeting once final designs have been completed where the designer goes through the Figma file, reviewing any specific instructions, notes, prototypes and other details. The team asks questions and gives feedback where they think information is missing. There is then time allotted for the dev team to plan their tasks for the sprint and always a follow-up to address any questions that have been raised during this process.
- Be Flexible: These discussions often lead to some revisions to the design file or even additional designs, which we feel is a necessary part of the process. From our perspective, the designer should not be going into this stage thinking the designs are perfect and can not change. There may need to be adjustments due to many factors during the development process. The idea is to know what you think should not be compromised in order to keep the integrity of the design idea and what areas you are flexible to change.
- File Organization and Documentation: Agreeing on what type of files are being handed off and on what platform can play a big role in efficiency as well. Is it a static design file? An interactive prototype? Where will graphics and imagery be located? The format needs to provide the details a developer needs to understand the requirements and all team members should be comfortable using the platform. The design file itself should be easy to navigate, use consistent notations and layout hierarchy.
Create a Structure for Review and Testing
Once a feature or page is built, the next key touchpoint is review and testing by the designers. This process can be time consuming for the design team and, if there are a lot of feedback cycles, for the developer as well. Good planning and communication will reduce feedback cycles, helping make this stage of the project more manageable:
- Plan it Out: Consider the timing of design reviews and how they relate to the project as a whole. Do you do a design review after a feature is complete? Or an entire page? Or is it based on the entire user flow? This will depend on the type of project and on your team’s approach to design and development. Also, aligning on how documentation, bug reporting, and other project management tools will be used in advance will go a long way to making this a smooth process.
- Availability: Fostering a good relationship between both teams will ensure everyone feels comfortable reaching out to each other, which inevitably leads to less time spent during reviews and fixing things that were missed. Aligning on each team or individual’s preferred way of communicating during the review will help ensure everyone knows the best way to reach out. Developers and designers both should feel confident in asking clarifying questions or requesting feedback.
- Attention to Detail: By paying attention to the small nuances and finer details, both sides can ensure we are respecting each other’s time and reducing the amount of back and forth. Make sure all team members understand what the expectations are for a build to be considered complete and ready for review so that they can work towards that standard.
Conclusion
Each project has unique needs and constraints — I hope that some of these approaches can help your designer/developer partnership flourish on your next engagement. Getting everyone involved early, finding common ground, and making sure the key touchpoints are well thought out can go a long way. As you can see, Project Management plays a key role in this process – make sure to send this guide to your PMs so they can help your teams follow through.
What are some of the things your team does to help strengthen the designer/developer relationship? Let me know in the comments below!
Four Nine is a full-service Digital Agency located in Vancouver, BC. Learn more about us by visiting our website or contact us at info@fournine.digital.
