Webdoc “Bugarach”: ‘Making of’ del documental interactivo gamificado

A principios del mes de marzo estrenamos “Bugarach”, un webdoc coproducido por el Lab de RTVE, Nanouk Films e Interactius, y desarrollado con la plataforma de vídeo interactivo PlayFilm

Ruben Mir Ugolini
Blog de Interactius UX
6 min readApr 27, 2017

--

Bugarach: cómo sobrevivir al apocalipsis

Hace un mes estrenamos “Bugarach: cómo sobrevivir al apocalipsis”, un webdoc coproducido por el Lab de RTVE, Nanouk Films e Interactius, y desarrollado con la plataforma de vídeo interactivo PlayFilm.

En él encontramos un documental interactivo gamificado, es decir, una construcción audiovisual que muestra las historias de unos personajes reales, y que el usuario tiene que ir descubriendo cumpliendo unos objetivos para saltar de zona hasta llegar al final. Dicho de otro modo, es como un videojuego de plataformas, pero con contenido documental.

Con todo, la versión interactiva del documental lineal “Bugarach” fue un proyecto que arrancó en agosto de 2016, con la idea de crear un universo transmedia entre el documental, el webdoc, y un libro, además de su banda sonora y galería fotográfica. Su director, Sergi Cameron, y Arnau Gifreu, contactaron con Interactius para definir y desarrollar el documental interactivo, trabajando en conjunto con el diseñador Miquel Matas, que se encargó de la parte gráfica. El Lab de RTVE se encargó de la validación y tests con usuarios, que permitieron redefinir algunos elementos de la narración interactiva.

Tras la colaboración de Interactius en la definición y diseño del interactivo, elegimos PlayFilm para su desarrollo final, ya que nos permitía implementar un sistema complejo de vídeos interconectados y elementos de gamificación en un modo ágil, además de poder exportar todo en código HTML5, estándar de la web actual. Y desde PlayFilm cooperaron también su director de interacción, Álex March, y el diseñador de vídeo interactivo Andreu Signes. El propio Álex March ha escrito sobre el webdoc “Bugarach: cómo sobrevivir al apocalipsis”, reconociéndolo como el interactivo del mes de marzo de PlayFilm.

Del mapa de contenidos a los wireframes: cómo definir una interfaz interactiva

En un artículo de septiembre de 2016, titulado “Cómo producir un vídeo interactivo para tu publico”, relaté una pequeña aproximación a la metodología de Diseño Centrado en el Usuario (DCU) para profesionales del campo audiovisual, “marketeros”, diseñadores y programadores interesados en desarrollar narrativas interactivas.

Pues bien, justo en ese momento nos encontrábamos acompañando a Arnau Gifreu y Sergi Cameron en la definición del webdoc Bugarach, procurando establecer una documentación útil que permitiera a las posteriores etapas de diseño y desarrollo trabajar de manera ágil. Es decir, creamos una serie de elementos de baja fidelidad (de guerrilla) que servirían de guión para cada uno de los aspectos del interactivo:

1. Mapa de contenidos: estructuración jerárquica, tipo árbol, de las zonas y vídeos que contendría el webdoc. Esta misma arquitectura de la información, típica de entornos web, la replicaríamos en el directorio de recursos y, posteriormente, en el servidor.

Mapa de contenidos, by Arnau Gifreu

2. Despliegue de contenidos: he aquí el guión. En él, el director Sergi Cameron desarrolló todos los elementos que aparecerían en el interactivo, de la a a la z. Básicamente, consiste en una tabla (tipo hoja de cálculo) en el que se desarrolla horizontalmente el Mapa de contenidos, describiendo todos los elementos que aparecen en él.

3. Workflow: caminos que recorre el usuario según las decisiones que toma. Aunque normalmente se representa con un diagrama, en el caso que vemos en el lateral se representó tipo wireframe para comprender mejor qué ocurría cuando el usuario fallaba o acertaba la pregunta de una zona.

