Les livres sont pour moi une source d’inspiration et réflexion très importante. Je suis au quotidien près de 800 blogs (ce qui représente 2 à 3 heures de veille par jour), les livres sont donc  un moyen de s’extraire de ce quotidien et de prendre du recul. Dans ce cadre, je souhaiterais vous faire partager mon enthousiasme sur le dernier livre d’Yves Caseau : Processus et Entreprise 2.0. Pour la petite histoire, Yves est le DGA de Bouygues Telecom en charge des technologies et de l’innovation.

 

Cet ouvrage aborde le vaste sujet de l’innovation au travers de la collaboration et du Lean management. Terme obscure pour le plus grand nombre, le lean est pourtant un levier très puissant d’amélioration de la performance des entreprises. Ça tombe bien, car c’est également la philosophie de l’Entreprise 2.0 (innover par la collaboration). La force de ce livre est de faire le lien entre ces deux pratiques : l’optimisation des processus au travers du lean management et la stimulation de la collaboration au travers de la fluidification des échanges et le partage.

L’ouvrage est décomposé en trois grandes parties (Comprendre, Organiser, Optimiser) et propose un contenu très pédagogique, mais d’une rare densité. Avec cet article, je souhaite partager avec vous les extraits les plus marquants, en espérant que cela vous motivera à le lire.

Le livre commence donc par un constat alarmiste, mais réaliste :

• Les entreprises sont victimes de la complexité croissante du monde et de leur propre organisation ;
• La gestion des flux d’information est un levier de performance très puissant ;
• L’amélioration des processus est un chantier complexe qui requiert de la méthode.

Au sujet des processus :

