exclu mondiale :)
formation UX design !
53h de vidéo
60 études de cas
150 livrables - 160 wireframes
places limitées

étude de cas UX Valeo

Conception et refonte du dispositif digital valeo.com

Architecture de l'information et design d'interaction du dispotif digital corporate de l'équipementier Valeo (repositionnement du site web et conception du site mobile).

cas ux valeo
écrit en 2014
et révisé en 2016 par
Julien Muckensturm
Architecte de l'information
icone linkedin
icone viadeo

La problématique digitale

Spécificités de la mission Valeo

Nous avons souhaité valoriser la mission Valeo, afin d'illustrer les différentes étapes du travail de conception.

Les travaux ont été réalisés en 2012.
Visualisez le projet UX Valeo...

A propos de Valeo

Valeo est un équipementier automobile partenaire des principaux constructeurs automobiles internationaux. La technologie et l'innovation sont au coeur des activités du groupe : conception et fabrication de systèmes et d'équipements intégrés, de modules et de composants pour l'industrie automobile (réduction des émissions de CO², développement de la conduite intuitive - par exemple l'aide au stationnement).

Problématique digitale de Valeo

Valeo.com reflétait une plateforme en fin de cycle et ne traduisait plus les objectifs de communication de la marque.

Par ailleurs, le volume éditorial du dispositif était à la mesure d'un acteur de taille critique : énormément de contenus créés et ajoutés au fur et à mesure, avec en bout de course, un site complexe ne parvenant pas à faire remonter l'essentiel, avec une lecture peu lisible des activités du groupe.

Il s'agissait de redonner une dimension humaine à ce site pour le rendre accessible à ses principaux publics tout en évitant de tomber dans l'écueil des sites corporate, celui du dispositif labyrinthique, exhaustif, qui finalement dessert plus la marque qu'autre chose, car trop complet, trop profond, trop éparse.

Notre approche

Analyse de l'existant

La première étape propre à tout projet de conception débute naturellement par une analyse de l'existant.

Cette étape est incontournable, même si elle ne débouche pas sur un livrable. Il s'agit pour le concepteur et l'équipe projet d'accéder à une vision à la fois globlae et détaillée du dispositif, pour en saisir les contours et comprendre les voies d'optimisations possibles.

Un des moyens pour accéder à cette double compréhension (générale et détaillée), est de réaliser un inventaire minutieux de tous les contenus du site : c'est un travail long, parfois fastidieux, mais il permet de bien comprendre la marque, ses objectifs, son positionnement, et naturellement d'observer le fonctionnement de l'objet digital.

En analyse, on peut également réaliser des travaux complémentaires :

  • Une analyse de l'ergonomie du dispositif
  • Une analyse de l'architecture de l'information du site (organisation des contenus)
  • Une analyse des indicateurs de fréquentations
  • etc.

Pour ce projet, compte tenu de la faible dimension transactionnelle, d'ailleurs propre à bon nombre de sites institutionnels, l'accent a été porté sur l'analyse de l'architecture de l'information.

Il s'agissait de recréer l'arborescence éditoriale existante, pour d'une part, confronter le volume, la nature et l'angle d'approche éditorial du dispositf avec les objectifs du groupe, et d'autre part, visualiser l'organisation, la profondeur et les possibilités de réaménagement de la stratégie éditoriale.

Cette étape de mise à plat des contenus a été réalisée à la main (comme on dit), c'est à dire que chaque page a été inventoriée l'une après l'autre, et consignée à la façon d'un mind-map (voir ci-dessous).

La troisième illustration montre comment ce matériel brut peut être utilisé dans un document de conception pour reconstituer simplement les différents briques de l'arborescence.

 - UX Valeo
mind-map analyse de l'existant valeo.com - extract IAFACTORY

 - UX Valeo
mind-map organisation des recherches valeo.com - extract IAFACTORY

analyse des contenus existants - UX Valeo analyse des contenus existants valeo.com - extract IAFACTORY

Contextualisation

Il s'agit d'une étape importante qui permet de bien situer le projet dans son contexte.

Rien de miraculeux, on essaye ici de factoriser les caractéristiques de la marque et du projet au sein d'un ou deux boards conceptuels...

