Design & Development Love:
6 Tips For Tastier Collaboration

Cynthia Meyer
Cynthia Meyer
Content Marketing Manager

Editor’s Note: This marketing infographic is part of our 25 part series.
Subscribe to our blog and enjoy more creative posts like this one.
This post has also been updated with new links and content.
Original Publication Date: December 13, 2016

Yes, men are from Mars and women are from Venus.

But we still can’t live without each other.

Likewise, designers and developers are faced with many challenges when it comes to finding that perfect middle ground in order to pump out a stellar project.

Should they battle out a project’s looks vs. functionality? What about timeline, responsibilities and overall goal? And which department gets to eat up most of the allocated budget?

Is this a design and development Battle Royale? Do you have to choose sides?

Hopefully not. But collaborating on a project, from planning to prototyping to real-life launch, can be quite a rocky road.

To smooth out your collaboration experiences, we’ve partnered with InVision to gather six takeaways that you can incorporate seamlessly into your cross-functional team projects.

User Focus

What’s the point of a damn good looking design if no one knows how to use it?

Focus on usability to avoid wasting all that effort that went into making your product easy on the eyes. Making your product user-friendly can help bring your beautiful designs to practical life.

The surefire way to find out if your project is focused on the user?

Conduct usability testing and observe real people interfacing with real scenarios within your product.

Whether it’s moderated in-person, moderated remote, or unmoderated remote testing, user testing can help you answer design and development questions. Those questions typically fall within five categories, as explained by Jakob Nielsen at Nielsen Norman Group:

  1. Learnability: how easy is it for users to do basic tasks the first time they see your site?
  2. Efficiency: how quickly are users performing the tasks?
  3. Memorability: when users return, are they still up to speed?
  4. Errors: how many and how severe are the errors, and are the users able to recover?
  5. Satisfaction: how pleasant is the experience?

Europeana Newspapers conducted usability testing on their historic newspapers browser. These are their findings:

design and development europeana newspapers

Mostly part success – image source

With these user insights, they discovered which segments of their site they needed to improve first.

To find areas of improvement on your pages, try InVision’s five-step guide to start effective user testing:

  1. Start testing the very first week of the project
  2. Do more than just usability testing
  3. Five users per target group
  4. Do it more than once
  5. Take care of the details

Usability is something both the designer and developer need to agree upon, because users come first. If the user will benefit from it, then proceed.

Early Involvement

Getting developers and designers to collaborate early will help nail down the end result with fewer revisions.

Further, early involvement gives both parties access to ideas, plans and prototypes when the project goals are first established.

Guiding a project from infancy can not only improve transparency and communication, but it can also create more buy-in from team members to get them excited for the challenge right from the start.

Don’t wait until it’s too late.

Industrial engineers know this all too well. According to a study by Aki Aapaoja and colleagues from the University of Oulu in Finland, early involvement leads to:

  • Lower likelihood of developing poor designs
  • Higher likelihood of a more effective design, improved construction operations, and less scrap
  • Higher customer satisfaction regarding the product’s function and usage
  • Room for creative solutions and the intensive exchange of ideas
  • Procedures that are synchronized and run in phases

Take a cue from the engineers and apply this to your projects.

Even waiting until the mid-planning stage to bring collaborators in can cause teams to miss out on valuable brainstorming sessions or, even worse, require drastic changes that hamper design and development and increase project costs.

And who wants to work backwards?

Systems & Processes

Both designers and developers need to be on the same page when it comes to specific project and design elements.

Having a standardized way of doing things can save valuable amounts of time and headache.

When a design element is already established, there’s no need to redesign that particular thing again. The same elements — naming conventions, sizes, margins, fonts, buttons, navigation items, paddings, and grids, to name a few — can be reused in different ways.

The Atomic Design Methodology is a system designers use where they pull together smaller standardized elements to create the larger aggregated design.

Designers can aggregate “atoms” to create “molecules” and continue compiling elements all the way to the “pages” level:

design and development reuse elements

The smaller elements can be designed once and re-compiled in different ways – image source

Here are the five elements broken down:

  • Atoms: the smallest elements are pre-established pieces that are already branded and designed to a company’s approved standard and can be things like labels, inputs or buttons
  • Molecules: conjoined atoms to create user interface (UI), like a form label, search input and button in one
  • Organisms: complex UI like header forms or category form grids
  • Templates: page level objects that are components structured in a layout
  • Pages: instance of a template that shows what a UI looks like with real representative content in place

By creating systems and processes that fall nicely into place, projects can become a seamless system. Team members will be able to focus on the real brain work and not get bogged down by logistical details that have already been established.

You can set up standard systems that allow your teams to be as efficient as possible, and processes that allow your teams to be as effective as possible.

This makes the work move more quickly for everyone involved.

The Pre Hand-Off

Comb through that checklist to make sure you haven’t missed a single important detail.

Before the hand-off, ask yourself: From start to finish, did you think about all the nitty-gritty details necessary for a seamless end product?

The Pre Hand-Off stage is where you check everything with a fine-tooth comb to make sure things are just so before you release to the designers.

Things like quality control, usability and the visitor’s perspective should be the most important things to consider during this stage.

It’s your last chance to brainstorm ideas and concepts before you the design team starts to execute the plan, so make sure things are designed just the way you want them.

InVision created Inspect to aid with this process. Here’s why they did it:

“We want to make the design handoff process easier, more accurate, and less frustrating by building a way to help designers and engineers come together around designs before the handoff. No more massive handoff documents, long email threads, and endless rounds of revision!”


design and development invision inspect

Hand off designs to the development team in a simple format – GIF source


Frequent Check-Ins

Is everything on track? If something were to go wrong, would you know exactly where to look to fix it?

Frequent check-ins with your team can ensure that things are moving in the right direction.

Here’s how Dr. Dobb’s The World of Software Development defines a good check-in:

  • A good check-in enables reviewers to assess the change quickly.
  • It allows team members to evaluate the impact of the change to their parts of the project.
  • It alerts build and QA engineers to potential modifications in the setup and notifies those responsible for documentation of any required updates.
  • Finally, a good check-in is easy to debug, fix, or even back out in case of a problem.

You’ve spent all this time perfecting the plans and prototypes, now make sure the actual plan is being carried out according to the original schedule.

Further, missing status check-ins can prolong development and, if you’re not careful, missed deadlines.

Pragmatic Communication

Talking in terms that normal humans can relate to can be key to your project’s success. Even though they’re on different teams, designers and developers should share the same understanding of goals, details, plans, specs, deadlines, and execution of a project.

Just because they work from opposing parts of the brain doesn’t mean there’s not a mutual language, respect, and middle ground that designers and developers can work from.

According to the Pragmatic Communication Model, that middle ground emphasizes the creative and motivational traits of human interaction. Visually, the model looks like this:


Shows interaction between two people – image source

The Pragmatic Communication Model shows two people responding to each other based on the following five parts:

  1. Observation: recognition of information through the five senses
  2. Meaning: interpretations and judgments formed
  3. Affect: feeling, emotion and mood aroused
  4. Motive: wants, needs, desires and intent
  5. Action: behavior engaged including talking and movement

Starting from a place of practicality and empathy can help team members communicate far more effectively and honestly. This is especially important when issues, kinks, and bugs arise.

With pragmatic communication, your design and development team can create solutions that may not have been possible without both sides’ input.

Closing Thoughts on Design and Development

Tightening the bond between designers and developers can be a challenging but necessary task.

Can it really be a match made in heaven?

With these tips, your design and development teams can shift their collaborative projects into high gear.

And once the connection is solid and the relationship is jiving well, however, magical products can come to life.