Rapport de synthèse

L’équipe PaWWeb

le 4 décembre 2023
Sommaire

1. Définition du projet 4. Benchmark

2. Notes de cadrage : Audit du site
a. Page d’accueil
b. Page de présentation
c. Page de contact
3. Questionnaire
5. Interviews
6. Etudes sectorielles
7. Personas et carte d’empathie
8. Parcours utilisateur
9. Prototype
10. Tests

2.
 Introduction du refuge SPA Lagord
et ses environs
Le refuge de la SPA Lagord prend en charge les animaux égarés ou
en situation de détresse dans la région de La Rochelle et ses
environs. Ils leur fournissent les soins nécessaires et veillent à
satisfaire tous leurs besoins afin de faciliter leur adoption par une
nouvelle famille.

Lagord, 17140 Pension, adoption,

fourrière

88 bénévoles en plus
en 2023
362 animaux adoptés
en 2023 3.
 1.
Recherche

Définition du projet

4.
Introduction du Objectifs
projet refuge SPA Refonte du site existant afin

Lagord et ses d’améliorer l’ergonomie et le

référencement du refuge.

environs Former les personnels à

l’utilisation des outils
informatique.

Livrable site Wordpress

5.
 EQUIPE PAWWEB

Tristan Lamia El Kevin Valentin

Lembert Khoukhi Voisine Brebion
Développeur Développeur Développeur Développeur

6.
LOGICIELS UTILISÉS
Notion
Gestion des tâches /
retranscription des retours
utilisateurs ainsi que la
méthodologie Discord
Faire des réunions pour
faire un points, échanges
au sein de l’équipe.
Figma
Logiciels adaptés pour la
réalisation des wireframes
et réalisations graphique.
Canva
Réalisations graphique et
mise en forme de nos
résultats (variables)
POURQUOI AVOIR CHOISI CE
PROJET ?
Nous avons été touché par le fait de
venir en aide à une association qui
donne plus que ce que l’on pense au
quotidien. Leur venir en aide c’est
aussi venir en aide à tous ces animaux
qui sont abandonnés / maltraités.

NOTRE PLANNING

7.
 Analyse approfondi du projet

Outils existants Les éléments attendus Les besoins préssentis côté

Analyse des sites “concurrents” à la Qu’est ce qui nous est demandé de
utilisateurs
SPA réaliser ?
Qu’est ce que nos utilisateurs
aimeraient ?
Un logo neuf

SPA Paris Une refonte graphique

Trier les informations pour éviter la
Avoir une interface plus ergonomique
et accessible
Resto du coeur redondance
Mettre en avant les dons (en nature =
Avoir des actualités en temps réel
Avoir un site moins lent
Association BIOTOP (matériel) et péculier)
Mettre en avant la cause animale
Synchronisation des actualités sur le site
Facebook et le site de l’association

8.
 2.
Introduction à la note de
cadrage
Audit du site internet existant

9.
Partie 1 : analyse de
la page d’accueil
Section Header

10.
AUDIT DU SITE INTERNET EXISTANT :
SECTION HEADER
Ajustements Barre de navigation Carrousel

Inconvénients Idées
d’amélioration Photos carrousel à
Barre de changer : mettre des
navigation décalée Ajouter menu photos plus réaliste
L’animation du bouton Onglets à retirer dépliant “service” Le carrousel est trop
“Retour en haut” est à Modifier la barre qui afficherait le grand
retirer de recherche bouton “adoption”, L’animation est trop
Logo d’attente trop retirer l’icône de “fourrière” et rapide : on a pas le
long patte entre chaque “pension” temps de lire
onglet Mettre en avant
l’actualité dans le
carrousel

11.
 Partie 1 : analyse de
la page d’accueil
Section Services

RETOUR À LA VUE D'ENSEMBLE

12.
AUDIT
AUDITDU
DUSITE
SITEINTERNET
INTERNETEXISTANT
EXISTANT:: SECTION SERVICES

