Swissquote remportait le Cube Technologie lors de la 9^ème édition du Meilleur du Web ayant pris place mercredi 27 novembre 2019. La plateforme spécialisée dans la finance digitale a créé une page web promotionnelle immersive et dynamique qui reprend l’esprit du film de leur dernière campagne « Challenge the Code », et cela en 3 semaines seulement ! Un challenge technique et esthétique relevé avec brio.

MEILLEURDUWEB

Du concept vidéo à l’expérience numérique

Chez Swissquote, l’équipe prépare une nouvelle campagne de branding nommée « Challenge the Code »l. Elle illustre un état d’esprit qui remet en question les conventions au sein du paysage bancaire suisse. Ce nouveau film de marque, réalisé par l’agence genevoise Cavalcade, présente la particularité d’avoir été tourné en un unique plan séquence. Dans cette continuité, la plateforme financière a décidé de construire une courte expérience en ligne sous la forme d’un site web. La particularité de ce site ? Il a été imaginé à partir de zéro, de la conception au code. 

Dans la Catégorie Technologie, le jury a apprécié la qualité technique, la performance ainsi que la sécurité et la réalisation des projets digitaux. Dans le cas de « Challenge the Code », le langage HTML et les librairies Javascript de la vidéo explosaient le temps de chargement de la page et compromettaient la fluidité des animations. « Pour résoudre ce problème, on a dû s’adapter : il a fallu restreindre l’utilisation de la vidéo et se résoudre à coder et designer toutes les animations depuis zéro » explique José Carlos Rosa, responsable marketing chez Swissquote. Un travail de titan qui a été exécuté en trois semaines seulement.

MEILLEURDUWEB

MEILLEURDUWEB

Swissquote, pas née de la dernière pluie

En 1990, Marc Bürki et Paolo Buzzi ont fondé Marvel Communications SA, une entreprise spécialisée dans les logiciels et les applications web dédiés à la finance. Cette entreprise a ouvert la voie à Swissquote, devenue en 1996 la première plateforme financière offrant un accès gratuit aux cours de tous les titres négociés sur la Bourse suisse. Depuis 23 ans, l’agence fait preuve de curiosité et de créativité afin de rendre le monde de la finance plus compréhensible et plus accessible.

Le projet « Challenge the Code » est un exemple parlant d’inventivité : « Nous nous sommes attelés à suivre les idées de mouvements et de transitions de la vidéo tout en gardant la fluidité afin d’en garantir le dynamisme, que ce soit sur un ordinateur, smartphone ou tablette », précise José Carlos Rosa. « Ce projet était novateur au niveau du design, car il mimait littéralement les différents effets des séquences du film ». Une expérience visuelle douce et immersive qui a séduit non seulement le Jury, mais également le public de cette 9^ème édition !

MEILLEURDUWEB

Objectif :  fixer la barre toujours plus haut 

Lors de cette édition 2019, l’agence Swissquote est repartie avec deux Cubes sous le bras : le premier grâce au film de Cavalcade dans la Catégorie Vidéo, et le second grâce à leur site web dans la Catégorie Technologie. « La vidéo a été déclinée sur la page web et ce mandat rempli en trois semaines démontre une bonne collaboration entre plusieurs équipes. Notre travail est donc doublement reconnu ! » se réjouit Jan de Schepper, Publicitaire de l’année 2019 et Chief Sales and Marketing Officer chez Swissquote.

Pour les 10 ans du Meilleur du Web, Swissquote se dit très motivée : « Le prix du Meilleur du Web vient donner une crédibilité à l’agence créative interne et met en valeur la nécessité d’une collaboration accrue avec l’agence externe. Cet effort commun entre les deux pendants créatifs d’une compagnie devrait servir de précédent pour d’autres équipes. Cette réussite nous a donné encore plus envie de revenir l’année prochaine avec des projets plus forts et plus ambitieux ! »

MEILLEURDUWEB

MEILLEURDUWEB

Retrouvez ci-dessous l’interview complet :

En quelques mots, quel était le brief du projet ?

Le brief du projet était simple, mais ambitieux : on attendait de l’équipe créative une page web promotionnelle, immersive et dynamique, qui reprendrait l’esprit du film de notre dernière campagne « Challenge the Code ». Il fallait réussir à créer une expérience captivante pour l’utilisateur, tout en respectant les plus hauts standards du web et la performance de chargement des navigateurs.

Combien de supports ont été utilisés ?

Nous avons utilisé la vidéo et une page responsive HTML.

En tout, combien de temps avez-vous eu entre le brief et la délivrance du projet ?

