When your design files are not just your own
How to prepare for a good handover when working in a team
Is my design good? What if I forgot something, can people tell that I’m a junior? Did I account for all the screens, all the states, are my explanations clear enough? Those were just a few of the questions that were going through my mind day and night, in preparation for my first handover.
That’s because when you hear the term hand-off, you can actually imagine two parties shaking hands, make an exchange and then never see each other again (unless something terrible happens). Everything seems so set in stone forever. When you say you need to handoff your design to developers or to other members of your team, you can easily assume you are done and it’s now another person’s responsibility to bring everything to life. The ball is in their court, your work there is done, forgetting that our work is actually done when users start using our product (and are happy with it, I would like to add).
In an attempt to put those overthinking thoughts to sleep, I’ve quickly wrote down my thoughts on a sticky note, each time I realized what I was doing something inefficient, that was wasting my time, or something that could have helped me. What you read below is this sticky note, just with a bit more context.
Use real content
And I’m talking here of course about the high-fidelity designs. Nothing is worse than working for hours to adjust the perfect distancing, perfect layout and then realize the text that needs to be included in the space you saved for it is 2 pixels longer, creating an unreadable, scrambled design (yes, happened to me when I finally included some icons I was saving the space for). But let’s say this is the good case, in which you are in control.
Things get trickier when you don’t have all the assets from the project (imagery, text, etc), or when those keep changing. While the design might look good with a picture taken from Unsplash, adding real content might change the entire perception completely. I know the temptation is high to add a placeholder and move on, but try to avoid it as much as possible. Even if things are not yet completely defined, try to align with the team as much as possible and understand what is expected, obtain a draft, or something as close as possible to the final assets you are going to include. It will save you hours of work and adjusting.
Set the tone
When you start a collaboration, don’t be afraid to set expectations, as well as ask about them. And more importantly, be approachable. Let your team know you are there to help or clarify if anything, just reach out proactively and tell them you are there. Even if you think it’s implied, some reassurance can go a long way, it doesn’t take you more than 2 minutes, but it will showcase team spirit and respect for other people’s work and ultimately for the product being built.
Don’t worry, nobody will spam you because of this, but it will offer them trust and comfort in taking over your design and ask if they get stuck somewhere, instead of wasting valuable time wondering if they should approach you or not. The only thing that’s implied here is to actually show up and help if you promise that :).
If you are like me, you might end up spending hours exploring different aspects of your designs while working on the high-fidelity UI. You might try different Typefaces, different colors, just to see how things look, after your design is already almost complete. While this is normal and encouraged, just make sure that when you explore these, you don’t create a mess. It might be more than intuitive, but I often surprise myself how much I forget about components or creating styles when I go into the design flow.
To be more precise, if you decide a color looks better, don’t manually update it with the color picker on a couple of elements, update your main parent component. Also, try to make sure you have consistency across the screens. Anything else that should change if you did a small adjustment somewhere? Sounds straight out of “Mistakes of rookies” , I know, but you’ll be surprised how often we all do this, especially when we are tired or under time pressure, so a small reminder every now and then is good.
Keeping your file organized not only speeds things up when doing changes, but also helps other navigate your designs. Says the girl who spent hours assigning styles to different elements on 50+ screens, because she got caught up with building a realistic prototype before actually making sure all elements have some styles assigned. We design and we learn.
Make sure you have a design system in place, or a style guide, depending on complexity of the project, and make sure you keep it updated and clean. Your team will be thankful.
If you have any other tips on how to collaborate better and handoff designs, happy to read them in the comments. And let’s spare ourselves a couple of nights of worrying and impostor syndrome. For now, just remember this:
Stop working in isolation, sit together, communicate more, solve problems together, build on each other’s strengths and offer feedback, and leverage a good structure to drastically reduce the time (and the nerves) spent to build a product.