projet

Conception de l'application web FamStay

RÔLE

Product Designer

Processus

Sitemaps
User Flows
Wireframes
Mood board
Mockups
Usability Test

outils

Figma
Figjam
Whimsical

temps

2024

3 mois

Champ d'application

UX/UI Design Course by Designership

"Avez-vous déjà eu du mal à trouver le logement idéal avec les bons filtres et les bonnes informations ?

Découverte et recherche
Idéation Design Test Prototype Conclusion

Découverte et recherche

Brève analyse

Le fondateur d'Accom.ai a personnellement fait l'expérience du défi que représente la recherche d'un logement spécifique. Il y a un manque d'informations et de contrôles d'utilisateurs pour aider les couples qui voyagent à trouver des escapades convenables en France.

‍

Concurrents

Airbnb, Booking.com, Expedia

‍

Public cible

Couples dans la quarantaine avec des familles à la recherche d'un hébergement unique en France.

‍

Objectif et contraintes

L'objectif était de concevoir une nouvelle application web avec des sections clés : Page d'accueil, Recherche/Réservation, Mes réservations, Paramètres du profil et Authentification. Étant donné qu'il s'agissait de la version 1, j'ai dû faire preuve de pragmatisme et de réalisme, en tenant compte des listes limitées (puisqu'il s'agissait d'un lancement), des délais serrés et des ressources disponibles.

Idéation

La création d'un plan du site m'a permis de m'assurer que je comprenais parfaitement le cahier des charges et que j'avais une vision claire de l'application web. Guidé par les descriptions de postes figurant dans le cahier des charges, j'ai tracé la structure, y compris les pages clés et la manière dont elles sont reliées entre elles. À partir de cette structure, j'ai ensuite créé un flux d'utilisateurs, représentant les chemins empruntés par les utilisateurs pour effectuer une réservation sur la base des descriptions de tâches. Pour les deux, j'ai utilisé Figjam.

Design

Wireframes

Pour créer les wireframes dans Whimsical, j'ai regardé le plan du site, le flux d'utilisateurs, et j'ai vérifié comment les concurrents faisaient les choses. Cela m'a donné une idée de ce que l'on peut attendre d'une plateforme de réservation d'hébergement, et un peu d'inspiration.

Mood board (Lean Branding)

Pour la conception visuelle, je me suis concentrée sur l'identité de la marque que je voulais donner, les valeurs et le public. Voici ce que j'ai choisi :

Nous sommes: Authentiques, fiables, inspirants.

Nous ne sommes pas: Inconsidérés, médiocres, indignes de confiance.

Public cible: Couples dans la quarantaine avec des familles en France qui ont du mal à trouver un logement convenable.

‍

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.

‍

J'ai créé deux palettes de couleurs :

Palette principale - Utilisée pour la navigation, les boutons, les formulaires et les actions clés.
Palette de gris - Utilisée pour le texte et les arrière-plans.

Maquettes

J'ai créé des maquettes haute-fidélité en gardant à l'esprit la conception visuelle. Vous pouvez voir plusieurs pages ici.

Test

Tests d'utilisabilité

Comme il s'agissait de la première version (MVP), l'objectif était de valider des aspects clés du produit, en particulier le message de la page d'accueil et les filtres de la page des 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é en personne, avec modérateur, au cours desquels les participants effectuaient trois tâches clés pendant que j'observais et prenais des notes, recueillant ainsi des informations pour améliorer la conception.

Je vois que je peux faire une recherche par occasion, ce qui est très bien.

Je ne suis pas sûre 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 étaient mineurs mais précieux. Voici ce que j'ai modifié :
‍
- 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 générique de personne par une icône de randonnée (sac à dos et bâton) pour plus de clarté.
- Hiérarchie des filtres: Ajusté 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'inscriptions. J'ai appris à prioriser soigneusement les fonctionnalités 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.