3 semaines. C’était très court, pour ne pas dire un record pour nous, connaissant l’ambition et la complexité du projet. Dès la validation du concept jusqu’à la mise en ligne, nous avons dû nous battre et travailler sans relâche. On était épuisés mais heureusement très satisfaits du résultat.

Avez-vous vécu des situations cocasses durant la phase de réalisation du projet ? Avez-vous une anecdote particulière à nous raconter ?

Lors de l’annonce du délai à l’équipe, nous étions réunis dans une salle en urgence pour discuter du projet et avions conclu que développeur et designer devaient se synchroniser non seulement au niveau de leur emploi du temps, mais aussi de leur respiration, sommeil, repas, etc… comme une sorte de mariage symbiotique.

Quelles ont été les particularités techniques ou stratégiques pour ce projet ? En quoi est-il novateur ?

Le langage HTML et les librairies Javascript existantes explosaient les temps de chargement et compromettaient la fluidité des animations. Pour résoudre ce problème, on a dû s’adapter : il a fallu restreindre l’utilisation de la vidéo et se résoudre à coder et designer toutes les animations depuis zéro.

Ce projet était novateur au niveau du design, car il mimait littéralement les différents effets des séquences du film. Le but principal de ce projet étant « d’aplatir » la vidéo promotionnelle Challenge The Code sur une page web, il nous a fallu en reproduire le dynamisme.

Nous nous sommes attelés à suivre les idées de mouvements et de transitions de la vidéo tout en gardant la fluidité afin d’en garantir le dynamisme, que ce soit sur un ordinateur, smartphone ou tablette.

Ce projet innove principalement sur deux aspects : ​le premier est la manière d’intégrer des séquences animées par le défilement de la page. Utiliser une simple vidéo n’est dans ce cas pas possible pour des problèmes de fluidité. La solution la plus efficace a été de dessiner chaque image l’une après l’autre en fonction de la position de l’utilisateur sur la page.

Le deuxième aspect innovant se trouve dans le zoom dans le texte dans le dernier tiers de la page. Il est ici question d’un texte dans lequel l’utilisateur est plongé grâce à un effet de zoom sur une lettre, puis la lettre disparaît pour laisser voir la fin de la page. La solution ici a été de dessiner le texte sur un canvas, puis d’augmenter sa taille en fonction de la position de l’utilisateur sur la page. La transparence est ajoutée dans un deuxième temps grâce à l’ajout en « négatif » de la lettre que nous faisons disparaître, et ceci de manière progressive. Lorsque la partie située en dessous du texte est suffisamment visible, les possibilités d’interaction avec le texte sont supprimées et l’utilisateur peut donc continuer sur la fin de la page.

Aviez-vous carte blanche pour l’idée de base du projet, ou a-t-il fallu composer ?

Nous sommes une agence interne : ce qui fait de nous nos propres clients. Partis de zéro, nous avons dû tout construire, sans compromis au niveau de la qualité du rendu, nous exposant ainsi à pas mal de problématiques inattendues. Le défi résidait surtout à trouver des solutions satisfaisantes et réalisables dans un laps de temps très court, avec le risque de voir le projet s’enliser dans une complexité technique.

Globalement, qu’avez-vous pensé des autres projets présentés ?

Au fond de nous, nous savions que notre projet avait du potentiel car on avait des échos positifs. Nous avions notamment reçu une mention « Honors » lors d’un concours au niveau international. Mais lorsque nous avons vu la qualité des projets concurrents, on s’est même demandé si on allait être shortlistés. Le niveau était très élevé, autant du point de vue créatif que technique. Je profite d’ailleurs pour féliciter les autres participants.

En quoi recevoir ce prix donne de la valeur ajoutée à votre agence ?

Pour nous en particulier, le prix du Meilleur du Web vient donner surtout une crédibilité à l’agence créative interne et met en valeur la nécessité d’une collaboration accrue avec l’agence externe. Cet effort commun entre les deux pendants créatifs d’une compagnie devrait à notre avis servir de précédent pour d’autres équipes. Cette réussite nous a donné encore plus envie de revenir l’année prochaine avec des projets plus forts et plus ambitieux.

MEILLEURDUWEB

Visualisez le film « Challenge the Code » de Swissquote

Et consultez la page dédiée sur le site Internet Swissquote

MEILLEURDUWEB

Vous cherchez vos photos ? Toutes les photographies officielles de la soirée du Meilleur du Web sont à télécharger via ce lien.

Nous adressons également nos remerciements à notre photographe Christine Caron, qui vous immortalise lors de tous les prix « Le Meilleur de ».

Rendez-vous en 2020 !