6 Tips for a Smooth Hand-off from Designer to Developer

by on 01/13/15 at 8:09 am

On any project, the team is looking for a slam dunk. But this won’t happen if each team member isn’t aware of their role. The designer’s job is to design a user interface and communicate it to developers. But this transition can be painful when developers don’t understand our expectations. Here are six tips to make your next hand-off as smooth as possible.

1. Share User Stories with Developers

User stories are basic user goals distilled into distinct, terse sentences. They are often written like this: “As a user I want to … [user goal]”. Each user goal should correspond to each UI element. Sharing user stories with them will help them focus on the user. When they think more like a user, they’ll care more about meeting their needs.

handoff-1

2. Stay Organized From Day One

Organize and design your UI so that anyone can make sense of it. A popular programming quote goes like this: “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live”.

Same goes for designing wireframes and mockups. Remember that a developer will have to interpret your designs. Numbering and labeling every screen and element will help developers understand what they’re coding.

handoff-2

3. Create an Interactive Mockup

Use a prototyping tool that allows you to upload mockups and add interactivity. This helps everyone on the project get a better feel for the end product. When developers have a prototype to play with, they can better meet your expectations.

handoff-3

This quote from Confucius applies well to hands-on learning. “I hear and I forget. I see and I remember. I do and I understand.” Using screen-capture software, you can also create a video of you running through the entire app to show every facet of the functionality.

4. Create a Project Encyclopedia

Define project terminology early and document it in a project “encyclopedia”. If everyone is speaking the same language when discussing the project, nothing will be lost in translation. If you notice someone substituting or replacing terminology, correct it early on.

handoff-4

Your project encyclopedia can go as in-depth as you want. It’s often helpful to define what elements of the app are static, and which are dynamic. If it’s dynamic, where does the data come from? Is it supplied by the user, pulled from a database, or stored in the app itself?

5. Daily Standups with Developer

Go over action items daily with the developers so they have a communication mentality. If you can do this in person, great – if not, try to do a video chat. You can communicate more information face-to-face than over email. People feel more accountable during interpersonal interaction.

handoff-5

6. Track Bugs and Issues

Use a bug-tracking system to document issues that arise during development. Don’t assume that someone else will catch these errors. Remember you are in charge of the complete user experience. Nothing is more frustrating to users than an element that doesn’t function as intended. Once all bugs are gone, the project falls back into your hands. You’re ready to begin testing your user interface with real users.

handoff-6Final Thoughts

There is often a breakdown in communication among teams. Following these tips will help you make sure each member is aware of the game plan. Make life easier for your developers and they’ll make life easier for you.


UX DESIGN TOOLS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Tom Brinton is a UI Architect at CitrusBits, a mobile app development company in Los Angeles. He has also done work for several startups including Flip and Roach. He enjoys music, reading, hiking, and a good steak burrito.

3 Responses to “6 Tips for a Smooth Hand-off from Designer to Developer”

  1. Monte Gerald

    Jan 13th, 2015

    Wow Tom… very well put. It really summarizes the hand-off process well. Developers think so much differently than us UX guys. I can see this really helping them look through my eyes. It will take some extra time on my part but I think it will do wonders for efficiency. Thanks man!

  2. Ioannis Karlis

    Jan 20th, 2015

    I’d say, collocation is very important as well so that Devs can always query without massive overheads.
    Ideally, dev and UX/UI should work in tandem. Interesting summarizing article!

  3. Mitchell G

    Apr 13th, 2015

    As a UX designer I love it when devs ask questions, ask for assets, and take the time to understand what’s being done. Of course, this is a two way street – one which I think standups address, but also communication in office, over Slack, and through e-mail throughout the day can help with (obviously don’t nag, but make sure you’re both clear on what’s happening).

    As Monte Gerald mentioned above, UX designers and devs think very differently. I think that’s by definition, so we need to use our communication skills and empathy to understand how to frame challenges effectively so devs can focus on what they do best: creating some great code.

Leave a Comment