Aucune impasse, que des solutions !
Etude de cas
Application et site web d’aide aux femmes en situation de danger ou de précarité
Contexte
Projet dans le cadre du Certificat Google UX Design : "Conception d’un outil pour aider les femmes en danger ou en situation de précarité à trouver des solutions"
Aperçu du projet
Le projet :
Univers’elles est une application mobile et un site web destinés à :
-
faciliter l’accès aux ressources d’aide
-
centraliser les services disponibles
-
réduire l’isolement
-
proposer une fonction SOS en cas de danger
L’outil vise à accompagner les utilisatrices vers une autonomie sociale et économique.
Durée du projet :
01/01/2025-12/01/2025
Le problème :
En France, de nombreuses femmes en situation de précarité (violences conjugales, isolement, obstacles administratifs…) rencontrent des difficultés pour :
-
identifier rapidement les ressources disponibles
-
accéder aux services adaptés
-
demander de l’aide en toute sécurité
L’accès à l’information est fragmenté et parfois peu lisible.
Mon rôle :
Etant le seul designer UX dans ce projet, j’ai eu un rôle généraliste qui englobait plusieurs rôles et responsabilités.
L’objectif :
Concevoir un outil numérique clair, accessible et sécurisant permettant :
-
un accès rapide aux ressources
-
une navigation simplifiée
-
une fonction SOS efficace en cas d’urgence
Le projet s’est concentré sur l’optimisation de cette fonctionnalité clé afin de rendre l’appel à l’aide plus immédiat et intuitif.
Responsabilités :
Voici certaines de mes responsabilités :
-
Recherche utilisateur
-
Audit concurrentiel
-
Architecture de l'information
-
Visual design
-
Wireframing
-
Etude d’utilisabilité
-
Prototypage
Comprendre l’utilisateur
-
Recherches utilisateurs
-
Quelques idées issus d’un brainstorming
-
Audit concurrentiel
-
Personas
-
Énoncés de problèmes
-
Carte de parcours utilisateur
-
Tâche d’utilisateur et étapes de flux utilisateur
Recherches : résumé
Il y a eu quatre étapes principales :
-
Une recherche utilisateur : grâce à des entretiens et des cartes d’empathies, la recherche utilisateur a permis de connaître les besoins des utilisateurs, ici des femmes en situation de précarité.
-
Un audit concurrentiel : nous avons pu voir les points forts, les points faibles de 3 de nos concurrents et voir les manques.
-
Une étude d’utilisabilité faite au moment du prototype lo-fi.
-
Un deuxième test auprès des mêmes utilisateurs.
Recherche utilisateurs : résumé
Après un brainstorming, nous avons réalisé des entretiens et des cartes d’empathie pour comprendre les futurs utilisateurs de notre application et de notre site Web et leurs besoins.
Après recherche, nous avons identifié comme groupe d’utilisateur principal des femmes âgées de 18 à 60 ans.
Nous avons pris pour notre étude 5 femmes donc une femme sourde-muette. 2 femmes n’ont pas d’enfants. 3 ont des enfants. 2 femmes sont mariées. 3 femmes travaillent, 1 femme est étudiante, 1 femme est sans emploi.
Notre recherche auprès de ce groupe d’utilisateur nous a permis de mettre en avant certains besoins mais nous avons pris le parti de nous concentrer sur l’appel au secours.
Recherche utilisateurs : points de douleur
1
Envoyer un SOS
Les utilisatrices ont besoin de puvoir envoyer un appel de détresse rapidement.
2
Avoir un site facile d’utilisation
Lors d’une situation de danger, donc en situation de stress, la navigation doit être instinctive.
3
Accéder à l’aide même avec un handicap
Certaines utilisatrices ont des difficultés de lecture, des dificultés linguistiques ou encore un handicap sensoriel.
Une partie des plateformes d’aide ne prennent pas en compte ces profils ce qui peut les empêcher d’accéder à certaines ressources.
Quelques idées issus d’un brainstorming
-
Envoyer un SOS en un seul clic
-
Envoyer un SOS sans parler que ce soit à cause de la situation, de la langue, d’un handicap etc.
-
Une application discrête pour ne pas alerter l’agresseur
-
Une application qui enregistre la géolocalisation, l’environnement sonore et vidéo
-
Un site qui permet d’avoir en un espace de nombreuses ressources
-
Une utilisation vocale comme un mot ou une phrase, personalisable, qui lance l’alerte
-
Un affichage camouflage qui permet d’envoyer une alerte discrêtement
-
Prévenir automatiquement un proche en même temps que l’appel au secours
-
Quel fonctionnement sans réseau ? Alerte dès que le réseau revient ?
-
Fiche médicale et/ou administrative pré enregistrable pour avoir tous les documents nécessaires à tout moment
-
Un système de chat avec des professionnels ?
Audit concurrentiel
-
Objectif: Comparer l'expérience utilisateur de chaque concurrent du site internet
PDF du tableau et PDF du rapport
Persona : Jennifer D.
Énoncé de problème :
Jennifer est une jeune mère célibataire en situation de précarité qui a besoin de trouver de l’aide pour s’en sortir et offrir un avenir meilleur à son fils.
Récit utilisateur :
En tant que jeune mère célibataire, je souhaite trouver de l’aide et des ressources afin de m’en sortir et donner à mon fils une vie meilleure.
Persona : Malika M.
Énoncé de problème :
Malika est une femme mariée souhaitant divorcer qui a des difficultés linguistiques et administratives qui a besoin d’accéder à des ressources notamment juridiques pour divorcer et être autonome.
Récit utilisateur :
En tant que mère de trois enfants voulant divorcer, je souhaite être accompagnée pour pouvoir divorcer et être autonome.
Carte du parcours utilisateur : Persona : Jennifer D.
Objectif : Offrir un avenir stable et sécurisé à son fils en accédant à une aide psychologique, financière et éducative, tout en trouvant une opportunité de formation ou d'emploi.
Carte du parcours utilisateur : Persona : Malika M.
Objectif : Se libérer de sa dépendance vis-à-vis de son mari en accédant à des ressources pour divorcer, tout en protégeant ses enfants et en s'intégrant mieux grâce à l'apprentissage du français.
Tâche d’utilisateur et étapes de flux utilisateur
Tâche d’utilisateur : Utiliser l’application pour envoyer un SOS.
Etapes de flux utilisateur du point d'entrée à l'achèvement de la tâche pour l'application :
1. Cliquer sur le bouton SOS
2. Cliquer sur le "Force de l’ordre"
3. Cliquer sur le bouton OK
4. Cliquer sur le bouton STOP
5. Cliquer sur le bouton PAGE D’accueil
Commencer le design
-
Wireframe papier
-
Wireframes numériques
-
Prototype basse-fidélité
-
Étude d’utilisabilité
Wireframe papier
Voici différentes itérations de la page d’accueil avec des variations de taille d'écran incluant les ordinateurs, mobiles et les tablettes. Pour des raisons de gestion du temps, il n’y a pas eu d’itérations de chaque écran sur papier. Les itérations ont été faites de manière digitale après chaque session de critique de design.
Quelques éléments importants : 1 Urgence ; 2 Qui sommes-nous ; 3 Trouver de l’aide ; 4 Services en ligne ;
5 Ressources ; 6 Evènements ; 7 Actualités ; 8 Partenariats ; 9 Espace privé ; 10 Mentions légales ; 11 SOS ;
12 Appel d’urgence ; 13 Message d’urgence ; 14 Logo ; 15 Menu
Wireframe numérique pour smartphone
Les utilisatrices vont pouvoir envoyer un SOS aux forces de l’ordre et/ou à une ambulance depuis leur smartphone, tablette ou leur ordinateur.
L’environnement sonore sera enregistré et envoyé en direct aux secours ainsi que la localisation de l’appareil.
Les utilisatrices vont pouvoir envoyer un SOS.
Wireframes numériques
Maquette numérique la page Créer avec l’intelligence artificielle de différentes tailles d'écran (ordinateur et smartphone) avant le premier test.
Prototype basse-fidélité
Voici le lien vers ce prototype lo-fi.
Il s’agit du prototype issus du premier test utilisateur.
Nous vous invitons à vous concentrer sur l’envoie du SOS
Étude d'utilisabilité : paramètres
Type d'étude :
Étude d'utilisabilité non modérée
Participants :
5 participants
Localisation :
Istanbul, à distance
Durée :
15 à 20 minutes
Étude d'utilisabilité : résultats
J'ai mené deux séries d'études d'utilisabilité non modérées avec 5 participantes. Nous voulions évaluer la fonctionnalité principale de cette application, c’est-à-dire la fonction SOS. Nous désirons améliorer au mieux cette outil afin de rendre plus efficace l’appel de détresse.
Les indicateurs clés de performance étaient le temps consacré à l’appel au secours, le taux de conversion, échelle de facilité d'utilisation du système et la satisfaction des utilisateurs.
1
Revoir le bouton
"Force de l’ordre / Ambulance"
Les utilisateurs ne comprenaient pas le bouton
"Force de l’ordre / Ambulance ".
2
Pertinence du mot "Valider"
Le mot "valider" pour envoyer l’appel de détresse ne semblait pas pertinent pour les utilisateurs.
3
Bouton
"Annuler l’appel au secours"
Les utilisateurs ne comprenaient pas pourquoi il y avait des croix dans le design et une croix pour le bouton "Annuler l’appel au secours".
Affiner le design
-
Design system
-
Maquettes
-
Prototype haute fidélité
-
Accessibilité
Design system
Maquettes
Nous avons pris en compte les remarques des utilisateurs et modifiés le design du bouton "Forces de l’ordre et ambulance" et le bouton "Valider" est devenu "OK". Cela rend le flux utilisateur plus simple et compréhensible.
Avant l’étude d'utilisabilité
Après l’étude d'utilisabilité
Maquettes
Voici les maquettes du flux utilisateur principal de la version Smartphone.
Maquettes clés
Voici les maquettes du flux utilisateur principal pour la version site Web.
Prototype haute fidélité de l'application
Voici le lien vers le prototype haute-fidélité. Il ne s'agit que du flux utilisateur principal !
Prototype haute fidélité du site web
Voici le lien vers le prototype haute-fidélité. Il ne s'agit que du flux utilisateur principal !
Prise en compte de l'accessibilité
1
2
3
Nous avons fait attention à la typographie. La classification de la police est Sans serif. Cela permet aux personnes ayant des difficultés de lecture comme les personnes dyslexiques de lire plus facilement. Nous avons aussi fait attention aux choix de la police de caractère et de la police d’écriture.
Les couleurs des textes, des fonds, des boutons, etc., ont été choisis pour permettre une meilleure emphase ce permet une meilleure visibilité pour les personnes ayant des problèmes visuels et cela permet de faciliter le flux utilisateur.
Le choix de la hiérarchie permettra à terme de pouvoir utiliser des outils d’accessibilité comme le TalkBack ce qui sera utile pour les personnes ayant des déficiences visuelles.
Conception responsive
-
Architecture des informations
-
Conception responsive
Plan de site
Voici le premier plan du site. Il a quelque peu évolué depuis.
Conceptions responsive
Les conceptions pour les variations de taille d'écran incluaient les mobiles, les tablettes et les ordinateurs de bureau.Si les designs du smartphone et de la tablette changent peu, celui du site est différent et met en avant plus d’options.
Smartphone
Tablette
Ordinateur
Aller de l’avant
-
Points à retenir
-
Les prochaines étapes
Points à retenir
Impact :
Le design a la volonté de répondre aux besoins des utilisateurs, c’est-à-dire qu’il répond, en l’état, au besoin de pouvoir appeler au secours en cas de danger
Un extrait du feed-back des pairs :
"L’application permet d’appeler les secours discrètement. Cela peut littéralement sauver des vies".
Ce que j’ai appris :
Lors de la conception de cette application et de ce site Web, nous avons appris que les recherches comme les études d’utilisabilité et les sessions de critique de design ont permis de surpasser les préjugés, d’ouvrir notre point de vue et d’améliorer sans cesse le design lors des itérations.
Les prochaines étapes
1
Développer les différentes rubriques et flux utilisateur de l’application et du site Web.
2
Permettre une meilleure accessibilité de l’application aux personnes ayant des handicaps.
3
Refaire une session de test d’utilisabilité pour pouvoir développer et améliorer notre application et notre site web.
Merci pour votre lecture.
Univers’elles marque une étape importante dans mon évolution en UX design.
Ce troisième projet m’a permis d’affiner ma capacité à structurer une expérience complète, en consolidant mes choix stratégiques et mes décisions de conception.
Aujourd’hui, j’aborde chaque projet avec une vision plus globale, plus structurée et plus exigeante.
