{"id":12778,"date":"2016-01-26T01:36:21","date_gmt":"2016-01-26T09:36:21","guid":{"rendered":"https:\/\/redbooth.com\/es\/sin-categorizar\/designing-gantt"},"modified":"2016-08-26T14:46:23","modified_gmt":"2016-08-26T21:46:23","slug":"diseno-de-gantt","status":"publish","type":"post","link":"https:\/\/redbooth.com\/es\/blog-es\/diseno-de-gantt","title":{"rendered":"Entre bastidores: el dise&ntilde;o de Gantt para Redbooth"},"content":{"rendered":"<p>En Redbooth, nos encontramos en el proceso de crear nuevas funcionalidades de diagramas de Gantt para nuestro software de gesti&oacute;n de proyectos. Nuestra misi&oacute;n: crearlo desde cero para que cumpla con las necesidades empresariales de la vida real de nuestros clientes (<a href=\"https:\/\/redbooth.com\/es\/blog-es\/gantt-vuelve-a-redbooth\">puedes leer m&aacute;s aqu&iacute;<\/a>). <\/p>\n<p>Como dise&ntilde;adora principal de la nueva experiencia Gantt de Redbooth, me gustar&iacute;a mostrarte qu&eacute; hay detr&aacute;s del proceso de dise&ntilde;o, desde la aportaci&oacute;n del cliente hasta los esquemas y los primeros prototipos de dise&ntilde;o.<\/p>\n<p>El viaje Gantt-&aacute;stico comenz&oacute; incluso antes de que el bol&iacute;grafo tocara el papel&#8230; &nbsp;<\/p>\n<h2>Somos todo o&iacute;dos<\/h2>\n<h3>Estudio de los clientes<\/h3>\n<p>Las nuevas funcionalidades de Gantt de Redbooth en las que estamos trabajando no solo est&aacute;n influenciadas por las opiniones recibidas de los clientes; de hecho, se basan en la visi&oacute;n de los clientes. Antes de imaginar c&oacute;mo ser&iacute;a la versi&oacute;n de Gantt de Redbooth, Irwin Kwan, el responsable del proyecto, y yo dedicamos tiempo a estudiar las opiniones recibidas de los clientes para comprender qu&eacute; les llevaba a solicitar una funcionalidad Gantt dentro de Redbooth. <\/p>\n<p>Elegimos a algunos clientes para entrevistarnos con ellos y les invitamos a &ldquo;despotricar sobre Gantt&rdquo; para poder hacer una mejor evaluaci&oacute;n de sus necesidades y del modo en el que visualizan en la actualidad el progreso de los proyectos. Los m&eacute;todos elegidos iban desde pizarras a hojas de Excel. <\/p>\n<p>Estas charlas no solo dieron a nuestros clientes la posibilidad de compartir con nosotros qu&eacute; es importante para ellos, sino que tambi&eacute;n proporcionaron una informaci&oacute;n muy valiosa que inspirar&iacute;a y guiar&iacute;a mis decisiones de dise&ntilde;o. <\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Excel-Timeline-Template-Example.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Excel-Timeline-Template-Example.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>Los cimientos de Gantt<\/h2>\n<h3>Comprender Gantt<\/h3>\n<p>Puesto que soy una persona que piensa que &ldquo;los cimientos son la parte m&aacute;s importante de la diversi&oacute;n&rdquo;, quer&iacute;a llegar m&aacute;s lejos y conocer Gantt realmente desde su interior. <\/p>\n<p>La exploraci&oacute;n de varias herramientas y plugins para comprender el modo en el que diferentes productos interpretaban Gantt me ayud&oacute; a preparar el terreno para satisfacer las expectativas de los clientes. Y lo m&aacute;s importante, me dio algo que analizar cuidadosamente y hacerme esta pregunta: &ldquo;\u00bfc&oacute;mo puedo lograr algo mejor?&rdquo; <\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Google-gantt-charts.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Google-gantt-charts.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>Como anillo al dedo<\/h2>\n<h3>Definir el alcance<\/h3>\n<p>Con la informaci&oacute;n recogida hasta ese momento, era hora de averiguar lo que Gantt significaba para Redbooth y para nuestros clientes en particular. Irwin y yo nos adue&ntilde;amos de una sala de conferencias y comenzamos el trabajo en la pizarra.  <\/p>\n<p>Creamos una lista de funcionalidades que nos parecieron &uacute;tiles para crear la versi&oacute;n de Gantt para Redbooth, sobre todo aquellas que abordaban la necesidad del usuario de visualizar el progreso del proyecto. Incluimos funcionalidades como fechas de inicio, dependencias de tareas e hitos de proyectos. Colaboramos estrechamente con nuestro equipo de desarrollo de Barcelona para definir las funciones t&eacute;cnicas relacionadas. (No pierdas de vista nuestros pr&oacute;ximos art&iacute;culos para conocer m&aacute;s informaci&oacute;n de nuestros desarrolladores) <\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-whiteboard.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-whiteboard.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>Preparados, listos&#8230; \u00a1a dibujar!<\/h2>\n<h3>Esquemas, wireframes e interacciones<\/h3>\n<p>Con el punto de vista, el conocimiento y la perspectiva del cliente, \u00a1YA pod&iacute;amos comenzar a crear esquemas! Lo primero que pens&eacute; fue: &ldquo;\u00bfc&oacute;mo puedo transformar una lista de tareas en una cronolog&iacute;a?&rdquo;, y, de ese modo, naci&oacute; mi primer esquema.<\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-sketch-01.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-sketch-01.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<p>Una de mis principales prioridades para el Gantt de Redbooth es mantener una clara conexi&oacute;n con la funcionalidades existentes de Redbooth y las conductas a las que nuestros clientes est&aacute;n acostumbrados. Mi objetivo es dise&ntilde;ar una funcionalidad que tenga valor para nuestros clientes y sea f&aacute;cil de adoptar e intuitiva para todos. <\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-sketches-02-4.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-sketches-02-4.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>1, 2, 3&#8230; \u00a1Probando!<\/h2>\n<h3>Recabar opiniones<\/h3>\n<p>Tras perfeccionar mis esquemas, los traslad&eacute; a wireframes de alta fidelidad para compartirlos con todo el equipo de productos de Redbooth y los clientes a los que hab&iacute;a entrevistado anteriormente. El equipo y nuestros clientes hicieron importantes observaciones y propusieron ideas muy &uacute;tiles; adem&aacute;s, muchos de nuestros clientes estaban ansiosos por comenzar a probarlo. <\/p>\n<p>Esta fase fue muy importante porque pudimos ofrecer a nuestros clientes la oportunidad de darnos su opini&oacute;n en un momento lo bastante temprano como para poder hacer iteraciones. Mantuvimos deliberadamente los dise&ntilde;os sin detallar para poder incorporar f&aacute;cilmente lo aprendido.<\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Explorations-v1.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/Explorations-v1.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>Colores, modelos y Gantt, \u00a1Dios m&iacute;o!<\/h2>\n<h3>Definici&oacute;n de interacciones y componentes de interfaz de usuario<\/h3>\n<p>Tras confirmar con nuestros clientes que &iacute;bamos en la direcci&oacute;n correcta, continu&eacute; con la iteraci&oacute;n del dise&ntilde;o. Trabaj&eacute; para mejorar el dise&ntilde;o y los estilos, desarrollando una paleta de colores, y para definir cada componente de Gantt y las diferentes interacciones.<\/p>\n<a href=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-ui.jpg\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/wordpress-production\/wp-content\/uploads\/2016\/01\/gantt-ui.jpg\" alt=\"El dise&ntilde;o de Gantt\" class=\"aligncenter\" \/><\/a>\n<h2>Gantt para el futuro<\/h2>\n<h3>Iteraci&oacute;n, prototipo y prueba<\/h3>\n<p>Mientras nuestro equipo t&eacute;cnico trabaja en la transformaci&oacute;n de estas decisiones de dise&ntilde;o en una realidad, nuestro proceso iterativo contin&uacute;a. Analizamos con detalle, jugueteamos y probamos el c&oacute;digo activo para poder continuar perfeccionando y mejorando la experiencia del usuario antes de ofrecer a nuestros clientes la versi&oacute;n beta.<\/p>\n<p>Como dise&ntilde;adora principal de este proyecto, este reto y este proceso han sido enriquecedores, emocionantes e inspiradores. Me ilusiona continuar colaborando con nuestro equipo y nuestros clientes a medida que creamos Gantt y espero compartir los resultados con todos vosotros. <em>No olvides leer el pr&oacute;ximo art&iacute;culo de esta serie: <a href=\"https:\/\/redbooth.com\/es\/blog-es\/gantt-la-perspectiva-del-desarrollador\">Dar vida a los diagramas de Gantt: La perspectiva del desarrollador &gt;&gt;<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00danete a Sarah Tanner, dise\u00f1adora de productos de Redbooth, en una visita entre bastidores para conocer el dise\u00f1o de las funciones de Gantt para el software de gesti\u00f3n de proyectos de Redbooth.<\/p>\n","protected":false},"author":102,"featured_media":11193,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[423],"tags":[426,427,459],"class_list":["post-12778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-es","tag-behind-the-scenes-es","tag-user-experience-es","tag-gantt-charts-es"],"_links":{"self":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts\/12778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/users\/102"}],"replies":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/comments?post=12778"}],"version-history":[{"count":0,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/posts\/12778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/media\/11193"}],"wp:attachment":[{"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/media?parent=12778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/categories?post=12778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redbooth.com\/es\/wp-json\/wp\/v2\/tags?post=12778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}