BY LUBOS VOLKOV – LEAD PRODUCT DESIGNER @ TOPTAL

Working with a great designer or design team can be an invaluable asset to any team. With clear communication channels, and free-flowing co-operation, the designer should give you everything you need to speed up the building process and limit questions and confusion as much as possible.

What can you, the UX developer, do to ensure that the product you have built is delivered in a timely manner without sacrificing the quality of the user interface and user experience?

My answer: Get your designers involved from day one, and keep them involved throughout the entire UI/UX development process. Make sure to establish clear communication lines and consistent messaging between developers and the designers.

Do You Have Everything You Need?

The worst thing that can happen during the implementation o any UI is lack of communication between the designer and the developer(unless they’re the same person). Some designers think their job is done once the PSD is sent over. But, that’s just wrong! You must create an always-on communication workflow that lasts beyond the delivery of the PSDs.

In many cases, it will take time before the designers see the actual UI/UX design implementation and, to their surprise, the build is completely different from the initial submission. (This happened to me more than once. I have sent over source files with complete descriptions and interaction prototypes, but when I finally saw the project, months later, it had different layout, different colors, and no interactions in place.)

Some designers might hate me for this, as this design workflow requires a lot of “extra” work on their side. However, creating and delivering full assets and information, in an organized way, is better for the project and the team as a whole.

Having everything a developer needs, in front of him, will speed up the process. A clean PSD is just not enough.

What do you need to get the job done effectively and efficiently?

These are the assets that a developer should expect from the designer to bring a UI/UX design to implementation:

• Resource file – Designer should place every element of the app in one file. This file should contain buttons, checkboxes, header styles, fonts, colors, etc. Basically, based on the information in this file, developer should be able to recreate any interface from scratch. It’s much easier for a developer to export any element from a single PSD, than to search multiple files for it.
• Assets – Make sure that developers get all the required assets, as source files should not be touched any more.
• Interaction prototypes – Days of “static screens” are long gone. Using smart interactions and animations, to smooth-out UX design workflow and implementation, is a common practice now. But, you can’t just say “this will slide in from the left ” to a developer. Designer should create actual prototype of that interaction. Prototype should include information like speed, velocity, etc., and the designer is expected to specify each of these values.
• Naming convention – Request a file naming structure to keep things organized. It’ll make it easier for both of you to navigate files. (No one likes to have things hidden in a background folder).
• HDPI Resources – We live in the “hard times”, with the huge density of the screens. Make sure that designer will deliver images in all of the required resolutions, so your application will look crispy everywhere. Note: use as much vectors as possible, it’s going to help you a lot (svg).

If you do find something else missing during the implementation, don’t be afraid, ping the designer and ask for it. Never skip, and never skimp! You are members of the same team, and your job is to deliver the best possible product. If a designer fails, you fail as well.

Work In-Progress

Utilize your designers during the UI/UX development process. Don’t keep them in the sidelines expecting them to just “push the pixels”. A designer sees possible innovations even before the implementation starts. To take the advantage of this, keep them in the loop. Provide them with access to see, and test, the work in progress. I’m well aware that no one likes to share unfinished projects. But, it is much easier to make changes in the middle of a build than at the end. Doing so may save you time and prevent unnecessary work. Once you give the designer a chance to test the project, ask him to compile a list of problems and solutions, and suggest improvements.

What to do when a developer has an idea that would change the look of an application? Discuss it with thedesigner, and never allow a developer to modify the design, without consulting the designer. This design workflow will assure that the build stays on track. A great designer has a reason for every element on the screen. Taking a single piece out, without understanding why it’s there, could ruin the user experience of the product.

UI/UX Design Project Management

Designers think that developers can bring a design to life in one day, or even in one hour. But, like great design, great development takes time and effort. Keep your anxious designer at bay by letting him see the progress of the build. Using external project management software, to make sure every revision is accounted for, is a great way to make sure you don’t miss important information discussed in an email conversation or a Skype session. And let’s be honest: sometimes changes and activities aren’t even communicated until they happen.

Whatever solution you use, be sure to choose one workflow process that the whole team will adopt and consistently use. On our team, I tried to push Basecamp because that’s what I was using, but our front-end developers thought it had limited features. They were already using other project management software to track bugs, progress, etc., such as JIRA, GitHub, and even Evernote. I understood that project tracking and management should be kept as simple as possible, so I migrated my UI design workflow to JIRA. I wanted make sure they understood my workflow and progress, but I did not want them to feel like design was another thing to manage.

Here are few suggestions for a project management tool:

• Basecamp – Tracks the progress of the design and development related tasks, and easily lets you export tasks. It also has a simple mobile client.
• JIRA – A fully customizable platform where you can easily set up custom boards for different areas. For example, organize boards to track activities such as back-end, front-end, design, etc. I think the mobile client is a bit weak, but it is a great solution for bigger teams and includes a bug tracking feature.
• Email – This is great for setting up a conversation or sending images. But please be carefull if you use email for feedback. Things can easily get lost.

You can also try Trello and other project management software, but the most widely used in our industry are Basecamp and JIRA. Again, the most important thing is to find a project management system that everyone can use on a consistent basis, otherwise it’s a moot point.

Lubos Volkov is an experienced designer who has worked remotely with numerous developers throughout his career. As the product designer at Toptal, Lubos interacts daily with team members from a variety of departments including engineering, community, and content. He is a talented designer whose communication skills contribute to his success. In this tutorial, Lubos shares his experiences and ways to optimize designer-developer UI and UX workflows that lead to quality products delivered on, or before, deadline.