• Un processus est « un ensemble d’activités réalisées par des acteurs, dont la finalité est de produire de la valeur pour un client, et dont le commencement est associé à un évènement externe« ;
• Le processus permet de définir un chemin critique, toute déviation engendre des surcoûts ;
• Les processus doivent être modélisés pour pouvoir être améliorés ;
• Nous pouvons identifier huit axes d’optimisation (orientation client, réduction du temps d’exécution, réduction des anomalies, capitalisation des bonnes pratiques, transformation par la mesure (KPIs), robustesse en cas de défaillance, allocation des ressources et interfaces entre les activités ;
• Robert T Bulton : « L’hypercompétivité implique l’excellence, excellence qui exige une amélioration continue des processus » ;
• Le Saint-Graal est la politique de la qualité totale prônée par Toyota avec ses 5 zéros (zéro délai, zéro stock, zéro papier, zéro panne, zéro défaut) ;
• L’innovation permet d’optimiser les processus, mais pour innover, il faut communiquer efficacement ;
• Le S.I. est un accélérateur de pilotage des processus, d’où l’importance de pratiques comme le Business Process Management qui permet de lier S.I. et processus.

Au sujet de la mesure :

• Il existe quatre types d’indicateurs (fonctionnement, résultats, efficience, déploiement) ;
• Il est impossible de réagir à une mesure sans un modèle de fonctionnement (un processus modélisé), car sinon elle est abstraite ;
• Sans objectifs de performance, les KPIs ne signifient rien, un objectif doit être SMART (Spécifique, Mesurable, Atteignante, Temporalisé) ;
• Le KPI est un outil de transformation, il sert à mesurer le progrès (ce qui ne se mesure pas s’évalue) ;
• Les « Balance Score Cards » servent à lier et hiérarchiser les objectifs et sous-objectifs entre eux, ils sont généralement regroupés en quatre domaines (finance, client, processus et apprentissage).

Au sujet de l’Entreprise 2.0 :

• Elle caractérise le passage d’un mode de management centralisé et figé à un mode décentralisé et réactif ;
• Elle repose sur quatre principes (chaque collaborateur à le droit à la parole, l’émergence de communautés de pratiques et d’intérêts, une information qui circule rapidement et qui est accessible à tous, une collaboration facilitée par l’apprentissage) ;
• Pour innover, une entreprise / organisation doit favoriser le tissage de liens faibles entre les collaborateurs qui ne sont pas fréquemment en contact (notion de distance sociale) ;
• L’entreprise du XXIème siècle anticipe les savoirs dont elle aura besoin en favorisant l’émergence de communautés de pratiques.

Au sujet de la communication :

• La communication est un processus qui consomme le temps et la ressource de celui qui reçoit l’information ;
• La qualité / rapidité des décisions ne s’améliore pas avec la quantité d’information (au contraire), la ressource rare n’est plus l’information mais l’attention , d’où la nécessité d’instituer un professionnalisme dans la gestion de l’information (formats, contraintes, règles…) ;
• Il convient de favoriser les canaux de communication dont les destinataires sont implicites, car ils décloisonnent l’information et évitent l’engorgement (principe de consommation asynchrone).

Au sujet de l’organisation du temps :

• Il existe quatre types de réunions (information, échange, décision, appropriation) qui permettent de normaliser le mode de conduite et d’optimiser le temps de chacun ;
• Il convient de responsabiliser les participants en attribuant des rôles et en limitant le nombre de réunions (ex : un cumul mensuel du temps passé en réunion) ;
• Toute coopération récurrente mérite la formalisation d’un processus pour en optimiser le fonctionnement ;
• Nécessité d’adopter un rythme commun (« track time ») pour synchroniser les actions et tâches de chacun et optimiser le taux de charge.

Au sujet du lean management :

• L’objectif est de rendre l’entreprise rapide et flexible, c’est LA méthode d’optimisation de l’efficacité ;
• Le lean ne s’explique pas, il se pratique ;
• L’optimisation passe par une réduction du gaspillage (dépenses opérationnelles, immobilisations) et une amélioration de la satisfaction client (analyse fine de la valeur perçue) ;
• C’est une méthodologie d’apprentissage et d’amélioration continue qui repose sur le partage et la capitalisation de bonnes pratiques ;
• Six Sigma est une déclinaison des principes du lean , cette méthodologie d’entreprise repose sur les boucles d’amélioration DMAIC (Define, Measure, Analyze, Improve, Control) ;
• On retrouve les principes du lean dans l’industrie des services avec notamment des approches comme CMMi.

Au sujet de la culture 2.0 :

• L’entreprise 2.0 doit reconnaitre et attribuer toutes les contributions, même les plus modestes ;
• La reconnaissance est un des principaux moteurs de l’action en entreprise (culture du « générique de film ») ;
• Le plaisir est essentiel pour vaincre la peur du changement et stimuler l’apprentissage ;
• L’entreprise se construit autour de l’innovation de tous.

Encore une fois, ce ne sont que des extraits pour vous donner envie de lire ce livre (une autre critique ici : Processus, entreprise 2.0, LEAN et agilité). Donc comme vous l’aurez compris, j’ai été très enthousiasmé par cette lecture, un parfait complément d’autres livres abordant la collaboration et l’entreprise 2.0 sous un autre angle comme ReWork ou celui de Yvan Michel.

Depuis que je m’intéresse aux médias sociaux dans une optique marketing / relation client, j’ai vraiment l’impression que les social analytics sont le parent de la discipline. Généralement intégrées aux offres d’écoute ou de gestion d’activité, les solutions de mesure d’audience des médias sociaux sont loin d’être satisfaisantes : 78% of European marketers unhappy with social media measurement. Certes, les marketeurs en reconnaissent l’importance, mais peu se sont équipés pour mesurer correctement l’activité.

Pourtant le sujet est d’une importance primordiale, car sans données fiables, le calcul du retour sur investissement est impossible (Calculer le ROI des médias sociaux est une perte de temps). L’analyse de votre audience sur les médias sociaux pour calculer le ROI est donc un élément-clé de votre stratégie de présence, un objectif d’ailleurs confirmé par cette récente étude du cabinet Altimeter :

Donc si je résume : d’un côté des marketeurs qui ont besoin de données fiables pour justifier les investissements, de l’autre des solutions qui laissent à désirer. Qui laissaient à désirer, car les différents acteurs se mobilisent pour combler cette lacune :

• Il y a tout d’abord Facebook qui a récemment introduit un nouvel outil de mesure dans ses insights (Facebook Launches New Metric: “People Talking About”)
• Il y a également Twitter qui a annoncé le lancement imminent de son propre service (Twitter Releases Web Analytics Tool)
• Nous avons également des acteurs déjà en place qui enrichissent leur offre comme Sysomos qui intègre maintenant les données de Google+ (Sysomos MAP Now Integrates Google+)
• Signalons également des solutions d’analytics plus verticales comme celle proposée par Geotoko, rachetée par Hootsuite (Hootsuite Jumps Into Location-Based Marketing With Acquisition of Geotoko)
  
• D’autres acteurs tentent enfin de s’imposer comme LE système de scoring universelle à l’image de Disqus (Disqus Is Testing A New Social Ranking System) et de Klout avec ses Topics Pages (Dive Deeper into Klout with Topic Pages) ex: Business.

Bref, tout le monde s’agite, car le marché est chaud et s’impatiente. Le fait de proposer des solutions intégrées est une bonne première étape, mais elle est à mon sens loin d’être efficiente, car les annonceurs n’ont pas une approche isolée des campagnes, ils ont besoin d’extraire les données pour les consolider et les exploiter (De l’intérêt et de la difficulté d’exploiter un tableau de bord). Donc la partie n’est pas encore gagnée, loin de là.

Finalement, quand on fait le tour, c’est peut-être Google qui est potentiellement le mieux placé sur ce terrain :

• Google a une technologie de recherche qui n’a plus à faire ses preuves ;
• L’offre d’Analytics est enfin en train de se scinder en deux avec un volet Premium ;
• Ils ont intégré PostRank en début d’année, une solution dédiée aux blogs (Google poursuit sa révolution sociale avec le bouton +1 et le rachat de PostRank) ;
• Ils viennent de racheter SocialGrapple, un outil spécifiquement dédié à Twitter (Google Acquires Twitter Analytics Startup SocialGrapple).

Au final, nous avons donc : une plateforme technique d’écoute et de collecte parfaitement au point, une offre de web analytics à compartiments, des solutions verticalisées pour les blogs et Twitter. Il ne leur reste plus qu’à racheter un acteur bien positionné sur Facebook et ils pourront lancer l’offre ultime. Cette dernière sera-t-elle suffisante pour exploiter les médias sociaux à leur plein potentiel ? Non, car les outils ne sont qu’une variable de l’équation.

Ainsi, l’important n’est pas le choix de l’outil, mais l’organisation mise en place pour interpréter les données et diffuser les enseignements. Rien ne sert d’avoir l’outil le plus sophistiqué si vous n’avez pas la capacité de livrer aux décideurs une information à valeur ajoutée sur l’activité, le sentiment vis-à-vis de la marque ou des produits, la performance de vos actions et la rentabilité de vos investissements. Comme toujours, cette organisation est fonction de la taille et de la maturité des équipes internes. D’ailleurs je vous recommande à ce sujet l’article d’Altimeter qui illustre bien les différentes configurations possibles : Framework for Social Analytics.

Ceci étant dit, et à la décharge des éditeurs de solution, les plateformes sociales évoluent rapidement, de même que les APIs permettant permettant de collecter les données (aussi bien chez Facebook, que Twitter, que Google+…). Difficile dans ces conditions de proposer une offre pérenne, car tout l’intérêt de la démarche n’est pas de pouvoir sortir des metrics à un instant t, mais de surveiller leur évolution.

Moralité : Affaire à suivre…

Après la semaine réglementaire de teasing, le nouveau site de Dior est enfin en ligne. Que dire, sinon que je suis extrêmement déçu par ce site marchand digne du siècle dernier. Non pas que la réalisation laisse à désirer, bien au contraire, mais les choix de conception me semblent carrément anachroniques.

Mais commençons par le commencement avec en premier lieu la fameuse campagne de teasing :

Avouez qu’avec un teaser comme celui-ci, on est en droit de s’attendre à quelque chose d’exceptionnel, non ? Bref… passons et rentrons dans le vif du sujet avec la page d’accueil.

Première chose surprenante, le site accueille les visiteurs avec une très belle photo d’un magasin. Traduction : « Mais qu’est-ce que vous faites sur internet ? Venez donc nous voir en magasin !« . Je peux comprendre que les sites web d’enseignes de distribution centenaires comme les Galleries Lafayette ou Harrod’s mettent en avant leur magasin, mais là j’ai du mal à comprendre le sens de cet accueil (à moins que je ne le comprenne trop bien…).

Donc comme vous pouvez le constater, il ne se passe rien sur cette page puisqu’il faut cliquer sur « Entrer« . Je me souviens avoir vu ce genre de chose dans les années 2000, à l’époque on appelait ça une jump page, mais c’était au siècle dernier… et nous sommes bientôt en 2012 !

Une fois la porte d’entrée poussée (j’imagine que c’est une façon de décourager les internautes et de leur faire comprendre qu’ils doivent plutôt venir en magasin), nous arrivons enfin à la véritable page d’accueil qui oriente les visiteurs vers les différents univers.

Pas grand-chose à redire sur cette page, tentons donc notre chance dans le premier univers : La Maison Dior en vidéo. Après un temps de chargement plutôt court (nous en reparlerons), les différentes vidéos sont représentées sur un grand mur qui défile avec un effet de perspective 3D.

Cette interface est plutôt réussie, mais n’a rien d’original puisque Cooliris nous propose déjà un équivalent générique depuis 3 ans. Quittons donc cette partie institutionnelle, et tentons donc notre chance dans la boutique « Hommes ».

Comme vous pouvez le constater, les traitements graphiques sont cohérents avec la page précédente, mais le choix d’une vidéo en plein écran est surprenant, d’autant plus qu’il n’y a pas de zones réactives et qu’elle est plutôt longue à charger.

En pages intérieures, nous retrouvons des fiches produits plutôt étriquées : petits visuels et descriptions minimalistes.

Un peu déçu par la pauvreté du contenu, vous vous dites qu’ils doivent forcément se rattraper sur les mini-sites, donc retour à la page d’accueil et direction « Miss Dior ». Après un chargement extrêmement long, vous avez donc droit à une belle photo en plein écran. OK super. Vous noterez le soin apporté par les concepteurs de cette page pour rendre les liens sous la photo les plus invisibles possible :

Après un autre temps de chargement affreusement long, vous avez enfin droit à détailler le produit sous toutes ces coutures. Les visuels sont beaux, mais la visite guidée sous forme de vidéo est un peu trop linéaire, j’aurais bien aimé pouvoir manipuler ce beau sac à main.

Bien évidemment ce mini-site n’est pas marchand (il vous est poliment demandé de vous rendre à la boutique la plus proche de chez vous). Finissons donc notre visite de ce nouveau site à la boutique « Horlogerie ». Là encore, les codes graphiques sont cohérents, par contre les modules enrichis exploités surprennent : un beau carrousel pour présenter les montres, mais pas de vue 360° ou de zoom XL sur des produits valant pourtant une petite fortune !

Pas découragé pour autant, je me dirige donc vers la boutique « Beauté », avec comme toujours un large visuel en page d’accueil, mais un temps de chargement plus raisonnable.

Visiblement cette boutique a fait l’objet d’une refonte en début d’année, cela s’en ressent notamment dans le menu de navigation qui facilite grandement le repérage et l’orientation :

En pages intérieures, vous noterez le soin particulier apporté aux pages de collections, qui font office de page de catégorie. La page est tout à fait en accord avec le reste du site, mais reste encore largement contre-intuitive, puisqu’il faut arriver à attraper la minuscule barre de défilement horizontale en bas de page pour avoir accès à l’ensemble des produits de la collection :

Au niveau des fiches produit, la mise en page a été remaniée (on se demande pourquoi), mais le contenu reste toujours aussi pauvre : petit visuel et texte minimaliste.

Au final, nous avons donc un « portail » avec des boutiques très sophistiquées graphiquement, mais plutôt décevantes en terme de contenus et manquent cruellement d’intuitivité et de chaleur. Certes, il y a les codes du luxe à respecter, mais l’expérience n’est au final pas très plaisante, pourtant je me suis donné du mal pour essayer de trouver des points positifs à raconter. Ce nouveau site de Dior souffre, selon moi, d’un anachronisme manifeste : il est conforme à ce que l’on pouvait faire avec le rich media au siècle dernier, mais n’est plus en phase avec les pratiques plus « agiles » du moment que l’on retrouve avec d’autres boutiques (cf. Nouvelles boutiques pour Zara et Uniqlo).

Le fait que Dior soit une marque de luxe justifie-t-il le mauvais traitement infligé aux internautes ? Je ne pense pas, car il existe d’autres exemples de marques de luxe qui font un usage plus raisonnable du rich commerce (Gucci, Burberry, IWC, Rolex…). Je suis intimement convaincu que l’avenir du commerce en ligne ne se passera pas par un enrichissement à l’extrême des éléments multimédia (photos toujours plus grandes, films à la résolution toujours plus élevés…), mais par le choix du meilleur compromis entre valorisation des produits, simplicité d’usage et optimisation du temps de chargement. Deux leviers sont à mon sens essentiels : la richesse du contenu (textuel mais également photos, vidéos, témoignages…) et la prise en compte des terminaux alternatifs (tablettes, tv connectées…). Donc comme vous l’aurez compris, même si la réalisation du nouveau site de Dior est de qualité, l’expérience n’est clairement pas à la hauteur. Ceci nous prouve donc que l’expérience utilisateur n’est pas directement liée à la quantité de bande passante utilisée, mais plutôt à la qualité de l’accueil et du contenu.

Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version « grand large » (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil « version mobile » ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…