How we aligned our design and development team and improved efficiency

If I had to describe the story of IMPACT’s website team, I’d say it’s similar to the plot of your typical Hollywood buddy film or TV show. 

Think Steve Harrington and Dustin Henderson from Stranger Things. Buzz and Woody from Toy Story. Legolas and Gimli from The Lord of the Rings.

In all of these scenarios, you’ve got your main protagonists who, in a lot of ways, are complete opposites. 

Early in the relationship there’s a lot of friction and they have trouble seeing eye-to-eye.

However, as the story progresses, they learn to put aside their differences, form an unlikely friendship, and work together to accomplish a greater goal. 

Designers and developers are such a duo.

Now, while our greater goal at IMPACT didn’t involve destroying a ring in the fires of Mount Doom or defeating a demogorgon; it did depend on us finding a way to align our designers and developers — a task some companies would say is just as hard.

Bridging the gap between our designers and developers was something we struggled with for years. Our teams weren’t aligned on what the overall goals were of our team, communication, and we were working in a very siloed approach.

So, what caused the breakdown between the two teams?

We needed to figure out what wasn’t working and why.

Over the next few months, we had a number of retrospective meetings where we did a deep dive into every aspect of our team.

We ultimately came to the conclusion that there were three major issues causing the breakdown between designers and developers.

1. We treated website projects like an assembly line

When it came to how we approached website design, we realized instead of treating it as  a collaborative process, we treated it like an assembly line. 

Our designers would work on a design and then hand it off to development to be coded and move on to the next project. 

The only part of the process where there was any communication between the two teams was during the brief handoff  — but we would just simply provide developers with a link to our project files and move on.

The limited amount of communication caused a lot of misunderstandings on how the final product should look and function which then led to additional rounds of revisions.

We ended up needing to continually push back the launch dates of our projects which hurt profitability and had a domino effect on the start dates of the next projects we had slated.

The lack of collaboration also had an effect on our team's ability to innovate and grow. 

Collaboration is a key driver of innovation. 

When you effectively collaborate, you get to see how different teams work and approach problems. 

You’re introduced to new habits and get outside feedback which can help you spark new ideas or improve processes.

Unfortunately, working in our siloed approach, we plateaued. 

We stopped innovating and spent more time sticking to what we know rather than taking chances and trying to push our team forward to be ahead of website trends.

2. There were major knowledge gaps between teams

Working in a assembly line approach not only created communication and collaboration issues, but it also created knowledge gaps between the two teams.

Designers and developers didn’t have an understanding of what was happening in the other’s parts of the process so the things we worked on weren’t always cohesive.

Our designers would make these beautiful designs, but when they were sent to development, they wouldn’t easily translate into code.  

We didn’t have a strong understanding of what types of things increase development time. 

The extra work our developers had to put in to make the designs function caused major delays in our project timelines.

On the other side of things, our developers didn’t know what the goals of a page were. 

They didn’t know what we were trying to build towards with these designs. 

This made it tough for them to give functionality feedback to the designers.  

Dealing with these issues not only affected the final product we put out, but it also had a large impact on our team morale. 

We were frustrated that we kept running into the same issues and disappointed that we couldn’t put out the final product that we all wanted.

3. There was no unified file structure

Finally, we noticed that we didn’t have a unified file structure for passing work from design to development. 

All of our designers did things a little differently. We all had a different file naming structure, a different way of leaving functionality notes, and we organized files in our own way.

That meant that every time our developers got a new project they needed extra time to ramp up and get familiar with how everything was organized. 

It was like starting every project from scratch, again, extending the length of our projects and leaving more room for error.

We knew if we were going to take the leaps in our website work that we wanted, we had to rectify these issues. 

How we aligned our design and development teams

These issues were creating a major divide between our designers and developers that made it near impossible for us to work together. 

We knew that unless we fixed these issues, we were never going to be able to put out that incredible final product that we knew we were capable of.

Once we knew what was causing the misalignment we were able to put a plan in place to get our teams working collaboratively and efficiently.

We implemented the following initiatives to start breaking down those silos:

We got our teams speaking the same language

One of the first initiatives we tackled was coming up with a way to get our teams speaking the same language. 

We noticed we had a lot of different names for the same website elements.

In our design system we would call an element one thing, then in our dev framework it would be referred to as something else. 

If we could create common terminology, then that would help up start to improve that cross-team communication and cut down on misunderstandings.

To fix this, we had a team meeting where we went through all of our design and development assets and decided on a proper name for each one. 

We then updated both our design system and dev framework to use the names so they lined up.

We implemented joint design reviews

Next, we knew we had to change our process to be more collaborative. 

In order to do that we needed to get our developers more involved in the early stages of design and our designers more involved in the later parts. 

One of the ways we did this was by implementing design reviews that included our full website team.

During these reviews, our designers are able to present designs they’re working on and get feedback from development. We can quickly see if what we’re designing will translate to code and stay within a client’s budget.

We’re also able to brainstorm on the functionality of a page and discuss any red flags the developers notice that may cause issues when it’s time to develop. 

Overall, this is an effective way to not collaborate, but also close any knowledge gaps we may have between the two teams.

Created a process for designer to developer handoffs

A lot of our miscommunications and delays stemmed from not having a clear process for moving work from design to development. 

So, as a team, we came up with a consistent way to organize and name our files, decided where we wanted all of the important functionality notes for a design to live, and made sure all of a projects assets lived somewhere that all the developers could easily access.

Those small changes have made a huge difference, however, just to be safe, once it’s time for a handoff, we review the final designs with the developers one last time and make sure they have everything they need.   

Found new ways to increase team communication

Overall, the biggest thing we needed to improve was our communication between design and development.

Our joint design reviews started to get us talking and looking at things from both a design and development point of view but we wanted to keep the conversation going outside of those meetings. 

So, we created a channel in Slack for our team members to communicate.

In the channel, we can share reoccurring issues we’re noticing on different projects, design inspirations, and also team wins.

Outside of Slack, we’ve also implemented a new project roadmap document that keeps our teams aligned on budget and project progress.

In the document, you can find things like links to the projects designs that have been completed and a breakdown of the client’s budget.  

Our entire team is able to easily hop into any roadmap document and see how far along we are in design or how much development budget we have left. This helps keep our projects within scope and on time.

Held a team-wide training

Once we had a plan in place for aligning our team, we decided the best way to kick off our new initiatives was by holding a team-wide training.

We really wanted to get everyone excited about working in a more collaborative environment and feel a sense of ownership over the new process. 

We wanted everyone to feel like they had a hand in its creation and that we made something we could all be proud of.

During the training we presented all the major changes we were making to our design approach. We talked through any questions or suggestions our team had and made sure everyone had a strong understanding of our vision. 

How these changes impacted our team

Within the first three months of implementing these changes, we noticed a huge difference in the way our team worked.

We felt like we were actually working together. 

Our designers and developers were excited about educating each other on their specialties and as a direct result, we were coming up with new and exciting ideas for our client websites.

From a profitability and project deadline point of view, we were staying well within budget on our projects and launching on time. It seems like every week we’re finding new ways to become more efficient and provide a better final product for our clients.

Now, if you feel like your designer-developer story is stuck in the early stages where your leading characters aren’t quite seeing eye-to-eye yet, stop and take a look at how you’re working together. 

How does your team communicate? Do your designers feel like they understand how the developers work and vice versa? 

Aligning your developers and designers will not only empower your team to put out the best possible work but it will also make it much easier to keep your projects on budget and improve the overall morale of your team.