Bridging the gap between designers and developers

What keeps so many good digital products from being great? It’s all about the user experience. Not the easiest thing to get right. No worries: you’ve got amazing UX designers and developers.

About that. It may not be enough. But why? 

For the sake of argument, let’s just say your company does have the best UX design talent and development team around. At most places, designers and developers tend to work within their own silos, each doing their part to build (and launch) the best web or digital products possible.

And that’s where the design-development divide begins. Once design approves UX, color schemes, and the product’s look and feel, their prototype gets handed off to the dev team to get things to work seamlessly. Coding limitations and time constraints often eclipse UX design preferences.

When there’s a lack of meaningful team interaction, much is lost in translation. If only designers and developers spoke the same language. Or simply tried to reach out to the other more often.

It’s not that designers and developers actively avoid cooperation. It could be a matter of internal processes. Many times, the UX design and UX development departments are physically divided across buildings (or even time zones). In any case, harmony between both disciplines is critical.

Even more than you might imagine.

Why design & development need to work together

Forget pecking order. It shouldn’t exist here. UX design and development share equal clout for building great products. Knowing what each does will explain why they must operate as one.

Let’s start with the basics.

UX designers take on tasks related to a product’s design (naturally), usability, and functionality. Design teams also think about the specific needs of the target audience and then look for ways to make the product more fun, efficient, or memorable for users. In other words, they consider every aspect of user experience.

To make everything happen, designers create mood boards, workflow diagrams, and site maps. They make wireframes, layouts, and prototypes and take on user testing before all is said and done.

UX developers (a.k.a. front-end developers) bring a unique skillset to the mix. Think coder with a visual sensibility. They’re the ones that make sure the site or app does what the user expects it to do. Dev teams know what can (or can’t) be coded and they create a product’s underlying structure.

With so many moving parts, development teams are involved big time in beta testing, measuring user experience, making tweaks for usability’s sake, and spotting areas to make improvements.

What should be obvious is that designers and developers really want the same thing: to create a great product, one that’s loved by prior (and new) customers, gets praise from the tech industry, and is, of course, coveted by competitors. 

Design and development teams just interpret and go about these same aspirations differently. If only they could see where those differences open up a chasm. Let’s address those differences.

Common pitfalls form gaps between UX design and development

So, why the rift? And how can organizations bridge the gap between designers and developers? 

When dividing up product tasks, designers focus on user needs and developers pay attention to limitations with the existing technology. It’s relatively common for UX design teams to artistically imagine a fun new feature to delight users, putting developers in the hot seat to make it all work.

Granted, it’s not always quite like that.

For example, a UX development team may stumble upon a new coding shortcut that saves time and money. Or, simply makes use of an exciting hardware feature on the latest phone or tablet. Even if it causes big time changes in the simple beauty of the app’s UI, dev still moves forward.

Designers and developers deal with other issues, too, like time-consuming documentation, prolonged feedback cycles, and last-minute changes by stakeholders to further confuse matters.

Why does it happen? When conducting an UX gap analysis, one thing is certain: designers and developers don’t set out to purposely sabotage each other, cause tensions, or create extra busy work. At the end of the day, it’s the same product, same team.

With the common pitfalls (and the gaps they form) identified, let’s talk solutions.

How to bridge the gap between UX design and UX development

The prevailing UX design-development divide can easily be avoided (or at the very least, lessened) by sticking to common-sense strategies for boosting cooperation and understanding. Here’s how.

Bring developers in early 

At many organizations, designers finish up their digital work and hand their completed product design over to the dev team. Then, they wait to hear back about what needs to change.

To avoid surprises, delays, or disappointment about how developers react to the UX design, try to get them involved early on. This could mean having both design and development teams on those first calls with the client, asking developers their opinions (gasp) before starting on design, or running design prototypes past the dev team to get a better grasp on possible coding issues.

Making design adjustments ahead of time is easier and can help avoid the back and forth later on. 

Have developers attend design meetings and vice versa

Let’s face it. Developers and designers don’t necessarily know or get what the other does. Each might think their job is harder, less appreciated, or even misunderstood. And both could be right.

To combat this, start mixing things up with meetings. Have developers drop into your company’s next design critique, allowing them to really see what goes into UX design and see firsthand the steps that take place before design gets to development for coding. 

And designers could check out a developer’s sprint meeting to see what they’re currently up to. You just may find a designer sharing takeaways from past projects or current industry trends to help a developer who felt stuck on a current item in the product backlog.

If anything, such interactions create chances for design and development teams to form bonds.

Create open channels of communication   

When things go unsaid, so much gets missed. The more complex the project, the more details there are to overlook or ignore. Not to mention, all the different ways for teams to communicate.

Among themselves, designers might have a group text where they share and keep track of most project updates. The development team might check their email religiously for recent project goings-on, or connect with PMs using a work management tool (like Jira).

To keep designers and developers in the loop, set up a dedicated channel on Slack or Microsoft Teams. These tools are great for impromptu chats, sharing files (and screens), and setting up group meetings. Designers and developers can always refer back to the channel to catch missed details from old conversations.

Organize (and coordinate) hand-offs

Design handoffs are sometimes too informal. Photoshop files make their way over to developers without much of a heads up. 

Designers should make a point of organizing and clearly labeling each layer of their PSD files. It can help clarify things and avoid mistakes that could otherwise delay developers as they convert design work into HTML. Even better, developers and designers should talk things out and make sure little details like hover states (or other interactive elements) aren’t missed or misunderstood.

A little extra effort goes a long way toward getting things right, especially with a major dev build.

Increase the overall knowledge overlap

Designers and developers alike can become much more effective, sympathetic, and productive for a product team by rounding out their skill sets with knowledge from the other side of the aisle.    

For designers, this could mean learning the basics of HTML coding and CSS. Familiarity in how design elements convert into code or what makes up a web framework can improve efficiencies in design. Plus, a designer with HTML chops can help in a pinch for an overwhelmed dev team.

Developers can also benefit by learning more about graphics and design theory. A great way to do this is by comparing HTML side-by-side with the design’s team Photoshop file, taking note of any feature differences and figuring out why the designer’s choices make for a better product.

A developer with solid design instincts makes for a valuable (and unique) asset to any company.

Designers and developers are both critical to the success of a product. Each wants to do their best and build something truly unique all while offering users the best experience imaginable.

By staying mindful of (and working to prevent) the gap between design and development, the dream of pushing good products to become great becomes that much easier and consistent. If you’re still struggling to find harmony and keep designers and developers on the same page, especially given the constraints of a remote work environment, look no further than Lucidspark.