Development is an integral part of the product creation process. After all, the final design that developers create is the one our users will interact with. But accurately translating a designer’s intent into a real-life product can pose a challenge for developers. As a result, the final product often differs from what the designers envisioned.
Design is a team sport, so the designer-developer workflow should be adjusted to accommodate the needs and wants of both sides. With that in mind, here are some tips to help you create better designer-developer relationships.
6 Ways to Improve Collaboration Between Designers and Developers
- Ensure developers understand what they’re building.
- Define the scope and timeline of the project.
- Collect feedback from developers directly and regularly.
- Ask about technical feasibility.
- Have a design system in place.
- Prepare specification.
1. Ensure Developers Understand What They’re Building
If developers don’t understand how the product will work and how users will interact with it, they can’t build a product that will serve the needs of both the users and the business. So, developers must understand the big picture.
Designers can do a few things to achieve this goal. First, schedule a kickoff meeting early in the design process. Use this meeting to explain how the future product will work. This kickoff meeting will help developers to define basic technical requirements and propose high-level architecture for the future product right from the start.
Further, keep developers involved throughout the creative process. Have brainstorming sessions together to get valuable insights from the development team. For example, they may raise some valuable points related to the product performance (e.g., “It will take 30 seconds for us to load this data, so we need to design some sort loading indicator on this step”) or some edge cases (e.g. “We cannot validate the user shipping address on the fly, so we need to have a message telling the user that our customer support service will do it after they provide their address”).
2. Define the Scope and Timeline of the Project
Developers should understand what deliverables they can expect from the design team and when. A clear timeline with specific tasks that need to be done in order to release a product will help everyone plan individual activities and budgets.
Here are a couple of practical tips:
-
Specify the definition of “done.” Clearly define the rules that specify when a design is ready for handoff. Clarity here will help prevent situations in which the development team receives an unfinished design.
-
Apply the chunking principle to break things up into smaller parts. The design team should try to ship new designs with small, incremental changes (chunks) that the development team can quickly implement.
-
Avoid unexpected scope changes (i.e., adding new features) or redesigning already developed parts of the product. Such things can break timeline commitments and affect team motivation.
3. Collect Feedback From Developers Directly and Regularly
Great collaboration with developers starts with establishing effective communication channels. Keep in mind that designer-developer interactions shouldn’t be limited to the design handoff phase, either. They need to communicate and share work often throughout the process of building a product.
Meetings, whether online or in-person, are the most effective way for two teams to establish a bond. During these meetings, designers can preemptively solve many problems. For example, a design team can walk developers through the entire design and share essential details required for implementation, heading off possible surprises.
Apart from meetings, you should also have on-the-fly communication channels. One of these is your corporate messenger (e.g., group in Slack, Signal, etc.), and another is your design tool (shared design files Adobe XD, Figma, Sketch, etc.). Invite developers to the chosen channels so they can ask questions about the design. The key idea is to ensure that developers can naturally incorporate whatever channels you use into their day-to-day work without too much effort.
4. Ask About Technical Feasibility
Developers can’t always bring everything that the designers envision to life. When designs are technically infeasible, they cannot be implemented.
Likewise, some design solutions will require a lot of effort. When you collect feedback from developers, always ask them to try to identify technical constraints. If you see that something is going to be hard to build, you might want to go back to the drawing board and suggest different approaches.
At the same time, try not to be overly influenced by the developers’ feedback at the expense of the user experience. At the end of the day, you design for your user, and you cannot sacrifice user experience just because the building process will be technically demanding.
5. Have a Design System in Place
A design system is a tool that helps product teams to introduce reusable design elements and styles. Without a design system that regularly uses the same components, developers have to do a lot of redundant work that likely leads to inconsistency.
Design systems can help product teams improve efficiency and deliver consistent experiences to users. When creating your design system, you should follow the Atomic Design methodology because it creates a flexible yet powerful design system.
To make the design system even more effective, add naming conventions, design principles and rules. Both designers and developers should know how to name individual elements in a design system. Plus, rules on how to use typography, colors and even words in your product should be defined in guidelines that you share with developers as a part of the design system.
Furthermore, you should introduce a version control system, which easily does the hard work of comparing design assets versions by automatically creating a new version once a team member makes some changes to the design system. By doing that, you guarantee that developers will be working with the right design. Also use a mechanism that will notify developers about the changes in the design system.
6. Prepare Specification
Design specification is a document created for developers that describes how the design looks and works. This is by far the most crucial document during design handoff.
Before preparing design speciation, figure how much detail developers need from the design team during design handoff. Nobody enjoys reading hundred-page documents full of unnecessary details, yet only visuals without textual explanation won’t be enough to fully communicate the design. Achieving a good balance between visual and written documentation is vital.
Follow a few universal tips that will be relevant to any project. First, prepare a design for all possible states. All too often, designers forget to design failure and success states. As a result, developers have to provide something that they think will look fine, but such a solution isn’t always good from a UX perspective.
Also, be sure to document complex animated effects and visual transitions. You need to show how the transition will work using a high-fidelity prototype and specify timings.
Finally, measure the effectiveness of your specification. Analyze the questions that developers ask after they review specifications. If they ask questions that can’t be covered by specification, then it's clear that you need to improve it.
Good Collaboration Leads to Better Products
Designers and developers indeed approach their jobs from different perspectives. Designers tend to lean toward the visual and functional part of the product, while developers focus on the technical side of the process. Yet, design and development are two sides of the same coin. When designers and developers are open to each other’s perspectives, they create a synergy that ultimately leads to good product design.
