Twitter - Suivre @Netemedia
Contactez-nous

Refonte graphique du site
iDGARAGES.com

voir Tout voir dans le détail

le challenge

Au sein du groupe AutoDistribution (AD), le cofondateur d’iDGARAGES.com nous a contacté début 2014 pour réaliser un audit ergonomique et concurrentiel puis des gabarits pour son site comparant les offres de garages.

Il souhaitait mieux comprendre le parcours des internautes sur son site, afin de faire baisser le taux de rebond du site et surtout d’optimiser le taux de conversion des visiteurs en vue d’un passage TV juste avant l’été. Suite à nos analyses nous avons conçu des gabarits, qui ont été partiellement intégrés par les équipes techniques d’iDGARAGES.

Satisfait du travail que nous avions accompli, mais qui n’avait pu être intégralement mis en place faute de temps, le cofondateur d’iDGARAGES a fait à nouveau appel à l’expertise ergonomique de Netemedia début 2015.

55 %
Durée de visite
75 %
Pages vues
qu'avons nous fait ?
date
date
Mars 2014
Mars 2015
refonte
Conseil & Audit
Optimisations ergonomiques et graphiques du site en deux phases
competences
compétences
Audit concurrentiel, Audit ergonomique, Expertise référencement naturel (SEO)
graphisme
graphisme
Création d'une charte graphique web
audiences
audience
Google Analytics
date
date
Mars 2014
Mars 2015
refonte
Conseil & Audit
Optimisations ergonomiques et graphiques du site en deux phases
competences
compétences
Audit concurrentiel, Audit ergonomique, Expertise référencement naturel (SEO)
graphisme
graphisme
Création d'une charte graphique web
audiences
audience
Google Analytics
Page d'accueil

Page-clé pour la conversion, la page d'accueil a été repensée pour favoriser la compréhension du rôle d'iDGARAGES.com et la conversion de l'internaute.
À la place des vignettes des prestations cohabitent désormais plusieurs éléments de
réassurance :
- un large visuel misant sur l'humain et un champ de recherche central mettant en avant le rôle de comparateur d'iDGARAGES.com ;
- les étapes pour obtenir un devis pour son véhicule sont présentées clairement afin d'inciter à l'action ;
- les avis clients figurent en bonne place avant la liste des prestations qui a été modernisée avec des visuels pour être plus explicite.

Détails d'une prestation

