Refonte UX et UI du site Drupal mazda.net

Le projet

La société Sangha France spécialisée entre autres en traitement d’air, gestion thermique et économie d’énergie, a confié à notre équipe le projet de refonte du site mazda.net, un site vitrine réalisé avec Drupal dédié notamment à la présentation des services et des produits de la société.

L’objectif de cette refonte était de "rafraîchir" le front-end par l’expérience utilisateur et ses interfaces, tout en conservant le thème déjà présent. Le projet reposait également sur une évolution fonctionnelle du site pour proposer une expérience utilisateur plus intéressante.

Une expérience utilisateur optimisée 

La refonte du front-end a permis de penser une expérience utilisateur plus intuitive. Cela passe par exemple par la mise en avant des produits de la marque Mazda dès la page d’accueil sous forme de blocs épurés permettant de ne pas surcharger l’utilisateur en informations. L’utilisateur peut accéder directement et facilement à l’information recherchée sans avoir à chercher dans les rubriques du menu principal. De plus, les images illustrant chaque bloc permettent d’attirer l’attention de l’utilisateur et de l’orienter vers le produit recherché.

Nous avons également optimisé l’UX dans le formulaire "Bilan thermique", un questionnaire proposant aux utilisateurs d’estimer le ratio entre leur capacité d’isolation et l’énergie consommée. En effet, le formulaire se déroule progressivement étape par étape dès qu’une réponse est renseignée, permettant ainsi de ne pas intimider l’utilisateur par la longueur du questionnaire.

Une nouvelle interface

Nous avons été mandatés pour concevoir une nouvelle identité graphique plus moderne pour le site mazda.net, sur la base d’une charte graphique print fournie par l’équipe de Sangha France (logo, couleurs, images, textures...), que nous avons adaptée en charte web. Cette refonte a permis de proposer un graphisme efficace, minimaliste, sur la base de couleurs sobres. La refonte graphique a bien entendu inclus la déclinaison en responsive design pour un site accessible aussi bien en desktop qu’en mobile.

Des évolutions fonctionnelles

Le projet a nécessité quelques évolutions fonctionnelles, toujours pour favoriser l’expérience utilisateur. Ces évolutions ont porté entre autres sur :

• Un moteur de recherche : nous avons configuré le moteur de recherche Search API de Drupal sur l’ensemble des types de contenu, pour proposer une fonctionnalité de recherche disponible sur toutes les pages du site. Les résultats sont affichés par ordre de pertinence.
• Module de géolocalisation des magasins revendeurs de Mazda : le projet demandait la création d’un nouveau type de contenu "Revendeur" dédié pour les magasins partenaires de la marque Mazda. Une fois le type de contenu créé, nous avons mis en place une vue "distribution" avec un affichage cartographique afin de présenter les revendeurs à proximité. Nous avons utilisé les modules Location et Leaflet pour installer et configurer la carte avec un fond de carte Google Maps. Par ailleurs,  nous avons activé la fonctionnalité de regroupement en cas de distributeurs proches. Ainsi, au zoom, le système cartographique affiche des points d’intérêts qui se divisent au fur et à mesure pour localiser de manière précise les revendeurs. Ces derniers sont affichés sous la forme de marqueurs cliquables avec un affichage des détails au clic. En outre, le module propose également un champ de tri par enseigne pour affiner les résultats. 
• Partage sur les réseaux sociaux : nous avons préconisé le module Addthis pour mettre en place la fonctionnalité de partage de pages sur les principaux réseaux sociaux tels que Facebook, Twitter, Linkedin et Gmail+…

… et ça continue !

Dans le cadre d’une  collaboration en Tierce Maintenance Applicative, notre équipe est toujours chargée de faire évoluer le site tant sur le côté technique que fonctionnel ! De nouvelles évolutions sont en cours !

URL du site : https://mazda.net
Date de mise en production : août 2018.