How To Improve Designer-Developer Collaboration as an External UX Team

At UX Studio, while we develop our products, uxfol.io and Copyfolio, we are mainly focused on agency work, meaning that we cooperate with several clients as external teams. In this article, we'll give some examples of how to increase the success of product development by improving the collaboration between the UX team and the developers. You'll learn about the major challenges we often face and some suggestions on how to tackle them. This post was written from the perspective of designers, mainly intended for external teams and entrepreneurs. However, these tips may come in handy for developers and product managers as well.

In this post, we cover:

1. The importance of good designer-developer collaboration
2. Five challenges and solutions
3. The relevance of the whole teamwork, not just the developers and designers

The importance of good designer-developer collaboration

Whether we are developers or designers, our responsibility is to produce products that serve the needs of both the users and the business. If we do it right, we help companies grow, while we also deliver value for the people who use the product by solving their problems and making their lives easier.

What are the costs of insufficient collaboration?

→ When designs are technically infeasible, and they don’t get implemented, valuable time is wasted.

→ To find technically feasible design solutions, extra efforts are required from developers and other team members.

→ It can badly affect the estimation of development time needed, and replanning may be necessary.

→ When certain use cases and edge cases are neglected, it will lead to user frustration.

→ When design inconsistencies happen they can start accumulating over time, which also negatively affects user experience.

We are a team, and as such, we share a common goal. The lack of a mutual vision and an organized workflow will result in wasted time, money, extra work, becoming demotivated and frustrated, and overall endangering project success.

Five challenges and possible solutions

Every team is different, so there is no one-size-fits-all collaboration method. But beyond being flexible and accessible, there are some touchpoints with the developers that usually need closer attention from the beginning. The suggestions we give here were inspired by our recurring challenges, in which we failed, learned, and many times succeeded 😊

Challenge #1 - Linear, one-way collaboration

When the entire design process ends before development starts, it usually causes heavy setbacks. Even if they employ an agile methodology inside the dev team, clients who haven't hired external design teams before tend to follow a waterfall approach with UX teams. This can happen due to various reasons:

• Lack of experience with integrating design teams into their processes
• Misconceptions about UX design
• Unclear responsibilities within the organization
• Complex, chaotic processes.

What to do about this?

As soon as you meet the stakeholders on the project (preferably in a pre-kickoff call or on the kick-off meeting), explain the design process you follow and your suggestions for setting up a developer-designer workflow. You should have at least one lead developer at the kick-off.

Present your design process, highlight the importance of collaboration, and at the end of your kick-off meeting, discuss and set up the time and channels for weekly or daily meetings, on-the-fly communication, project management platform to use with the devs and other stakeholders.

If after this, the cooperation doesn't really take off, just stick to delivering your work in smaller increments, involve devs from time to time, and get feedback whenever a part of the design is done. The client's team will surely notice the benefits of these methods. They deliver insights very fast, and they require involvement for everyone and may start developing your designs sooner than originally planned.

If you kickstart a new product or the problem is very complex, and you have the capacity, promote the 5 day design sprint process. This requires all stakeholders' involvement, but for a shorter period of time, so even if the collaboration gets looser later, you already have valuable insights to start with. When this is achieved, the next step is to get a seat at the table when planning the MVP or next features.

Challenge #2 - Insufficient collaboration during the planning stage

The output of planning should be a timeline that includes the upcoming tasks as well as new features, scheduled in a synchronized way together with the developers. Designers and devs will focus on the same feature at different points in time, as only finished designs should enter the development phase. Designers always have to be ahead of developers, but there can be times when you need to just give the devs something. This can be very stressful and hard to do in a meaningful way, so having clear and well-defined processes is crucial.

There can also be times when designs get delivered much faster, and a decent amount of work piles up for the devs, so it may be the time for you to make some UX design improvements and have a look at the backlog, ask devs if something needs correction in the designs instead of jumping into new features.

Business analysts and other actors may also be needed in larger projects, so their work has to align with the work designers and the devs too.

What to do about this?

