5 ideas for better developer-designer collaboration

1. Create UX focused, non-conflicting KPIs for designers and developers

Instead of conventional KPIs, designers and developers can benefit from having user-centric KPIs such as conversion rate, user engagement metrics, session duration, bounce rate, etc. These KPIs will put both groups on the same page and help them focus on what’s really important – user experience.

Think of conversion rate as a KPI for a project aimed at building landing pages for a new campaign. Instead of delivering the landing page design in X days (designers) and making it live in X days (developers), both teams will focus on making it great from the user’s point of view.

Conventional KPIs for designers and developers rarely factor in collaboration/wait time and create unnecessary conflict.

Some of the common KPIs for designers include:

• Time taken to finish the project

• Time spent on revisions

• Internal/external feedback on the design

• Number of projects completed in a quarter

With these KPIs, feedback from developers is detrimental to designers because they have to take time away from new projects and rework the screens they already turned in. In this case, their KPIs put them at odds with the developers.

On the other hand, some of the common KPIs for front-end developers include:

• Lines of code and number of deploys

• Cycle time – time spent on a single task

• Code stability and simplicity

Complex and feature-rich designs require more coding effort from the developers. So, every time designers insist on new features that require complex coding, developers think of it as a hindrance.

While conventional KPIs do have their advantages, managers should ensure that the KPIs for one team don’t conflict with the other team’s work. This can be achieved by giving more weightage to user-centric and shared KPIs.

2. Provide front-end 101 training to designers and design 101 training to developers

If designers understand the basics of front-end development, they’ll be able to see things from the developers’ perspective. The same goes for developers. Furthermore, designers with a basic understanding of HTML and CSS will also create designs with technological limitations in mind. Understanding how an application works behind the scenes – even if just the basics and API capabilities – can help designers understand the technical limitations better.

By doing some basic courses in each other’s disciplines, developers and designers will be able to speak each other’s languages. This kind of cross-training improves collaboration and results in the two groups working together to come up with better ways to solve problems.

Coursera and Career Foundry offer special courses for designers that want to learn front-end development. These courses cover the basics of web development and teach HTML, CSS, and JavaScript – the three languages all front-end developers use in their work. These courses also discuss UX and UI design from a developer’s perspective. The designers that take these courses will walk away with a better understanding of how developers make designs come to life.

Developers can also benefit from courses by Canva and LinkedIn Learning. These courses cover typography and color combinations, but more importantly, they cover the stages of the creative process and how designers think. The developers that take these courses will acquire a better understanding of what goes into design.

These courses will require additional time and effort from both designers and developers, but the cross-training will pay off in terms of improved efficiency. Furthermore, anyone taking these courses will also have new skills and certifications under their belt.

3. Create a design system

A design system consists of a style guide and a pattern library. It’s a single source of truth filled with reusable components (drop-down menus, CTA buttons, lead forms...) and clear instructions on how to use them and reduces discrepancies and back-and-forth between designers and developers. Having a defined system of components that are reused also cuts down on unnecessary technical debt engineering you may accumulate. This happens when creating the same UI elements more than once. Reusing assets allows for faster delivery time and a consistent application.

A style guide is a set of standards for all brand identifiers such as the company logo, the color scheme, the font and typeface, and the template design. Most companies begin with a style guide and work their way up to a pattern library as they grow.

A pattern library is a collection of all interactable components of your design, including components such as buttons, navigation bars, and carousels. It also consists of definitions and descriptions of all these components, clearly describes their uses, and contains code associated with them.

A design system combines these two together and provides the user with complete information on everything included in the style guide and the pattern library, as well as the dos and don’ts of design and implementation guidelines. Designers can create concepts directly in the design system by dragging and dropping pre-stored components. Developers can then see the code associated with each component as well as give feedback to designers in the same space.

Some of the popular online design system management tools include material.io, supernova.io, zeroheight.com, and PatternFly.

4. Set up recurring weekly or biweekly meetings 

Cross-functional team meetings help resolve conflict, improve communication, and increase understanding across two groups. Setting up recurring weekly or biweekly meetings between designers and developers will help them discuss ongoing projects, kick off new projects, and collaborate effectively. 

