Accompagnement technique et UX Design pour 20 Minutes

  • #Communication/marketing/performances commerciales
  • #Web & UX Design

20 Minutes

20 Minutes est un éditeur d’information indépendant créé en 2002. Sur le podium des marques de news les plus puissantes en France, aux côtés du Figaro et du Monde, 20 Minutes informe chaque mois plus d’un français sur trois, sur l’ensemble de ses supports (journal, web, mobile). Son audience représente plus de 20 millions de lecteurs chaque mois dont 69 % sur le numérique. (Source : étude ACPM ONE Global V1 2018)

Dans l’objectif d’améliorer constamment l’expérience utilisateur, 20 Minutes souhaitait optimiser son site pour le rendre plus ergonomique, plus esthétique et plus rapide.

C’est dans cette optique que les équipes de Clever Age accompagnent 20 Minutes depuis plusieurs années.

Nous avons choisi Clever Age pour son expertise dans le domaine des webperfs et de l’UX.
L’accompagnement, qu’il s’agisse de technique ou de conception, a été à la hauteur de nos attentes. A tel point que nous continuons la collaboration avec Clever pour nos projets actuels.

Aurélien Capdecomme CTO 20 Minutes

Demande du client

Afin d’optimiser les performances de son site 20minutes.fr, 20 Minutes souhaitait procéder à une refonte, intégrant notamment l’amélioration de la navigation des visiteurs.

20 Minutes souhaitait être accompagné par une agence digitale pour mener à bien ce projet. En tant qu’expert en Responsive Web Design et intégration front, Clever Garden (entité front de Clever Age) a été sélectionné pour cette refonte. La phase d’étude préalable a été réalisée par notre pôle conseil : Be Clever.

1ère mission : Cadrage du projet par nos équipes conseil (Be Clever) au cours d’ateliers de co-conception responsive UX et technique

  • Présentation par 20 Minutes de la mise en œuvre du site mobile : techniques de mise en page / grille fluide, éléments responsives, images, publicités, etc.
  • Étude de reprise de l’existant (site mobile) d’un point de vue UX, front et back-end, dans l’objectif de l’incrémenter au futur site desktop/tablette
  • Échanges sur l’approche stratégique de conserver 2 sites plutôt qu’un seul (limites perçues / alternatives possibles, avantages / inconvénients des deux approches en termes techniques, performance, SEO)
  • Échanges sur l’approche stratégique de 2 sites plutôt qu’un seul (limites perçues / alternatives possibles, avantages / inconvénients des deux approches)
  • Étude d’une éventuelle refonte UX et design en complément de la refonte technique
  • Définition des critères de choix des breakpoints majeurs et mineurs : design fluide (BBC News, L’Express) ou fixe multi paliers (The Guardian), approche Atomic Design ou globale, grille élastique ou non, etc.
    Étude/choix des solutions techniques pour la mise en œuvre : librairies et/ou frameworks CSS/Stylus, JavaScript/jQuery, tailles et ratio d’images à générer, optimisation des performances, prise en compte du SEO, publicités, etc.

De la phase de cadrage à la mise en œuvre

Suite à ces ateliers de co-conception, la décision retenue a été de préserver le fonctionnement en mode adaptatif sur la plupart des pages, dissociant une partie des templates entre mobiles et autres appareils, avec tout de même des comportements au maximum responsives.

2e mission : Mise en œuvre, choix techniques et application RWD

De multiples enjeux pour ce projet :

  • Développer un outil innovant qui reste au maximum accessible,
  • Utiliser des technologies spécifiques à Google (AMP) qui permettent de se démarquer en référencement, sujet stratégique dans le secteur des médias,
  • Prendre une longueur d’avance sur ses concurrents,
  • Fournir aux lecteurs un contenu de qualité mis en valeur par l’UX Design.

De nombreux chantiers :

  • Documentation et organisation de la charte graphique technique web 20 Minutes
  • Réorganisation des scripts JS par fonctionnalités et mise en place de Webpack
  • Mise en place de Babel et de certains polyfills
  • Suppression progressive de jQuery
  • Remplacement de la fonte d’icones par des symbols SVG
  • Mise en place de srcset pour les images responsives et d’une stratégie de lazyloading des images
  • Mise en place d’une stratégie de chargement des fontes
  • Création de nouvelles pages AMP
  • Mutualisation du code des pages AMP et du reste du site pour un rapprochement graphique et simplification de la maintenance

Les points forts du projet

  • La valeur du“mobile-first
  • Des images responsives avec srcset
  • Une approche itérative, page par page, rubrique par rubrique
  • Uniformisation de l’apparence des pages AMP et du site

3e mission : Audit de performance et recommandations

Nous avons réalisé un audit de performances de quelques pages clés sur mobile et desktop, et avancé nos recommandations d’améliorations.

Nous avons proposé la mise en œuvre d’une supervision de la performance, avec définition de KPI.

Résultats chiffrés

Selon une étude webperf Fasterize pour le JDN parue en février 2018, le nouveau site 20minutes.fr se classait 3ème des sites média avec un speed index de 4 332.

D’autre part, la qualité de l’expérience publicitaire a elle aussi été optimisée grâce aux nouveaux emplacements et des taux de visibilités accrus.