Agnès Massol

Portfolio

Refonte du site de la FLS

J’ai mené la refonte du site de la Fondation pour le Logement Social en tant qu’Ux/Ui Designer

Retrouvez le détail de chaque étape aboutissant au nouveau site de la Fondation pour le Logement Social :

  • Découverte de la FLS​
  • Audit Benchmark
  • Recherche utilisateur
  • Ateliers d'idéation
  • Wireframe Prototype
  • Tests utilisateur
  • Déploiement WordPress
  • Tests utilisateur
  • Fin de mission

La fondation​

La Fondation pour le Logement Social a pour vocation d’assurer ou favoriser le logement de personnes démunies
ou en difficulté, de loger les sans abris, tout en œuvrant au maintien de ces personnes dans un environnement favorable
à un nouveau départ.
Reconnue d'utilité publique, elle aide les plus fragiles à accéder à des logements partagés leur permettant de s'intégrer
à la société et gagner en autonomie.

L'équipe

Sonia ARAUJO : Responsable de communication
Florent LAUNAY : Chargé de communication

Audit​

L'équipe a choisi de ne pas réutiliser l'ancien site et de renouveler entièrement son contenu en lien avec la nouvelle direction de communication.  

Benchmark

Les sites "concurrents" étudiés dont ceux qui visent un public de donateurs proches de ceux de la FLS, comme des associations qui travaillent pour le logement de personnes en difficultés ou des ONG plus conséquentes ayant plus de moyens financiers pour leur communication  
Sélection de 3 sites d'intérêt puis étude des sites à l'aide des critères de Bastien et Scapin, zoning de leur page d'accueil, focus sur le parcours de don (userflow et design system)
Consulter la présentation

Interview​


- Rédaction d'un guide d'entretien, centré sur l'étude des habitudes de navigation des donateurs
- Création d'un panel hétérogène
- Interview visio/téléphonique
- Relève des besoins et attentes des utilisateurs

Questionnaire

La FLS ayant changé sa communication récemment, la question de la perception de son nouveau slogan s'est posée. Il a donc fallu lancer un questionnaire en ligne à ce sujet.
Lancement d'un questionnaire à l'ensemble des équipe de la FLS et des donateurs pour une étude quantitative.

Création de personas

persona primaire

persona primaire

.

persona secondaire

persona secondaire

Contenu du site

 
L'équipe a choisi de ne pas réutiliser l'ancien site et de renouveler entièrement son contenu en lien avec la nouvelle direction de communication.
Tri de cartes ouvert :
- Réutilisation du contenu utile de l'ancien site
- Création de nouveau contenu
- Première catégorisation du contenu

Arborescence

Le site étant neuf, réalisation d'atelier en deux temps : un tri ouvert avec les membres de la FLS puis un tri inversé avec un panel d'utilisateurs. Génération des catégories de l'arborescence.
Tri de cartes inversé :
- Vérification de la validité du contenu final
- Validation ou modification des catégories
atelier idéation

atelier idéation

 

Wireframes

 
À l'aide de l'analyse des audits et des ateliers précédents, création des premiers wireframes : - Création d'un design system - Création des premiers pictogrammes - Réalisation des wireframes

Prototype interactif

 
Création d'un prototype intéractif en vue de tests utilisateur, sur Figma
Tester le prototype Figma

Panel

Création d'un panel selon des critères hétérogènes et pertinents :
Âge, sexe, métier, connaissance du site de la FLS, aisance en informatique, a déjà fait un don en ligne, habitude de navigation (desktop ou mobile)...

Test à distance

En raison des conditions géographiques et sanitaires, la majorités des tests ont été effectués à distance Outils : Google Hangout, Figma
 

Déroulement

 
  • Sélection des parcours à tester,
  • Segmentation en tâche à réaliser,
  • Définition des informations importantes à vérifier
  • Planification des tests
  • Tests
  • Analyse des résultats
  • Recommandations
  • Itération
 

Déploiement WordPress​