In a webinar on designer-developer collaboration, Nicki Snyder, the manager of experience design at Pathwire, discussed the importance of meetings between the design team and the developers:

“We (in design) really like to make things and assume that they are going to work. We did not bring in engineering early in the process and that caused a lot of unnecessary work that could have been avoided had we spent one hour reviewing what we wanted, finding what the end state would be, and having that discussion (with engineering).”

A product manager would be the ideal person to own these meetings and make sure both groups are focused on improving the user experience. The product manager would also set the agenda for these meetings, which can be any specific issue or roadblock with a project, going over the designs of a new product feature or web page, or conversation on a low-performing landing page. This meeting can also be converted into a working session where a small group of designers and developers solve a specific problem. 

Doing initial kick-off meetings and working sessions helps developers know whether it’s possible to do what is needed within the application. This allows time to do a research spike if needed for them to see what needs to be true to make the functionality or design happen. Meeting at the start of the project helps Product Managers create realistic delivery timeframes and gives requirements for designers upfront.

It will be the product manager’s responsibility to make sure these meetings do not turn into status update meetings and that they only happen when there is a predefined agenda that clearly addresses a problem that the participants will try to solve.  

The key takeaways from these meetings can be used to update the design system. Ideally, these meetings will go from weekly to biweekly to monthly, and then to a need-basis as the design system becomes more robust.

5. Use a designer-developer collaboration tool that works for both teams

The conventional designer-developer collaboration process involves a handoff from the designers to the developers. For example, the designers create screens and share the image file with the developers. The developers then provide feedback on what can and cannot be done. The designers then revise (or remake) the screens as needed and hand them off to the developers again, and so on. It is a time-consuming process with a lot of back and forth before anything goes live.

Designer-developer collaboration tools aim to turn this handoff into a handshake. The designers and developers will be able to look at the same screen in an environment where it can be edited in real-time, which will eliminate the back-and-forth aspect of the process.

There are also designer-developer collaboration tools like Adobe XD that are more inclined toward the needs of the designer and support the handoff process from wireframes to complete designs. Some tools such as zeplin.io are developer-focused and cater to their needs by giving them code snippets, assets, and specs for different screen sizes in one place. Zeplin integrates with Adobe XD, so it can be used in addition to it to support the developers.

In the webinar we mentioned earlier, Nicki mentioned some of the challenges related to the handoff process. One of those challenges was getting developer feedback too late in the process. She also mentioned how InVision helped them turn the handoff process into a handshake process.

Besides InVision, there are tools like Bit and Figma that help developers and designers collaborate in real-time. These tools can also be integrated with JIRA or other project management tools. The pricing varies based on the number of users and the number of projects, with $9.95–$20 per user, per month being the price range if you go for a professional plan.

Designer-developer collaboration and email marketing

Usually, the discussion on designer-developer collaboration is focused on web pages and applications, but email can benefit from it too.

Thanks to better collaboration between designers and developers:

• Emails will work with all types of inboxes and devices.

• Deliverability will increase because of cleaner, simpler code.

• Click-through rates will increase due to better layouts.

• Unsubscribe rates will go down because of increased engagement.

Furthermore, having a design system in place, along with front-end training and Pathwire’s user-friendly features, will help designers create email templates that can be adjusted and reused time and again. For example, a designer can set up a newsletter template, a developer can make sure it works with all screen sizes with tools like Email on Acid’s Inbox Display or Mailjet Email Previews, and a marketer can simply add new images and replace the text within the same template every month.

Speaking of newsletters, do subscribe to ours. We will send you articles like this, detailed guides, and exciting developments from Pathwire, and a lot more every month.

Want more designer-developer insights? 

Watch our live-streamed panel webinar: “Enhancing the developer and designer relationship to its full potential with Pathwire and InVision.” 

The panel discussion includes: 

• Nicki Snyder, Manager of Experience and Design at Mailgun by Pathwire.

• Lawrence Norton, Software Engineer at Mailgun by Pathwire.

• Nick Karavas, Solutions Consultant of InVision.