Ici archive

Pour une entreprise du CAC40 présente dans 68 pays comptant 170 000 collaborateur·rice·s, nous avons créé et développé une app centralisant l’ensemble des métiers de la finance au sein de cette entreprise multinationale : pour chacun d’entre eux sont listées les offres d’emploi, compétences et formations correspondantes. Elle présente également le parcours professionnel et les évolutions de carrière au sein du groupe.

Toutefois, cette app était figée et non-administrable par les collaborateur·rice·s IT en interne. Il a donc été rapidement nécessaire de créer une seconde app – un back-office – afin qu’ils·elles puissent gérer la base de données et modifier le contenu de la première (ajouter de nouveaux métiers, compléter les compétences et formations…).

Comment avons-nous abordé et travaillé sur ce projet ? Quels en ont été les enseignements ? Éric Bauman, développeur à la Factory chez Saegus, vous raconte.

Un défi technique

Le back-office a été pensé comme une app à part entière. La base de données est commune entre les deux applications. La première application étant internationale, le back-office devait donc être pensé en plusieurs langues – nous l’avons pour l’instant développé en français et anglais, l’objectif étant d’ajouter de nouvelles langues dans le futur. Cela entraîne un défi technique : penser différemment la base de données. Pour chaque langue, nous avons créé une table distincte pour les métiers, compétences et formations.

La maquette du back-office, designée par l’équipe de la Factory, était assez complexe à développer : il y avait beaucoup d’éléments très customisés, rendant leur intégration complexe. Par exemple, les listes déroulantes ont un style par défaut qui n’est pas modifiable ; il nous a donc fallu recréer une liste déroulante à la main, ce qui prend forcément plus de temps. Ce type de problème s’est posé sur plusieurs fonctionnalités de l’application.

Dans cette application, le menu permet de naviguer parmi tous les types de données que les administrateur·rice·s peuvent ajouter, modifier ou supprimer :

  • Les univers (“universes”), qui sont des sous-domaines de la finance ;
  • Les métiers (“jobs”) ;
  • Les compétences (“skills”) ;
  • Les formations (“trainings”) ;
  • Les évolutions de carrière (“career paths”).

Par exemple, pour modifier un univers, l’utilisateur·rice arrive à partir du menu sur un écran permettant de sélectionner un univers existant ou d’en ajouter un nouveau. Dans les deux cas, un formulaire contenant tous les attributs d’un univers s’affiche, permettant de le personnaliser en modifiant chaque champ. Cette fonctionnalité est la même pour tous les types de données.

Les métiers ont pour particularité d’être reliés aux formations, compétences et profils inspirants : des onglets permettent de naviguer parmi ces attributs et de les lier au métier sélectionné.

Nous avons utilisé Angular pour le front, en framework JavaScript ; Node.js et NestJS pour le backend ; et PostgreSQL pour la base de données. L’app est hébergée sur Azure.

Une app née de la collaboration

Au sein d’un projet de cette envergure, la relation avec le client est essentielle. Nous avons organisé plusieurs ateliers pour bien comprendre les besoins (parcours utilisateur, interactions) et avoir une image d’ensemble de l’interface à créer. Dans ce cadre, le client est un véritable collaborateur du projet ; les daily meetings et méthodes agiles, permettant d’avancer par itérations, sont clés pour pouvoir échanger. C’est aussi un moment au cours duquel le client peut tester les features une à une, permettant d’ajuster l’app au fur et à mesure. Sinon, le test unitaire est une bonne pratique : les lignes de test sont enregistrées et rejouées à l’ajout de chaque nouvelle fonctionnalité, automatisant les tests. Il convient de noter que cela demande du développement supplémentaire, mais fait gagner du temps à terme.

Il est essentiel que les designers et développeur·se·s travaillent en collaboration. Pour ce projet, pendant la création de la maquette, nous avons beaucoup échangé sur la faisabilité technique du front imaginé.

Après une livraison de la première version, nous avons fait des changements mineurs sur la base du retour client. Comme nous l’avons vu, l’app est pensée pour que l’on puisse y ajouter des langues supplémentaires à l’avenir, ce qui devra être fait par un·e développeur·se.

Conclusion

La gestion de projet et celle d’équipe se sont rencontrées au cours de ce projet. Une mission de cette envergure demande de la rigueur et du cadrage, ainsi qu’une collaboration régulière entre toutes les parties prenantes (client, métiers, designers). Nous sommes fier·ère·s de ce projet qui est une belle réussite.

Vous souhaitez vous aussi être accompagné·e·s par nos équipes de la Factory ? Contactez-nous !

Rédigé par Éric Bauman, Développeur à la Factory

Le cerveau mémorise plus facilement un contenu lorsqu’il est illustré par un visuel et accompagné par du son : nous retenons 10% de ce que nous lisons, 20% de ce que nous entendons et 60% de ce que nous lisons et entendons simultanément.

Un format alliant ces deux éléments sera donc plus impactant. C’est là qu’intervient le motion design : l’art de mettre en mouvement des éléments (schémas, images, typographies, illustrations) synchronisés sur une musique, voire une voix-off. L’objectif : simplifier et illustrer une notion complexe pour faciliter la réception d’un message clé à une audience cible.

Il peut être diffusé sur tout support pouvant accueillir un format vidéo : réseaux sociaux, YouTube, télévision, cinéma, écran publicitaire… Il est donc particulièrement adapté pour :

  • Faire de la pédagogie : vulgariser un propos auprès du grand public ;
  • Une présentation produit : en montrant ses atouts et cas d’usage par exemple ;
  • Animer un live event : en s’appuyant sur une identité visuelle définie, les animations encadrent les différentes séquences (animer le logo, créer un carton pour les questions ou le nom de l’intervenant·e) d’une émission télévisée ou un webinaire par exemple ;
  • Brander une marque ou œuvre : on pense par exemple aux génériques de films, celui créé dans les années 1960 pour la série de films James Bond étant considéré comme le premier motion du cinéma.

