How to Communicate UX Design to Developers
Improve the collaboration between design and development with these simple tips.
Last week I had a great mentorship session that I though “this could be a post”. My mentee is the only Product Designer at the moment working in a young product team. She struggles to explain the UX flows and getting design approvals to developers.
It is nothing new of our understanding, that there’s always have been a miscommunication between designers and developers; However, not improving the situation can really hurt the deliverables and cause big delays in any project. Keeping the product team in an endless loop of poor shipping.
Collaboration between design and development should be smooth
Start improving the communication in your product team with the following tips:
Speak Developers language: Listen to the developers jargon and ask questions to understand the development process, how code is written and features launched.
Single source of truth: Organize the designs in a single place and always accessible for the whole team.
The earlier the better: Involve Developers in the design process from the beginning
Teach UI/UX to Developers: Let them know that design is not just about “making things look nice”.
Empathize with Developers: Treat developers feedback, just like you would treat user feedback.
Speak Developers Language
It can be difficult to explain User Experience (UX) to developers, especially if you don’t have a background in coding yourself. However, try to listen to the developers jargon and ask questions; this will help you to understand the development process, such as how the code is written, how features are implemented, and how the software is tested.
Developers often stay up to date with the latest trends and technologies. As a former developer, I’m constantly looking and testing new dev tools out there. So chatting about programming or technology in general with your dev colleagues, can help you gain a better understanding and will make communication much smoother.
Single source of truth
Something to have in mind is that developers have a very structured way of thinking. I'm talking here from my experience. When I was a developer with very low knowledge of UX, all I asked from designers was a place where I could find all the design components and a series of clear steps of how everything worked together. “Ok so after I clicked on this button, what happens next?…”.
So make sure that your UX flows and design handoffs are comprehensive and well-organized. This will guarantee that the development team has all of the necessary information to get started, and the team has the same understanding of the project.
One way to help developers understand design handoffs much better is to make annotations to explain behaviors, error states and others use cases that may arise. Here’s a video with a good demonstration:
There are great tools out there like Miro, Whimsical and Zeplin, to help bring clarity to teams when it comes to reviewing design flows or user journeys. It's incredible helpful to scale design systems and make sure every person gets the design narrative, even if they are not designers.
The earlier the better
When developers are involved in the design process early on, they can help to identify any potential flaws or incorrect assumptions with the design before it gets too far down the development process. This makes a big difference in speeding up or setting the right project timelines, because getting their feedback can help you to understand what is technically feasible to build and what is not possible.
It’s also beneficial for the team to foster a collaborative culture that ensures that everyone is on the same page when it comes to the project’s goals. It can also help to bridge the gap between other areas in terms of communication and understanding the desired outcomes of their work.
Teach UI/UX to Developers
In the same way you’ll need to understand some of the development jargon and constraints. Developers also need to know about the basic design concepts. Take this as an opportunity to prove the value your design work brings into a Product team.
Allow developers to understand the “why” behind design decisions, by inviting them to join design reviews and provide feedback. Also, invite them to observe user tests and see how their work is evaluated. This will give them a better a picture about the design process and that is not about “making things look nice”.
Keep in mind that this process requires a lot of patience and commitment from both sides. To bridge the understanding gap, provide proper education and time for training. Establish lines of communication, provide guidelines on how to handle design materials and how to collaborate with designers to generate mutual trust.
Empathize with Developers
Part of the key components of UX is about empathizing with the users. We try to understand their needs and mental models such as how they behave and interact with the product. The same principle can be applied in your team:
“Treat developers feedback, just like you would treat user feedback”.
Try to empathize with the needs of your teammates, understand their own goals and motivations, and create a collaborative working environment in which all team members feel comfortable and safe. It is very important to foster a sense of shared understanding between members and ensure that everyone is on the same page when it comes to making decisions.
Here are some questions to help you empathize with the development team and to help you figuring out what to improve:
How they organize/structure information?
How do they consume material? How do they learn?
What are the most common issues they face day to day?
What do they wish to know on first hand before start developing?
What’s the most difficult part for them when doing frontend?
Here’s is a great video from NNgroup that explains it.
Finally, make sure to stay flexible and understand that UX and Development teams have different goals, but they have to work together to accomplish the company goals. As long as the lines of communication stay open, the work should move along smoothly.
Remember to document all decisions and design choices, as this will be important later on to make sure the features fit the original specification and the goals of the project. Keeping a log of the UX process will also be helpful to refer back to when questions arise. Above all, keep in mind that successful products come from good team dynamics and solid collaboration.
A good tool to help you with this task is Storybook. Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.
🤯 The tools you suggest are super useful. I'm integrating Whimsical for early mockups and Storybook for components management with developers. Thanks!!