Get PPC & CRO Knowledge Right To Your Inbox
Covering topics to help your business make more money.

Design & Development Love:
6 Tips For Tastier Collaboration

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.


Men are from mars and women are from venus.

Yet 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?

Choose your battle.

Collaborating efforts on a project, from early planning prototype stage to real-life application launch, can be quite the 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?

To avoid wasting all that effort that went into making your product easy-on-the-eyes, focus on usability. 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 questions like these from 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:

europeana newspapers

Mostly part success – image source


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

Here’s InVision’s recommendation on steps to take when user testing:

  1. Start testing the very first week of the project
  2. Do more than just usability testing
  3. 5 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: user’s come first. If the user will benefit from it, then proceed.


Early Involvement

Getting both developers and designers to collaborate during the early stages will help to nail down the end result with fewer reworks. With early involvement, both parties can access ideas, plans and prototypes right from the get-go when the project goals are first established.

Influencing 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 research study by Aki Aapaoja and colleagues from the Department of Industrial Engineering and Management at the University of Oulu in Finland, early involvement leads to:

  • a lower likelihood of developing poor designs
  • a 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 it to your projects.

Waiting until things are even mid-stage can cause teams to miss out on valuable brainstorming sessions and worse yet, can require redesigns that take reactive vs. proactive developing.

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 like naming conventions, sizes, margins, fonts, buttons, navigation items, paddings, and grids.

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, and the sames elements can be reused over and over and 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:

Screen Shot 2016 11 22 at 11.27.54 AM

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 where team members can focus on the real brainpower 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 needed to develop a seamless end product?

The Pre Hand-Off stage is where you can scrutinize 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 it.

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!” 

invision inspect

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


Frequent Check-Ins

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

Having frequent check-ins with the team can ensure that things are moving right along and 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 to 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.

Holding off on status check-ins can mean prolonging development and holding off on deadlines.


Pragmatic Communication

Talking in terms that normal humans can relate to can be key to your project success. Though from two different teams, designers and developers can 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 Richard D. Rowley’s Observational Study, the Pragmatic Communication Model emphasizes the creative and motivational traits of human interaction. The model visually 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

Coming from a place of practicality and empathy can help team members communicate without a hitch.

This is especially important when issues, kinks and bugs arise. Pragmatic communication can help save the day and lead the team to the quickest painless resolution.


Closing Thoughts

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

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

Can it really be a match made in heaven?

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

Conversion Rate Optimization That Performs Even Better

Klientboost Blog Author Cynthia Meyer

Cynthia Meyer

Content Marketing Manager

We help our clients make more money


What's In The Proposal?

Competitor Info
Competitor Info
Optimization Tips
Optimization Tips
Custom Pricing
Custom Pricing
... and so much more!
Last Step
Previous step

When it comes to PPC, the first person I turn to is Johnathan Dane. He and his team cut through the bullshit and get straight to the point with the goal of making you more money. Work with him.

Peep Laja
Peep Laja
Founder @ ConversionXL
Please enter a valid URL (e.g.
Send my free proposal
Previous step

We Get Results



Please look out for an email from us.

Close window

problem here.

try again