La page d'une prestation a retrouvé son importance au sein du site, pour souligner l'expertise d'iDGARAGES.com.
Auparavant cantonnés à n'apparaître que sous le formulaire d'identification (capture de l'ancien site ci-dessous), les détails de la prestation disposent désormais d'une page dédiée.
Le haut de page rappelle la page d'accueil et est orienté vers la conversion avec le large visuel, la zone de recherche et les étapes jusqu'au devis.
Les éléments de réassurance sont regroupés en colonne de droite, surmontés d'une liste détaillant la prestation en bref : toujours dans l'optique de rassurer l'internaute sur le sérieux du site et de ses garagistes certifiés.

Recherche de garage

Pour cette page intégrant de nombreux contenus mais où l'intuitivité devait rester de mise, nous avons beaucoup échangé avec le client afin de viser l'exhaustivité (pour aider au choix de l'internaute) tout en restant clair.
Le résultat est cette page de comparatif des garages qui s'inspire des codes des sites comparatifs renommés (La Fourchette, Hotels.com, etc. - que nous avions audités) tout en proposant une fonctionnalité de prise de RDV dès les résultats pour les internautes recherchant avant tout la disponibilité prochaine du garage.

Page d'accueil
Page-clé pour la conversion, la page d'accueil a été repensée pour favoriser la compréhension du rôle d'iDGARAGES.com et la conversion de l'internaute.
À la place des vignettes des prestations cohabitent désormais plusieurs éléments de
réassurance :
- un large visuel misant sur l'humain et un champ de recherche central mettant en avant le rôle de comparateur d'iDGARAGES.com ;
- les étapes pour obtenir un devis pour son véhicule sont présentées clairement afin d'inciter à l'action ;
- les avis clients figurent en bonne place avant la liste des prestations qui a été modernisée avec des visuels pour être plus explicite.
Détails d'une prestation
La page d'une prestation a retrouvé son importance au sein du site, pour souligner l'expertise d'iDGARAGES.com.
Auparavant cantonnés à n'apparaître que sous le formulaire d'identification (capture de l'ancien site ci-dessous), les détails de la prestation disposent désormais d'une page dédiée.
Le haut de page rappelle la page d'accueil et est orienté vers la conversion avec le large visuel, la zone de recherche et les étapes jusqu'au devis.
Les éléments de réassurance sont regroupés en colonne de droite, surmontés d'une liste détaillant la prestation en bref : toujours dans l'optique de rassurer l'internaute sur le sérieux du site et de ses garagistes certifiés.
Recherche de garage
Pour cette page intégrant de nombreux contenus mais où l'intuitivité devait rester de mise, nous avons beaucoup échangé avec le client afin de viser l'exhaustivité (pour aider au choix de l'internaute) tout en restant clair.
Le résultat est cette page de comparatif des garages qui s'inspire des codes des sites comparatifs renommés (La Fourchette, Hotels.com, etc. - que nous avions audités) tout en proposant une fonctionnalité de prise de RDV dès les résultats pour les internautes recherchant avant tout la disponibilité prochaine du garage.

notre mission

Les audits ayant déjà été menés un an auparavant, nous avons pu passer directement à la phase des gabarits, conçus en collaboration avec le client.

Dans le cadre de cette refonte graphique, les objectifs d’iDGARAGES sont clairs :

  • moderniser la charte graphique (vers du responsive notamment) ;
  • améliorer l’ergonomie et l’expérience utilisateur ;
  • proposer une interface professionnelle, sérieuse et attractive.

Tout cela dans un intervalle d’un mois, afin que les équipes techniques d’iDGARAGES puissent mettre en place les nouvelles pages avant une grande opération de communication de la marque.

Nos efforts se sont concentrés sur trois pages clés : la page d’accueil, la page détaillant une prestation et le comparatif des garages, avant de décliner sur les pages secondaires (prise de RDV, fiche garage, avis, formulaire de contact, etc.).

Une fois validés, les gabarits ergonomiques ont été déclinés en maquettes par l’une de nos DA. Elle a su les réinterpréter en fonction de la charte qu’elle a modernisée, clarifiée et humanisée pour mieux répondre aux attentes des internautes.

Elle s’est ensuite occupée des versions responsive des pages afin que le site puisse être consulté facilement sur tout support (voir le site en responsive en haut de page).

Le site iDGARAGES avant la refonte graphique

La page détaillant une prestation est focalisée sur le formulaire de saisie d'immatriculation qui reste trop peu rassurant vues les informations personnelles demandées.

Page d'accueil

En concevant la nouvelle page d'accueil, nous avons souhaité renforcer le rôle d'iDGARAGES en tant que tiers de confiance face aux offres des garages, tout en intégrant les codes qui ont fait le succès des comparateurs de prix (zone de recherche centrale attractive et intuitive, avis client prépondérants, etc.).
Il nous semblait également très important de présenter aux internautes le fonctionnement du site à travers des étapes claires et concises. Il n'est pas commun de renseigner son immatriculation ou les détails de sa carte grise sur un site, ce qui a pu freiner de nombreux internautes sur l'ancienne version du site.

Page d'une prestation

En consultant les sites concurrents d'iDGARAGES.com (notamment américains), nous avons repensé la page détaillant une prestation pour en faire une véritable étape de réassurance de l'internaute, vers sa conversion.
Outre l'optimisation du référencement naturel du site, cette page démontre l'expertise d'iDGARAGES en termes de mécanique automobile, pour dépasser le simple rôle d'annuaire que certains sites de comparatif peuvent endosser.

Comparatif des garages

Véritable défi de conception ergonomique, la page listant les garages suite à la saisie de l'immatriculation, de la prestation et du lieu a nécessité de nombreux ajustements pour faire tenir autant de contenus et de fonctionnalités si différents sur une seule et même page.
Les sites de comparatifs nous ont donné l'idée de la colonne de filtres et de la carte des garages qui se déploie au clic, tandis que pour la liste des garages il a fallu faire de multiples essais pour placer des éléments cruciaux (tarif, créneaux de RDV, services du garage) afin de ne pas perdre de temps durant la phase graphique.

Page d'accueil

En concevant la nouvelle page d'accueil, nous avons souhaité renforcer le rôle d'iDGARAGES en tant que tiers de confiance face aux offres des garages, tout en intégrant les codes qui ont fait le succès des comparateurs de prix (zone de recherche centrale attractive et intuitive, avis client prépondérants, etc.).
Il nous semblait également très important de présenter aux internautes le fonctionnement du site à travers des étapes claires et concises. Il n'est pas commun de renseigner son immatriculation ou les détails de sa carte grise sur un site, ce qui a pu freiner de nombreux internautes sur l'ancienne version du site.

Page d'une prestation

En consultant les sites concurrents d'iDGARAGES.com (notamment américains), nous avons repensé la page détaillant une prestation pour en faire une véritable étape de réassurance de l'internaute, vers sa conversion.
Outre l'optimisation du référencement naturel du site, cette page démontre l'expertise d'iDGARAGES en termes de mécanique automobile, pour dépasser le simple rôle d'annuaire que certains sites de comparatif peuvent endosser.

Comparatif des garages

Véritable défi de conception ergonomique, la page listant les garages suite à la saisie de l'immatriculation, de la prestation et du lieu a nécessité de nombreux ajustements pour faire tenir autant de contenus et de fonctionnalités si différents sur une seule et même page.
Les sites de comparatifs nous ont donné l'idée de la colonne de filtres et de la carte des garages qui se déploie au clic, tandis que pour la liste des garages il a fallu faire de multiples essais pour placer des éléments cruciaux (tarif, créneaux de RDV, services du garage) afin de ne pas perdre de temps durant la phase graphique.

le résultat

Suite à ces deux collaborations ergonomiques puis graphiques avec iDGARAGES.com, les maquettes ont été intégrées par les équipes du client et le nouveau site est en ligne depuis fin mai 2015.

Grâce à nos efforts conjugués pour optimiser l’ergonomie du site et pour rassurer l’internaute, la durée de visite a augmenté de 55% dans le mois qui a suivi et le nombre de pages vues de 75%.

Une preuve de plus que la conception centrée utilisateur est doublement bénéfique : l’internaute qui navigue mieux, en comprenant instantanément les atouts du site, est plus enclin à rester sur le site et à y accomplir ses objectifs… remplissant ainsi les objectifs de conversion de notre client.

bonne visite

Comparateur d'offres de réparation automobile

quote
La page d’accueil du site est une page qui doit taper dans l’œil de l’internaute quand il la découvre. Elle doit à la fois l’attirer pour lui donner envie de rentrer dans notre tunnel d’achat et lui permettre de comprendre très facilement ce qu’est iDGARAGES et notre concept. quote

Brief de conception des gabarits

References Parole de client
quote
La page d’accueil du site est une page qui doit taper dans l’œil de l’internaute quand il la découvre. Elle doit à la fois l’attirer pour lui donner envie de rentrer dans notre tunnel d’achat et lui permettre de comprendre très facilement ce qu’est iDGARAGES et notre concept. quote

Brief de conception des gabarits