projet

Conception d'une application web pour les voyages en famille

RÔLE

Product Designer

Processus

Sitemaps
Flux utilisateurs
Wireframes
Tableau d'ambiance
Maquettes
Test d'utilisabilité

outils

Figma
Figjam
Whimsical

durée

2024

3 mois

Portée

UX/UI Design Course by Designership

Aperçu

Dans le cadre du projet UX/UI bootcamp (Designership), j'ai travaillé sur la conception de FamStay, une application de réservation aidant les familles à trouver le bon endroit pour séjourner en France.

Énoncé du problème
Les familles ont souvent du mal à réserver un logement qui corresponde à leurs besoins réels.

Des détails essentiels tels que le nombre de chambres, les salles de bains ou les équipements adaptés aux enfants ne sont pas clairs.
Les filtres sont soit écrasants, soit non pertinents.
La tarification manque de transparence, ce qui crée de la frustration et de la méfiance.

Le défi consistait à concevoir un MVP qui rende les réservations simples, transparentes et rassurantes pour les familles.

‍Utilisateurset public
L'application cible les parents dans la quarantaine avec des enfants, voyageant en famille. Leurs priorités étaient la sécurité pour les jeunes enfants, les activités pour les plus grands et la confiance dans le processus de réservation.

Rôles et responsabilités
J'étais le seul designer sur ce projet, travaillant en tant que designer UX/UI.

J'ai pris en charge l'ensemble du processus : recherche sur les utilisateurs, définition des flux et de la structure, conception de wireframes et d'interfaces utilisateur haute-fidélité, prototypage, tests d'utilisabilité et itération sur la base du retour d'information.

‍Champ d'applicationet contraintes

Projet réalisé dans le cadre d'un bootcamp, avec des délais serrés.
Le premier MVP se concentre uniquement sur les pages principales : Accueil, Recherche, Réservation, Profil, Connexion
Petite base de données d'inscriptions utilisée pour les tests
Projet individuel, entièrement géré de bout en bout

Comprendre
Idéation Design Test Prototype Conclusion

Comprendre

J'ai commencé par revisiter le brief que j'avais créé pendant la phase de recherche UX. Ce document comprenait mes recommandations ainsi que l'analyse concurrentielle des principales plateformes de réservation.

Grâce à ces informations, j'ai pu entamer la phase de conception en comprenant clairement les besoins des utilisateurs et les possibilités d'amélioration, ce qui m'a permis de me concentrer sur l'idéation et la création de l'expérience.

Idéation

Pour encadrer la solution, j'ai commencé par créer un plan du site, qui m'a donné une vue d'ensemble claire de la structure de l'application et des relations entre ses pages principales. Ensuite, j'ai traduit les descriptions de tâches en un flux d'utilisateurs, illustrant la manière dont les familles navigueraient dans le parcours de réservation. Cela m'a permis de m'assurer que l'expérience était à la fois cohérente et alignée sur les besoins réels des utilisateurs.

Design

Wireframes

Pour créer les wireframes dans Whimsical, j'ai examiné le plan du site, le flux d'utilisateurs et vérifié comment les concurrents procédaient. Cela m'a donné une idée de ce à quoi m'attendre d'une plateforme de réservation d'hébergement, et de l'inspiration.

Conception visuelle

J'ai créé une charte graphique (couleurs, typographie, imagerie) et conçu des maquettes haute fidélité dans Figma. L'objectif était de créer une image propre et fiable, rassurant les familles sur le fait qu'elles pouvaient faire le bon choix.

J'ai choisi le dark teal parce qu'elle combine le bleu (confiance, fiabilité) et le vert (croissance, équilibre, authenticité), créant ainsi une sensation de calme et de confiance.

Test

Tests d'utilisabilité

Comme il s'agissait de la première version (MVP), l'objectif était de valider les aspects clés du produit, en particulier le message de la page d'accueil et les filtres de la page de listes de recherche. La page d'accueil devait être suffisamment attrayante pour attirer les utilisateurs, tandis que l'expérience de recherche devait être intuitive et efficace.

Pour ce faire, j'ai mené des tests d'utilisabilité modérés en personne, où les participants ont effectué trois tâches clés pendant que j'observais et prenais des notes, recueillant des informations pour améliorer la conception.

Je vois que je peux rechercher par occasion, ce qui est génial.

Je ne suis pas sûr du prix... Est-ce par nuit ou au total ?

Je ne sais pas ce que signifie cette icône de personne sur la carte…

Itérations

Les commentaires des utilisateurs ont été minimes mais précieux. Voici ce que j'ai changé :
‍
- Clarté des prix : Affichage du prix total et du prix par nuit pour éviter toute confusion.
- Mise à jour de l'icône d'activité : Remplacement de l'icône de personne générique par une icône de randonnée (sac à dos et bâton) pour une meilleure clarté.
- Hiérarchie des filtres : Ajustement de l'ordre de « Occasion, Prix, Style, Activités disponibles » à « Occasion, Style, Prix, Activités disponibles » car les utilisateurs associaient le style à l'occasion, ce qui influençait le prix.

Prototype

Ce que ce projet m'a appris...

Ce projet m'a appris à concevoir en tenant compte des contraintes du monde réel, en particulier lors de la création d'un MVP avec un nombre limité d'annonces. J'ai appris à hiérarchiser les fonctionnalités avec soin et j'ai vu comment de petites modifications de l'interface utilisateur, comme l'ajout d'une carte montrant à la fois les lieux d'hébergement et les activités à proximité (sentiers de randonnée, sites naturels, etc.), peuvent aider les clients à prendre de meilleures décisions. Le fait de suivre un processus UX/UI structuré m'a donné une base solide pour les projets futurs.