Discover everything we launched at Webflow Conf 2024
Read post
Blog
Design teams can partner better with developers — here’s how

Design teams can partner better with developers — here’s how

Learn how GitHub fosters cross-functional collaboration between designers and developers to create visually appealing and user-friendly interfaces.

Design teams can partner better with developers — here’s how

Learn how GitHub fosters cross-functional collaboration between designers and developers to create visually appealing and user-friendly interfaces.

No items found.
Written by
Abby Sinnott
Abby Sinnott
Abby Sinnott
Abby Sinnott

Designers and developers both play a crucial role in developing any website or application, yet the two often struggle to speak the same language and work harmoniously.

A user-centered design approach that leads to an enhanced user experience (UX) is paramount to creating competitive advantage for businesses today. Not only is a well-crafted UX proven to improve customer satisfaction and loyalty, but it also drives business growth.

In fact, Forrester Research found that a frictionless UX design has the potential to increase customer conversion rates up to 400%.

Not surprisingly, the world’s best brands have embraced good design as a business priority. Organizations across industries are investing heavily to build internal design centers, design systems, and cross-functional teams that include product design, design, engineering, and brand and marketing.

Yet many multi-disciplinary teams often encounter various roadblocks when working together, such as communication misfires, messy handoffs, and ineffective collaboration, especially between designers and developers. 

With all of this in mind, we were excited to chat with GitHub’s Head of Design, Diana Mounter, for our Boundless webinar series

In this episode, she shares her firsthand experience of how design leaders can integrate workflows and collaborate better with their development partners, as well as her thoughts on how AI will impact the future of design.


Here’s some key takeaways. 

Create a shared language and mutual understanding with design systems

In simple terms, a design system is a platform that houses ever-evolving sets of reusable components, principles, and guidelines.Their purpose is to give designers and engineers everything they need to develop consistent product and web designs, which in turn, contributes to a better overall user experience.

“The purpose of design systems is to create a shared language that is understandable by designers and developers,” says Diana, who has led the GitHub design system since she joined the company in 2017. 

“They teach designers how to think in engineering and software development terms,” Diana adds. “and enable engineers to understand a little bit more about design and to get further with developing UI than they might otherwise.”

According to Diana, this “single source of truth” has been shown to improve teams’ productivity and reduce time to market. With design systems, teams can now bring new levels of collaboration, efficiency, and scalability to both product and web design—but only if team members have a shared ownership of the system.

“When building a design system, one of the most important things you need to do is make it a shared responsibility between design and engineering and have that alignment, investment, and collaboration right from the start,” Diana says. “You have to constantly keep working at this as the system evolves. But without shared ownership, the design system won’t be adopted as well and valued as much.”

Here’s some other key things to keep in mind:

  1. Use the 80/20 rule: Avoid thinking of your design system as a solution for every design challenge. Instead, it should be used for 80% of use cases — ideally UI problems that can be easily fixed with a reusable solution. This frees up time to focus on the 20% more complex challenges that cannot be solved with a design system alone.
  2. Don’t be the design system police: Diana says that as design systems scale, there’s often a temptation for designers to use it as a “hammer and mechanism for control, which can lead to design systems folks being called the design systems police.”  A system that contains too many rigid solutions won’t be usable at scale and can result in a low adoption rate with your cross-functional partners.
  3. Build a community around your design system: In addition to bridging the gap between designers and developers on a practical work level, your design system can also help foster a larger cross-functional community based on sharing, transparency, and collaboration. At GitHub, the team practices regular “show and tell” rituals such as design reviews and critiques where all design system team members from different disciplines are invited to share what they’re working on and provide feedback on each other’s work.
Bridging the design to development gap

Learn best practices for integrating the workflows between design and development in this free webinar.

Watch now
Bridging the design to development gap

Learn best practices for integrating the workflows between design and development in this free webinar.

Watch now
Watch now

Balance your design vision against technical constraints

While having a design system certainly helps improve workflows and collaboration between designers and developers, there will always be times when your design vision hits an engineering roadblock. So what’s the best way to balance innovation and great UX with technical constraints?

Here’s some tips from Diana:

  1. Fight for the user experience, but be willing to make prioritizations and trade-offs: Realize that a certain amount of constraint is an inevitable — and often healthy — part of the design process.
  2. Establish timelines and goals: Is this a smaller feature or product update that can be completed in a few months, or a “blue sky” new concept with a longer horizon? If the latter, Diana says it’s ideal for designers to be free of constraints in order to imagine all possibilities. 
  3. Learn about the tech stack your development partner is working with to better understand what’s possible when bringing your designs to life.

Anticipate how AI will impact the future of design

GitHub Copilot, developed by GitHub in collaboration with OpenAI, is an AI-powered code completion tool that helps developers write code faster with less work. With real-time coding suggestions, the popular tool allows developers to focus more on problem solving and collaboration and spend less time on mundane and repetitive tasks, like boilerplate code.

Diana says she imagines a not-too-far-away future where AI will also be used to enhance design systems. “With AI, it’s just going to get faster to build with design systems, such as creating new layouts and explorations and generating a lot of different designs very quickly. It’s going to enable you to do some of those easier and tedious tasks faster, allowing you to get onto the bigger problems and spend more time exploring those blue sky solutions.”

Blurring the line between development and design lines is beneficial 

Ultimately, designers and developers want the same thing: create something new and amazing that enhances people’s lives.

As Diana says, “By blurring the lines a little and learning more about each other’s worlds,” whether through design systems, knowledge sharing, or mutual respect, designers and developers can work harmoniously together to create meaningful, digital products that delight users. 

To hear more about how Diana and GitHub collaborate cross-functionally, and to hear insights from other business leaders in the world of tech, check out the full Boundless webinar episode.

Last Updated
January 19, 2024