• Get yourself invited to project planning, or arrange it yourself (if it's not happening in an organized way) where you discuss the MVP features, user stories and define milestones.

• Share your current processes and modify existing steps or add new ones. Schedule discussions with the whole team from time to time to catch the weakest parts of the processes and refine your workflow by solving these problems.

• Agree with the stakeholders on a clear definition of done and definition of ready.
• There are many possible design processes for inspiration; the one we find the most useful is an iterative usage of the double diamond model. Add or modify steps, customize it until it describes the workflow most suitable for your team.
• Schedule weekly or daily meetings for quick status check-ins.
• Set up or join a collaboration platform (e.g., Jira, Basecamp, Slack, etc) to organize tickets or to-dos, maintain it well, keep it up to date and tidy.
• Invite developers to the chosen design tool if possible so they can leave comments on the designs (e.g., in Figma).
• Review new designs and their implementation with the devs at milestones.
• Explain the design system, discuss the method by building it together.
• Create personas, user stories, and user journeys and keep them transparent and visible to the whole team.
• Try a design cycle approach, and learn about the best agile adaptation for your team. It requires constant experimentation, refinement, and discovery, but it’s absolutely worth the time.

If the developers are “kept separately in their ivory tower”, always point out if there are doubts with certain design decisions due to the lack of developer availability, technical validation, and how it impacts the product’s success.

Challenge #3 - The misconceptions about UX design work

Some developers are not interested in the design work and consider it an extra burden they need to handle. This can root from the lack of understanding regarding our goals and way of thinking as designers. It is also possible that they have had a bad experience with creative professionals in the past.

Mass-manufacturing pretty screens and cute animations for developers is not what a UX designer's job is about. Making an interface aesthetically pleasing is just the tip of the iceberg. A UX designer's job is to create well-functioning, easy to use, feasible products that achieve the business goals and solve the right problem for the users. Therefore the design we create as designers is not a “nice to have” beautifying retouch maneuver but a core part of a good product development process.

These misconceptions can create returning hindrances, which can grow into great obstacles later.

What to do about this?

• Involve the devs in parts of the creative process, sketching, wireframing. Have brainstorming sessions together as they often bring valuable insights and ideas from a different perspective.
• Explain the mental process and reasons behind decisions when presenting your designs, share the UI patterns and best-practices you considered in the design process.
• Invite devs for usability tests or at least share the insights with them. This can be a very insightful, interesting experience for them if they’re not familiar with the user-centered approach.
• If the dev team is large, keep close collaboration with their representatives, such as leads or architects.
• If endeavors for close collaboration fail, try to come up with suitable solutions to keep them up to date with the latest designs at least. Make screen recordings, frequent design exports, give view access to the design files.

The best way to reduce biases and eliminate misconceptions is to demonstrate the UX Designer's professionality and the validity of our work while remaining friendly, open, and honest with each other. Developers and designers tend to have different backgrounds, mindsets, and approaches to work, but this doesn’t mean we can’t understand each other and make a great team. On the contrary! The more diverse our thinking, the more variety of ideas we can come up with, which ultimately leads to better solutions.

Challenge #4 - Wrong implementation due to misunderstood design or difficult handover

If design discussions don’t happen with the dev team throughout the design process, more explanations will be needed later to make sure everything is clear about the design decisions and how the developers should be working on the interface. Figma comments and info boxes can pile up and become daunting for the developers. Writing a hundred-page long specification in a pdf with embedded screenshots is not ideal either.

If the developers start interacting with the design tool and understand the structure of the design system, it can make the whole process easier for them, and it quickly becomes a habit, a core part of their workflow. If you can’t use a collaborative design tool like Figma, Zeplin is your answer.

What to do about this?

• Define exactly what deliverables are needed from the design side. For example, if the dev team is already using a UI kit and pre-defined components, low-fi prototypes might be enough in most cases.
• Set up a tool (or combinations of them) that allows devs to check the designs often and explain the software's basic usage.
• Decide on the logic, naming conventions, design system building methods early on. Guide the devs toward component-based development. The atomic design method proposed by Brad Frost is a good starting point.
• Discuss UI framework constraints upfront, chosen coding libraries, and systems (e.g., React libraries for building graphs faster, Material design system, etc.)
• Provide short and straightforward documentation for the design system, including design principles, consistency rules, tone of voice, and other guidelines for future use. You can make this inside your chosen design tool (e.g., Figma, Sketch, etc.) or in a separate tool, like Frontify, or Zeroheight.
• Keep visual hygiene (remove hidden layers), keep naming consistencies, have all elements in the design system as components with the right styles, remove unused styles.
• Demo the designs regularly: walk them through the new flows and components.
• Consider a coded design system for the future. You can use Storybook or create your own manually.
• Be prompt about notifying devs about changes and documenting design iterations so that they can stay on track with the latest design.

One simple and efficient method for documenting iterations is to have screenshots of the updated designs with arrows pointing to explanations on what has changed, categorized by user flow or feature and the date of iteration.

This can be done in various ways, but we prefer to use Miro, an online, easy-to-use, collaborative tool. It's best if the test report and related design iteration are grouped and organized by date, so it helps track the changes in the designs and clarifies the connection between the test insights and iteration decisions.

Challenge #5 - Rushing to finish, new requirements appear at the end

Change in the scope or extra requirements may inevitably occur in larger projects, and they often do so at the last minute, so the latest designs may not get to be clarified properly, or we need to jump back and forth between features.

What to do about this?

• To avoid the crazy rush at the end of a feature or a project, try to work in smaller increments. When unplanned, new modification requirements or ideas arise, remind the client about the time restrictions and reprioritize the tasks. Be cautious about taking on something extra that will hardly fit the remaining time.
• Naturally, some businesses would often like if extra tasks could fit within the existing scope without extra time added, so it's important to explain to the stakeholders that if a new requirement comes up, it will affect the schedule. Unexpected and urgent to-dos also take time to finish, just like the planned ones, and we can't create extra time, nor would we like to overwork and burn ourselves out because of this.
• Promote the importance of a staging environment during development, get access to it and review the developed designs at each milestone, so mistakes and wrong implementations will not burn up a huge amount of time at once.
• In some cases, consider dedicating after-project design support (e.g., 10 hours per week, 1 session per week) where design walkthroughs and design changes can be carried out in an organized manner.

The whole team matters, not just developers and designers

We already looked at some aspects of the collaboration between developers and UXers, but let's not forget that this is only one segment of a cross-functional team.

As UX designers, we are responsible for creating technically feasible products that meet the business goals and satisfy user needs. To do so, we need to liaise with all relevant stakeholders.

However, in larger teams, we may not have the capacity to jump back and forth between different departments to gather all information and requirements while juggling with prototype iterations, user testing, and discussing technical constraints with the devs.

This means that sometimes it is more efficient to collaborate closely with business analysts, as their role is to gather all information from different domains. They serve as a bridge between all major actors, making the whole product development process smoother. After agreeing on the plan together, they (and/or agile managers) can create the user stories and cross-check them with the devs.

Naturally, a product team consists of product managers and/or owners and developers, but we may also work with copy-writers, visual designers, agile managers, HR and marketing representatives, and so on. The larger the team, the more joint efforts we need from all parties to synchronize processes and mitigate chaos during the product development process.

Takeaways

• Try to involve developers in the design process; understand and synchronize the processes with each other.
• Evangelize the value of UX Design principles.
• Work closely with the devs, involve them in design activities.
• Try to work in design cycles or sprints. Don’t get too ahead of development with the design work.
• Ask for feedback often, and keep an open mind for suggestions.
• Communicate frequently.
• Set up and use common “sources of truth,” such as design systems, design documentation, project knowledge base/wiki, task management platform.

We hope you found this article useful and through efficient collaboration, you’ll make a great team :)

Searching for the right UX agency?

UX studio works with rising startups and established tech giants worldwide.

Should you want to improve the design and performance of your digital product, message us to book a consultation with us. We will walk you through our design processes and suggest the next steps!

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design, etc.