Digital Marketing Insights

A Design Workflow Tutorial for Developers: Deliver Better UI/UX On Time

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.

Projects where the designer just submits the design files, and the developer just implements them, are the projects that just fail.

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:

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:

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.

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?

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.