Informations sur le projet
Nom du projet : Conception de maquette UI/UX pour le refuge AdopteUnAmie , France
Category : Web design
Date de réalisation : 01/12/2023 – 10/03/2024
Compétences : WordPress, Adobe XD, Creative Cloud
Présentation du projet:
Le produit :
AdopteUnAmi – est un projet du refuge pour animaux sans abri. l’objectif de ce projet est de créer un site web qui facilitera la recherche, le choix et l’adoption d’un animal sans abri du refuge.
Les futurs utilisateurs de ce site sont les amoureux des animaux et les personnes qui souhaitent adopter un animal.
L’objectif du site AdopteUnAmi est de fournir autant d’informations que possible sur l’adoption d’un animal et de rendre le processus d’adoption simple et facile.
Durée du projet:
01/12/2023 – 10/03/2024
Les problèmes:
Les demandes des refuges ne fournissent pas d’informations structurées et cohérentes. La procédure d’adoption semble compliquée et confuse. Cela décourage les adoptants potentiels.
Les objectifs:
Objectif du projet : créer un site web pour un orphelinat qui fournit des informations complètes sur le processus d’adoption. Un site qui rendra le processus d’adoption aussi simple et rapide que possible, grâce à une navigation claire et à un processus d’adoption structuré.
Mon rôle:
- Mon rôle dans ce projet :
UX chercheur et UI/UX concepteur. - Responsabilités:
Conduite d’entretiens
Réalisation de wireframing papier et numérique
Prototypage basse et haute fidélité
Réalisation d’études d’utilisabilité
Prise en compte de l’accessibilité
Responsive design
Recherche utilisateur : résumé
Mon projet est basé sur une recherche intensive auprès des utilisateurs. Il est très important de prendre en compte les expériences et les intérêts de tous les groupes d’utilisateurs et de garantir l’accessibilité. J’ai interrogé des utilisateurs potentiels de notre produit et créé des cartes d’empathie pour mieux comprendre les utilisateurs cibles et leurs besoins, des Personas, des User Stories et des User Journey Maps, et j’ai effectué des analyses de la concurrence.
Cette recherche m’a permis de constater que les sites web consacrés aux animaux sans abri contenaient trop d’informations mal structurées. Le processus d’adoption semble être très compliqué, long et fastidieux. Elle décourage donc les personnes qui souhaitent adopter un animal.
Recherche utilisateur : points sensibles
Personnage: Elise
Énoncé de problème :
Eliza est une jeune maman qui cherche un animal de compagnie pour son jeune fils. Elle ne peut pas se rendre dans les chenils car elle est très occupée avec son jeune enfant. Elle veut aider un animal errant à trouver une famille, mais un animal trouvé dans la rue peut être malade, ce qui peut être dangereux pour un jeune enfant.
Personnage: Maxim
Énoncé de problème :
Maxim est un jeune médecin qui aime voyager. Il cherche une compagne pour la vie et pour les voyages. Il est trop occupé à chercher un chien et pense que les annonces privées cachent souvent des arnaqueurs
Analyse des concurrents:
Au cours de nos recherches, nous avons examiné plusieurs entreprises qui pourraient être des concurrents de “AdopteUnAmi”. Il s’agit de concurrents directs, de sites de refuges ou d’associations représentant des refuges et des bénévoles qui proposent un catalogue d’animaux, une variété d’informations et, à des degrés divers, soutiennent le processus d’adoption. Mais le plus souvent se contentent de proposer de contacter le refuge ou le bénévole.
Les conceptions d’interface des concurrents sont généralement similaires, mais nous nous sommes concentrés sur les différences entre les points clés de la conception :
- Flux d’utilisateurs simples et clairs.
- Un processus d’adoption structuré et décomposé.
- Couleurs contrastées mais agréables pour les accents.
Carte du parcours Utilisateur
ÉL’élaboration d’une carte du parcours de l’utilisateur nous a permis de définir un modèle du comportement de l’utilisateur à chaque étape de la résolution de son problème. Comprendre les difficultés qu’il rencontre sur son chemin, les émotions qu’il ressent et la manière dont notre site peut résoudre ces problèmes.
Sitemap:
Énoncé de problème :
Le principal problème de mes concurrents est qu’ils ont beaucoup d’informations mal structurées. La structure de l’architecture de l’information a été conçue pour que tout soit simple et compréhensible et pour définir clairement les étapes du processus d’adaptation des animaux.
Maquettes papier
Les clients de AdopteUnAmi accédant au site sur différents appareils, j’ai commencé à travailler sur des conceptions pour des tailles d’écran supplémentaires afin de m’assurer que le site serait entièrement réactif.
Maquettes numériques
Après le passage du papier aux images numériques, il est devenu évident qu’une refonte pouvait aider à résoudre les problèmes des utilisateurs et à améliorer leur expérience. Le code couleur des étapes a constitué la base de ma stratégie. En décomposant un processus complexe en petites étapes, nous permettons à l’utilisateur de percevoir la réussite comme accessible.
Étude sur la facilité d’utilisation
Deux séries de tests utilisateurs ont été menées dans le cadre du projet. La première étape a consisté à tester les présentations de bas niveau. Cette phase de test m’a permis d’évaluer la fluidité du flux d’utilisateurs et d’identifier certains points manquants.
La deuxième série de tests a été réalisée à l’aide de maquettes haute fidélité et m’a permis d’évaluer la conception finale du site et d’identifier les points à améliorer.
Étude d’utilisabilité : paramètres
Type d’étude : Étude d’utilisabilité non modérée
Localisation : France, à distance
Les participants : 5 participants
Durée : 20-30 minutes
Le menu principal a été modifié et deux boutons ont été mis en évidence pour lancer un fil de discussion
Ajout de la possibilité de sauvegarder un dossier dans votre armoire personnelle pour le réutiliser
Wireframe numérique
J’ai réalisé des maquettes numériques pour trois tailles d’écran afin d’envisager l’utilisation du site sur tous les types d’appareils : ordinateur, tablette, téléphone.
Sur la base des maquettes précédentes, j’ai conçu des mises en page pour différents types d’écrans. Cela permettra aux utilisateurs d’utiliser notre site sur tous les types d’appareils.
Prototype haute-fidélité
Mon prototype hi-fi a suivi le même flux d’utilisateurs que le prototype lo-fi et a inclus les modifications de conception apportées après l’étude de convivialité, ainsi que plusieurs changements suggérés par les membres de mon équipe.
Considérations relatives à l’accessibilité
Prochaines étapes

