Des animations web au service de la clarté, de la fluidité et de la projection
Contexte
En 2022, Qonto engage un revamp complet de son identité de marque.
Un chantier structurant, mené à grande échelle, qui concerne autant le branding que l’expérience digitale sur qonto.com.
Dans ce cadre, le studio a été sollicité pour intervenir sur le redesign et l’animation des pages stratégiques du site : page d’accueil, pages offres, pages d’entrées clients, sections éditoriales clés.
L’enjeu n’était pas simplement esthétique.
Il s’agissait de faire évoluer un site très “figé” vers une expérience plus fluide, plus vivante et plus engageante, sans compromettre les performances ni la lisibilité.
L’enjeu
Rendre l’expérience plus interactive, sans alourdir le web
Le défi principal était clair :
Introduire de l’animation là où elle apporte de la valeur,
pas là où elle distrait.
Dans un contexte B2B exigeant, avec une audience européenne large, les animations devaient :
- renforcer la compréhension des offres et des fonctionnalités,
- accompagner la prise de décision,
- rester parfaitement optimisées pour le web.
C’est dans cette logique que le choix s’est porté sur des animations vectorielles Lottie, pensées dès le départ pour :
- la performance,
- la fluidité,
- l’adaptabilité multi-devices et multi-locales.
👉 Un enjeu qui s’inscrit pleinement dans notre approche des animations destinées au web, où la technique sert l’expérience, et non l’inverse.
Collaboration avec les équipes Qonto
Le studio a travaillé en collaboration directe avec les équipes produit et growth engineer de Qonto.
Le studio a conçu des concepts d’animation originaux, entièrement pensés pour :
- le web,
- les parcours utilisateurs,
- et les objectifs business.
Cette proximité avec les équipes produit a permis d’anticiper les contraintes techniques et fonctionnelles, et d’intégrer l’animation comme un véritable composant de l’expérience, et non comme un ajout décoratif.
Typologies d’animations mises en place
Les animations réalisées répondaient à des objectifs complémentaires.
Animations éditoriales et décoratives
- animations de pictogrammes intégrés au contenu,
- boucles légères pour rythmer les pages,
- micro-animations au service de l’identité.
👉 Leur rôle : renforcer la cohérence visuelle et rendre la lecture plus fluide.
Animations interactives
- animations déclenchées au scroll,
- interactions à l’hover et au clic,
- transitions accompagnant la navigation.
👉 Ces animations guident l’attention et structurent le parcours.
Animations de démonstration produit
- visualisation de fonctionnalités clés,
- animations illustrant des écrans de l’application,
- supports à la compréhension et à la décision.
👉 Ici, l’animation devient un outil pédagogique, capable de simplifier des concepts produit complexes.
Une conception pensée pour le multi‑locales
Certaines animations représentaient directement des écrans de l’application Qonto.
Elles devaient pouvoir être traduites et adaptées pour les différents marchés européens.
Cette contrainte a été intégrée dès la phase de conception, en lien étroit avec les équipes produit :
- écrans animés facilement traduisibles,
- exports adaptés aux différentes locales,
- cohérence de l’expérience quel que soit le marché.
Résultat : une expérience animée qui permet à chaque utilisateur de se projeter dans le produit, dans sa langue et son contexte.
Résultat
Les animations ont permis de :
- transformer des pages statiques en expériences plus fluides et engageantes,
- améliorer la compréhension des offres et des fonctionnalités,
- renforcer la perception de maîtrise produit et de qualité.
Le tout, sans compromis sur :
- la performance web,
- la lisibilité,
- ni la cohérence globale de l’expérience.
Ce que ce projet illustre
Ce projet Qonto illustre une conviction forte du studio :
L’animation web n’est pas un effet de style.
C’est un levier au service du produit, de la compréhension et de la décision.
Lorsqu’elle est conçue en lien étroit avec les équipes produit et growth, l’animation devient un outil stratégique pour les sites B2B à forte exigence.