Tweener-Animation-App-Lottie

Contexte

Tweener est une application mobile de faux paris sportifs sur le tennis, alliant compétition amicale et gamification sans enjeu d’argent.
L’équipe nous a sollicités avec Benjamin Ulmet pour animer en l’ensemble des bonus interactifs, des micro-interactions UI et l’animation du logo, afin d’apporter rythme, fluidité et cohérence visuelle à l’expérience utilisateur.

Bonus interactif

Nous avons eu le plaisir d’animer les designs imaginés par la talentueuse Marion Pollet, à l’origine du redesign complet de l’application.
L’objectif : créer des animations à la fois dynamiques et légères, capables d’apporter du rythme sans alourdir l’expérience utilisateur.
Pour garantir une intégration fluide sur mobile, toutes les animations ont été exportées en Lottie.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Les interations ui

Nous avons travaillé plusieurs itérations pour rendre les interactions avec l’application fluides et agréables. Chaque animation est récompensante, renforçant l’aspect gamifié : inviter un ami, gagner ses premières pièces ou compléter sa team.

Logo Animation

Nous avons créé une animation du logo destinée à accueillir l’utilisateur sur la première page de l’application tout en servant de loader lors des temps de chargement.Deux itérations ont été réalisées, et pour tester son comportement in-app, nous avons simulé l’expérience de la première arrivée de l’utilisateur.

Outils utilisés

Tweener : Rendre l'application vivante

Tweener : Rendre
l'application vivante