Skip to content Skip to sidebar Skip to footer

Building it Right! Bridging the Gap Between UX Designers and Developers

The modern workforce is comprised of multidisciplinary teams that deliver sophisticated products and services to the market. In the user experience (UX) domain, two key players are spearheading the product cycle: UX designers and UX developers. While designers extract and translate the user requirements into user-friendly wireframes, developers convert those wireframes into real products. Since each role requires a different educational background, the two players sometimes find themselves in conflict with one another due to differing beliefs.

While some designers view developers as a group of unmotivated programmers, developers are often frustrated when handed a wireframe that either underestimates the required resources to complete it or is simply unrealistic given the available technology.

To bridge the gap between these two points of view, the UXPA chapter of Norfolk, Virginia invited three UX developers to present their point of view to a local audience of UX professionals:

  • Joe DeVito designs and develops responsive user interfaces for mobile apps and enterprise level websites
  • Ricky Williams is a lead developer working on web and mobile sites and social media for clients at a digital agency
  • Ryan Ward develops front end user interfaces for web applications

The discussion highlighted many of the issues encountered in UX collaborations. We hope that the views shared by the panelists in this article will help you plan and facilitate better communication between designers and developers to produce the best user experience for your customers.

Q: What are some of the challenges that you have encountered when working with a design team?

Photo of RyanRyan: In cases when the design was completed long before the implementation, it often resulted in substantial changes to the design work. Developers must spend additional time to explain to the designer which parts of the design are feasible and which elements need to change. As a result, this process increases the time to complete the project. Collaborating with the development team in the early stages of the design process streamlines the development process itself.

Photo of RickyRicky: What many designers do not realize is that by not working with the developers in the conceptualization phase, their final design is more likely to result in a sub-optimal user experience. There is a misconception in the design community that developers’ creativity lies in the arrangement of zeros and ones; that is to say, developers focus solely on implementation of the designer’s ideas. However, what I learned at Grow is that the design is often more
engaging when developers are involved in the ideation process since the developer can suggest technical ways to improve the interaction that are unknown to the designer.

Q: When working with a developer, what are some ways to maintain the integrity of a design without stepping on their toes?

Photo of JoeJoe: Communicate the design requirements to the developer as early as possible. In addition, it is useful to engage the developers and solicit their feedback. This allows building camaraderie in the team, which helps to reduce the tension when conflicts arise.

Ryan: Designers should be cognizant of the fact that their design may not “perfect.” Instead of getting into conflicts with the developers, they need to think outside the box and leverage the challenges the developers outlined and focus on creating novel UI solutions.

Joe:That’s why it would be useful for the designers to gain some knowledge in order to understand the capabilities and limitations of the technology that they are working with prior to handing off a mock-up. In addition, it would be helpful to find existing examples of code to share with the development team to help them understand the mockup. Also, the designer should be familiar with the abilities of the device, language, and API that they are designing for.

Ricky:The communication between the designers and the developers should not be confined within the realm of the project itself. Both team members should invest their time in getting to know their colleagues outside of the project scope. This allows the team to build trust and confidence with each other. If my designer receives a “No” answer from me, he knows that it’s not because I’m trying leave work early, but rather it simply cannot be done. Trust also allows the designers to follow my technical lead and design another version based on the options that I provide them.

Ryan: Also, when conflicts do occur, I find it helpful to meet with the designer one-on-one rather than having a large group discussion.

Q: How can company culture affect the interactions between design teams and developers?

Ryan: At SimIS, having a sense of community in the company helps to accomplish the project goals. If the developer is afraid to express their opinion or disappoint someone, they is more likely to miss their benchmark. Being able to contact the design team and have a candid discussion about implementation challenges without the fear of retribution allows us to mitigate issues early on and deliver a good product on time.

Joe:At Booz Allen Hamilton, every team member is expected to have an expertise in his or her role. In other words, your title is true to what you are. This helps us to be more confident in our decision making and allows us to express our opinion freely and respect each others’ judgment calls. Ultimately, the entire team is responsible for the success and failure of the project. So having a shared interest and responsibility motivates the team to find the best solutions that support the clients’ goals.

Ricky: At Grow, we are encouraged not to give up when we face development challenges. If a developer cannot implement a feature, they need to provide alternative solutions and work with the designers to accomplish the project’s goals.

Q: What are the best communication methods to convey design ideas for developers?

Joe:We often use wireframes with storyboards to convey the UI elements and the flow of the interaction. This helps the developers to execute the design accurately. Not only do we create wireframes, we walk the development team through the wireframes and the expected functionality so we are on the same page.

Ricky: I also find wireframes to be the most effective method, especially when they are coupled with a verbal walkthrough. This way, we get a visual representation of the desired look and feel along with a verbal explanation of the interaction expectations.

