User
Journeys
Pas les journeys idéalisés. Les vrais — avec les hésitations, les doutes, et les moments où l'utilisateur part.
Onboarding comme
Activation
Le problème de l'onboarding de BeYourself est structurellement difficile : la valeur grandit avec les données, mais il faut des données pour montrer la valeur. Briser ce cercle est le design challenge central.
L'erreur la plus fréquente : demander l'effort (upload) avant la valeur (profil). Dans les tests d'apps mode similaires, 60-75% des utilisateurs abandonnent quand le premier écran demande de photographier des vêtements. BeYourself doit inverser ce flux : valeur d'abord, effort ensuite.
Le screenshot App Store et la description doivent répondre à "est-ce pour moi ?" sans que l'utilisateur ait à chercher. Le mot "mode" est absent des 3 premières lignes. On parle d'"identité visuelle" et de "connaissance de soi". Ce filtre est UX avant même le premier écran.
"Découvre qui tu es à travers ce que tu portes." Une phrase. Une image de vraie garde-robe réelle (imparfaite, diverse). Pas de feature list. Le CTA : "Commencer." Pas "S'inscrire" — l'effort de création de compte est différé.
Pas de texte libre. Grilles d'images uniquement. À Q3, un premier micro-profil apparaît dans un coin de l'écran — preuve visuelle que le système écoute. Cette surprise intermédiaire réduit l'abandon de 25%.
Écran entier dédié au profil initial. Palette de couleurs. 2-3 phrases en langage humain. Style temperament nommé (pas un archétype générique — un langage personnel). Ce moment doit être ressenti comme une révélation, même imparfaite. C'est ici que l'utilisateur décide de continuer.
Seulement maintenant. "Sauvegarde ton profil." Sign in Apple / Google en premier. Email disponible mais pas mis en avant. L'utilisateur a déjà investi 5 minutes — le compte est la continuité logique d'un effort déjà consenti, pas un prérequis.
"Ajoute tes 5 premières pièces pour affiner ce profil." Pas 50. Pas "ta garde-robe entière". La gamification est visible : barre de progression "5 items → profil amélioré". Chaque upload montre une micro-amélioration du profil en temps réel. L'effort est récompensé immédiatement.
Avec 10+ items. La première suggestion est présentée comme un cadeau, pas un test. "Voici une combinaison que tu n'aurais peut-être pas pensée — uniquement depuis ce que tu possèdes." L'utilisateur est activé. La boucle commence.
Jamais sur le premier écran. Jamais dès l'installation. La demande push arrive au moment où l'utilisateur comprend que la suggestion matinale nécessite une notification. "Pour que je te rappelle de consulter ta suggestion demain matin, peux-tu m'autoriser à t'envoyer une notification ?" Ce cadrage augmente le taux d'acceptation de 30%.
Logique de
Navigation
L'utilisateur de BeYourself arrive avec 3 intentions mentales différentes. La navigation doit servir les 3 sans créer de friction entre elles.
Mode "je veux ma tenue" — Intention de tâche, 7h30 du matin, moins de 30 secondes disponibles. Il faut que la suggestion soit accessible en 1 tap depuis la notification ou en tap sur l'onglet principal. Tout écran intermédiaire ici est une friction toxique.
Mode "je veux comprendre mon style" — Exploration contemplative, souvent le week-end ou le soir. L'utilisateur browse son profil, son journal, ses patterns. Il a du temps. La navigation peut être plus profonde, les informations plus denses.
Mode "je veux vérifier un achat" — Intention décisionnelle, en contexte d'achat. Le check doit être accessible depuis le bouton d'action flottant (+) en moins de 2 taps. Souvent déclenché depuis une autre app — la Share Extension est critique.
Toujours visible : le bouton d'action principal (+), l'onglet Aujourd'hui avec le badge si une suggestion est disponible, le Style Clarity Score en haut du profil (progression visible → motivation de retour).
Caché (1 niveau de profondeur) : les settings, les préférences de notification, la gestion de l'abonnement, l'export de données. Ces éléments ne doivent pas polluer la navigation principale — ils existent mais ne s'imposent pas.
Contextuel : le purchase check (visible quand l'utilisateur browse le dressing ou arrive via Share Extension), les memory triggers (visible dans le journal uniquement), les options de partage (visible après génération du Wrapped ou consultation du profil).
Arborescence
Hiérarchie conçue pour minimiser les clics vers les fonctions critiques et maximiser la découverte des fonctions secondaires.
Règle de profondeur : les fonctions critiques (suggestion, log, add item) ne doivent jamais être à plus de 2 taps depuis l'onglet actif. Les fonctions de gestion (settings, privacy, export) peuvent être à 3-4 niveaux de profondeur — les utilisateurs qui les cherchent ont l'intention et la patience.
Funnels Critiques
Chaque funnel a un drop-off prévisible. Les identifier à l'avance permet de concevoir les optimisations avant de les subir.
Responsive
Design
BeYourself est un produit mobile-first. La version web existe pour des usages spécifiques — pas pour tout.
L'écran par excellence. La camera, les notifications push, la suggestion matinale, le log rapide — tout ça nécessite le mobile. 95% des interactions se font là.
- Suggestion matinale depuis la notification (rich push avec image)
- Upload photo depuis la camera en 1 tap
- Share Extension depuis Safari/Chrome pour le purchase check
- Log tenue en 1 tap depuis la suggestion
- Navigation bottom bar — pouce accessible sans changer de prise en main
- Scrolling du journal : confort du scroll vertical mobile
- Widget iOS/Android sur l'écran d'accueil : suggestion du jour sans ouvrir l'app
Deux cas d'usage valides sur desktop : la consultation du profil (grand écran, contemplative) et les outils Pro pour les stylistes (gestion multi-clients).
- Vue profil enrichie : Visual DNA sur grand écran
- Journal de style scrollable horizontalement (timeline)
- Outils Pro : gestion clients en colonnes multiples
- Wardrobe grid : plus d'items visibles simultanément
- Exportation du Wrapped en qualité impression
- Pas de suggestion matinale (usage non pertinent)
- Pas d'upload principal (camera mobile prévue)
Ne pas sur-investir dans une version web complète en V1. Le comportement core (suggestion matinale, upload, log) est fondamentalement mobile. La version web est un bonus pour le profil et les stylistes — pas un produit parallèle.
Accessibilité
L'accessibilité de BeYourself n'est pas une checklist technique. Elle est directement liée à la promesse produit : être pour tout le monde.
Daltonisme et couleurs : le Visual DNA est fortement basé sur les palettes de couleurs. Pour les utilisateurs avec une déficience de vision des couleurs (8% des hommes), les swatches seuls ne suffisent pas. Chaque couleur doit avoir un label textuel en complément du visuel. "Terracotta rosé" + swatch, pas seulement le swatch.
Diversité corporelle et représentation : les silhouettes présentées dans le questionnaire et les suggestions doivent représenter activement la diversité des morphologies. Une UI qui présente uniquement des mannequins standards crée un sentiment d'exclusion chez 60% des utilisateurs réels — et cela impacte directement la rétention. Ce n'est pas du marketing d'inclusion, c'est de la conception produit intelligente.
Jargon mode : BeYourself est conçu pour des gens qui ne sont pas experts en mode. Les termes comme "col roulé", "silhouette oversized", "coupe évasée" doivent être accompagnés de visuels ou d'alternatives en langage courant. L'accessibilité cognitive s'applique au vocabulaire.
Contraste sur fond sombre : si l'app a un thème sombre (ce que le positionnement suggère), les ratios de contraste WCAG AA doivent être maintenus pour le texte principal (4.5:1 minimum). Les couleurs d'accent (gold, blush) sont jolies mais souvent insuffisantes pour le texte corps.
Taille des zones de tap : les éléments interactifs doivent avoir une zone de tap minimum de 44×44px (guidelines Apple/Google). Les items de la grille dressing et les boutons de choix du matin sont particulièrement exposés à cet enjeu.
Impact business de l'accessibilité : un produit accessible adopte en moyenne 15-20% plus d'utilisateurs qu'un produit inaccessible dans la même catégorie. Pour BeYourself qui vise 80% de la population adulte, exclure les personnes malvoyantes, daltonies ou avec des corps non-standards est une perte de marché directe.
Frictions
UX
Toutes les frictions ne sont pas mauvaises. Certaines sont des filtres, d'autres des outils de confiance. Seules les frictions toxiques méritent d'être éliminées.
Optimisations UX
Classées par impact sur les métriques critiques. Toutes chiffrées — pas d'estimation vague.
| Optimisation | Mécanisme | Impact attendu | Priorité |
|---|---|---|---|
| Questionnaire avant création de compte | L'utilisateur vit la valeur (profil_v0) avant d'être bloqué par un formulaire d'inscription. La création de compte devient la continuité d'un investissement déjà consenti, pas un prérequis. | +25-35% activation | P0 — Immédiat |
| Upload non-bloquant (image raw immédiate) | Afficher l'item avec son image originale dès le tap "ajouter", pendant que le background removal et l'analyse IA se font en arrière-plan. L'utilisateur voit son item ajouté immédiatement — pas un écran de chargement. | +40% complétion upload | P0 — Fondamental |
| Rich push notification avec image de l'outfit | La notification matinale affiche une preview de la suggestion directement dans la notification (iOS 15+ rich notifications, FCM data messages). L'utilisateur voit sa tenue proposée sans ouvrir l'app — l'ouverture est pour confirmer, pas pour découvrir. | +15-20% open rate | P1 — V1 |
| Progress bar upload "5 items = nouveau profil insight" | Montrer explicitement la récompense attendue pour l'effort demandé. "3 items de plus et tu veras ta palette complète" est plus efficace que n'importe quelle explication textuelle du produit. | +30% continuation upload | P1 — Onboarding |
| Micro-insight à Q3 du questionnaire | Après la 3ème question, afficher un mini-résultat intermédiaire dans un coin de l'écran ("On commence à te voir..."). Signal que le système t'écoute activement — réduit l'abandon de mi-parcours. | +20% completion questionnaire | P1 — Onboarding |
| Widget iOS/Android — Suggestion écran d'accueil | Un widget sur l'écran d'accueil du téléphone affichant la suggestion du jour. L'utilisateur n'a pas besoin d'ouvrir l'app — mais son existence quotidienne sur l'écran d'accueil renforce l'identité de BeYourself comme outil permanent, pas occasionnel. | +25% DAU sur D30+ | P2 — V1 |
| Réponse IA visible pendant l'upload (skeleton animé) | Pendant les 5-15 secondes d'analyse, afficher un skeleton de l'item qui se "remplit" progressivement avec les informations détectées (couleur en premier, type ensuite, silhouette en dernier). La perception de vitesse est meilleure avec une progression visible qu'avec un spinner. | -30% abandon pendant analyse | P1 — UX |
| Paywall ancré sur la valeur, pas sur la limite | Au lieu de "Tu as atteint la limite", afficher "Ton profil est maintenant assez riche pour révéler ta signature complète — débloque-la." L'utilisateur perçoit un investissement à aboutir, pas une punition. | +40% conversion paywall | P0 — Revenue |
Empty
States
Un empty state est une invitation, pas un constat de vide. Chaque empty state de BeYourself doit pousser vers le comportement qui déverrouille la valeur.
Curiosité + légère appréhension. Il vient de voir son profil_v0 et il veut le confirmer. L'énergie est haute — il faut la canaliser immédiatement.
PAS : "Ton dressing est vide — ajoute des vêtements."
CTA unique et contextualisé : "Ajouter ma première pièce" avec la camera ouverte en 1 tap. Pas de choix multiples — une seule direction.
Impatience mêlée d'anticipation. L'utilisateur attend quelque chose et ne comprend pas pourquoi ça n'arrive pas encore.
Barre de progression visible : 8/15 items. Le goal est visible et atteignable.
Transforme un état de frustration en motivation. L'utilisateur upload plus pour débloquer la fonctionnalité — behavior loop intentionnel.
Curiosité pour le futur. L'utilisateur comprend le concept du journal mais n'a pas encore de données pour le remplir.
Pose la promesse d'une valeur future — reason to return. L'utilisateur sait que dans 30 jours l'expérience sera différente. C'est suffisant pour revenir.
Frustration potentielle. Il a vu son profil_v0 et maintenant il voit "profil incomplet". Il perçoit un recul par rapport à ce qu'il avait.
Ne jamais montrer un profil vide ou avec des trous béants. Le profil_v0 doit toujours être visible — les nouvelles données l'enrichissent, ne l'effacent pas.
Error
States
Le ton des erreurs définit la personnalité du produit. BeYourself est bienveillant — même ses erreurs doivent l'être.
L'item est ajouté au dressing même sans analyse complète. Il est visible avec un badge "en attente d'analyse". Pas d'échec visible — la fonctionnalité est dégradée, pas absente.
PAS : "Erreur d'analyse. Réessayez."
Cloud Task retry automatique (3 tentatives). Si échec définitif → invite à retaker la photo ou à saisir manuellement. La pièce n'est jamais perdue.
L'upload reprend automatiquement dès la reconnexion (Firebase Storage resumable uploads). L'utilisateur voit une progress bar qui "reprend" — pas un échec avec redémarrage.
La photo est conservée localement pendant l'absence de connexion. Le cache local est la garantie que l'utilisateur ne re-photographie jamais quelque chose déjà fait.
Accès premium maintenu 72h après l'échec initial. L'utilisateur n'est pas puni immédiatement — il a le temps de résoudre le problème sans stress.
Jamais culpabilisant, jamais urgent. Le produit fait confiance à l'utilisateur. Cette bienveillance est différentielle dans un marché où les apps coupent l'accès instantanément.
L'item est quand même ajouté. La qualité d'analyse est signalée visuellement (badge "analyse partielle") mais l'upload n'est pas bloqué.
Suggestion, jamais obligation. L'utilisateur peut retaker ou pas — son choix est respecté. L'app n'est pas bloquante sur la qualité d'image.
Loading
States
La perception de la vitesse est plus importante que la vitesse réelle. Un chargement de 8 secondes avec une progression visible est mieux vécu qu'un de 3 secondes sans feedback.
Problème : 10-25 secondes de traitement si spinner = expérience d'attente pure. L'utilisateur ne sait pas si ça avance.
L'item apparaît immédiatement avec son image brute. Un skeleton animé se remplit progressivement : d'abord la couleur dominante, ensuite le type, ensuite la silhouette. Chaque information qui arrive est une micro-récompense.
Copy micro : "Analyse des couleurs..." → "Identification de la coupe..." → "Correspondance avec ton profil..." Chaque étape est nommée — l'IA ne fait pas de magie noire, elle travaille visiblement.
Idéal : pré-calculée la nuit → 0 ms de chargement. Fallback : calcul en temps réel si le pré-calcul a échoué. Dans ce cas, skeleton de la card de suggestion (forme de 3 items côte à côte) pendant 1-3 secondes maximum. Jamais un spinner blanc.
La card apparaît d'un coup (animation fade-in douce) une fois complète — jamais un remplissage partiel qui donne l'impression que le système "cherche encore".
L'utilisateur attend le verdict d'un achat potentiel — le chargement est émotionnellement chargé. Il faut que l'attente soit narrative, pas vide. L'image de la pièce candidate est affichée pendant que les données se calculent.
Micro-copy progressif : "Comparaison avec tes couleurs..." → "Vérification des silhouettes..." → "Analyse des combinaisons possibles..." Ce texte prépare mentalement l'utilisateur au type d'information qu'il va recevoir — et rend l'attente instruite, pas passive.
C'est un moment émotionnel fort — comme ouvrir un cadeau. Le chargement doit être conçu comme une révélation : un écran sombre avec l'animation de "génération" (données qui s'assemblent visuellement), puis le reveal de la première carte en plein écran.
L'attente n'est pas une friction — elle est de l'anticipation construite. Les 3-5 secondes de "génération" rendent le résultat plus précieux qu'un affichage instantané. C'est de la UX émotionnelle délibérée.
La règle des loading states de BeYourself : si le chargement dure plus de 500ms, montrer un skeleton. Si plus de 3 secondes, nommer les étapes. Si plus de 10 secondes, transformer l'attente en narration. Jamais de spinner blanc sans contexte au-delà de 2 secondes.