Dans ce board d'amorce, on peut recenser les questions classiques de type :

  • Qui est l'émetteur ?
  • Quelles sont ses forces, ses faiblesses, quelles sont les contraintes et les opportunités ?
  • Quels sont les éléments distinctifs (marque) et constitutifs de l'activité ?
  • Quels sont les axes stratégiques porteurs de l'entité ?
  • A qui convient-il de s'adresser, et pour délivrer quel(s) message(s) ?

L'illustration ci-dessous est un exemple de ce que l'on peut réaliser pour "contextualiser" le projet. C'est un moyen de poser les bases en amont de la recherche des solutions de conception, que l'on fait naturellement après avoir bien saisi la nature et le volume du dispositif observé.

Cette contextualisation du projet peut se matérialiser de façon complémentaire par la mise à plat des objectifs (voir board objectifs) pour bien orienter le travail de conception.

Les cibles, une fois identifiées, peuvent faire l'objet d'une approche par persona, sur la base de données réelles et non farfelues (idéalement).

En schématisant, il s'agit de faire une photographie du contexte, de poser les objetctifs et d'identifier les besoins des cibles pour aboutir à un diagnostic général, lequel permet d'entrevoir assez facilement les axes d'optimisations, dès lors que toutes les étapes ont bien été menées.

Les 5 planches ci-après résument cette démarche et constituent une partie du travail de l'architecte de l'information à qui revient aussi le rôle de bien comprendre la marque et le projet qu'il est amené à construire et/ou à réorienter.

contextualisation du projet - UX Valeo contextualisation du projet valeo.com - extract IAFACTORY

objectifs du dispositif - UX Valeo objectifs du dispositif valeo.com - extract IAFACTORY

exemple de persona - UX Valeo exemple de persona, profils d'utilisateurs valeo.com - extract IAFACTORY

exemple de persona - UX Valeo exemple de persona, profils d'utilisateurs valeo.com - extract IAFACTORY

diagnostic de l'existant - UX Valeo diagnostic de l'existant valeo.com - extract IAFACTORY

Stratégie éditoriale

L'une des carences du dispositif existant était de ne pas parvenir à exposer l'utilisateur final de façon explicite et directe aux activités principales de la marque.

Il y avait énormément de contenus organisés dans une logique fragmentée et parcellaire laissant la charge à l'utilisateur final de reconstituer le tout, bref de reconstituer le puzzle.

Le niveau de discours général se rapportait à un registre institutionnel, très corporate, ce qui dégage souvent une "persona de marque" relativement froide.

