Accueil » Portfolio » Projet – Application et site web pour le bien commun

L’asso

Projet fictif réalisé dans le cadre de la certification Google :
Conception d’une expérience utilisateur pour le bien commun.
Le sujet est la réalisation d’une application et d’un site web responsive pour trouver et aides les mineurs sans abri.

DATE

Février – mars 2024

ROLE
UX design
COMPÉTENCES
  • Recherche utilisateur
  • Création de personas
  • Rédaction du parcours utilisateur
  • Enoncé et hypothèse des problèmes
  • Création de wireframes
  • Création des maquettes
  • Création des prototypes

Le problème

Le nombre de mineur sans abri a augmenté en France de 42% en 2023.
Face à cette hausse, les associations manquent de financement et les mineurs sont en situation d’urgence.

L'objectif

L’objectif de site web est de permettre de récolter des dons afin d’aider les mineurs sans abri.
L’objectif de l’application est de permettre aux sans abri de trouver un hébergement et de partager leur position en cas de problème.

Recherche utilisateur

La majorité des participants à l’entretien ont déclaré se sentir désœuvrés face à l’augmentation du nombre de mineur sans abri et ne savent pas quoi faire pour les aider.

Ils seraient prêts à aider en donnant de leur temps ainsi que des dons.
Les mineurs sans abri sont perdus et ne savent pas comment trouver facilement des lieux d’échanges ou des hébergements.

Persona 1 qui représente une jeune étudiante

Application mobile

Conceptualisation

Conceptualisation rapide pour trouver des idées sur la façon de chercher un centre d’hébergement dans l’application mobile.
Fonctionnalité de localisation des centres d’hébergement en fonction de sa position et partage de la fiche information du centre.
Conceptualisation des écrans de recherche d'un hébergement

Wireframe

Conception initiale de l’application.
Centrée sur la recherche de centre d’hébergement et la localisation sur une carte.
Wireframe de la page d'accueil de l'application mobile

Prototype low-fi

Pour préparer les tests d’utilisabilité, création d’un prototype basse fidélité qui connecte le flux utilisateur permettant la recherche d’un centre d’hébergement.

=> Prototype dans Figma

Prototype basse fidélité présentant le flux utilisateur pour la recherche d'hébergement

Étude d’utilisabilité

Type d'étude

Étude d’utilisabilité non modérée

Participants

5 participants

Durée

10 à 15 minutes

Principales conclusions révélées par l’étude d’utilisabilité

Les utilisateurs ont besoin de meilleurs repères pour effectuer les recherches.
Les utilisateurs ont besoin de plus d’informations pour contacter un centre d’hébergement.
Les participants ont besoin de plus d’informations dans la page des contacts d’urgence.

Conception des maquettes

Maquettes

Sur la base des informations récoltées lors de l’étude d’utilisabilité, des modifications de conception ont été effectuées notamment la séparation de la barre de recherche des filtres de recherche.
Avant l’étude d’utilisabilité
Wireframe de la page d'accueil avant l'étude d'utilisabilité
Après l’étude d’utilisabilité
Wireframe de la page d'accueil après l'étude d'utilisabilité

Modification de conception supplémentaire concernant l’affichage des informations du centre d’hébergement sur la carte. Ouverture d’une Pop-in au clic avec l’affichage des informations.

Avant l’étude d’utilisabilité
Wireframe de la page d'accueil avant l'étude d'utilisabilité - Informations du centre d'hébergement
Après l’étude d’utilisabilité
Wireframe de la page d'accueil après l'étude d'utilisabilité - Informations du centre d'hébergement

Flux utilisateur

Maquette de la page d'accueil
Maquette de la page d'information du centre
Maquette de la page d'information de l'association
Maquette de la pop-in d'information des bénévoles

Prototype hi-fi

Le prototype haute fidélité suit le même processus que le prototype basse fidélité.
=> Prototype dans Figma
Schéma du prototype haute fidélité de l'application

Conception responsive

Plan de site

Plan de site pour la conception du site web responsive.
L’objectif est de guider la structure organisationnelle de la conception de chaque écran afin d’assurer une expérience cohérente sur tous les appareils.
Plan de site du site web responsive

Maquettes du site web responsive

Conception pour les variations de taille d’écran : Mobile, tablette et ordinateur. Optimisation des conceptions pour répondre aux besoins spécifiques des utilisateurs de chaque appareil et tailles d’écran.
Maquette de la page d'accueil
Maquette de la page d'accueil sur tablette
Maquette de la page d'accueil desktop

Impact

D’après les utilisateurs, une application mobile dédiée aux sans abri serait utile car elle permettrait de rassembler au même endroit des données utiles quand on est dans la rue.

Ce que j’ai appris

Le problème que j’ai essayé de résoudre est très complexe. Chaque étape du processus m’a permis de m’aligner sur les besoins spécifiques de chaque utilisateur et m’ont aidé à trouver des solutions utiles.