- Apprentissage de l'utilisation du CMS
- Choix d'un thème
- Création des pages en respectant les règles d'ergonomie
- Responsive
- Adaptation du contenu
- Formation SEO
- Réalisation de pictogrammes en accord avec la charte graphique
- Création d'un guide d'utilisation à laisser à la FLS
- Mise en ligne du site

Panel

 
Création d'un nouveau panel selon des critères les mêmes critères que précédemmentDoublement du nombre de personnes testées

Test à distance

 
Les conditions étant les mêmes que précedemment, la majorités des tests ont été effectués à distance. Outils : Google Hangout

Déroulement

 
  • Sélection de nouveaux parcours à tester,
  • Segmentation en tâche à réaliser,
  • Définition des informations importantes à vérifier
  • Planification des tests
  • Tests
  • Questionnaire de satisfaction
  • Analyse des résultats
  • Recommandations
  • Itération

Fin de mission

Rédaction d'un guide d'utilisation pour la gestion courante du site Livraison du site.
Captures d'écran du site livré :pages des maisons de vie et de partage footer

Découverte de la FLS

Audit
Benchmark

Recherche utilisateur

Ateliers d'idéation

Wireframe
Prototype

Tests utilisateur

Déploiement WordPress

Tests utilisateur

Fin de mission

Découverte de la FLS

La fondation

La Fondation pour le Logement Social a pour vocation d’assurer ou favoriser le logement de personnes démunies ou en difficulté, de loger
les sans abris, tout en œuvrant au maintien de ces personnes dans un environnement favorable à un nouveau départ.

Reconnue d’utilité publique aide les plus fragiles à accéder à des logements partagés leur permettant de s’intégrer à la société et gagner en autonomie.

L'équipe

Sonia ARAUJO

Responsable de communication

 

Florent LAUNAY

Chargé de communication

Sonia ARAUJO

Responsable de communication

Florent LAUNAY

Chargé de communication

Audit & benchmark

Audit

L’équipe a choisi de ne pas réutiliser l’ancien site et de renouveler entièrement son contenu en lien avec la nouvelle direction de communication.

Seul le nom de domaine est conservé afin de profiter sa notoriété établie.

Benchmark

Les sites “concurrents” étudiés dont ceux qui visent un public de donateurs proches de ceux de la FLS, comme des associations qui travaillent pour le logement de personnes en difficultés ou des ONG plus conséquentes ayant plus de moyens financiers pour leur communication

Audit

Benchmark

L’équipe a choisi de ne pas réutiliser l’ancien site et de renouveler entièrement son contenu en lien avec la nouvelle direction de communication.

Seul le nom de domaine est conservé afin de profiter sa notoriété établie.

Les sites “concurrents” étudiés dont ceux qui visent un public de donateurs proches de ceux de la FLS, comme des associations qui travaillent pour le logement de personnes en difficultés ou des ONG plus conséquentes ayant plus de moyens financiers pour leur communication

Sélection de 3 sites d’intérêt puis étude des sites à l’aide des critères de Bastien et Scapin, zoning de leur page d’accueil, focus sur le parcours de don (userflow et design system)

Recherche utilisateur

Interview

Rédaction d’un guide d’entretien, centré sur l’étude des habitudes de navigation des donateurs

– Création d’un panel hétérogène

– Interview visio/téléphonique

– Relève des besoins et attentes des utilisateurs

 

Questionnaire

La FLS ayant changé sa communication récemment, la question de la perception de son nouveau slogan s’est posée. Il a donc fallu lancer un questionnaire en ligne à ce sujet.

Création des personas

Atelier d'idéation

Contenu du site

La FLS ayant changé sa communication récemment, la question de la perception de son nouveau slogan s’est posé. Il a donc fallu lancer un questionnaire en ligne à ce sujet.

Tri de cartes

– Réutilisation du contenu utile de l’ancien site

– Création de nouveau contenu

– Première catégorisation du contenu

– Réutilisation du contenu utile de l’ancien site

– Création de nouveau contenu

