Catégories
Astuces et Design

Étude de cas, Moooi – Une vie extraordinaire

Moooi et Build à Amsterdam comblent le vide créé par le report du Salone del Mobile de Milan avec une nouvelle expérience de marque en ligne, une vitrine inattendue et immersive de leurs nouveaux produits. Plongez dans le monde inattendu des dernières créations de Moooi où vous pouvez tout sentir, entendre et presque tout toucher!

À propos de Moooi

Depuis près de vingt ans, Moooi inspire et séduit le monde avec des designs pétillants et innovants. L'entreprise, fondée en 2001, est actuellement dirigée par Marcel Wanders et Robin Bevers. Moooi tire son nom du mot néerlandais pour beau – le troisième «o» dans le nom de la marque représente une valeur supplémentaire en termes de beauté et d'unicité. Moooi ne dit pas aux designers quoi faire, mais écoute ce que les designers veulent faire, essayant de réaliser leurs rêves. Eclectique et toujours à la limite de la réalité commerciale et de l'intérêt culturel.

Étude de cas Moooi
Un voyage unique à travers l'inattendu

Un lancement de produit extraordinaire

En l'absence de l'événement physique à Milan, nous avons dû imiter l'expérience en construisant des scènes numériques avec leur propre ambiance, atmosphère visuelle et sonore. Les produits prennent vie grâce aux interactions ludiques, à la profondeur de champ et aux éléments sensoriels. À travers le voyage, chaque ensemble évoque diverses émotions et ambiances distinctives à travers une combinaison d'éclairage, de mobilier, de revêtement mural, de tapis et d'accessoires.

Entrez dans Tokyo Blue, Double Bubble et le Monster Garden.

Nous voulions infuser des éléments multi-sensoriels à travers l'expérience et surprendre les utilisateurs avec des interactions cachées

Transitions immersives

En «entrant» dans une pièce, nous voulions créer de l’enthousiasme et de l’anticipation avec un court temps d’attente. Par conséquent, nous avons dû créer des transitions visuelles intéressantes entre chaque ensemble. Nous avons commencé par déconstruire certains éléments des produits eux-mêmes, comme le motif en arc du revêtement mural du Lucky O ou la forme du Space Escape Carpet. Nous les avons ensuite assemblées dans des assets qui pouvaient être animés: un tunnel tournant, des échelles horizontales en couches, deux portes coulissantes, etc. Studio Wim nous a aidés à visualiser ces transitions en animant les assets directement à partir de nos fichiers de travail Figma. Chaque partie d'une scène est un PNG transparent qui peut être animé.

Étude de cas Moooi. Actifs PNG
Certains des actifs .PNG utilisés au cours de l'expérience
Étude de cas Moooi Conception mobile
Écran d'introduction mobile

Shoppable et accessible du début à la fin

Cette expérience de marque n'est pas seulement immersive, elle est également entièrement achetable. Les produits que vous voyez dans chaque ensemble sont achetables grâce à des hotspots qui mettent en valeur le nom et le créateur du produit. Si vous cliquez sur le bouton Moodboard, vous accédez à une version partageable / imprimable de la pièce que vous pouvez dupliquer et jouer avec.

La plateforme moooi.com étant entièrement conforme aux WCAG, nous avons dû rendre cette expérience également accessible. Il est convivial pour les lecteurs d'écran et permet la navigation au clavier avec des états focalisés spéciaux par exemple.

Plongez dans Space Escape, Get Lucky et les salles Talking Heads.

Montez le son!

Nous avons travaillé en étroite collaboration avec le studio de conception audio KLOAQ pour enrichir chaque scène avec des bandes sonores sur mesure. Les sons de fond ont été soigneusement segmentés pour se fondre parfaitement lorsque l'utilisateur bascule entre les pièces, déclenchant des sons de transition spécifiques pour correspondre aux éléments visuels. Nous avons également ajouté des sons d ’« interaction »qui se produisent lorsque vous survolez des objets (essayez de toucher les animaux!) Ou que vous cliquez sur des produits pour changer leur couleur par exemple.

Les technologies

Étant donné que le site Web Moooi.com fonctionnait déjà sur React en combinaison avec Redux, il était facile de les utiliser pour garder une trace de la pièce dans laquelle se trouve l'utilisateur.

Le prochain grand défi de ce projet était de créer les animations entre les salles. Chaque salle a sa propre animation d'introduction. Pour ce Studio WIM a fait un concept que nous avons traduit sur le Web. Nous avons utilisé GSAP pour cela car les animations sont complexes, basées sur la chronologie et diffèrent entre les éléments HTML et les images rendues par canevas.

Pour réduire au maximum la charge utile du site Web, nous avons utilisé le format WEBP pour les images partout où nous le pouvions. C'est un excellent moyen de réduire la taille des images jusqu'à 90%. Surtout pour les grandes images avec beaucoup de transparence, cela peut compter rapidement. Au moment de la rédaction de cet article, Safari est le seul navigateur majeur qui ne le prend pas en charge, mais cela changera avec la prochaine mise à jour de Safari 14 🎉.

Étude de cas Moooi Squoosh.app
Squoosh.app

Pendant les transitions et lorsqu'un utilisateur se trouve dans une pièce, nous avons choisi d'utiliser un effet de parallaxe pour donner une couche supplémentaire de profondeur à la pièce. Cela se fait en affectant tous les objets à un niveau de profondeur – les objets plus proches de l'utilisateur ont un nombre différent de celui des objets plus éloignés. Ce niveau est ensuite utilisé pour transformer les couches lorsque l'utilisateur déplace son téléphone ou déplace sa souris sur l'écran. Certains atouts ont été floutés (au préalable par le designer 👩‍🎨) pour accentuer encore plus la perception de la profondeur.

La dernière pièce du puzzle était d'implémenter le son. Certaines chambres disposent d'une section d'introduction et de musique en boucle. Pour cela, nous gardons une trace de la musique et juste avant que les sections d'intro ne soient jouées, nous commençons par la section en boucle de la musique, cela crée une transition presque transparente entre les deux morceaux de musique.

Enfin, nous avons utilisé le même processus de création que celui utilisé pour l'ensemble du projet Moooi.com. Cela utilise webpack pour compiler le Javascript, WordPress / WooCommerce pour le CMS.

À propos de Build in Amsterdam

Build in Amsterdam est une agence de branding et de développement spécialisée dans les magasins phares numériques. Nous pensons que notre industrie est aveuglée par les chiffres, tandis que les décisions d'achat sont basées sur l'émotion. Nous redéfinissons la conversion en créant des clics émotionnels.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *