En esta casa llevamos años trabajando con Médicos Sin Fronteras. En todo este tiempo, hemos tenido la oportunidad de crear soluciones a medida para las necesidades de una de las organizaciones más comprometidas con los derechos de las personas. Hoy te contamos de la última colaboración y cómo hemos resuelto los retos que se nos planteaban.
El reto: integrar al usuario en la iniciativa a través del vídeo
Nuestro último trabajo ha sido la creación de la web Nuestra Línea Roja, la web de una de las campañas de participación de Médicos Sin Fronteras.
La intención de MSF es comunicar que existe una línea roja que no se puede atravesar. Lo dicen bien claro: “somos Médicos Sin Fronteras, pero tenemos una, la que protege a la población civil y la misión médica“. Esta línea roja la formamos todas las personas que apoyamos a la organización.
Se trata de una campaña de recogida de firmas con la intención de ir más allá de firmar o rellenar un formulario. Médicos Sin Fronteras quiere que la persona que firma se sienta que forma parte de su línea roja y lo compartan.
Una experiencia de usuario con vídeo generado en tiempo real
Cuando entras en la web de Nuestra Línea Roja, te encuentras con el vídeo de presentación de la campaña en la parte superior de la página, que marca el tono emocional de la experiencia.
Bajo el vídeo, se te presenta un texto explicativo que te sitúa en el contexto de la campaña, así como el manifiesto con la llamada a la acción que te invita a unirte a esa petición.
El siguiente paso es rellenar el formulario para firmar la petición. Como es de esperar vas a parar a la página de agradecimiento (thank you page si quieres utilizar palabras técnicas en inglés).
Aquí comienza la interacción con vídeo generado en tiempo real. Tú formas parte de esta línea roja con otras muchas personas. El vídeo hace zoom hacia la línea roja y voces que la forman muchas personas con reales, con nombres y apellidos. Hay un espacio en blanco en el que aparece tu nombre y la inicial del apellido, porque la privacidad es otra de las líneas rojas.
Y si formas parte de la línea roja de MSF, quieres comunicarlo a tus amigos y conocidos. Por eso están los botones compartir en las redes sociales o WhatsApp con un enlace personalizado.
Cuando tus amigos accedan a la página de inicio con este enlace, el vídeo de presentación se modifica en tiempo real para incorporar la secuencia de la página de agradecimiento al principio del vídeo de presentación.
El objetivo es hacer que sea un ciclo sin fin y que muchas personas más se unan a la línea roja de Médicos Sin Fronteras.
Receta para construir storytelling interactivo: las tecnologías
Cuando empezamos a plantear el proyecto disponíamos de varios ingredientes:
- La web de Médicos Sin Fronteras que está construida sobre el CMS Drupal.
- Vídeos estáticos en YouTube.
- Animaciones diseñadas con Adobe After Effects.
El elemento crítico además del trabajo en equipo de MSF y DeMomentSomTres ha sido JavaScript y especialmente la librería p5.js.
La librería p5.js es una librería de JavaScript para crear gráficos y animaciones. Esta librería fue fundamental para la personalización de la web, lo que permite que los usuarios interactuaran con elementos visuales de una forma diferente, añadiendo capas que permiten la personalización que hace que cada visita sea única. P5.js nos ha permitido ejecutar en la web las animaciones creadas en After Effects personalizando su contenido.
Los desarrollos en JavaScript han terminado de atarlo todo y hacerlo más ligero: la captura de datos del formulario, el código de p5.js, las API de YouTube y la personalización de los enlaces por compartir.
Todos tenemos una línea roja
Con la nueva web de Nuestra Línea Roja, no solo hemos creado una plataforma digital, sino que hemos contribuido a una causa real. El marketing digital debe estar al servicio de las personas y en este proyecto hemos logrado combinar tecnología, implicación personal y apelar a las emociones para crear una experiencia diferente para cada usuario.
Esta web es una muestra de cómo, con la aplicación de las herramientas adecuadas, podemos crear webs que ayuden a las personas a volcarse en las causas justas y conectar con ellas.
Si necesitas crear experiencias digitales, interacciones en tiempo real o quieres que tu web quede en la memoria de los usuarios, ¡ponte en contacto con nosotros y empezamos a trabajar!