AVANTAGES
Bonnes photos (réaliste suivant
les services proposés,
l’utilisateur s’y retrouve)
INCONVÉNIENTS
Le contenu du texte est trop
petit, compliqué à lire
Remplacer le bouton “En savoir
plus” par un effet de hover”, pour
plus d’esthétique.
La taille des cards n’est pas
unifiée, ne donne pas un
sentiment de sérieux au site. 13.
Partie 1 : analyse de
la page d’accueil
Section Don

14.
AUDIT DU SITE INTERNET EXISTANT :
AVANTAGES
La présence de la page don
rappelle à l’utilisateur qu’il a la
possibilitée même minime
d’aider les personnes qui
œuvrent chaque jour pour le
bien-être animal
SECTION DONS
INCONVÉNIENTS
Partie don mal agencée,
l’utilisateur doit passer par des
étapes compliquées pour faire
un simple don
Enlever le bouton “contactez-
nous”, le remplacer par un
bouton “don”.
Pas de type de dons
Les images utilisées sont
impersonnelles, on ne sent pas
d’implication éthique. 15.
 Partie 1 : analyse de
la page d’accueil
Section Adoption

Cette section ne fera plus

partie de la page d’accueil.
Elle peut-être utilisée d’une
autre manière comme par
exemple la suggestion
d’animaux dans la
carrousel.

16.
Partie 1 : analyse de la page
d’accueil On a voulu innover en mettant
les actualités dans la carrousel
Section Actualités pour directement informer
l’utilisateur ce qu’il se passe à la
SPA.

Section Adoption

La section adoption ne fera

plus partie de la page d’accueil.
Elle peut-être utilisée d’une
autre manière comme par
exemple la suggestion
d’animaux dans le carrousel.

17.
Partie 1 : analyse de
la page de
présentation

18.
AUDIT
AUDITDU
DUSITE
SITEINTERNET
INTERNETEXISTANT
EXISTANT:: PAGE PRÉSENTATION

AVANTAGES INCONVÉNIENTS
Le contenu est riche et Le bouton “les bénévoles”
informatif n’affichent pas de contenu
textuels
Revoir l’agencement du contenu
au clique du bouton “nos locaux”
Bouton “qui sommes-nous” la
liste des mairies n’est pas à jour

19.
Partie 1 : analyse de
la page de contact

20.
AUDIT
AUDITDU
DUSITE
SITEINTERNET
INTERNETEXISTANT
EXISTANT:: PAGE CONTACT

AVANTAGES INCONVÉNIENT
La présence des numéros La page pourrait être mieux
d’urgence à appeler apparait agencée. Elle nous renvoie un
dans la page contact sentiment de “bazar”.

21.
 Questionnaire
Nous avons établi deux types de questionnaire, un questionnaire
en ligne et un questionnaire pour les interviews. Nous les avons
partionnés en plusieurs thèmes (informations générales, adoption,
budget...) afin d’élargir nos variables.

Le but du questionnaire en ligne est de récolter des données en

masse et rapidement. Ces données nous donnent un premier
aperçu de nos variables tandis que le questionnaire pour
interviewer nous permet de récolter des informations plus
approfondis et de vérifier / confirmer les variables obtenu pour le
questionnaire en ligne.

questionnaire_pawweb.pdf
22.
 Benchmark
Le terme benchmark qui signifie repère en anglais désigne tous les
moyens permettant d'évaluer les performances d'une entreprise par
comparaison avec ses concurrents.

Afin d’analyser l’association, notre interlocutrice nous a fournie des

exemples d’association ou l’on pouvait récupérer des éléments
pertinents pour notre refonte du site de la SPA.

En voyant les besoins du site, nous avons repris des fonctionnalités

qui pouvaient être bénéfique d’un point de vue utilisateur,
notamment sur le plan érgonomique et visuel.

benchmark_pawweb.pdf

23.
Interview
interview_pawweb.pdf
Pour réaliser nos interview, nous avons élargies
notre champs d’action en donnant la parôle à des
personnes provenant de différents
environnements.

Tout d’abord nous avons parlé avec des étudiants, le fait que ce
sont des personnes ayant peu de moyens nous permets de mieux
nous positionner sur des personnes voulant adopter malgré leurs
faibles revenus..

Ensuite nous nous sommes adressés à des personnes proches du

