Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
Website Design

How we aligned our design and development team and improved efficiency

By Joe Rinaldi

How we aligned our design and development team and improved efficiency Blog Feature

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.

Team-Win 

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.

Topics:

Website Design
User Experience Design
Published on February 4, 2020

Recent Articles

9 Crucial Elements Every Homepage Should Have [+Video]

By Ramona Sukhraj on October 21, 2021
6 min read

5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)

By John Becker on October 14, 2021
7 min read

Google shares new tools to audit website user experience

By Paul D. Grant on August 12, 2021
3 min read

New HubSpot CMS Hub starter tier released for growing businesses

By Paul D. Grant on August 6, 2021
4 min read

They Ask, You Answer and diversity, equity, and inclusion (Content Lab, Ep. 55)

By Liz Moorehead on July 29, 2021
2 min read

ICYMI: Digital marketing news update for July 26, 2021

By Liz Moorehead on July 26, 2021
6 min read

ICYMI: Digital marketing news update for July 19, 2021

By Liz Moorehead on July 19, 2021
6 min read

What the heck is going on with all the Google updates? (Content Lab, Ep. 54)

By Liz Moorehead on July 15, 2021
1 min read

8 best business website designs (updated for 2021)

By Sam Lauron on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Liz Moorehead on July 12, 2021
5 min read

Too many internal links in content can confuse Google about site structure

By Liz Moorehead on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Liz Moorehead on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Ramona Sukhraj on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Liz Moorehead on June 25, 2021
6 min read

Finally, Google page experience core update is rolling out

By Liz Moorehead on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Steve Polito on June 16, 2021
6 min read

What is a featured snippet? [Definition + Examples]

By Kevin Church on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Liz Moorehead on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Liz Moorehead on May 21, 2021
3 min read

Why is growth-driven website design so freaking expensive?

By Daniel Escardo on April 14, 2021
5 min read

Strategy-driven website redesign: 5 IMPACT-built websites that solve client challenges

By John Becker on April 7, 2021
4 min read

10 Google Analytics metrics you absolutely must track (updated)

By Magdalena Day on March 29, 2021
5 min read

29 Best Contact Us Page Examples To Inspire Yours [Updated for 2021]

By Melissa Smith on March 25, 2021
17 min read

Website Performance Mastery: A better redesign process for your business website

By John Becker on March 24, 2021
6 min read

How much does a website design or redesign cost in 2021?

By Vin Gaeta on March 23, 2021
9 min read