Les entreprises utilisant la vidéo comme contenu marketing obtiennent un taux de clics et de conversion web étant respectivement 27% et 34% plus importants que celles qui ne l’utilisent pas (source : Vidyard). L’explication est simple : une présentation produit en motion design, plutôt qu’une image packshot, met l’accent sur l’émotion à l’appui du storytelling. Parce qu’il·elle pourra mieux se projeter dans l’utilisation du produit, le·la consommateur·rice sera plus enclin·e à passer à la phase d’achat.

Le format vidéo est aujourd’hui l’allié du référencement naturel (SEO) : par exemple, une vidéo publiée sur YouTube intégrée dans un site web générera plus de vues, les deux algorithmes travaillant ensemble pour créer de l’engagement.

Les étapes de création d’une vidéo en motion design

  • Le contexte : quel est le message clé de la vidéo ? Quelle est sa cible ? Où sera-t-elle diffusée ? Quelle est la direction artistique de la marque ? Quelle ambiance recherche-t-elle ? Une maison de luxe recherchera par exemple des transitions douces, alors qu’une marque d’art discount préférera des effets plus rapides ;
  • Le script : c’est ici que commence le storytelling. Uniquement écrit, le script définit le fil conducteur de la vidéo et les mots clés à introduire. Il est essentiel de verrouiller ici le « ton of voice » et les tournures de phrase avec les parties prenantes ;
  • Le storyboard : ou la mise en image. C’est à cette étape que le propos est illustré (animation, personnage…) en accord avec la charte graphique de la marque. Notre astuce : pour aider un client à se projeter, créez votre storyboard en haute fidélité sur Illustrator – la hiérarchisation des informations, les couleurs et les animations seront proches du rendu final ;
  • La musique de fond : le choix de musique intervient à cette étape car le tempo des animations est désormais défini ;
  • (Optionnel) La voix-off : pour trouver celle qui sera le mieux adaptée à une vidéo, enregistrez-en plusieurs aux timbres différents et testez-les ;
  • L’animation : soit la symbiose entre ce qui a été composé jusqu’ici (illustrations, musique, voix-off) ;
  • Le sous-titrage : cette étape assure l’accessibilité de la vidéo.
Exemple de storyboard

Les 5 principes du motion design

Voici quelques conseils non-exhaustifs que nous appliquons dans la création de nos vidéos :

  • Une vitesse de lecture confortable : le danger étant d’être trop rapide. À force de travailler sur une vidéo, nous finissons par en connaître le contenu par cœur. Ce n’est pas le cas du·de la spectateur·rice qui regarde la vidéo pour la première fois et essaie d’absorber le maximum d’informations. Tip : faites tester votre vidéo à différentes personnes ;
  • Choisir une typologie d’animations : à conserver tout au long de la vidéo pour créer de la linéarité et cohérence. Créez des points de repères avec des effets de répétition – par exemple, une typologie pour des questions. Choisissez des animations en accord avec la hiérarchisation des informations et évitez celles étant trop originales (par exemple, un titre apparaissant en tourbillon à l’écran) – sauf si c’est l’effet recherché ! ;
  • Pensez à l’accessibilité : en évitant les animations rapides et brusques pour les personnes épileptiques, les aplats de couleurs similaires pour les personnes daltoniennes… ;
  • Synchronisez : vos animations avec le tempo de la musique ;
  • Ne craignez pas le vide ! Favorisez un ensemble épuré et séquencez les mises en page.

Les logiciels couramment utilisés

Il existe de nombreux logiciels couramment utilisés pour les différentes étapes du motion design (Potoon, Animate…). Nous nous concentrerons sur Illustrator et After Effect, qui sont ceux que nous utilisons le plus chez Saegus.

Illustrator est particulièrement utile pour l’étape de création du storyboard. Il permet de travailler sur des formations vectorielles. Un bémol : les graphismes manquent parfois de texture, donnant un rendu un peu froid.

After Effect est un logiciel aux possibilités infinies pour la création d’animations sur-mesure. Le logiciel est régulièrement mis à jour et de nouvelles fonctionnalités sont proposées chaque année. La seule limite : votre créativité !

Un·e bon·ne motion designer saura…

  • Faire une veille pour connaître les bonnes pratiques, tendances, idées d’animations… ;
  • Comprendre et s’adapter au tone of voice d’une marque ;
  • Donner un mouvement fluide et naturel aux animations.

Les projets de motion design chez Saegus

Chez Saegus, nous travaillons principalement sur des projets d’animation de marques ou produits. En voici quelques exemples :

Hololens 2 : à travers un cas d’usage, cette vidéo montre le pain point que résout cette technologie et comment l’utiliser concrètement sur le terrain.

Accompagner l’adoption des outils de collaboration comme Office 365 : ce type de vidéo met en avant les nouveaux usages et les fonctionnalités des outils correspondants. Il est ici nécessaire de bien comprendre les besoins de chaque client et créer une vidéo qui leur est spécifique, selon leur niveau de maturité digitale.

Animer la marque Saegus : en illustrant notre positionnement, nos offres, nos événements…

Vous souhaitez être accompagnés par nos designers à la Factory ou en savoir plus ?

Rédigé par Julie Ramier, Designer à la Factory