Cinco ideas para mejorar la colaboración entre los equipos de desarrollo y diseño

Desarrollar una aplicación es un deporte de equipo que requiere el trabajo de varias partes, incluidos los equipos de desarrollo y diseño. Como dice Roger Staubach, el famoso quarterback de los Dallas Cowboys de la década de los setenta: “En cualquier deporte de equipo, los mejores equipos tienen consistencia y química”.

La falta de colaboración entre los equipos de diseño y desarrollo reduce la eficiencia y aumenta el tiempo de entrega de los proyectos. Los KPI contradictorios, la incomprensión de los procesos de la otra parte, la falta de reuniones periódicas y el uso de herramientas de colaboración que favorecen a un lado más que al otro agravan el problema. Analicemos más a fondo todos estos factores y descubramos cómo pueden las organizaciones mejorar la colaboración entre diseño y desarrollo.

En lugar de los KPI convencionales, los equipos de diseño y desarrollo pueden beneficiarse de KPI centrados en el usuario, como la tasa de conversión, las métricas de interacción, la duración de la sesión, la tasa de rebote, etc. Estos KPI pondrán a ambos grupos en sintonía y los ayudarán a centrarse en lo realmente importante: la experiencia de usuario.

Piensa en la tasa de conversión como un KPI para un proyecto dirigido a crear páginas de destino para una nueva campaña. En lugar de entregar el diseño de la página de destino en X días (equipo de diseño) y publicarlo en X días (equipo de desarrollo), ambos equipos se centrarán en que la experiencia sea excelente desde el punto de vista del usuario.

Los KPI convencionales para los equipos de diseño y desarrollo rara vez tienen en cuenta el tiempo de colaboración o de espera, lo que crea conflictos innecesarios.

Algunos de los KPI más comunes para el equipo de diseño son:

• Tiempo necesario para terminar el proyecto
• Tiempo dedicado a las revisiones
• Comentarios internos o externos sobre el diseño
• Número de proyectos completados en un trimestre

Con estos KPI, los comentarios del equipo de desarrollo son perjudiciales para el de diseño, ya que tienen que quitar tiempo a los nuevos proyectos y rehacer las pantallas que ya habían entregado. En este caso, sus KPI los enfrentan al equipo de desarrollo.

Por otro lado, algunos de los KPI más comunes para el equipo de desarrollo front-end son:

• Líneas de código y número de implementaciones
• Tiempo de ciclo: tiempo dedicado a una sola tarea
• Estabilidad y simplicidad del código

Los diseños complejos y repletos de funciones requieren un mayor esfuerzo de programación por parte del equipo de desarrollo. Por lo tanto, cada vez que el equipo de diseño insiste en nuevas funciones que requieren una programación compleja, el de desarrollo lo ve como un obstáculo.

Si bien los KPI convencionales tienen sus ventajas, el personal de gestión debe asegurarse de que los KPI de un equipo no entren en conflicto con el trabajo del otro. Esto se puede lograr dando más peso a los KPI compartidos y centrados en los usuarios.

Si el equipo de diseño comprende los conceptos básicos del desarrollo front-end, podrá ver las cosas desde la perspectiva del equipo de desarrollo. Lo mismo ocurre con el equipo de desarrollo. Además, quienes se encargan del diseño y tienen conocimientos básicos de HTML y CSS también crearán diseños teniendo en cuenta las limitaciones tecnológicas. Comprender el funcionamiento interno de una aplicación (incluso si son solo los conceptos básicos y las capacidades de la API) puede ayudar al equipo de diseño a comprender mejor las limitaciones técnicas.

Al realizar algunos cursos básicos sobre las disciplinas de la otra parte, los equipos de desarrollo y diseño podrán hablar el mismo idioma. Este tipo de formación multidisciplinar mejora la colaboración y hace que ambos grupos trabajen juntos para encontrar mejores formas de resolver los problemas.

Coursera y Career Foundry ofrecen cursos especiales para profesionales del diseño que quieran aprender desarrollo front-end. Estos cursos cubren los conceptos básicos del desarrollo web y enseñan HTML, CSS y JavaScript: los tres lenguajes que utilizan todos los profesionales del front-end en su trabajo. Estos cursos también tratan el diseño de UX y UI desde la perspectiva de la programación. Quienes realizan estos cursos de diseño terminan comprendiendo mejor cómo hace el equipo de desarrollo para dar vida a esos diseños.

