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

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

Portnoy, F., Williams, R., Ward, R., Devito, J. (2014). Building it Right! Bridging the Gap Between UX Designers and Developers. User Experience Magazine, 14(2).
Retrieved from http://www.uxpamagazine.org/building-it-right/

One Response

  1. […] Building it Right! Bridging the Gap Between UX Designers and Developers (Usability Professionals) […]