conseil en ergonomie numérique

Conception site web corporate exemple

étude de cas ux design

Exemple de conception et de refonte du dispositif digital : valeo.com.
Cette étude de cas UX design porte sur l'architecture de l'information et le design d'interaction du site corporate de l'équipementier Valeo : repositionnement du site web et conception du site mobile.

La problématique digitale

cas ux valeo
Révisé en Septembre 2020

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

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

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
iafactory - Julien MUCKENSTURM

 - UX Valeo mind-map organisation des recherches valeo.com
iafactory - Julien MUCKENSTURM

analyse des contenus existants - UX Valeo analyse des contenus existants valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

objectifs du dispositif - UX Valeo objectifs du dispositif valeo.com
iafactory - Julien MUCKENSTURM

exemple de persona - UX Valeo exemple de persona, profils d'utilisateurs valeo.com
iafactory - Julien MUCKENSTURM

exemple de persona - UX Valeo exemple de persona, profils d'utilisateurs valeo.com
iafactory - Julien MUCKENSTURM

diagnostic de l'existant - UX Valeo diagnostic de l'existant valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

priorisations et scenarisation - UX Valeo priorisation et scenarisation de la page d'accueil valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

wireframe, esquisse d'interface, profil du groupe - UX Valeo wireframe, esquisse d'interface, profil du groupe valeo.com
iafactory - Julien MUCKENSTURM

wireframe, esquisse d'interface, espace RH - UX Valeo wireframe, esquisse d'interface, espace RH valeo.com
iafactory - Julien MUCKENSTURM

wireframe, esquisse d'interface, espace magazine  - UX Valeo wireframe, esquisse d'interface, espace magazine valeo.com
iafactory - Julien MUCKENSTURM

wireframe, esquisse d'interface, version chinoise - UX Valeo wireframe, esquisse d'interface, version chinoise valeo.com
iafactory - Julien MUCKENSTURM

créa esquisse première version - UX Valeo créa esquisse première version valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

inventaire des gabarits - UX Valeo inventaire des gabarits du site valeo.com
iafactory - Julien MUCKENSTURM

architecture de l'information - UX Valeo architecture de l'information valeo.com
iafactory - Julien MUCKENSTURM

principes et structures de navigation - UX Valeo principes et structures de navigation valeo.com
iafactory - Julien MUCKENSTURM

principes et structures de navigation - UX Valeo principes et structures de navigation valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

wireframe page d'accueil - UX Valeo wireframe page d'accueil valeo.com
iafactory - Julien MUCKENSTURM

zoning général - UX Valeo zoning général valeo.com, pages intérieures
iafactory - Julien MUCKENSTURM

wireframe - UX Valeo wireframe valeo.com, espace engagements
iafactory - Julien MUCKENSTURM

wireframe - UX Valeo wireframe valeo.com, espace expertises
iafactory - Julien MUCKENSTURM

wireframe valeo.com, espace magazine innovation - UX Valeo wireframe valeo.com, espace magazine innovation
iafactory - Julien MUCKENSTURM

wireframe valeo.com, espace RH candidat - UX Valeo wireframe valeo.com, espace RH candidat
iafactory - Julien MUCKENSTURM

wireframe valeo.com, espace investisseur - UX Valeo wireframe valeo.com, espace investisseur
iafactory - Julien MUCKENSTURM

 principes d'écosystème Valeo - UX Valeo principes d'écosystème Valeo
iafactory - Julien MUCKENSTURM

 créa page d'accueil valeo.com - UX Valeo créa page d'accueil valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

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

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

navigation site mobile m.valeo.com  - UX Valeo navigation site mobile m.valeo.com
iafactory - Julien MUCKENSTURM

exemple d'écran site mobile m.valeo.com  - UX Valeo exemple d'écran site mobile m.valeo.com
iafactory - Julien MUCKENSTURM

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
iafactory - Julien MUCKENSTURM

principes de conception de l'intranet - UX Valeo principes de conception de l'intranet Valeo
iafactory - Julien MUCKENSTURM

esquisse d'interface de l'intranet Valeo - UX Valeo esquisse d'interface de l'intranet Valeo
iafactory - Julien MUCKENSTURM

Refonte et optimisation

Des travaux de prospective ont été menés en 2016 pour repositionner le dispositif digital et moderniser l'approche.

conception valeo synopsis stratégique
iafactory - Julien MUCKENSTURM

ux design valeo principe de conception
iafactory - Julien MUCKENSTURM

ui design persona de site web
iafactory - Julien MUCKENSTURM

etude de cas conception conception page d'accueil desktop
iafactory - Julien MUCKENSTURM

conception d'interface projection responsive tablette
iafactory - Julien MUCKENSTURM

wireframe adaptation mobile
iafactory - Julien MUCKENSTURM

wireframing panneau de navigation
iafactory - Julien MUCKENSTURM

wierframe design hub activités
iafactory - Julien MUCKENSTURM

conception ui page article
iafactory - Julien MUCKENSTURM

Résultats

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

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.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources autour du projet Valeo

Plus de cas sociaux UX !
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