El equipo de desarrollo también puede beneficiarse de los cursos de Canva y LinkedIn Learning. Estos cursos abarcan la tipografía y las combinaciones de colores, pero lo que es más importante, cubren las etapas del proceso creativo y cómo piensa el equipo de diseño. Los profesionales del desarrollo que realicen estos cursos adquirirán una mejor comprensión de lo que implica el diseño.

Estos cursos requerirán tiempo y esfuerzo adicionales por parte de ambos equipos, pero la formación multidisciplinar dará sus frutos en términos de mejora de la eficiencia. Además, cualquier persona que realice estos cursos también adquirirá nuevas skills y certificaciones.

Un sistema de diseño consta de una guía de estilo y una biblioteca de patrones. Es una fuente única de verdad repleta de componentes reutilizables (menús desplegables, botones de CTA, formularios de clientes potenciales…) e instrucciones claras sobre cómo utilizarlos, y reduce las discrepancias y los vaivenes entre los equipos de diseño y desarrollo. Disponer de un sistema definido de componentes que se reutilizan también reduce cualquier deuda técnica de ingeniería innecesaria que puedas acumular. Esto ocurre cuando se crean los mismos elementos de la interfaz de usuario más de una vez. Reutilizar los recursos permite un tiempo de entrega más rápido y una aplicación coherente.

Una guía de estilo es un conjunto de estándares para todos los identificadores de la marca, como el logotipo de la empresa, la paleta de colores, la fuente y la tipografía, y el diseño de la plantilla. La mayoría de las empresas comienzan con una guía de estilo y avanzan hacia una biblioteca de patrones a medida que crecen.

Un biblioteca de patrones es una colección de todos los componentes interactivos de tu diseño, incluidos componentes como botones, barras de navegación y carruseles. También incluye definiciones y descripciones de todos estos componentes, describe claramente sus usos y contiene código asociado a ellos.

Un sistema de diseño combina ambas cosas y proporciona al usuario información completa sobre todo lo incluido en la guía de estilo y la biblioteca de patrones, así como pautas sobre lo que se debe y no se debe hacer en el diseño y en la implementación. El equipo de diseño puede crear conceptos directamente en el sistema de diseño al arrastrar y soltar componentes almacenados previamente. El equipo de desarrollo puede entonces ver el código asociado a cada componente, así como dejar comentarios al equipo de diseño en el mismo espacio.

Algunas de las herramientas populares de gestión de sistemas de diseño en línea incluyen material.io, supernova.io, zeroheight.com y PatternFly.

Las reuniones de equipos multidisciplinares ayudan a resolver conflictos, mejorar la comunicación y aumentar la comprensión entre ambos grupos. Establecer reuniones semanales o quincenales periódicas entre los equipos de diseño y desarrollo les ayudará a analizar los proyectos en curso, iniciar nuevos proyectos y colaborar de manera eficaz. 

En una webinar sobre la colaboración entre equipos de diseño y desarrollo, Nicki Snyder, mánager de experiencia y diseño en Pathwire, abordó la importancia de las reuniones entre el equipo de diseño y el de desarrollo:

“A nosotros (en diseño) nos gusta mucho crear cosas y asumir que van a funcionar. No involucramos al equipo de ingeniería en las primeras etapas del proceso y eso provocó mucho trabajo innecesario que podría haberse evitado si hubiésemos dedicado una hora a revisar lo que queríamos, descubrir cuál sería el estado final y mantener esa charla (con ingeniería)”.

Un gestor o gestora de producto sería la persona ideal para dirigir estas reuniones y asegurarse de que ambos grupos se centren en mejorar la experiencia de usuario. Además, establecería la agenda de estas reuniones, que puede tratar sobre un problema u obstáculo específico de un proyecto, la revisión de los diseños de una nueva función del producto o página web, o una conversación sobre una página de destino de bajo rendimiento. Esta reunión también puede convertirse en una sesión de trabajo en la que un pequeño grupo de profesionales del diseño y el desarrollo resuelva un problema específico.

Realizar reuniones de lanzamiento iniciales y sesiones de trabajo ayuda al equipo de desarrollo a saber si es posible hacer lo que se necesita dentro de la aplicación. Esto da tiempo para llevar a cabo una investigación rápida si es necesario, de modo que puedan ver qué requisitos deben cumplirse para materializar la funcionalidad o el diseño. Reunirse al inicio del proyecto ayuda a quienes gestionan el producto a crear plazos de entrega realistas y a proporcionar de antemano los requisitos al equipo de diseño.

