Expertises
- Stratégie de contenu
- Flux d'utilisateurs
- Design web
- Développement
Technologies
- Craft CMS
- JavaScript
- Twig / PHP
- Tailwind CSS
- AWS
Particularités
- Sélecteur de couleurs et de matériaux
- Carte interactive des détaillants
- Structure de produit complexe
- Documentation avec recherche avancée


Organisation de contenu et wireframes
Afin de créer une expérience utilisateur fluide et intuitive, nous avons consacré des efforts considérables à l'organisation du contenu et la création des wireframes. Nous avons minutieusement listé tous les produits et modèles, ce qui a servi de base à la structure des collections de contenu et à la création des champs du CMS.
Pour faciliter la navigation, nous avons mis en place une hiérarchie de contenu qui organise les modèles au sein de chaque produit, les produits au sein de chaque collection, et les collections au sein de chaque section. Cette logique structurelle a servi de base au site web, permettant aux visiteurs de trouver intuitivement les informations recherchées. Le résultat est un site web bien organisé et convivial qui optimise le flux d'informations et améliore l'expérience utilisateur globale.



Design
Nous avons développé un design system qui incarne l'élégance et la sophistication. Avec une esthétique chic et intemporelle, le design met en valeur l'engagement de l'entreprise envers la qualité. Chaque aspect du design, de la palette de couleurs à la typographie, a été soigneusement réalisé pour refléter les normes élevées de la marque et son souci du détail. Le design épuré et raffiné renforce l'attrait visuel du site web et confirme l'excellente réputation Vanico-Maronyx.

Recherche de produits et documentation
Nous avons intégré une fonctionnalité de recherche de produits dans l'en-tête du site web, offrant des suggestions pendant que les utilisateurs tapent. Cette fonctionnalité permet de trouver rapidement des produits spécifiques, améliorant ainsi l'efficacité et l'utilisabilité de la recherche.
La section documentation joue également un rôle essentiel en offrant aux utilisateurs un accès facile à une large gamme de ressources. Nous avons développé un système de recherche sophistiqué pour la documentation qui extrait des informations pertinentes à partir de différents champs du CMS. Cette puissante fonctionnalité de recherche permet aux utilisateurs de trouver rapidement les fichiers dont ils ont besoin, que ce soit par catégorie, collection ou produit.


Menus et navigation
Le projet propose un système de navigation intuitif et convivial. Nous avons créé une navigation en quatre sections avec des icônes, permettant aux utilisateurs de sélectionner facilement la section de produits qu'ils souhaitent explorer. De plus, nous avons développé un méga-menu pour les pages de contenu, organisant les pages par sections pour une navigation plus fluide.

Sections et collections de produits
Nous avons organisé la vaste gamme de produits en sections distinctes, garantissant une présentation claire. Les utilisateurs peuvent facilement naviguer à travers les différentes sections de produits et utiliser des filtres pour affiner leur recherche et trouver les collections qui correspondent à leurs préférences.
De plus, les pages dédiées aux collections présentent tous les produits d'une collection spécifique, fournissant des informations détaillées sur leurs caractéristiques uniques, les options disponibles et la documentation pertinente. Cette approche réfléchie améliore l'expérience utilisateur et permet aux visiteurs d'explorer aisément l'offre de produits complète de Vanico-Maronyx.



Produits
Les pages de produits présentent des images du produit, les matériaux et les couleurs disponibles. Elles affichent également les modèles, les spécifications et les options. Un panneau latéral est également disponible pour fournir aux utilisateurs des informations techniques supplémentaires.



Sélecteur de couleurs et matériaux
Nous avons développé une fonctionnalité unique qui permet aux utilisateurs de sélectionner les matériaux de mobiliers et de comptoirs d'une collection. Les utilisateurs peuvent choisir différentes combinaisons et voir instantanément les résultats. Chaque combinaison dispose d'une URL dédiée pour faciliter le partage.


Carte interactive des détaillants
Le site web comprend une carte interactive où les utilisateurs peuvent entrer leur code postal et trouver les détaillants les plus proches. Cette fonctionnalité utilise l'API Distance Matrix de Google et offre aux utilisateurs un moyen pratique de localiser les détaillants de leur région. Les informations de contact de chaque revendeur sont affichées lorsqu'ils sont sélectionnés sur la carte ou dans le panneau latéral.

La collaboration avec troisième nous a permis de simplifier la présentation de nos gammes de produits, tout en évoquant le raffinement et l’élégance de notre entreprise. Tout au long du processus, nous avons ressenti une réelle prise en charge des équipes, nous permettant de faire vivre une plateforme web moderne à la hauteur de nos ambitions.
Pages à contenu standard
En plus des pages liées aux produits, nous avons développé des pages de contenu informatives sur l'entreprise, les services offerts, les guides d'achat, et bien plus encore. Ces pages fournissent des informations précieuses lors du processus d'achat.




Performances
Nous avons accordé une grande importance aux performances du site web et avons utilisé divers outils pour les mesurer et les optimiser. Le site web a obtenu des scores exceptionnels dans différents indicateurs de performances, se rapprochant de 100 à tous les niveaux sur Google Page Insight.
