In my career as a product designer so far, I've learnt that creating a strong relationship with the engineers in the team is one of the most important elements for success. I’ve really enjoyed working closely alongside, and learning from, the developers and engineers on the teams I’ve been a part of, and it’s great to be able to work directly with the people building what I’m designing. From conversations with other designers in the industry, I’ve realised it’s something that’s not always the case – with other companies, agencies and organisations often having a more separated handoff process, rather than the close collaboration we enjoy at Potato.
Many of my best ideas and designs have come about from collaborative discussions with engineers. Involving them in the design process and seeking out their input has often revealed constraints that led to simpler, more efficient solutions, or made me aware of functionality I hadn’t considered.
In this post I’ve gathered together some of my recommendations when creating digital products on cross-functional teams in order to improve the speed and quality of your output, generate better ideas, and produce more effective solutions.
1. Agree on a process and methods of communication
Work out how you want to communicate and collaborate early on in the project. This helps ensure you can stay on the same page throughout the project, and sets the expectation that information should be shared both ways continuously, rather than at specific handoff points.
This process could be a mix of methods such as:
- A regular schedule of syncs to align and check in on each other’s progress and collaboratively work on problems or ideas together.
- Agreeing to make use of commenting features on tools such as Figma for quick, asynchronous feedback
- A dedicated dev/design channel or group chat on your communication platform (e.g. slack) to make sharing frequent updates easier and allow for continuous communication.
Make sure you check in frequently for shared understanding. This can help to capture any confusion or misunderstandings that come up before they cause problems, such as small inconsistencies that neither party is quite sure if they are deliberate or unintentional. Having your modes of communication clear from the beginning means the path is laid for questions and collaboration. Tight feedback loops, and the ability to quickly test ideas and iterate, makes for better products.
2. Ask developers to talk you through their process and setup early on
Take the time early in the project and ask developers to walk you through their process; how the specifics of the project you are working on are set up, and if there are any particular constraints they’re working within. This can go a long way to help designers understand the technical scope of the project, leading to solutions that can be more effectively implemented, and ultimately produce a better result. By having an understanding of the technical constraints unique to the project from the beginning means you are better equipped to tackle them as a team.
3. Keep your design files tidy and understandable
While this is of course good general practice, and is also helpful for other designers or contributors on your team, it’s especially helpful for the developers reviewing your designs. The easier you can make it for them to find what they’re looking for, understand why you’ve designed things the way you have and interrogate your design artefacts, the more likely it is they’ll be able to accurately reproduce your designs in code.
As a result, less initial back-and-forth will be needed so you can spend time on making meaningful adjustments, rather than catching avoidable errors or misunderstandings after they’ve happened. Try to avoid assuming that design specifics will be obvious or self-explanatory, and clearly document the design intent to be achieved. If you’ve purposely nudged an element off-grid or increased the whitespace in a certain area, add a note so it doesn’t get confused as an accidental inconsistency.
4. Get technical input early and often and bring developers into the design journey
It’s invaluable to have engineers in the room at the earliest stages. When you’re having ‘design’ workshops, it’s about getting buy-in from everyone and making sure all viewpoints are captured. Engineers who are brought in at the early stages and are involved in the design journey feel more invested in helping to shape what is going to be built.
Getting technical input early in your process, and continuously throughout, can also uncover different ways of achieving something and influence your designs for the better. Often engineers will have an idea of an interaction or behaviour that you hadn’t considered as an option, or will see things in a different way that will challenge you to think further about your solutions and come up with a more robust rationale.
5. Consider collaborating on coded prototypes to improve decision making
Sometimes a layout or interaction prototype can be coded quicker by a developer than constructed in a complex design prototyping software - with the added benefit of being fully interactive. Working with engineers on coded prototypes can go a long way to helping inform your design process and decisions, speed up feedback loops, help generate new ideas, and uncover different possibilities. This might not always be practical or efficient, but it’s definitely a route worth exploring when it makes sense.
6. Clearly explain your design decisions and thinking
Engineering work is based on fixed rules and set instructions - your designs need to be able to be logically mapped to these if they're going to be implemented smoothly. This doesn’t mean that you should dumb-down your designs – far from it! In fact often the most creative development solutions come about from designs that challenge developers and push the boundaries of what’s possible. However, the more clearly you can describe the ‘why’ behind your designs, the easier it will be for developers to get inside your head, clearly understand the goal, and come up with the best technical solution to achieve your vision.
7. Think about your designs as a system
When creating components and layouts make sure you’re always considering how these new elements fit into the wider whole. Establishing clear rules and identifying how design tokens and components can be consistently re-used is not only good design practice, this is how the developers will approach coding your designs. By ensuring you’re already thinking how your designs will exist system-wide from the outset, the conversations with developers will be that much easier and you’ll both be on the same page.
8. Solve problems as one team
It's not only the designers’ job to make sure the design is good, just as it’s not only the engineers’ job to ensure the build is good. You're both working on the same problems, from different angles. Having a tight team dynamic pays dividends and translates into stronger products, and sometimes the most elegant design solutions have come from engineers’ comments. Talk to them about your ideas, not just the ‘finished’ designs.
9. Get involved! Learn some code
I'm a big believer in it being useful for designers to have some knowledge of development fundamentals and at least a basic level of understanding of code. A little can go a long way to help make design/dev collaboration easier, and in making sure that everyone's understood and both parties' needs are met. The practicalities of this can of course vary, and this is often more straightforward when working on web apps based on HTML / CSS / JavaScript, rather than products in other languages such as Java or Objective-C.
These suggestions won’t always apply to every team, situation or project, but they have helped me to forge stronger team relationships and create better designs and products as a result. I hope you can also find them useful, and that they inspire you to improve the design-development communication and collaboration process on your teams.