For years, we have been working with Doctors Without Borders. Throughout this time, we have had the opportunity to create tailored solutions for the needs of one of the organizations most committed to human rights. Today, we will tell you about our latest collaboration and how we addressed the challenges presented to us.
The Challenge: Integrating the User into the Initiative through Video
Our latest work has been the creation of the Nuestra Línea Roja website, the site for one of Doctors Without Borders’ participation campaigns.
MSF’s intention is to communicate that there is a red line that cannot be crossed. They state it clearly:
This is a signature collection campaign with the intention of going beyond simply signing or filling out a form. Doctors Without Borders wants the signatory to feel that they are part of their red line and to share it.
A User Experience with Real-Time Generated Video
When you enter the Nuestra Línea Roja website, you will find the campaign’s introductory video at the top of the page, which sets the emotional tone for the experience.
Below the video, an explanatory text is presented to you, placing you in the campaign’s context, as well as the manifesto with a call to action inviting you to join this petition.
The next step is to fill out the form to sign the petition. As expected, you will land on the thank you page (thank you page if you want to use less common technical terms).
Here begins the interaction with real-time generated video. You are part of this red line along with many other people. The video zooms in on the red line, and you see that it is formed by many real people, with their full names. There is a blank space where your name and the initial of your surname appear, because privacy is another red line.
And if you are part of MSF’s red line, you will want to communicate it to your friends and acquaintances. That’s why there are share buttons for social media or WhatsApp with a personalized link.
When your friends access the homepage with this link, the introductory video is modified in real-time to incorporate the thank you page sequence at the beginning of the introductory video.
The goal is to make it an endless cycle and for many more people to join Doctors Without Borders’ red line.
Recipe for Building Interactive Storytelling: the Technologies
When we started planning the project, we had several ingredients:
- The Doctors Without Borders website, which is built on the Drupal CMS.
- Static videos on YouTube.
- Animations designed with Adobe After Effects.
The critical element, in addition to the teamwork of MSF and DeMomentSomTres, has been JavaScript and especially the p5.js library.
The p5.js library is a JavaScript library for creating graphics and animations. This library was fundamental for website customization, allowing users to interact with visual elements in a different way, adding layers that enable personalization, making each visit unique. P5.js has allowed us to execute the animations created in After Effects on the website, customizing their content.
The JavaScript developments have tied everything together and refined it: the form data capture, the p5.js code, the YouTube APIs, and the customization of sharing links.
We all Have a Red Line
With the new Nuestra Línea Roja website, we have not only created a digital platform, but we have also contributed to a real cause. Digital marketing must serve people, and in this project, we have managed to combine technology, personal involvement, and emotional appeal to create a unique experience for each user.
This website is an example of how, with the application of the right tools, we can create websites that help people dedicate themselves to just causes and connect with them.
If you need to create digital experiences, real-time interactions, or want your website to be memorable for users, contact us and let’s start working!