Wokflow Acierto/Fallo, by Ruben Mir

4. Wireframe: tras la arquitectura de la información, el prototipaje. Álex March y Andreu Signes, de PlayFilm, nos ayudaron a estructurar visualmente la información que queríamos mostrar en el webdoc, y tras valorar conmigo todas las opciones que nos daba la herramienta PlayFilm (estructura por capas: vídeo-grafismos-menú), nos mandaron esta propuesta de wireframe tipo blueprint.

Bugarach - Blueprint
Wireframes en Blueprint, by PlayFilm

De los vídeos y grafismos al desarrollo y tests con usuarios: cómo diseñar e implementar un documental interactivo

Bugarach-Menú
Slide el Mago, protagonista del menú de la Zona 2, “La plaza del pueblo”

Tras la definición del webdoc, entraron en juego Marc Roca, editando los vídeos desde Nanouk Films, y Miquel Matas, a los mandos de la dirección de arte. Por delante quedaban unos meses en los que el ensayo-error se implantaron como metodología de trabajo: ése es el precio de la innovación en comunicación.

La claves para su resolución fueron:

  1. Vídeos: un magnífico guión de Sergi Cameron, desmenuzando en clips de corta duración una narrativa inmensa como la de Bugarach, y la edición de Marc Roca, permitieron contar con más de 100 vídeos que pueden ser consumidos en…¡15 minutos! Claro está: para ello el usuario tiene que encontrar la ruta más corta, algo que se antoja difícil. ¿O no?
  2. Arte: la parte gráfica, toda ella en SVG (el formato idóneo para no perder calidad ante ninguna pantalla del entorno web), resultó uno de los pesos pesados del proyecto. Miquel Matas diseñó más de 500 elementos gráficos que se superponen a los vídeos: botones, carteles, premios, menús, contador de tiempo (¡hecho con sprite!), y demás. Sin duda, no existirá narrativa interactiva sin elementos gráficos que enlacen las historias que contiene.
  3. Implementación: aquí entra en juego la magia de PlayFilm. Lo que supondrían meses de trabajo de desarrollo, el software de PlayFilm (tipo SaaS, en la nube) me permitió implementar vídeos y elementos gráficos con una velocidad pasmosa. Todo ello, con el objetivo de editar la interacción entre elementos: desde la relación entre vídeos, a los diferentes caminos que se trazan según la decisión del usuario. Una estructura jerárquica para cada zona, que el usuario percibirá como si estuviera en red: cada decisión un camino, cada persona una percepción de la historia.
  4. Tests con usuarios: una vez finalizada la primera versión del interactivo, el Lab de RTVE realizó la tarea que le da sentido a la metodología DCU, que se basa en la experiencia de usuario. Realizó diferentes tests con usuarios para detectar dónde acertaba y dónde fallaba el interactivo. Los insights recibidos resultaron claves para redefinir la jugabilidad del webdoc, entre otros aspectos. Al final, la versión que encontrarás del webdoc Bugarach cobra su último sentido en cuán intuitivo y cuanto satisfaga tu experiencia de uso. Algo que en Interactius procuramos anteponer a cualquier proyecto que realicemos.

El resultado: cómo navegar por un documental interactivo gamificado

Y así fue Making of” del webdoc: un juego documental en el que deberás llegar a la cima de Bugarach superando 7 zonas, entrevistando personajes para resolver cada uno de sus enigmas, adquiriendo objetos por el camino que determinarán tu supervivencia al apocalipsis…¡Nos vemos tras el fin del mundo! ¡A jugar!

Jugar a Bugarach: cómo sobrevivir al apocalipsis

Elige una Persona
Entrevístala…
¡Resuelve la Zona!

--

--

Ruben Mir Ugolini
Blog de Interactius UX

Periodista Interactivo y Transmedia navegando por el universo UX. Viajando entre la infinidad de rumbos y la eternidad del tiempo. Sin límites ni fronteras.