M3 Glass

Défi

M3 Glass Technologies s’est adressé à Redwerk avec un site web prêt à l’emploi, désireux de créer un outil de configuration pour améliorer l’expérience en ligne de ses clients. Dans un magasin physique, les clients peuvent rapidement contacter un conseiller pour obtenir de l’aide ; cependant, lorsqu’ils achètent en ligne, les seules options restantes sont soit de remplir un formulaire de contact, soit de s’en remettre à l’auto-service. Si le premier scénario peut être frustrant et prendre du temps, le second peut être transformé en un puissant outil d’engagement. Les clients ne voient pas d’inconvénient à l’auto-service tant qu’ils obtiennent facilement ce dont ils ont besoin. Les configurateurs sont, en quelque sorte, des assistants commerciaux virtuels qui recueillent les préférences des clients, puis les associent aux articles disponibles. De la sélection de voitures à la conception de verre, les outils de configuration sont désormais largement utilisés dans de nombreuses industries.

M3 Glass Technologies nous a demandé de concevoir un outil de visualisation interactif afin que les clients puissent donner vie à leurs idées. Outre la possibilité de sélectionner un motif, de personnaliser sa taille et sa couleur, il était important de donner aux conceptions des clients une touche de réalisme. Pour ce faire, M3 Glass nous a demandé de créer des modèles 3D d’une porte et d’un mur en verre afin que les motifs puissent y être appliqués. Il était également important de rendre le configurateur de conception de verre facile à utiliser et à prendre en main.

L’une des principales exigences était de rendre la conception réactive, en se concentrant sur un grand Mac, les dernières versions des tablettes iOS et Android, et un ordinateur portable standard. Bien sûr, nous avons également voulu rendre l’outil interactif compatible avec les mobiles.

Nous avons également dû nous assurer que tous les motifs s’affichaient correctement dans les différentes versions des navigateurs suivants : Chrome, Edge, Safari et Firefox.

Solution

L’équipe de conception a créé des images 3D séparées d’un mur et d’un sol en verre afin que les motifs du menu du client puissent ensuite être superposés sur ces arrière-plans transparents. M3 Glass Technologies nous a fourni le catalogue de motifs, et notre rôle était de permettre le transfert du motif sur le modèle de verre à l’aide de HTML et CSS. Nous avons également dû tenir compte de la perspective de l’image pour que la conception du verre paraisse réaliste. Pour que les graphismes soient parfaits, quelle que soit la transformation, nous avons utilisé le format SVG.

En plus de cela, nos concepteurs ont créé une interface pour l’outil interactif afin que les consommateurs de M3 Glass puissent facilement visualiser leurs idées de conception de verre et personnaliser le motif disponible à leur convenance.

L’interface de l’outil interactif en ligne se compose de :

• panneau de sélection de motif
• panneau d’échelle de motifs avec des conseils de conception
• roue chromatique pour le motif et l’arrière-plan
• panneau de sélection d’arrière-plan
• bouton « créer un nouveau design »
• formulaire de demande de révision de conception
• formulaire « envoyer mon design »
• page de remerciement avec la possibilité de télécharger une maquette PDF du design de verre créé.

Nous avons été guidés par le fait que l’interface ne devait pas distraire du produit lui-même. Par conséquent, nous avons opté pour un design simple et neutre, axé sur le public cible. Comme la plupart des consommateurs de M3 Glass sont des personnes matures, nous avons fourni quelques conseils d’action, mais nous n’avons pas surchargé l’interface de détails insignifiants. Le produit final possède toutes les fonctionnalités nécessaires et est facile à utiliser et à naviguer.

Développement

Initialement, nous avons utilisé les propriétés de masque et d’arrière-plan CSS pour afficher le motif requis ; cependant, Edge ne prenant pas en charge cette approche, nous avons dû trouver un autre moyen d’afficher les images. Nous avons dû modifier la couleur/le motif SVG côté serveur (back-end), et nous l’avons fait pour tous les modules possibles du site.

Nous avons utilisé des matrices de transformation pour les motifs de verre en SVG. Tout fonctionnait bien, mais nous avons remarqué que tous les designs ne s’adaptaient pas (certains ne changeaient pas de couleur, tandis que d’autres étaient déformés dans leur structure). Par conséquent, nous avons dû vérifier tous les modèles et les ramener au même format.

Après cela, nous avons réussi à afficher la projection et la couleur correctes, ce qui nous a permis d’envoyer le résultat final à l’utilisateur final.