Michaël Beillaud
Michaël Beillaud, Directeur Artistique (UX/UI design portfolio)
rwd-xps-01.jpg

V1 L'Express Responsive Templates

Projet de refonte de l'ensemble des templates de L'Express vers un design fluide et flexible multi-supports.

Client : L'Express │ Support : Web │  Année : 2015/16 │ Rôle : UX, UI Design

 

Objectifs

  • Confort et uniformisation des parcours et de l'expérience utilisateur
  • Un meilleur taux de conversion possible
  • Une bonne provision et centralisation de qualité de la data
  • Accélérer la mise en production de nouveaux formats éditoriaux innovant et visuellement impactant
 

Participation

  • Recommandation stratégique auprès de la direction digitale : rédaction et présentation de supports de présentation au responsive design.
  • Mise en place d’ateliers de conception adaptées centrés utilisateurs et en intégrant la vision business (pub, audience, SEO, parcours payant)
  • Création de stand-up d’équipe projet quotidien
  • Réalisation de tests utilisateurs (Testapic) et rédaction des propositions d’évolutions fonctionnelles
  • Wireframing et prototypage haute définition (UXPin, Marvel)
  • Mockups Photoshop
  • Réalisation de composants modulaires et patterns librairies (Webflow)
  • Création de 8 templates principaux
  • Présentation et validation hebdomadaire au comité de pilotage
 

Conception mobile-first et performance

Méthode de conception qui permet d’axer naturellement l’importance du contenu et comment il doit s’afficher en commençant par les plus petits écrans puis en apportant une amélioration progressive sur les écrans proposant une plus grande surface d'affichage.

Elle a permis l'introduction des nouvelles navigations tactiles en amont du projet et d'améliorer les performances globales (moins de HTML, moins de ressources chargées)

Lié étroitement avec l’équipe front et back-end, la performance était un enjeu prioritaire tout au long du projet.
Nous avons donc fixé comme objectifs stricts d’un maximum de 1Mo les pages les plus consultées, pour un temps de chargement maximum de 3secondes.

L’installation d’un budget de perfomance à respecter tout au long du déploiement de nos pages a permis d’analyser et d’implémenter ou non certaines fonctionnalités et modules.

La demande de création d’un serveur d’image pour la diffusion d’images HD et optimisées pour la performance d’’affichage.

 

Stratégie

Mise en place du responsive templates par templates :

  • Les nouvelles structures cohabitent avec celles actuelles afin d’être time to business.
  • Visible rapidement pour l’utilisateur sur les pages les plus consultées
  • Livraisons régulières des templates dans des délais courts
  • Retour d’expérience rapide
 

Templates

  • Article
  • Live
  • Home page
  • Dossier
  • Diaporama
  • Palmarès et base de données
 

Composants

  • Styles guides CSS :  typographie, icones, couleurs, boutons, formulaires etc.
  • Grille flexible : 12 colonnes
  • Navigation à 3 niveaux