Será responsabilidad de la persona que gestione el producto asegurarse de que estas reuniones no se conviertan en puestas al día del estado del proyecto y de que solo se realicen cuando haya una agenda predefinida que aborde claramente un problema que las personas participantes intentarán resolver.

Las conclusiones clave de estas reuniones pueden utilizarse para actualizar el sistema de diseño. Lo ideal es que estas reuniones pasen de ser semanales a quincenales, luego a mensuales y después a celebrarse según sea necesario, a medida que el sistema de diseño se vuelva más sólido.

El proceso de colaboración convencional entre diseño y desarrollo implica un traspaso del equipo de diseño al de desarrollo. Por ejemplo, el equipo de diseño crea pantallas y comparte el archivo de imagen con el equipo de desarrollo. A continuación, el equipo de desarrollo ofrece comentarios sobre lo que se puede y no se puede hacer. Luego, el equipo de diseño revisa (o rehace) las pantallas según sea necesario y se las vuelve a entregar al equipo de desarrollo, y así sucesivamente. Es un proceso laborioso con muchas idas y venidas antes de que algo se publique.

Las herramientas de colaboración entre diseño y desarrollo tienen como objetivo convertir este traspaso en un apretón de manos. Los equipos de diseño y desarrollo podrán ver la misma pantalla en un entorno en el que se puede editar en tiempo real, lo que eliminará las idas y venidas del proceso.

También hay herramientas de colaboración entre equipos de diseño y desarrollo, como Adobe XD , que se inclinan más por las necesidades del equipo de diseño y sirven de asistencia en el proceso de traspaso, desde los esquemas de página hasta los diseños completos. Algunas herramientas como zeplin.io se centran en el desarrollo y satisfacen sus necesidades al ofrecerles fragmentos de código, recursos y especificaciones para diferentes tamaños de pantalla en un solo lugar. Zeplin se integra con Adobe XD, por lo que puede usarse junto a este para dar asistencia al equipo de desarrollo.

En el webinar que hemos mencionado antes, Nicki habló sobre algunos de los retos relacionados con el proceso de traspaso. Uno de esos retos era recibir los comentarios del equipo de desarrollo demasiado tarde en el proceso. También mencionó cómo InVision les ayudó a convertir el proceso de traspaso en un apretón de manos conjunto.

Además de InVision, existen herramientas como Bit y Figma que ayudan a los equipos de desarrollo y diseño a colaborar en tiempo real. Estas herramientas también se pueden integrar con JIRA u otras herramientas de gestión de proyectos. Las tarifas varían según el número de usuarios y de proyectos, con un rango de precios de entre 9,95 $ y 20 $ por usuario al mes si optas por un plan profesional.

Por lo general, el debate sobre la colaboración entre diseño y desarrollo se centra en las páginas y aplicaciones web, pero el email también puede beneficiarse de ella.

Gracias a una mejor colaboración entre los equipos de diseño y desarrollo:

• Los emails funcionarán en todos los tipos de bandejas de entrada y dispositivos.
• La entregabilidad aumentará gracias a un código más limpio y sencillo.
• Las tasas de clics aumentarán debido a un mejor diseño.
• Las tasas de bajas se reducirán gracias a una mayor interacción.

Además, contar con un sistema de diseño implementado, junto con la formación en front-end y las funciones intuitivas de Pathwire, ayudará al equipo de diseño a crear plantillas de email que puedan ajustarse y reutilizarse una y otra vez. Por ejemplo, un o una profesional del diseño puede configurar una plantilla de newsletter, alguien de desarrollo puede asegurarse de que funcione en todos los tamaños de pantalla con herramientas como Email on Acid’s Inbox Display o la previsualización de emails de Mailjet, y un o una profesional del marketing simplemente puede añadir nuevas imágenes y sustituir el texto dentro de la misma plantilla todos los meses.

Hablando de newsletters, suscríbete a la nuestra. . Te enviaremos artículos como este, guías detalladas, novedades interesantes de Pathwire y mucho más cada mes.

Ve la transmisión de nuestro panel en formato webinar: “Mejora al máximo la relación entre desarrollo y diseño con Pathwire e InVision”.

El panel de debate incluye a:

• Nicki Snyder, mánager de experiencia y diseño de Mailgun by Pathwire.
• Lawrence Norton, ingeniero de software de Mailgun by Pathwire.
• Nick Karavas, consultor de soluciones de InVision.

Autor: Nicki Snyder Nicki Snyder is the Director of Experience Design for the CPaaS Design Group at Sinch. She leads our Product Design team and focuses on the UX and visual interface to optimize our product. She writes about design and brings insight into collaborating with developers on projects.