Emotic

Susciter l’émotion

Une relation de confiance et des échanges innovants sont les éléments essentiels à la réussite d’un projet. En témoigne la collaboration avec nos amis d’Emotic, créateurs d’interfaces innovantes basé à Nantes, dont nous sommes partenaires dans l’aventure du Hangar à Paname.

C’est tout naturellement qu’Emotic s’est tourné vers l’Agence LunaWeb, à l’occasion de leur participation au CES (Consumer Electronics Show) 2018 de Las Vegas. En effet, ils ont souhaité co-concevoir avec nos équipes projet afin d’apporter à leur nouveau site une dimension expérientielle dans le parcours des utilisateurs, par le développement d’animations spécifiques.

Emotic le site

“Au commencement était l’émotion”

Voila plus de 10 ans qu’EMOTIC se démarque en travaillant l’expérience utilisateur au travers les émotions, les sens et ce grâce aux nouvelles technologies telles la réalité virtuelle, le multitouch, l’identification sans contact pour pousser l’information et mettre en avant des offres entreprise. Ils développent ainsi des applications mises en place sur des matériaux spécifiques.

Dans l’objectif de refléter au plus près sa plateforme de marque, Emotic a amorcé au cours de l’année 2017 la refonte de son identité visuelle. Une direction artistique menée par l’agence nantaise The Links et, pour le site, un accompagnement full front-end par nos soins.

Emotic ancien site web

L’ancien site d’Emotic avant la refonte.

Nous avions pour mission de répondre en un temps record (moins d’un mois) à une forte attente en terme d’animation, d’interactions et de fluidité dans la navigation. Le but étant de susciter l’émotion du visiteur, à l’image des activités d’Emotic consistant à créer des interfaces éveillant l’étonnement et l’émerveillement.

Pour ce faire, Emotic nous a fourni les maquettes avec les visuels ainsi que les contenus. De même, ils nous ont exprimé les souhaits d’animations qu’ils voulaient mettre en place, à l’exemple de la technologie PJAX utilisée sur le site de Pentagram, ou bien encore sur celui de The Links.

À partir de toutes ces données, Gauthier, notre développeur front-end, a pu s’atteler à la conception de prototypes.

Performance visuelle

L’objectif étant de garantir un site attrayant et moderne, nous avons fait le choix dès le départ de réaliser un site en mode progressive web app : pas de rechargement de pages et des transitions visuelles pour rendre le parcours de l’utilisateur le plus intuitif et fluide possible.

Une courte phase de prototypage nous a permis de tester quelques premiers principes d’animations et de transitions de pages, puis nous a conduit en outre, à définir les solutions les plus adaptées.

Afin de mettre en place notamment les animations des pages spécifiées par Emotic, nous avons opté pour le plugin jQuery SmoothState plutôt que la solution PJAX utilisée dans les exemples fournis, celle-ci s’étant révélée moins flexible à l’essai dans le cadre de notre stack technique Ruby.

Utilisation de la technologie SmoothState qui permet de cliquer en bas de page sur la prochaine qui va se charger et défiler de manière fluide, l’url prenant en compte ce changement de page.

Le projet comptait également un défi technique. En l’occurrence, Emotic souhaitait une page d’accueil portée par plusieurs vidéos se juxtaposant les unes sur les autres en pleine page, chacune d’entre elles permettant d’accéder aux différentes sections du site.

Dès lors, il s’agissait de mettre en place un effet de séparation en deux pour faire apparaître les vidéos les unes après les autres par l’action du scroll.

Phase d’idéation : effet de séparation en deux entre les vidéos juxtaposées, chacune ouvrant sur une page du site.

Gauthier, notre développeur, nous en dit plus à ce sujet :

Nous avons choisi d’appliquer cette animation sur une image de fallback, et non pas directement sur la vidéo, car dupliquer une vidéo et y appliquer une telle animation aurait eu un énorme impact sur les performances. Trouver ce juste équilibre entre performance, fluidité et qualité visuelle a été un réel défi sur l’ensemble du site, tout au long du projet.

De par ces paramètres incluant le mode progressive web app, les vidéos et les visuels, cela impliquait de veiller aux performances du site, d’autant que la fluidité était ici un critère primordial afin d’offrir la meilleure navigation possible aux utilisateurs. Il a donc fallu techniquement trouver des solutions pour mettre en place tous ces éléments de manière efficace et qualitative, tout en respectant le délai court imparti.

La trame de points présente dans le menu se modifie au roll-over.

Bienveillance et efficacité

Un projet mené tambour battant, rythmé par des échanges réguliers et constructifs, lesquels ont permis de collaborer ensemble sainement et efficacement.

Emotic a ainsi pu suivre l’évolution du projet grâce aux points hebdomadaires qui étaient réalisés à distance entre Rennes, Nantes et Mulhouse (sous 20 cm de neige pour Gauthier notre développeur alsacien).

Aussi, comme le souligne Gauthier :

Les collaborateurs d’Emotic ont, durant tout le projet, été particulièrement à l’écoute, conscients à la fois des délais et des contraintes techniques, bienveillants et force de proposition en ce sens.

Dans ce même esprit de partage de savoir-faire, nous avons apporté notre expertise UX et répondu à une demande de conseils d’un point de vue ergonomie, parcours utilisateurs, référencement ou encore bonnes pratiques.

À ce titre, nos collègues d’Emotic n’ont pas hésité à repenser leurs choix, notamment quant à la présentation de leurs offres Workshop Expérience Utilisateur, pour laquelle notre expertise web et leur expertise métier ont permis de mettre en lumière des difficultés de compréhension de l’information et de les corriger.

Le résultat

À l’arrivée, une accroche visuelle dès les premières secondes de visite. Les animations apportent un dynamisme et embarquent de suite l’utilisateur dans l’univers d’Emotic, mettant en avant un site vivant et une approche humaine.

 

In fine, pari tenu pour ce projet collégial qui a été livré dans les temps. Comme souhaité, Emotic a pu présenter son nouveau site au CES qui avait lieu début janvier.

En somme, un projet inspirant comme on les aime. Nous en profitons pour remercier l’équipe d’Emotic pour l’entière confiance qu’elle nous a accordé.

Article classé dans :

Agence LunaWeb,
concepteurs d’expériences web.

Envie d’en savoir plus ? Vous pouvez consulter le site de notre agence, faire un tour sur nos satellites et vous abonner à notre newsletter.