Working hand in hand with developers to build the right design
Here are some ways to improve your handoff process.
It is essential to prioritize healthy and efficient collaboration between designers and developers throughout the entire design process. Whether you’re at a large corporation or a small startup, designers should look for opportunities to streamline the development hand-off process. At the end of the day, it’s up to the development team to bring your designs to life.
Here at SnapPea Design, we value our relationships with clients and constantly look for ways to improve our workflow. One of our clients, Rapid Novor, approached us to assist with the improvement of their existing platform while considering time and technical constraints. Here are some things we’ve learned during our time with Rapid Novor that we would like to share with you. Let’s get started!
Discover technical constraints early on
There are certain constraints that only the development team will know and understand. So it’s up to you to ask the right questions and present your ideas in a way that can spark the right conversations. Ideally, you want to get these over with as early as possible, so your team can design with the right constraints in mind. How familiar is the development team with front-end code? What component library are they using? Are there any limitations with the database? The last thing you want to hear during a design walkthrough session is: “This page will not be feasible with our resources and timeline”. Ask well and ask early to save yourself time and effort in the long run.
Keep devs in the loop with design updates
Not only do you want your designs to align with the company’s business goals, but also with those of the development team. Keep them in the loop with short and frequent updates. This allows you to catch any technical constraints you might’ve missed in the beginning and it gives developers an opportunity to know how the design is progressing. Strive to break down the walls between designers and developers.
Building trust along the way
Building trust as a team is not an easy task. With a difficult problem space and looming deadlines, it can be the last thing on your mind. But fear not, there are some simple ways to start building trust with your developers that will have a long lasting impact on your team. Building trust starts with listening. This means asking a lot of questions, since developers will know a lot more about their product. Listening and asking questions shows the client and developers that you’re engaged. After presenting your ideas and designs, always ask for feedback. Doing this often and early creates a healthy environment for collaboration and trust.
Check in on devs during development stage
Design doesn’t stop after the hand-off stage. During this stage, the development team may find missing screens or empty states that need to be designed for. As the designer, do your best to get these defined and delivered ASAP and support them along the way.
Be specific in design details and interactions
In addition to screens and assets, your design file should include notes and interactions for developers to really understand the purpose of the design. There may be details and interactions that are obvious to you, but may not be known to a viewer. Be specific in what you want to convey to avoid the mistake of developing the wrong interaction. Here is an example of this with Rapid Novor:
Utilize Figma to its full potential
Whether you’re using Figma, Mockplus Cloud, or Zeplin to hand off your designs, it’s critical to get the development team in the loop of things. This could mean setting up a short meeting where you run through the basics of using Figma, how to take advantage of redlining or the Inspect tab or simply writing up a document on where to find assets in Zeplin. This will minimize interpretation errors and optimize their workflow.
Prototyping is more than just a great way to showcase your work on your portfolio - it is also an additional tool for describing your vision to developers. Providing a prototype can really help them understand your vision and how to properly implement it. Nowadays, the capabilities of prototyping tools are amazing and can really help you to get your message across. Some include: Figma, InVision, and Marvel. Here is an example of a prototype we created for Rapid Novor:
As a designer, you’ll be working closely with a variety of different teams and backgrounds. You won’t be designing in a silo. Establishing a healthy and effective relationship with developers can really level up your design process. Good luck!