DEV Community

Cover image for How to Work Well Together: Designer and Developer Collaboration
RUBICON
RUBICON

Posted on

How to Work Well Together: Designer and Developer Collaboration

A healthy designer-developer collaboration is one of the key ingredients in a software development recipe. A UX/UI designer’s job is to create the visual look and feel concept of the product and for the developer to bring the design to life. Even though the two of them come from rather different domains, they both love to analyze and creatively solve problems. When this cross-functional duo collaborates effectively, they can achieve the impossible and build awesome products in the sphere of software development!

Software Project Roles

A Software Developer’s responsibility is to write and implement efficient code needed for the end product. Developers write and test the code, which is later used to assemble the software application.

A UX/UI Designer creates a user experience by focusing on both the UX and UI of the product. UX is how something works and how a person interacts with it.

UI (User Interface) focuses on the look and layout of the product. The role of the designer is to create a guided path for the person making the product both user-friendly and visually appealing.

When the two co-create, the developer takes care of the core structure of the product while the designer creates the look and feel. It sounds simple, but in many instances, the team encounters challenges when trying to set up an effective workflow.

Alt Text

At RUBICON, we've experienced many challenges when developing our effective workflow. Luckily, we're here to openly share our challenges and offer some firsthand tips on how to build effective collaboration.

Designer-Developer Collaboration Challenges

1. Lack of domain knowledge
Designers spend their workday coming up with ideas and playing around with pixels; while, developers solve problems, explore new technology and write lines of code. Often, there is a bridge between the two domains as one lacks tech knowledge and the other doesn't have much knowledge about design and UX. But what about when the designer and developer need to cross paths?

2. Communication
In most software development teams, miscommunication is the most frequent challenge. For example, many teams experience poor communication during the design to development phase. A designer will create a design handoff and pass it onto the developer to implement it into the product. In the end, once the developer is finished implementing the design, it sometimes may not look the exact same way the designer imagined it to be. This can be frustrating for the entire team.

When situations like this happen, the workflow gets slower, products do not reach their intended or full potential, sprint goals are not met and even sprints end up failing - all of this can happen due to poor communication.

Alt Text

3. Framework restrictions
Sometimes the designer will create a fancy, cool design, but unfortunately, they may not be aware of some aspects which simply can’t be done due to framework limitations. One thing that designers should be aware of is that every framework, every OS and every piece of hardware has a software developer behind it. That being said, the possibilities of what a certain framework is capable of hardly relies on what framework the developer decides to implement and provide to the designer. The following reasons may cause restrictions on what a framework can do:

  • Security issues
  • Performance issues
  • Insufficient time to plan a feature

If we take Android OS for an example, before the API21 (framework version), users weren't able to change the status bar's background colour. It is believed that the reason behind this was due to a performance issue as the hardware at that point was considerably slow. In the API21 version, developers have been granted the ability to change the background colour of the status bar but are still prevented from doing the same for Pre-API21 devices.

4. UI design often suffers
When designers encounter technical barriers and deadlines, it becomes difficult for them to bring their ideas to life, and often they have to compromise with developers. Of course, this has to do with the project and the entire team itself, but as far as the design-development process is concerned, it is not unusual that developers have an aversion to complex UI solutions and custom components. Most developers aren’t as passionate about UX and design as designers. Therefore, an initial fancy idea for a design will oftentimes need to become simplified to meet product needs.

5. Differences in time estimation
Designing something stunning truly does take time and many elements need to be considered: user experience, layout, user interface, aesthetics and more. Designers will take their time creating the design but sometimes they will underestimate how long it will take the developer to implement their design into the final product. As a result, it will take longer than intended for the design to be engineered and the team may miss a deadline.

On the other hand, a small change may not be that small.

The team might even overlook the amount of time it takes a developer to implement a feature or a designer to make a change in design. When something needs to be changed, it might take longer than expected. A small change isn’t just pasting a code, or changing the colour of a feature, there are more steps required to make some of these changes. Communication is key when making changes in the product or design so the timeline of the development project doesn’t suffer.

6. Individual goals
When it comes to creating a successful end product, the two domains have different goals. For a designer, the main goal is to create a visually appealing product and a smooth user experience. While developers think about the technical aspects and using the latest technologies to make a fast and secure product.

Tips for A Successful Designer-Developer Collaboration

You’re better off together. Check out some tips on how any organization can create a harmonious work setting between developers and designers:

Alt Text

1. Learn and Educate

Don't be afraid to blur the lines between the two fields.

If you’re a designer, spend some time learning a programming language or understanding the basic principles behind a framework such as iOS, Android, React or Vue. If you’re a programmer, become familiar with basic design principles and explore the tools the designer is using. Be open to helping each other learn about your expertise and sharing information. Growing familiar with both technology and design principles can really benefit workflow.

2. User is #1
Place the user you’re building the product for on a pedestal. Remember, the product is being built for the user. A better user experience should be the primary goal for both developers and designers and that’s what each team member should focus on when building the product. Questions such as “How will the user use this product?” should be asked. All development and design decisions should revolve around the user.

3. Use the right tools
Using the right tools can take your team a long way and make everyone’s life a whole lot easier. These tools can help you maintain seamless communication and a product workflow making everything more productive. Using tools such as Slack for instant messaging, Jira or Azure for tracking tickets and keeping organised, and Figma for prototyping design are recommended to help your team.

P.S
Blank paper and whiteboards may not be as exciting but they certainly do help people communicate their ideas clearly and visually.

4. Communicate, communicate, and communicate
The two roles should communicate effectively from the start of the project to the finish. Clearly explaining ideas, handing over easy-to-understand instructions and always being on the same page ensures effective communication. Attending daily scrum meetings, sprint plannings, and sprint retrospective meetings keeps the entire team in the loop and gives everyone the opportunity for a time and place to communicate their thoughts.

Creating a work environment for your team where everyone is able to freely express their opinions and ideas allows for a place where new ideas can come to life and the best possible products can be made. This is especially true for teams that use Agile where constant changes are implemented and feedback is always welcome in order to build the best product possible. Behind open-communication lies fairness, trust and respect where all ideas are equally valued and open for discussion. Developers and designers need to build trust and feel comfortable when working with one another. This is the most important factor for healthy collaboration.

Designer + Developer = The Ultimate Product

Alt Text

Your team can add these helpful tips to your software development recipe in order to establish a successful designer-developer team and build a great product for your customer. Communicate clearly, be willing to compromise, value your team members and put yourself in the other person's shoes.

It all comes down to these key messages for a healthy collaboration, you’ll not only gain a steady workflow but you’ll also build better products for your clients.


Original blog post: How to Work Well Together: Designer and Developer Collaboration

Top comments (0)