milieu animalier, tel qu’une vétérinaire et une bénévole d’un refuge.
Ces personnes étant plus renseignées nous permettent d’avoir une
vision plus réaliste.

Et enfin, nous avons demandés à une personne venant d’un

milieu différent du domaine animalier tel que l’assurance afin de
confronter nos résultats avec une personne qui cottoie le
monde animalier.
24.
Etude Sectorielles
& Variables
Puis pour finaliser nos variables, nous avons réalisé une étude
sectorielle. Nous avons parcouru des sources officielles afin
d’obtenir des résultats concrets et pertinents à notre besoin.

Nous y avons aussi ajouté le résultat de notre questionnaire et des

comparaisons entre le Refuge SPA et les autres refuges,
notamment sur les prix et les options qui y sont proposées.

Etudes_sectorielle_pawweb.pdf

25.
 2.
Analyse, ideation

26.
Personas & Carte
personas.pdf

d’empathie
carte_empathie_pawwed.pdf

Pour notre Personas, nous en avons réalisé 2, nous avons décidé de

créer “Anna” ainsi que “Christophe”. Ils ont été créés à partir de nos
variables, Anna étant une étudiante souhaitant adopter et Christophe
souhaitant utiliser la pension de la SPA.

Pour nos cartes d’empathie, nous nous sommes basé sur nos personas
ainsi que leurs caractères. ça nous a permis de capturer les informations
sur les comportements et les attitudes des utilisateurs

27.
 Parcours
utilisateurs
Nos deux personas ont tous les deux chacun un but, soit adopter
ou mettre son chien en pension.

Pour réaliser leurs buts, ils passent chacun par une étape, pour cela
nous avons utilisé Xtensio. On y voit ainsi le but de la personne, le
procédé par lequelle elle est passée, les problèmes qu’elle a pu
rencontrer ainsi que les idées/ajouts que l’on pourrait incorporer
pour améliorer l’expérience utilisateur.

user_stories_pawweb.pdf
28.
 3.
Prototype

29.
 Wireframe

Grâce aux résultats de notre étude, nous avons pu réaliser le

wireframe ainsi que le prototype du site de la SPA sur Figma. Les
retours utilisateurs ainsi que les besoins exprimés par le refuge
nous ont permis de faire des choix d’agencements et de les
proposer à notre client.

Wireframe :

30.
 Prototype
Nous avons sélectionné les couleurs et les fonds pour le
prototypage sur Figma, afin de faire des variables de style. Nous
avons créé des composants tels que les boutons, la navbar, les
filtres et les cards. Ensuite, nous avons assemblé les pages utiles
pour les US à partir des composants et des variables de styles. Cela
nous permet de modifier les couleurs du site ou un composant sur
toute la maquette de manière facile.

Afin de terminer, nous avons pris en charge toutes les possibilités

d'interaction utilisateur avec la partie prototypage en gérant le
changement de page, les effets de survol du curseur ou les pop-up,
Prototype : ce qui nous permet de faire des tests utilisateurs fonctionnels.

31.
 Test
Pour produire les tests, nous avions demandé au préalable
au interviewé un moyen de les recontacter pour éviter de
rechercher de nouvelles personnes et redonner un contexte
entier à la personne.

Nous avons ensuite rendu visite aux interviewées pour

effectuer les tests utilisateurs. Afin de obtenir des retours
sur la partie UX, nous avons expliqué à lutilisateur la finalité
de sa navigation sur le prototype.

test_user_pawweb.pdf 32.
Résultat
des tests
Les retours utilisateurs furent globalement positifs avec cependant
quelques détails à revoir, notamment le carrousel de la page
d’accueil qui pourrait afficher des chiens réellement présents dans
le refuge.

Nos tests utilisateurs a aussi permis de nous réconforter sur

l’utilisation d’un filtre dans la page adoption.

En d'autres termes, les tests utilisateurs nous ont permis d'évaluer

l'écart entre nos propositions et les besoins réels de l'utilisateur. En
réponse à ces retours, nous avons donc pu effectuer des
modifications sur le prototype pour de futurs tests
33.
L’équipe tiens à remercier
toutes les personnes ayant
pu mener bien cette étude.

L’équipe PaWWeb.