En aquesta casa fa anys que treballem amb Metges Sense Fronteres. En tot aquest temps hem tingut l’oportunitat de crear solucions a mida per a les necessitats d’una de les organitzacions més compromeses amb els drets de les persones. Avui t’expliquem de la darrera col·laboració i com hem resolt els reptes que se’ns plantejaven.
El repte: integrar l’usuari en la iniciativa a través del vídeo
El nostre últim treball ha estat la creació de la web Nuestra Línea Roja, la web d’una de les campanyes de participació de Metges Sense Fronteres.
La intenció de MSF és comunicar que hi ha una línia vermella que no es pot travessar. Ho diuen ben clar: “som Metges Sense Fronteres, però en tenim una, la que protegeix la població civil i la missió mèdica”. Aquesta línia vermella la formem totes les persones que donem suport a l’organització.
Es tracta d’una campanya de recollida de signatures amb la intenció d’anar més enllà de signar o omplir un formulari. Metges Sense Fronteres vol que la persona que signa se senti que forma part de la seva línia vermella i ho comparteixin.
Una experiència d’usuari amb vídeo generat en temps real
Quan entres a la web de Nuestra Línea Roja, et trobes amb el vídeo de presentació de la campanya a la part superior de la pàgina, que marca el to emocional de l’experiència.
Sota el vídeo, se’t presenta un text explicatiu que et situa en el context de la campanya, així com el manifest amb la crida a l’acció que et convida a unir-te a aquesta petició.
El següent pas, és omplir el formulari per signar la petició. Com és d’esperar vas a parar a la pàgina d’agraïment (thank you page si vols fer servir paraules tècniques poc nostrades).
Aquí comença la interacció amb vídeo generat en temps real. Tu formes part d’aquesta línia vermella amb moltes altres persones. El vídeo fa zoom cap a la línia vermella i veus que la formen moltes persones amb reals, amb noms i cognoms. Hi ha un espai en blanc on apareix el teu nom i la inicial del cognom, perquè la privacitat és una altra de les línies vermelles.
I si formes part de la línia vermella de MSF, vols comunicar-ho als teus amics i coneguts. Per això hi ha els botons compartir a les xarxes socials o WhatsApp amb un enllaç personalitzat.
Quan els teus amics accedeixin a la pàgina d’inici amb aquest enllaç, el vídeo de presentació es modifica en temps real per incorporar la seqüència de la pàgina d’agraïment al començament del vídeo de presentació.
L’objectiu és fer que sigui un cicle sense fi i que moltes persones més s’uneixin a la línia vermella de Metges Sense Fronteres.
Recepta per construir storytelling interactiu: les tecnologies
Quan vam començar a plantejar el projecte disposàvem de diversos ingredients:
- La web de Metges Sense Fronteres que està construïda sobre el CMS Drupal.
- Vídeos estàtics a YouTube.
- Animacions dissenyades amb Adobe After Effects.
L’element crític a més del treball en equip de MSF i DeMomentSomTres ha estat JavaScript i especialment la llibreria p5.js.
La llibreria p5.js és una llibreria de JavaScript per crear gràfics i animacions. Aquesta llibreria va ser fonamental per a la personalització de la web, cosa que permet que els usuaris interactuessin amb elements visuals d’una manera diferent, afegint capes que permeten la personalització que fa que cada visita sigui única. P5.js ens ha permès executar a la web les animacions creades en After Effects personalitzant-ne el contingut.
Els desenvolupaments en JavaScript han acabat de lligar-ho tot i amorosir-ho: la captura de dades del formulari, el codi de p5.js, les API de YouTube i la personalització dels enllaços per compartir.
Tots tenim una línia vermella
Amb la nova web de Nuestra Línea Roja, no només hem creat una plataforma digital, sinó que hem contribuït a una causa real. El màrqueting digital ha d’estar al servei de les persones, i en aquest projecte hem aconseguit combinar tecnologia, implicació personal i apel·lar a les emocions per crear una experiència diferent per a cada usuari.
Aquesta web és una mostra de com, amb l’aplicació de les eines adequades, podem crear webs que ajudin les persones a bolcar-se en les causes justes i connectar-hi.
Si necessites crear experiències digitals, interaccions en temps real o vols que la teva web quedi a la memòria dels usuaris, posa’t en contacte amb nosaltres i comencem a treballar!
