Contactez-nous
Une question ? N’hésitez pas à nous écrire !
Problématiques
Créer une expérience fluide et mémorable
Transmettre l'esprit Wolfox au travers du parcours
Créer un produit scalable et réutilisable
Contexte
Ce projet a été réalisé en interne pour expérimenter un nouveau type de produit et exprimer librement notre créativité au travers d'animations Lottie.
Génèse du projet
L'idée de Wolfox Playground vient d'une discussion entre collègues : "Si tu étais un composant tu serais le tooltip, tu as toujours des précisions à apporter". On s'est mis en tête de proposer un test de personnalité qui parle aux designers d'interfaces. C'est la naissance du projet Wolfox Playground !
Cependant notre envie de créer des tests de ce genre ne serait pas assouvie avec un seul test, et on a déjà plein d’idées. Il nous fallait donc concevoir ce produit avec une vision plus large et modulable. Le produit n’est plus seulement un test de personnalité “Quel composant es-tu ?” mais un support de création de tests.
Création collaborative du contenu
Pour créer le contenu du test, nous avons organisé un atelier avec toute l’agence pour confronter nos idées de résultats dans un premier temps, puis de questions et réponses dans un second temps. L’idée était de proposer un composant en le décrivant psychologiquement. Par exemple “Le Tooltip c’est la personne qui vient toujours ajouter un détail à une discussion”. Nous avons ensuite choisi les 6 meilleures propositions avant de définir les réponses qui correspondaient à chaque composant.
“Un design system pour les designer tous”
Pour assurer une liberté dans la direction artistique de chaque test nous avons mis en place un (petit) design system qui permet de décliner la couleur de l’ensemble des composants en quelques secondes. Cette homogénéité permet de plonger l’utilisateur dans un parcours identifiable.
Une expérience utilisateur fluide
Grâce à l’utilisation de Vue.js et d’un long et minutieux travail d’animation, les transitions entre les questions sont aussi rapides qu’agréables. Nous avons également porté un intérêt tout particulier aux boutons auxquels on a donné un look & feel arcade !
Pour arriver à ce rendu nous avons beaucoup travaillé les transitions, ce qui a aussi représenté un challenge pour exporter ça en code et avoir un échange simplifié avec le développeur. Nous avons établi un ensemble de règles algorithmiques pour adapter la durée des transitions au nombre de réponses possibles et au format de l’appareil.
Illustrations et animations Lottie
Nous avons créé des illustrations animées en utilisant la technologie Lottie pour illustrer chaque question. Il a donc fallu composer avec les contraintes imposées par ce type d'animation. Lottie propose un outil dédié à la création d’animation que nous avons utilisée pour certaines animations simples. Cependant la majeure partie des animations a été réalisée sur Adobe After Effects par notre équipe de UI Designers.
Un travail d’équipe
Ce projet a été mené par Anthony Inciarte, Arthur Corcy, Eva Vermot-Desroches et Milo Sabard.
