“Lo que estaba en juego era enorme. La pasión fue lo que impulsó todo este proyecto”.
Es octubre, pero también es abril. La pandemia ha convertido el tiempo en un círculo plano. Piensa en abril —¿o tal vez fue a principios de mayo?— y conecta con la confusión que sentías entonces. Es posible que aún la sientas, ya que el virus ha seguido siendo una de las fuentes de ansiedad global más persistentes durante 2020.
Para quienes nos preguntamos qué ocurre con la vacuna, es difícil estar al tanto. Las noticias llegan a cuentagotas desde diferentes empresas, equipos de investigación y ensayos clínicos, prometiendo plazos que pueden parecer poco realistas y lejanos al mismo tiempo.
La carrera por desarrollar, aprobar y fabricar una vacuna contra la COVID-19 evoluciona rápidamente. Intentar seguir este proceso solo a través de los titulares no es sensato. El deseo urgente de respuestas en todo el mundo ha provocado la aparición espontánea de millones de epidemiólogos de sofá. Por eso, existe una necesidad gigantesca de contexto sobre las diferentes fases de desarrollo, los tipos de vacunas y cómo funcionan.
First Person, una empresa de diseño y narrativa de San Francisco, decidió abordar esta necesidad de contexto creando una forma de seguir el progreso de las vacunas contra la COVID-19 en desarrollo. Lanzado el 22 de junio, en colaboración con FasterCures, un centro del Instituto Milken, el rastreador de vacunas contra la COVID-19 pretende mostrar cuántas vacunas candidatas están en desarrollo, ofrecer un cronograma de su creación, explicar cómo funcionan y describir el proceso desde la idea inicial hasta la comercialización y el uso generalizado.
Esta es la historia de cómo nació ese sitio web, contada por las personas que lo crearon.
La idea
Drew Fiero (CEO/presidente, First Person): First Person siempre busca formas de contribuir a temas importantes y utilizar nuestra capacidad para aclarar ideas complejas mediante el diseño y la narrativa. A medida que la pandemia se extendía, buscaba una manera de involucrarnos. Después de leer un artículo excelente sobre todos los desafíos que habría que superar para crear una vacuna —y cómo probablemente tomaría al menos 18 meses— me inspiré. El artículo me llevó unos 15 minutos leerlo y me pregunté si podríamos condensar esa información en unos dos minutos. Así que me acerqué a nuestro departamento creativo para ver la posibilidad de crear un video de dos minutos que explicara los desafíos de distribuir una vacuna.
Eric Melin (director creativo, First Person): Me sumergí en el tema y me di cuenta de que era una historia enorme: plazos comprimidos, fases de pruebas clínicas, diferentes enfoques de vacunas, cooperación global y fabricación, todo influía en la carrera por una vacuna. No había una fuente de información única y fácil de digerir. Cuando descubrí que el Instituto Milken tenía una hoja que actualizaban continuamente, propuse la idea de tomar esa fuente de datos rica y neutral para crear algún tipo de visualización. A la dirección de la empresa y al equipo de diseño les encantó la idea, así que nos pusimos manos a la obra con la estrategia de extraer sus datos públicos para contar la historia visualmente. Cuando contactamos al equipo del Instituto Milken con nuestro prototipo, estaban encantados de que los hubiéramos encontrado y les encantó el resultado; así nació la colaboración. Creo que pasamos de la idea inicial al prototipo funcional en unas tres semanas.
Visualizando las vacunas
Casimir Fornalski (director de diseño visual, First Person): Los datos de Milken tenían muchísimas tablas y gráficos que daban información detallada muy importante sobre cada vacuna en producción, pero queríamos encontrar una forma de visualizarlo todo en un gráfico único, conciso y accesible; algo que transmitiera la sensación de competencia entre los diferentes proyectos de investigación, todos avanzando a distintas velocidades. Probamos varios modelos visuales que técnicamente lograban esta visión global, pero entonces se me ocurrió la idea de la jeringuilla.
En realidad es solo un gráfico de barras horizontal, pero si apilas suficientes barras y las mantienes relativamente estrechas, puedes añadir unas pocas líneas arriba y abajo para sugerir una aguja hipodérmica. Al principio pensé que era un poco atrevido o demasiado evidente. Pero cada vez que se lo mostrábamos a alguien o explorábamos un gráfico diferente, la respuesta a la jeringuilla era siempre positiva. Creo que funciona porque es un gráfico sencillo con relevancia temática. Una vez que el usuario lo entiende, solo tiene que preguntarse: “¿Cuánto está llena la jeringuilla?”. Ver cuánto (o qué poco) te impacta con múltiples historias: cuántas vacunas están en desarrollo, en qué etapa se encuentran, qué tan cerca estamos de una vacuna y cuánto progreso se ha logrado a nivel mundial.
"El color desempeña un papel más informativo que ornamental, por lo que se asignó un color diferente a cada categoría de vacuna, y ese color se mantiene constante en referencia a ese tipo de vacuna en todo el sitio".
— Casimir Fornalski
Eric: Cas ideó el gráfico de la jeringuilla como una forma de visualizar simultáneamente los nueve tipos diferentes de vacunas, así como su progreso a través de las fases de pruebas clínicas, y Winston presionó para darle un enfoque periodístico. Nos sentimos inspirados y trabajamos rápido; cada diseño posterior se centró en simplificar la historia a sus elementos más importantes y fomentar una mayor implicación del espectador.
Diseñando y construyendo el sitio
Winston Struye (director de arte junior, First Person): Sabíamos que la idea era demasiado buena para guardárnosla, así que corríamos contra el reloj para publicarla. Además, la carrera por una vacuna se volvía cada vez más compleja. Con Webflow y algunas otras integraciones, pudimos hacerlo realidad lo antes posible. El equipo principal pudo crecer y colaborar sin problemas gracias al software.
Cas: Winston y yo pudimos intercambiar tareas y hacer ediciones en tiempo real fácilmente, y luego él podía trasladar todo a las herramientas de guía de estilo de Webflow mientras desarrollaba el sitio. Adopté un enfoque muy utilitario para el diseño. No teníamos mucho margen para crear paneles de inspiración, explorar diseños o probar docenas de fuentes y colores diferentes. Se trataba de ofrecer información clara y precisa que los lectores pudieran entender y en la que pudieran confiar. Una vez que se estableció el gráfico de la jeringuilla, este impulsó el diseño general para mejor. Tipografía limpia y escasa, división clara entre secciones, gráficos y líneas minimalistas. El color desempeña un papel más informativo que ornamental, por lo que se asignó un color diferente a cada categoría de vacuna, y ese color se mantiene constante en referencia a ese tipo de vacuna en todo el sitio.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Winston: Nuestros diseños iniciales estaban más orientados a los datos, pero gracias a que todos pudimos participar, nos dimos cuenta —como equipo— de que había mucho más en esta historia. Entramos y salimos del sistema de diseño usando Figma e hicimos prototipos extensos. Una vez que transferimos todo a Webflow, pudimos integrar sin problemas las complejas cargas de datos y la amplia estrategia de movimiento en nuestros diseños, sin que tomara demasiado tiempo ni necesitáramos subcontratar el trabajo de desarrollo.
Mantener el flujo de datos
David Mayer (director de tecnología creativa, First Person): Una vez que tuvimos los cimientos del proyecto en Webflow, entendimos la relación de datos entre las necesidades de visualización y la protección de la fuente de datos del Milken Institute. El reto no era solo adaptar la gran cantidad de datos que se actualizaban a diario, sino encontrar una forma más eficiente y familiar para que el equipo del Milken Institute los introdujera en el futuro. Sin necesidad de escribir middleware personalizado, equilibramos una serie de tareas de automatización entre Integromat y Google Scripts para cubrir las necesidades de visualización, asegurándonos de que los datos recopilados por el Milken Institute no se vieran afectados. También tuvimos que considerar cómo prefería el Milken Institute mantener los datos con sus procesos existentes, manteniéndolos abiertos al público. Terminé creando una nueva base de datos en Airtable no solo para sus datos de vacunas en evolución, sino también para sus datos de tratamientos contra el COVID-19. Fue un trabajo hecho con pasión por todo el equipo y por nuestros colaboradores del Milken Institute. Creo en la importancia de la información precisa y en la capacidad de la ciencia: crear este recurso es una inversión importante para todos nosotros.
David: Tuvimos que darle espacio a la historia para que cambiara y creciera con el tiempo. Había poco más de 100 vacunas cuando empezamos, y ahora hay 213 vacunas (y 318 tratamientos). Para que el gráfico de la jeringuilla siguiera siendo comprensible a medida que llegaban los cambios, tenía que ser un diseño y una estructura flexibles. Pronto descubrimos que muchas vacunas están simultáneamente en varias fases de desarrollo, por lo que se implementaron más cambios que pudieron reflejarse en la forma en que se introducen, almacenan y muestran los datos. Así es como funciona el flujo de datos: el equipo del Milken Institute mantiene todos los datos de vacunas y tratamientos para garantizar la precisión y la coherencia en una única fuente de verdad (Airtable). Cada vez que crean o actualizan un registro, nuestras tareas de middleware (Integromat y Google Scripts) detectan esos cambios y gestionan la traducción y el envío de esos datos al sitio en vivo. Por nuestra parte, ejecutamos automatizaciones complementarias para resumir dinámicamente los puntos de interés clave que se utilizan en la visualización.
Colaboración y validación en una historia de alto riesgo
Cas: Eric, David y Drew podían recibir actualizaciones diarias y ver prototipos rápidos, y Winston y yo podíamos aplicar comentarios en tiempo real durante las llamadas de Zoom. Recuerden que, solo un mes antes, podíamos caminar hasta los escritorios de los demás, charlar en el pasillo y tener reuniones de grupo en la sala de conferencias de nuestra oficina, pero el confinamiento cambió todo eso. Este proyecto fue nuestra primera prueba de fuego real para colaborar, diseñar y construir algo nuevo en tiempo real utilizando únicamente herramientas en línea.
Eric: Había una enorme responsabilidad de hacer las cosas bien, especialmente en los primeros días de la pandemia. La desinformación se estaba extendiendo. Las cosas se estaban politizando cada vez más. Lo que estaba en juego era enorme. La pasión es lo que hizo avanzar todo esto. Drew y el liderazgo de First Person merecen un gran reconocimiento por darse cuenta de inmediato de que esto sería útil en todo el mundo, y dedicaron enormes recursos a ello desde el principio. El Milken Institute está realizando un servicio público increíble, y estábamos encantados de poder dar vida a sus datos. Es una oportunidad fantástica la que tuvimos para unir al mundo sin fines de lucro y al privado en torno a una historia crucial y de alto riesgo.
"Nuestras analíticas mostraron que más del 50% de los espectadores estaban en dispositivos móviles. Esto nos obligó a apostar fuerte por la experiencia móvil. Con Webflow, añadir capacidad de respuesta al sitio fue pan comido, y pudimos crear una experiencia bastante comparable en móviles en tiempo récord".
— Winston Struye
Esther Krofah (directora ejecutiva, FasterCures): El COVID-19 cambió las reglas del juego para todos los sectores de la sociedad, y una cosa ha sido cierta desde el primer día de la pandemia: los responsables políticos, los investigadores biomédicos, los medios de comunicación y el público han necesitado desesperadamente información clara, concisa y objetiva sobre el alcance de esta crisis. Fundamentalmente, han buscado orientación sobre las vacunas y los tratamientos que están en proceso como una forma de ayudar a informar sus enfoques sobre el virus en todos los sectores de la sociedad.
En FasterCures, un centro del Milken Institute, respondimos a esta necesidad al principio de la pandemia con el rastreador de vacunas y tratamientos más completo disponible hoy en día. Lo que empezó como una simple hoja de cálculo evolucionó hacia una visualización de datos interactiva y multifacética en colaboración con First Person. Con su apoyo, el Instituto añadió información sobre el proceso de desarrollo de vacunas, un glosario de términos y una forma más intuitiva de navegar por la información. Y ayudó a hacer accesibles datos complejos a audiencias no científicas que están igualmente preocupadas por la búsqueda de una cura.
Winston: Me sorprendió mucho la cantidad de personas que interactuaron con el rastreador de vacunas desde su teléfono. Habría pensado que la gente recurriría a una pantalla más grande para experimentarlo. Pero nuestras analíticas mostraron que más del 50% de los espectadores estaban en móviles. Esto nos obligó a apostar fuerte por la experiencia móvil. Con Webflow, añadir capacidad de respuesta al sitio fue pan comido, y pudimos crear una experiencia bastante comparable en móviles en tiempo récord. Por último, ha sido muy emocionante ver a investigadores, científicos y periodistas referenciar y enlazar nuestra visualización. Valida todo el duro trabajo de nuestro equipo.
* * *
Algunas partes de estos relatos han sido editadas y condensadas para mayor claridad.