Ryan: While wireframes provide a clearer vision of what the final product should look like, in some cases a specs sheet may provide some advantage. Specs sheets are often known to be rigid and difficult to work with in complex projects because they attempt to spell out every single feature, box, and line that should be produced with little ability to forecast development challenges. However, when working with international teams, it helps to avoid misunderstandings as a result of a miscommunication due to language and culture differences.

Q: Are there additional resources that you recommend designers review that could help them communicate their designs better?

Ricky/Joe/Ryan:If a designer sees a widget or an interaction that they would like to use, it would be helpful if they could take the time to gain a general understanding of how it was done and what technology was used. That doesn’t mean the designer needs to know exactly how to implement it; after all, that’s the developer’s responsibility. But when the designer can show the developer that they spent time to learn about the technology that drives the desired widget, it increases the likelihood that the developer will go above and beyond to implement something they have never seen or done before.

In conclusion, trust and communication are key to establishing a good working relationship between designers and developers. Granted, this can be quite challenging in today’s workplace where, often, these two teams are not located in the same building or even the same country. Nevertheless, it is important to note that trust and communication are parts of a two-way street.

Both developers and UX professionals need to respect each other, consider all points of view, and gain the trust of the team. While company culture is important to promote interdisciplinary collaboration, we as individuals, are responsible to become familiar with our colleagues’ tools, methodologies, and constraints. This helps us strive to ensure that the end result will be a successful and timely product deployment.UX

[greybox]

Resources

These online resources help designers learn about web developing technology.

  • lynda.com: Easy-to-follow video tutorials help you learn software, business, creative skills, and more
  • tuts+: Teaches creative and technical skills across many topics to millions of people worldwide
  • coursera.org: An education company that partners with the top universities and organizations in the world to offer free online courses
  • udacity.com: Offers a wide variety of free online courses, including programming and design
  • edx.org: Courses from MIT, Harvard, Stanford and more, for free
  • codeacadamy: Teaching the world how to code

[/greybox]信任和沟通是设计人员和开发人员之间建立良好工作关系的关键所在,涉及异地团队合作时尤为如此。开发人员和用户体验专业人员必须相互尊重,考虑对方的观点并获取团队的信赖。我们每个人都应该熟悉同事使用的工具、方法以及条件限制,这样我们才能尽力确保最终顺利、及时地完成产品部署。

文章全文为英文版신뢰와 소통은 디자이너와 개발자, 특히 팀이 멀리 떨어져 있는 경우, 그 사이에서 좋은 작업 관계를 형성하는 데 핵심적입니다. 개발자와 UX 전문가는 서로 존중하고 서로의 관점을 고려하며 팀의 신뢰를 얻어야 합니다. 우리는 개인적으로는 동료의 툴, 방법론 및 제약 사항을 알아두어야 할 책임이 있고, 그럼으로써 최종 결과가 반드시 성공적이며 시기적절한 제품 배치가 될 수 있도록 노력할 수 있는 것입니다.

전체 기사는 영어로만 제공됩니다.A confiança e a comunicação são fundamentais para estabelecer um bom relacionamento de trabalho entre designers e desenvolvedores, principalmente com equipes remotas. Os desenvolvedores e profissionais de UX precisam respeitar-se mutuamente, considerar o ponto de vista de cada um e ganhar a confiança da equipe. Como indivíduos, somos responsáveis por nos tornarmos familiarizados com as ferramentas, metodologias e restrições de nossos colegas, para que possamos nos empenhar para garantir que o resultado final seja uma apresentação de produto bem-sucedida e oportuna.

O artigo completo está disponível somente em inglês.信頼とコミュニケーションは、デザイナーとデベロッパー間に、特に遠隔チームである場合、良い仕事関係を築くための要点となる。デベロッパーとUXの専門家は、互いを尊重し、互いの視点を考慮し、チームの信頼を獲得する必要がある。最終的に結果を成功におさめ、時間内に製品を開発することを目指すために、私たちは同僚のツールや手法、および制約条件に精通する責任がある。

原文は英語だけになりますLa confianza y la comunicación son claves para establecer una buena relación laboral entre diseñadores y desarrolladores, especialmente con equipos remotos. Los desarrolladores y profesionales de UX deben demostrar respeto mutuo, considerar los puntos de vista de los demás y ganarse la confianza del equipo. Como individuos, somos responsables de familiarizarnos con las herramientas, metodologías y limitaciones de nuestros colegas, de modo que podamos trabajar para garantizar que el resultado final sea un despliegue exitoso y oportuno del producto.

La versión completa de este artículo está sólo disponible en inglés