fbpx

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.

Prototype

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:

Conclusion

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!

Share the Post:

Related Posts

Course 5: Conversion Optimization

Oh, you thought you were done? You’re not done. But now we get to the fun stuff.  Set up tracking analytics and focus on driving traffic and conversion.  There’s nothing better than waking up to a full page of orders from FREE traffic.  

“But I’m launching another product!” or “My market is changing.” We have a course for that too, but you already have it.  Jump back to course 1 and let’s go again! Chances are we’ve updated again too! 

Want to jump right in to conversion optimization?  We can help! Just get in touch! 

Course 4: PRDs and POCs

Creating a PRD / POC is a critical step in development that a lot of people skip. Trust me, we’ve seen how bad that can go later.  The last thing you want is to solve a problem, but price yourself out of the only market that cares. These documents build alignment in your team, help to resolve development priority, and ensure you can profit from your venture. 

“Wait, my numbers don’t quite work!!” – Fear not, at this point there’s always a solution.  You can go back to course 1 and find a new story to sell the product you have, or go back to course 3 and see is a different solution is just as interesting to your market. 

If everything is lined up, the only thing left is to sell. Grab course 5 and build those pages that convert! Want to jump in to this course?  Drop us a line and we’ll see if we can help. 

Course 3: Landing Pages

Build and test landing pages to prove the solution you’re building is exactly what your customers are looking for! Use this process to define your product to match the market need and ensure you can make money as you scale your solution. 

Didn’t quite get the results you were expecting? No problem.  Take what you learned in course 2 to find a new angle, or go back to course 1 and refine your problem.  Sometimes the problem resonates, but people don’t want a solution, they just want to complain. 

Want to Skip directly to this course?  Drop us a line and we’ll see what we can do!

Course 2: Competitive Analysis

Through this course you find out what your competition is doing, and how you can shine above the noise! Competition isn’t always just another product – it can be a user behaviour or just being lazy.  

Find and test to find your proven differentiation from your competitors. 

Want to jump into this course?  Drop us a line.

Course 1: Next Steps

Course 1 is all about validation. We have some KPIs that give you the confidence you need to move forward.  If you don’t hit them on the first try, try again.  Some people want to jump ahead, but it will bite you later.  Keep on refining your solution at this stage to save you hundreds of thousands developing a solution that may never scale!