Il s'agissait donc de proposer une lecture plus concise et factorisée des activités du groupe, dans un langage plus accessible, plus chaleureux, c'est à dire incarné et porté par des vrais humains (et pas par l'agence qui rédige les contenus pour faire un bel exercice de style corporate type rapport annuel :). Un rapport annuel peut alimenter un site institutionnel, mais le site institutionnel s'adresse naturellement à une audience bien plus large, ce qui impose un changement de focale... Or trop souvent, site corporate = rapport annuel. Erratum.

Le dispositif a été réorienté autour de 4 entrées explicites (le groupe, ses engagements, ses expertises, et la tradition d'innovation illustrée par une approche plus "magazine" pour marquer une rupture avec le style parfois descriptif imposé par les registres de la présentation).

En ressort une architecture de l'information resserrée avec une faible profondeur, voulue pour être volontairent maîtrisée. Quelques tests d'interface et de structure ont également été réalisés autour d'une navigation réduite à 3 items, mais le procédé ne s'est pas révélé le plus pertinent devenant trop exclusif sur le choix des thématiques...

Finalement, le dispositif se donnait à voir sous un angle beaucoup plus grand public, là où il était en première instance orienté en direction des publics institutionnels financiers.

principes d'architecture de l'information - UX Valeo principes d'architecture de l'information valeo.com - extract IAFACTORY

priorisations et scenarisation - UX Valeo priorisation et scenarisation de la page d'accueil valeo.com - extract IAFACTORY

Solutions de conception

Esquisse d'interface

L'interface devait donner à voir un ensemble lisible, dans lequel les innovations de VALEO seraient illustrées comme composante du quotidien des utilisateurs finaux : "la technologie VALEO est dans votre voiture".

La structure générale est aérée et basée sur des modules occupant une part large de l'interface pour ancrer cette volonté de "lisibilité" comme l'illustrent les wireframes des principaux écrans structurants ci-dessous.

wireframe, esquisse d'interface, accueil - UX Valeo wireframe, esquisse d'interface, accueil valeo.com - extract IAFACTORY

wireframe, esquisse d'interface, profil du groupe - UX Valeo wireframe, esquisse d'interface, profil du groupe valeo.com - extract IAFACTORY

wireframe, esquisse d'interface, espace RH - UX Valeo wireframe, esquisse d'interface, espace RH valeo.com - extract IAFACTORY

wireframe, esquisse d'interface, espace magazine  - UX Valeo wireframe, esquisse d'interface, espace magazine valeo.com - extract IAFACTORY

wireframe, esquisse d'interface, version chinoise - UX Valeo wireframe, esquisse d'interface, version chinoise valeo.com - extract IAFACTORY

créa esquisse première version - UX Valeo créa esquisse première version valeo.com - extract IAFACTORY

Rationalisation de l'architecture

Les premières esquisses d'interface ont permis aux équipes d'échanger pour affiner leur vision de ce que devait être le dispositif VALEO.

Le travail de conception détaillé a permis d'approfondir les grandes thématiques du dispositif et de développer le concept de profilage par la mise en place d'entrées par cibles, ce qui constitue un élément courant et bienvenue pour un site institutionnel amené à adresser un public parfois très diversifié.

L'essentiel pour ne pas se perdre et toujours de construire une structure globale autour du groupe et de ses activités, puis de personnaliser le discours par grand profil d'utilisateur au sein d'espace dédiés, lesquels sont aussi incontournables (RH ressources humaines, COMfi communication financière, PRESSE journalistes) que spécialisés (espace client, espace revendeur de pièces détachés, espace fournisseur, espace SAV...).

Les boards suivants illustrent quelques-uns des principes de navigation et de structure définitifs du projet, permettant de saisir les évolutions des choix opérés par l'équipe projet.

trame du document de conception - UX Valeo trame du document de conception valeo.com - extract IAFACTORY

inventaire des gabarits - UX Valeo inventaire des gabarits du site valeo.com - extract IAFACTORY

architecture de l'information - UX Valeo architecture de l'information valeo.com - extract IAFACTORY

principes et structures de navigation - UX Valeo principes et structures de navigation valeo.com - extract IAFACTORY

principes et structures de navigation - UX Valeo principes et structures de navigation valeo.com - extract IAFACTORY

Conception détaillée

S'agissant d'une marque implantée dans près de 30 pays, le dispositif digital a été conçu autour d'une logique de "MASTER" localisé dans les langues des principaux marchés du groupe.

Ci-après, quelques planches extraites du document de conception détaillé du dispositif institutionnel de VALEO.

On voit ici clairement se dessiner les contours définitifs de l'architecture de l'information et de la structure générale de l'interface.

Le calibrage général des modules et des zones fait l'objet d'un découpage pré-défini autour d'une grille dite modulaire pour sa capacité à accueillir des éléments fonctionnels et éditoriaux dans différentes configurations d'occupation de l'espace.

L'architecte de l'information a pour mission de concevor des modules lisibles pour l'utilisateur final derrière son écran, en veillant à respecter les impératifs économiques du projet et les contraintes de faisabilité : ces compromis impliquent un travail de réutilisation maximal pour limiter la charge des travaux de production tout en déployant des codes de lecture pérennes pour une expérience de consultation homogène.

Il arrive parfois que ces 2 axes divergent (impératifs projets vs. expérience de l'utilisateur) générant des arbitrages qui lorsqu'ils sont interminables se font toujours au détriment du projet et des utilisateurs (dans interminable, il y a bien "minable", dans le sens, qui "mine"...).

zoning général - UX Valeo zoning général valeo.com, pages intérieures - extract IAFACTORY

wireframe page d'accueil - UX Valeo wireframe page d'accueil valeo.com - extract IAFACTORY

zoning général - UX Valeo zoning général valeo.com, pages intérieures - extract IAFACTORY

wireframe - UX Valeo wireframe valeo.com, espace engagements - extract IAFACTORY

wireframe - UX Valeo wireframe valeo.com, espace expertises - extract IAFACTORY

wireframe valeo.com, espace magazine innovation - UX Valeo wireframe valeo.com, espace magazine innovation - extract IAFACTORY

wireframe valeo.com, espace RH candidat - UX Valeo wireframe valeo.com, espace RH candidat - extract IAFACTORY

wireframe valeo.com, espace investisseur - UX Valeo wireframe valeo.com, espace investisseur - extract IAFACTORY

 principes d'écosystème Valeo - UX Valeo principes d'écosystème Valeo - extract IAFACTORY

 créa page d'accueil valeo.com - UX Valeo créa page d'accueil valeo.com - extract IAFACTORY

Conception du site mobile

La volonté du groupe était de disposer d'un objet digital spécifique pour adresser l'expérience de consultation mobile.

Le trend responsive était encore marginal pour des dispositifs de taille critique et le dispositif mobile ne faisait pas partie des volontés stratégiques du donneur d'ordre.

Une version allégée a été conçue autour d'une logique davantage portée sur les impératifs projets que sur de réelles attentes utilisateurs (eh oui ! l'expérience utilisateur est soumise aux contraintes économiques du monde rééel).

architecture de l'information site mobile m.valeo.com - UX Valeo architecture de l'information site mobile m.valeo.com - extract IAFACTORY

accueil site mobile m.valeo.com - extract IAFACTORY - UX Valeo accueil site mobile m.valeo.com - extract IAFACTORY

accueil site mobile m.valeo.com - extract IAFACTORY - UX Valeo accueil site mobile m.valeo.com - extract IAFACTORY

navigation site mobile m.valeo.com  - UX Valeo navigation site mobile m.valeo.com - extract IAFACTORY

exemple d'écran site mobile m.valeo.com  - UX Valeo exemple d'écran site mobile m.valeo.com - extract IAFACTORY

créa du site mobile m.valeo.com - UX Valeo créa du site mobile m.valeo.com

Conception de l'intranet

Dans la lignée de la modernisation de l'écosystème digital, il s'agissait également de redessiner les contours de l'expérience digitale proposée aux collaborateurs internes du groupe.

Une mission de conception complémentaire a été réalisée, laquelle visait à proposer une expérience d'intranet plus personnalisée autour de widgets (modules fonctionnels) favorisant le travail collaboratif et adaptés à des profils diversifiés.

Ci-après figurent quelques éléments constitutifs de la conception de l'intranet global Valeo.

principes de conception de l'intranet Valeo - UX Valeo principes de conception de l'intranet Valeo - extract IAFACTORY

principes de conception de l'intranet - UX Valeo principes de conception de l'intranet Valeo - extract IAFACTORY

esquisse d'interface de l'intranet Valeo - UX Valeo esquisse d'interface de l'intranet Valeo - extract IAFACTORY

Résultats

Un environnement digital repositionné

VALEO a fait le choix d'orienter sa stratégie digitale autour d'objets digitaux à dimension plus humaine, privilégiant l'expérience de consultation à l'écueil classique du dispositif institutionnel exhaustif et abscon.

Cette volonté de simplification qui semble être une donnée clé de notre temps, dans un contexte de saturation totale de l'espace médiatique, constitue un défi de taille pour les concepteurs d'objets digitaux, car il s'agit de donner à voir simplement l'essence même de la marque de façon non simplifiante (simplifier de façon non simplifiante, c'est à dire en préservant la richesse portée par la complexité).

Cette réorientation davantage "grand public" du dispositif institutionnel a permis de donner un nouvel élan communicationnel au groupe, faisant de l'écosystème digital un support de communication central dans la stratégie de VALEO.

Vous appréciez notre approche ?

UX design avec IAFACTORY.

On s'occupe de tout ce qui se rattache à la conception et on vous propose des services UX sur-mesure, en fonction de votre projet.
Si vous souhaitez vous faire accompagner en phase de conception

A partir d'ici, les internautes lisent aussi ces cas

ETUDE DE CAS UX
Rationalisation de l'écosystème et conception du nouveau dispositif digital de la sécurité routière.
etude cas ux sécurité routière
ETUDE DE CAS UX
Etude de l'écosystème multi-sites et proposition de rationalisation de l'architecture de l'information.
etude cas ux premier ministre
ETUDE DE CAS UX
Etude de l'environnement concurrentiel et proposition de rationalisation du dispositif digital.
etude cas ux Renault

...

Si vous recherchez des modèles à télécharger pour vos cartographies
Si vous souhaitez améliorer vos compétences en conception
Si vous avez besoin d'un peu d'aide pour votre projet digital