Design @ Copperleaf, Developer hand-off, Contrast Figma plugin
In this issue:
🔮 Design Team Profiles: Copperleaf.
🎙 UX Talks Podcast: Ashish Gurung - Head of Product @ Visualping.
✍️ UX Career Thoughts: How to hand off projects to developers?
🔖 UX Bookmarks: How to get a job anywhere without applying online.
🧰 UX Tools: Figma plugin “Contrast”.
🔮 Design Team Profiles
Copperleaf
Ian Muirhead, Director of Product Design @ Copperleaf Technologies shares a bunch of cool insights about the Design team and the company culture. He answers 21 questions (design process and tools, collaboration with others, career growth, learning opportunities, day-to-day of a designer, and many more). Check it out 👍
🎙 UX Talks Podcast
Ep. 16: Ashish Gurung - Head of Product @ Visualping
Very good conversation with my old friend and colleague. Ashish shares excellent tips on managing stakeholders, building trust and getting buy-in, and getting into product management (some of you have been thinking of moving from Desing to Product, haven’t you 😉). Also, interesting insight into product manager’s challenges which should help you be more empathetic for your close partners.
PS going to try publishing episodes in video format (in addition to audio). So much more effort to produce a video 😭. I'll let you know when this video is available.
✍️ UX Career Thoughts
How to hand off projects to developers?
Short answer: discuss it with them and align on the right way together.
Years ago, before I got into UX, I was designing websites, and the hand-off process was rather unreliable (in retrospect). I would create png mockups for each page and send them to the developer. It was creating lots of back and forth and unnecessary questions. This was the time when PSD -> HTML conversion was a very trendy service for freelancers =)
Then, there were exported assets folders, detailed UI specifications with annotations, different apps and plugins designed for dev hand-off (e.g. Zeplin, Invision, etc.), and so much more varied options. And with every next team I worked on (and with) the toolkit for the designer-developer hand-off was different.
Taking all my experiences into consideration (and my user-centred mindset, the developer is your user in this scenario), the way I prefer doing the hand-off is by having a conversation with the dev team at the beginning of the project to understand what is the most efficient and effective way for me to hand-off my designs to them.
I am trying to be as open as I can to the varied processes and tools that developers have and I try to tailor my hand-off process to my design artifacts “users”.
As a designer, my goal is to increase the chances of having the implemented product be as close as possible to the way I designed it.
With this goal in mind, the hand-off question becomes more about finding a way that prevents miscommunication between design and development and allows us all (the project/product team) to deliver the best possible experience for our users.
One of my biggest (sometimes, frustrating) learnings was that what you design barely ever gets coded in the same way, so there is always something that looks/behaves not the way you intended to. And I am not talking about technical constraints and trade-offs. To me, this is an indication that there is a disconnect in the communication between design and development.
Frankly, even with the most detailed hand-off, somehow it is impossible for the developers to make it the way it is designed =) I am still trying to understand why this is happening.
So, with every development team, I am trying to minimize this miscommunication by aligning with them on how they expect me to hand off assets to them, and what is the most effective way for them. To my delight, I haven’t seen any unreasonable expectations =)
To summarize, my recommendation is to decide on the hand-off process together, as a team. And don’t forget, that your goal is to reduce the back-and-forth, and the risk of them coding something too far from what you crafted. So, if your developer doesn’t care about spacing (or other details) while you do, make sure to include these kinds of details in your assets.
There is no perfect hand-off, it’s a spectrum between fast with minimal details and slow with full details. Also, it could happen that you include all the tiny (and important details) and the developer will miss them, as it is not as important from their point of view (happened to me too many times). So, the value of ongoing communication and reviews can’t be overstated. No hand-off can replace the collaboration with your developer.
While writing this, I realized that this topic is much more complex than I have many more thoughts to share than I initially anticipated. This should provide a rough summary of my thoughts and I will pin this topic to look into later for a more in-depth explanation.
Originally published on UX Career on December 29, 2020. Updated on December 11, 2021.
🔖 UX Bookmarks
After weeks of searching you've finally found it. The one. The day-to-day is perfect, the salary is a big step up, the hours are flexible, and the benefits are amazing (not to mention it's less than 10 minutes from your place!). You head over to LinkedIn looking for connections and….they're all 3rd degree with your mutual being that weird kid from high school you haven't spoken to in 8 years. Ugh…
Austin Belcak, a career coach, shares a ton of valuable insights about getting hired. Some of the phrases seem cheezy to me =), but lots of interesting practical advice that I find useful. Have a look (FYI, it’s quite long) - “How to Get a Job Anywhere Without Applying Online”:
🧰 UX Tools
Figma plugin “Contrast”
Very simple and effective tool to check your designs for colour-contrast violations. You do prioritize accessibility and universal design, don’t you? =) Kirill recommends 👍
