Cuando el diseño se encuentra con la ingeniería en Traveloka

Esta no es una historia de amor ordinaria.

Nota: Esta es solo una de las interacciones entre Diseño e Ingeniería. Estoy hablando de un pequeño espectro de todas las interacciones entre Diseño e Ingeniería en Traveloka. Y esta es mi historia.

A medida que pasa el tiempo, Traveloka ha existido durante 6 años. En este viaje, admitimos que tenemos muchos errores visuales que han estado allí durante bastante tiempo, como diferentes tonos de naranja para los botones o un margen inconsistente entre las tarjetas.

El equipo de diseño inició el esfuerzo de estandarizar nuestro lenguaje visual mediante la construcción de nuestro propio kit de diseño para evitar cualquier anomalía visual nueva que se desviara de nuestro estándar. Lo intentamos, pero de alguna manera este problema nunca se resolvió. Incluso después de tener nuestro propio kit de diseño, aún vemos esas inconsistencias visuales en nuestros productos.

Por otro lado, nuestros ingenieros necesitan trabajar de manera más eficiente. Prefieren construir componentes similares desde cero en lugar de buscar para encontrar ese mismo componente para su reutilización. Porque buscar estos componentes es una fricción en su flujo de trabajo actual.

Todos estos tiempos, el equipo de diseño y el equipo de ingeniería intentaban resolver su propio problema sin comunicarse entre sí. Surgió la pregunta sobre la posibilidad de que Diseño e Ingeniería trabajen juntos para resolver el problema que ambos enfrentamos todos los días. ¿Quién sabía que Diseño e Ingeniería pueden caminar de la mano y hacer crecer el amor en el proceso?

¿Cuándo se conocieron?

Las conversaciones comenzaron a principios de 2018 cuando el equipo de Ingeniería realizó una investigación sobre React Native y React Native Web (React Native es un marco para crear aplicaciones móviles usando JavaScript). Cuando comenzó esta investigación, los desarrolladores de IU web del equipo de diseño se involucraron.

Durante el proceso, el equipo de ingeniería tuvo la idea de utilizar React Native como base para el desarrollo multiplataforma. Esto incluye el desarrollo de Mobile Web en el que Web UI Developer puede participar para crear componentes en él.

Cuando comenzó esta iniciativa, estábamos muy emocionados de aprender React Native y aprovecharlo al máximo, ya que podemos tener un impacto más significativo y crear componentes para todas las plataformas disponibles desde una sola fuente de código. Y aquí es donde primero nos conocemos.

¿Cómo creció el amor?

Nos conocimos varias veces después de eso, pero nada se encendió en nuestro corazón. Pero entonces, la chispa emerge cuando tenemos este interno. Todo comenzó tan simple como un proyecto interno.

Este pasante es un ingeniero React Native y está asignado a construir cualquier cosa que pueda suavizar la colaboración entre Diseño e Ingeniería. Comenzó a construir una biblioteca de componentes, algunos complementos de bocetos alucinantes para diseñadores e investigó otras posibilidades de colaboración entre Diseño e Ingeniería.

Además de eso, el equipo de diseño también tuvo la iniciativa de crear una única fuente de verdad basada en código (SSOT) para los tokens y componentes de diseño. Estos dos movimientos nos inspiraron a colaborar en esta misión. Aquí es donde se enciende el amor, y creemos que estamos corriendo hacia un futuro mejor juntos.

¿A dónde nos llevó el amor?

Después de varias citas (léase: reunión), finalmente aceptamos llevar nuestra relación al siguiente nivel. No fue un camino fácil para caminar, pero creemos que este es el adecuado para nosotros. Comprendernos es la clave esencial para una buena relación, ¿verdad? Y eso fue lo que hicimos cuando decidimos colaborar.

Comenzamos por entender cómo funcionan los demás. Y después de estas noches llenas de pesadillas y caminos llenos de obstáculos, finalmente nos dirigimos hacia una mejor colaboración. Estos son nuestros compromisos para lograr una mejor colaboración entre Diseño e Ingeniería:

1. Sistema de diseño basado en código.

La colaboración entre diseño e ingeniería ha sido bastante desafiante. El puente entre el diseño y el código no es lo suficientemente fuerte e hizo que el trabajo se volviera difícil entre nosotros.

Entonces tuvimos la idea de crear un sistema de diseño basado en código. Ponemos nuestro token de diseño en JavaScript, que es la forma más fácil de utilizar para el ingeniero, pero aún lo suficientemente simple para que el diseñador lo administre.

Estamos colaborando para construir nuestros propios componentes artesanales que cumplan con los estándares de diseño e ingeniería. Esos componentes se utilizarán en todas las plataformas para establecer consistencia en nuestro diseño.

2. Complementos de croquis.

Estos complementos de Sketch funcionan como el puente entre el diseño y los códigos. Por el lado del diseño, esto facilita la colaboración porque los diseñadores no necesitan generar los mismos componentes una y otra vez. Esto también ayudará al diseñador a construir su interfaz de usuario basada en los componentes estandarizados.

En el lado de Ingeniería, este complemento traducirá la interfaz de usuario en códigos que el ingeniero puede implementar fácilmente. Esto reducirá el tiempo de trabajo del ingeniero porque no necesitan buscar componentes existentes del diseño anterior.

3. Diseño de linter y pruebas visuales integradas.

Después de trabajar con la interfaz de usuario y el código, el siguiente paso es asegurarse de que ambos estén estandarizados. Aquí es donde intervinieron el diseño linter y las pruebas visuales integradas. Actualmente estamos investigando la posibilidad de desarrollar una interfaz de diseño y pruebas visuales integradas para funcionar como una red de seguridad tanto para nuestra interfaz de usuario como para nuestros códigos. Desde el punto de vista del diseño, la interfaz de diseño alentará a UI Designer a usar componentes estandarizados. Mientras tanto, desde el lado de la ingeniería, las pruebas visuales disminuirán la posibilidad de anomalías visuales cuando se lance el producto. Esto hará que la vida del diseñador y el ingeniero sea más fácil en el futuro.

4. Diseño de la documentación del sistema.

Cuando colabora con un equipo diferente, es bueno tener una guía a la que ambos puedan referirse. La documentación del sistema de diseño funciona como la biblia de diseño a la que pueden acceder todas las partes interesadas, incluidos los gerentes de producto, el ingeniero y otros diseñadores. Esto es importante para asegurarse de que todos estén en el mismo foro sobre por qué se toma una decisión de diseño. Esto también ayudará a evitar cualquier desacuerdo de diseño entre el equipo porque cada diseño se hace cuidadosamente con una cuidadosa consideración.

Ilustración de Ralistu Hayu Pratiwi

Con todos estos pequeños pasos, creemos que podemos mejorar la colaboración e integración futuras entre nosotros. La colaboración también abrirá posibilidades para crear mejores productos.

Al final, diseñar un producto no es solo cómo hacer que se vea bonito e interesante. También hay muchos esfuerzos de ingeniería para que el diseño funcione a la perfección. Esto ilustra la importancia de la colaboración entre Diseño e Ingeniería; ya que no podemos vivir el uno sin el otro para crear un buen producto. Como dijo Steve Jobs:

“El diseño no es solo lo que parece y se siente. El diseño es cómo funciona ".