Atelier 1515

Refonte UX/UI d’un site e-commerce et optimisation de la performance

Métier

E-commerce

Technologie

Thelia

Véritable référence de la coutellerie d’art thiernoise, l’Atelier 1515 a été créé par Manu Laplace en 2001. Coutelier-Orfèvre alliant technologie de précision et savoir-faire transmis de génération en génération, Manu Laplace construit chacune de ses collections sur un univers singulier, mêlant voyages à travers le monde et retour dans le temps. Esprit cosmopolite ou style rétro, les créations de l’Atelier 1515 sont toujours le fruit d’un important travail de recherche s’inspirant de cultures ancestrales, et des dernières inspirations issues des lectures et des découvertes de Manu Laplace qui détermineront le choix de matériaux nobles et le design de chaque pièce. Pour mettre en cohérence ses choix artistiques avec sa communication digitale, l’Atelier 1515 a confié la refonte de son site e-commerce à OpenStudio.

Le projet

Doté d’un site web marchand de 15 ans d’existence, l’Atelier 1515 a décidé de le refondre pour bénéficier d’un outil à jour des tendances de l’e-commerce actuel et qui mette davantage en valeur son identité forte avec une charte graphique plus adaptée à la hauteur des créations. En somme, Manu Laplace souhaitait que son site soit le reflet fidèle de son travail et de l’ambiance de chacune de ses inspirations.

Les défis

Un important travail d’UX/UI a été réalisé par les équipes d’OpenStudio au travers d’ateliers métier pour mieux saisir le positionnement et surtout l’univers de l’Atelier 1515.

Afin d’être immergées dans l’ambiance singulière de l’Atelier 1515, le directeur de projet et l’UX Designer se sont rendus à plusieurs reprises au sein du showroom et de l’atelier de fabrication pour s’imprégner de l’ambiance.

Une expérience utilisateur travaillée

Un travail remarquable a donc été mené sur l’UI et l’UX de toutes les pages du site afin d’être à la hauteur de la vision artistique de l’Atelier 1515. Qui dit un design complexe, dit aussi un développement complexe et de nombreux défis techniques pour conserver un haut niveau de performance.

De beaux visuels produit

Une attention particulière a été portée au visuel des produits sur chaque page du site. Il a été décidé que les packshots seraient détourés et non sur fond blanc afin de mettre en valeur le jeu entre la couleur dominante des collections et la texture ou la teinte des matériaux du couteau.
Une ombre a été ajoutée sous le visuel produit afin de lui apporter du relief et le détacher du fond. Enfin, la grille de produit a été revue pour passer à deux colonnes afin d’augmenter la taille du visuel produit dans la page.

Les pages collections

Chaque collection bénéficie d’une page dédiée avec une identité propre façonnée par les éléments graphiques : la couleur dominante, l’image en bannière, l’emblème, la typographie. Le graphisme est en cohérence avec le storytelling qui entoure toutes les collections : elles portent un nom, arborent une citation marquante et sous chaque produit on trouve les inspirations qui justifient le choix des techniques et des matériaux lors de la création du couteau.

L’intégration de chaque détail des maquettes

Le travail fourni lors de l’étape de la conception a abouti à une maquette très précise du site particulièrement complexe pour le développement web. La richesse visuelle peut alourdir les temps de chargement, c’est pourquoi intégrer un site web avec une charte graphique sophistiquée tout en préservant de bonnes performances est un défi de taille. Cet équilibre délicat entre créativité et efficacité demande une expertise technique pointue et une compréhension approfondie des besoins des utilisateurs.

L’équipe en charge du projet et le service qualité ont formé un excellent tandem pour jouer entre esthétique et optimisation technique. Il a fallu redoubler d’ingéniosité pour réduire la taille des ressources en simplifiant les éléments visuels sans compromettre l’identité graphique du site, qui n’est autre que le cœur du projet.

1. Lazy loading des images en dessous de la ligne de flottaison

Le lazy loading des images consiste à retarder le chargement des images jusqu’à ce qu’elles soient nécessaires pour l’affichage, notamment celles situées en dessous de la ligne de flottaison (partie de la page non visible lors du chargement initial). Cela permet d’améliorer les performances en réduisant le temps de chargement initial de la page.

2. Chargement à la demande de la vidéo YouTube

Plutôt que de charger automatiquement les vidéos YouTube lors du chargement initial de la page, le chargement à la demande consiste à retarder le chargement de la vidéo jusqu’à ce que l’utilisateur interagisse avec celle-ci (par exemple, en cliquant sur un bouton de lecture). Cette technique diminue le temps de chargement initial de la page ce qui économise des ressources réseau.

3. Format d’image moderne WEBP

WEBP est un format d’image moderne développé par Google, qui offre une compression plus efficace que les formats traditionnels comme JPEG et PNG, tout en maintenant une qualité d’image élevée. Utiliser des images au format WEBP réduit la taille des fichiers image et donc améliore les performances du site web.

4. Réduction des éléments du DOM

Le Document Object Model (DOM) représente la structure hiérarchique d’une page web. Réduire le nombre d’éléments du DOM, c’est-à-dire les nœuds HTML, CSS et JavaScript, améliore les performances en réduisant la complexité de la page et en accélérant le rendu par le navigateur.

5. Compression (serveur) des fichiers SVG (Activation de GZIP)

La compression des fichiers SVG (Scalable Vector Graphics) avec GZIP est une technique pour réduire la taille des fichiers SVG en les compressant avant de les envoyer au navigateur. L’objectif est d’accélérer le temps de chargement des pages web et d’améliorer les performances.

6. Configuration de la durée du cache navigateur

En configurant la durée du cache navigateur, les ressources statiques telles que les images, les feuilles de style et les scripts JavaScript sont mises en cache localement sur l’ordinateur de l’utilisateur pendant une période spécifiée. De cette manière, les requêtes au serveur sont moins nombreuses et le chargement des pages web est accéléré lors de visites ultérieures.

7. Réduction du poids des images

Compression des images (JPEG, PNG, SVG) avec squoosh.app : Squoosh.app est un outil en ligne offrant la possibilité de compresser les images aux formats JPEG, PNG et SVG en ajustant leur qualité et en supprimant les métadonnées inutiles. Réduire le poids des images contribue à accélérer le chargement des pages web et à améliorer l’expérience utilisateur.

8. Utilisation de « web safe fonts »

Les « web safe fonts » sont des polices de caractères couramment disponibles sur la plupart des systèmes d’exploitation et des navigateurs web. Utiliser ces polices systèmes dans la conception d’un site web garantit une meilleure compatibilité et une expérience utilisateur cohérente sur différentes plateformes et appareils, ce qui peut contribuer à des performances web optimales.

Performance

Cette mise en application a donné lieu à un réel gain de performance sans négliger l’identité graphique du site ce qui aurait pu être préjudiciable pour le référencement naturel et l’expérience utilisateur.

Perspectives

Avec ce nouveau site e-commerce, l’Atelier 1515 entend poursuivre sa croissance sur ce canal de vente et se fixe pour objectif de doubler le chiffre d’affaires. Cette première collaboration a été un réel succès avec un résultat final à la hauteur des espérances de l’Atelier 1515. Ce site est le premier chapitre d’une histoire qui va se poursuivre puisque la coutellerie a d’autres projets centrés sur sa communication (contenu SEO et community management) sur lesquels OpenStudio pourrait l’accompagner.