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 of 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. To their surprise, the build is often 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 a 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.
If a developer has everything that they need in front of them, it 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 – The 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, the 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 anymore.
- 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. The designer should create the actual prototype of that interaction. The 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 “hard times”, with the huge density of the screens. Make sure that the designer will deliver images in all of the required resolutions, so your application will look crispy everywhere. Note: use as many 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 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 the designer, 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 a 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 careful 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, as otherwise it’s a moot point.
UX Design And Development Come Together
The designer and the developer are a powerful combination. Be sure to brainstorm UI and UX together as often as possible. Developers should be willing to help a designer conceive ideas, while a designer should have at least a basic knowledge of the technology that is being used.
Figure out the design workflow together. Don’t just blindly implement what your designers create. Be proactive, and create something that looks beautiful and has a great user experience, by taking advantage of your two different perspectives. Designers think outside of the box and see crazy animations, ideas, pixels, and buttons, while developers see the technology, speed bumps, and limits.
In my experience, every designer is crazy about pixels and interesting concepts. But sometimes, a designer gets to a point when they have an idea, but the developer pushes back and says, “This isn’t going to work well once it’s implemented. There will be performance consumption issues”. Recently, I was looking to implement a modal window with a blurred background, but this blur caused heavy loading times. To solve this problem, the developer suggested using a regular, full color overlay, which loads faster and retains image quality. Designers, pay attention: Don’t compromise the user experience for the design.
Feedback Loop
Feedback from the designer is crucial, and it has to happen as often as possible. It’s probably the most time (and energy) consuming thing that you will do. But, you need to adopt it to be able to deliver perfect results. Here are couple of UX and UI design worklow tips on how to make your feedback perfect.
- Be visual – Feedback needs to be as specific as possible. The best way to make it accurate is to take a simple screenshot and highlight a problem you want to fix. It would be even better if you had a pictures of a current implementation vs how it is supposed to look. Visual communication will eliminate 50% of the questions.
- Be descriptive – Feedback should be accurate. You can’t just say “move this button up”. The designer must specify how many pixels a button should move, what padding should be used etc. Always include an explanation of the problem, and the appropriate solution for it. It’s going to take a lot of time, but it’s worth it.
- Be patient – Keep in mind that the designer and the developers do not share the same focus. If developers don’t fully understand a designer’s idea, it can lead to confusion and bad decisions. In every case, both sides need to be patient and willing to help the other team members. It’s really tough sometimes, but it is a soft skill that every designer and developer should learn.
It’s pretty obvious that these things needs to be combined together to make them into a suitable design workflow. But, what tool can actually help you deliver the feedback?
- Email – I’m not afraid to say that this is still the most common platform to deliver the feedback. It is totally fine to use it, if you will follow couple of simple rules.
- First, use single email thread for your feedback. Don’t put every individual tweak to a new email with a different subject.
- Second, create the list of fixes. Try to sit down and think about every tweak or fix you noticed.
- And lastly, don’t send huge list at once. Try to break it down to smaller individual lists and go part by part.
- Skype (Hangouts) – Voice is really powerful tool for the feedback. You can immediately ask and answer questions. But, make sure to take notes and sent over the follow up message (email) after the call.
- Collaboration tools – To be honest, I’m not a big fan of collaboration tools. But, they have a big benefit. They help you to keep feedback in place. Asking and answering questions is fast, and it stays there forever.
Here are some of the great tools:
Feedback annotation:
Collaboration tools:
Conclusion
Establish a system and UI/UX design workflow that keeps the communication lines open throughout the design and development process. This will allow you to implement great ideas, forecast potential problems, and prioritize important issues.
The developer and the designer can create great things together as long as they are willing to work as a team. Learn from each other and design tutorials like this one!
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.