– Première catégorisation du contenu

Arborescence

Le site étant neuf, réalisation d’atelier en deux temps : un tri ouvert avec les membres de la FLS puis un tri inversé avec un panel d’utilisateurs. Génération des catégories de l’arborescence.

Tri de cartes

– Vérification de la validité du contenu final

 
– Validation ou modification des catégories

– Vérification de la validité du contenu final

 
– Validation ou modification des catégories

Contenu du site

Arborescence

La FLS ayant changé sa communication récemment, la question de la perception de son nouveau slogan s’est posé. Il a donc fallu lancer un questionnaire en ligne à ce sujet.

Tri de cartes

– Réutilisation du contenu utile de l’ancien site

– Création de nouveau contenu

– Première catégorisation du contenu

– Réutilisation du contenu utile de l’ancien site

– Création de nouveau contenu

– Première catégorisation du contenu

Le site étant neuf, réalisation d’atelier en deux temps : un tri ouvert avec les membres de la FLS puis un tri inversé avec un panel d’utilisateurs. Génération des catégories de l’arborescence.

Tri de cartes

– Vérification de la validité du contenu final

 
– Validation ou modification des catégories

– Vérification de la validité du contenu final

 
– Validation ou modification des catégories
atelier idéation
Atelier d'idéation

Wireframe & prototype

Wireframes

À l’aide de l’analyse des audits et des ateliers précédents, création des premiers wireframes :

– Création d’un design system

– Création des premiers pictogrammes

– Réalisation des wireframes

Prototype intéractif

Création d’un prototype intéractif en vue de tests utilisateur, sur Figma

Tests utilisateur du prototype

Panel

Création d’un panel selon des critères hétérogènes et pertinents :

Âge, sexe, métier, connaissance du site de la FLS, aisance en informatique, a déjà fait un don en ligne, habitude de navigation (desktop ou mobile)…

Tests à distance

Aux vues des conditions géographiques et sanitaires, la majorités des tests ont été effectués à distance.

Outils : Google Hangout, Figma

Panel

Tests à distance

Création d’un panel selon des critères hétérogènes et pertinents :

Âge, sexe, métier, connaissance du site de la FLS, aisance en informatique, a déjà fait un don en ligne, habitude de navigation (desktop ou mobile)…

Aux vues des conditions géographiques et sanitaires, la majorités des tests ont été effectués à distance.

Outils : Google Hangout, Figma

Protocole et déroulement​
> Sélection des parcours à tester,
> Segmentation en tâche à réaliser,
> Définition des informations importantes à vérifier
> Planification des tests
> Tests
> Analyse des résultats
> Recommandations
> Itération

Déploiement WordPress

– Apprentissage de l’utilisation du CMS
– Choix d’un thème
– Création des pages en respectant les règles d’ergonomie
– Responsive
– Adaptation du contenu
– Formation SEO
– Réalisation de pictogrammes en accord avec la charte graphique
– Création d’un guide d’utilisation à laisser à la FLS
– Mise en ligne du site

 

Tests utilisateur du site WordPress

Panel

Création d’un nouveau panel selon des critères les mêmes critères que précédemment

Doublement du nombre de personnes testées

Tests à distance

Les conditions étant les mêmes que précedemment, la majorités des tests ont été effectués à distance.

Outils : Google Hangout

Panel

Tests à distance

Création d’un nouveau panel selon des critères les mêmes critères que précédemment

Doublement du nombre de personnes testées

Les conditions étant les mêmes que précedemment, la majorités des tests ont été effectués à distance.

Outils : Google Hangout

Protocole et déroulement​
> Sélection de nouveaux parcours à tester,
> Segmentation en tâche à réaliser,
> Définition des informations importantes à vérifier
> Planification des tests
> Tests
> Questionnaire de satisfaction
> Analyse des résultats
> Recommandations
> Itération

Fin de mission

Rédaction d’un guide d’utilisation pour la gestion courante du site
Livraison du site

Quelques exemples de pages du site final

Défiler vers le haut