Création d’une interface de visualisation des performances du site
Référence Bâtiment, Bailly-Quaireau, est une entreprise spécialisée dans le domaine de la construction et de la rénovation de bâtiments. Leur activité se concentre sur la réalisation de projets de construction neuve, de rénovation et d’agrandissement, ainsi que sur la gestion de chantiers dans le secteur du bâtiment.
Les besoins
- Avoir un référentiel de performance
Mon rôle
Cheffe de projet, UX/UI Designer
La solution
Faire une interface dédiée aux performances
Les outils utilisés
Analyse & Conception
Tout d’abord, j’ai lancé un test lighthouse sur chrome sur le site (par type de page) pour savoir quelles informations complémentaires, en plus du score, lighthouse mettait en avant. J’ai pu alors découvrir qu’en fonction du score donné, il y a plus ou moins des conseils donnés pour améliorer ce score.
Avoir un référentiel de performance permet de faire le constat sur les scores afin de se baser dessus et de suivre l’évolution au fur et à mesure du site. Pour cela, j’ai décidé de faire une interface sur l’admin du site, elle permettrait d’y voir les scores et les informations complémentaires. On y trouvera les informations suivantes :
- Des types de pages :
- Accueil
- Catégorie
- Résultat de recherche
- Page produit
- Blog
- Un code couleur en fonction du score :
- Rouge = 0 à 49
- Orange = 50 à 89
- Verte = 90 à 100
- Les catégories des performances en version mobile et desktop :
- Performances
- Accessibilité
- Bonnes pratiques
- SEO
- Diagramme en courbe pour suivre l’évolution des scores sur les performances :
- Une courbe pour une performance
- Le choix de la version souhaité (desktop ou mobile)
- Un date picker pour choisir une période : Maintenant / 1 mois avant / 2 mois avant / 3 mois avant
- Liste des types de page :
- La possibilité d’ajouter un type via un bouton d’ajout
- Les types de page qui regroupe toutes les pages de ce type (exemple : Type de page = « Produit », rassemble toutes les pages produits)
- Les scores totaux des performances par type de page sur l’ensemble des pages
- Avoir l’accès au détail des types de page : score, rapport, url …