An Expert's Guide to Remote Design & Development Collaboration

Design and development both critical to the end result of a digital project - so why is it that often, communication and collaboration goes awry when the two teams lack defined guidance?

It’s almost a classic argument at this stage. Designers want the devs to make their beautiful new designs work without compromising aesthetics. In contrast, developers wish to reign back the more ornamented parts of the design and ensure features work well.

Once upon a time, technical teams would resolve issues through face-to-face collaboration. But when working remotely either with your agency (as in being a client and working between your team and the agency’s design team) or with a client, things can grow unwieldy quickly. As the COVID-19 pandemic forced remote work upon most of us, this dev/design divide became more apparent.

With that in mind, here is KOMODO’s guide to better remote collaboration between design and development. Much of what we’ve learned is about internal teams, but these tips are also relevant to a CTO who is trying to navigate collaboration between internal teams and agency partners.

Ready? Here we go...

Nail the discovery session

The beginning of a project must start with a discovery session that aims to draw out what the product is, who it’s for and how it will work. Discovery involves designers - but a developer must be present on the project.

When working remotely, you can easily map out a discovery session on a Miro board or other project management visualisation tool. This allows the developer to ask technical questions and field their concerns early, shaping the process from the outset rather than working reactively.

Daily ‘stand-ups’

Every day, it’s worth running through each team’s workload in an open forum. Video conferencing has made this easy - just get your teams on a call and then have them run through their tasks. This gives design and development an opportunity to flag issues or opportunities. A designer, for example, may state: “I’m working on x project today - can a developer help me do y?”. Doing this ‘out in the open’ allows everyone to get on the same page early.

If you’re working with an agency, elect a project lead who can liaise with the agency each day as, realistically, an agency won’t have the resource to dedicate its whole team to one client. You won’t want all of your internal team on a call with the agency.

Clarify via call and confirm in writing

The rise in video conferencing platforms couldn’t have come at a better time. As the pandemic hit and everyone became more familiar with Zoom, Teams, Google Meet and more, it’s become more accessible than ever to arrange ad-hoc calls. For development and design, having the autonomy to arrange these calls on the fly when issues crop up is essential.

Design should never just ‘dump’ a design on a developer and expect them to make it work. As they are designing, they should feel comfortable asking for a video call to present their work and ensure the developer can confidently code it.

Create a more collaborative sitemap

As the team builds a sitemap, video calls and daily stand-ups can help smooth out any concerns as they would occur. Without them, a designer may create a sitemap that wouldn’t fit a developer’s requirements and expect it to be built without any grounding in reality.

Wireframe with online boards

After the sitemap comes the wireframe. Designers can use a collaborative board like Invision to display the wireframe and allow the developers to inspect each page and proposed interaction, essentially ‘approving’ the functionality the designers have suggested.

Embrace project-based channels

If using a team communication platform like Slack, create project-specific channels that allow designers and developers to log ad-hoc issues, critiques, thoughts or even meeting notes. Discussions can stay relevant to the project rather than be left amidst other topics, only to be ignored or unnoticed.

Create a shared style guide

We’ve discussed the importance of documentation in the past - but it’s an issue traditionally reserved for developers. However, by designers creating a style guide that involves each element of a design and common blocks/fields etc, a developer can ensure they build everything to the correct standards laid out in the guide - such as colours, padding, formats etc.

Final handover

Traditionally, digital projects start with design and end with development. A designer will complete the ‘visual’ side, and then it’s the developers’ job to make it all ‘work’. This process isn’t a good one in a remote environment as it doesn’t keep both teams invested throughout the project. Instead, developers should liaise with designers during the ‘build’ phase - sharing internal staging links where possible so design and QA can take a look and critique the product. Designers can ‘catch’ issues that a dev may miss, such as padding or alignment issues.

Once the project is technically ‘finished’, it should have a final critique at the end of the build. This will be a thorough review tracked in a document that details all changes etc. If the project is large, this can be set out in a tool such as Jira to allow tickets to be created for designers or developers to address issues.

The biggest challenges faced by remote design and development.

The main issue with any remote design/dev collaboration is the inability to do a quick in-person sense check. Online, wires can get crossed easily when using text channels - as terminology may differ. And design/dev may have different perspectives, which can be hard to convey without face-to-face communication.

This is made worse when someone simply sends a link to review without any context. Instead, video conferencing allows teams to send a proof of concept and talk it through via a live presentation.

At the end of every video call, the team should create tickets to assign dev or design actions; this keeps everyone accountable for their part in each stage of the project.

Using video conferencing and live presentations of work, designers and developers can work better within their agency or with you as a client.