Petits Pas — Onboarding & Authentification

1

Écran d'accueil

La toute première image de l'application : le logo Petits Pas, avec l'animation des pas qui marchent. Un écran de lancement épuré, sans contenu ni action, qui installe l'identité de marque le temps du chargement avant d'ouvrir sur l'écran de démarrage.

Lancement

Le logo, en ouverture

Un écran de démarrage minimal : le logo animé sur fond clair. Pas de texte, pas de bouton — juste l'identité de marque, le temps que l'app se charge.

Logo animé les pas qui marchent, signature de marque.
Écran épuré aucune sollicitation, le temps du chargement.
Transition enchaîne automatiquement sur l'écran de démarrage.

2

Écran de démarrage

Le moment du choix. Via un toggle « Je marche » / « J'accompagne », la personne déclare son intention : rejoindre la communauté en tant que Compagnon, ou s'inscrire comme Héros. Ce choix oriente tout l'onboarding qui suit.

Note DA

Le toggle « Je marche / J'accompagne » est l'unique élément qui distingue les deux versions. Tout le reste — composition photo, structure des arguments, bouton — est identique. Côté Compagnon, l'identité teal ; côté Héros, l'identité or qui signale partout le statut coach.

A

Toggle · Je marche

Côté Compagnon

« Tout commence par un Petit Pas ! » L'écran promet l'essentiel de l'expérience communautaire en trois bénéfices clairs, et invite à s'inscrire.

Rejoins des Cercles qui te ressemblent — l'entrée sociale.
Trouve un Héros pour t'accompagner — la promesse coaching.
Partage tes pas, inspire les autres — l'engagement.

Identité teal

Toggle, accent du titre et bouton « S'inscrire » en teal : c'est le parcours par défaut, celui de la grande majorité des utilisateurs.

B

Toggle · J'accompagne

Côté Héros

« Tu es le Héros qu'on t'attendait ! » Mêmes codes visuels, mais l'argumentaire bascule vers les outils professionnels du coach.

Ton agenda en 5 minutes — la mise en route express.
Crée des programmes de coaching — l'offre structurée.
Reçois les paiements dans l'appli — la monétisation intégrée.

Identité or

Le passage en or se fait sur tout l'écran (toggle, titre, bouton). Conformément au modèle d'onboarding retenu, le compte se crée gratuitement ; l'abonnement Héros n'est demandé qu'à la finalisation du profil professionnel.

3

Inscription

La création de compte. Un formulaire unique, avec validation en temps réel du mot de passe et alternatives sociales (Google, Apple). Le bouton ne s'active que lorsque toutes les conditions sont remplies.

Le formulaire, vide puis rempli

Les règles de mot de passe se valident au fil de la saisie : croix grises au départ, coches vertes une fois satisfaites. C'est ce qui débloque le bouton.

1

Non rempli

Crée ton compte

Quatre champs : nom de profil, numéro de téléphone, adresse e-mail, mot de passe. Sous le mot de passe, les trois conditions à remplir sont affichées d'emblée.

Champs explicites chacun avec son icône, lecture immédiate.
Règles visibles dès le départ, en croix grises : 8 caractères, majuscules/minuscules, 1 chiffre + 1 symbole.
Bouton désactivé tant que les conditions ne sont pas réunies.

2

Rempli

Toutes les conditions remplies

Les champs sont saisis, les trois règles passent en coches vertes. Le bouton « S'inscrire » s'active, en teal plein.

Feedback positif les croix deviennent des coches vertes, validation visible.
Bouton actif l'action est désormais possible — pas de soumission à l'aveugle.

Note DA

La connexion sociale (Google, Apple) est offerte en alternative au formulaire, séparée par un « ou ». Les onglets « Se connecter / S'inscrire » en tête permettent de basculer instantanément vers la connexion si le compte existe déjà.

4

Informations de profil

On invite la personne à se présenter : photo, nom, date d'anniversaire, ville, bio. Le bouton « Passer » en haut à droite laisse toujours la main — l'étape est encouragée, jamais imposée.

1

Non complété

Quelques infos pour se présenter

Avatar à uploader (cercle pointillé + icône appareil photo), puis les champs. Le bouton « Continuer » reste désactivé tant que rien n'est saisi.

Upload photo zone circulaire en pointillé, geste familier.
« Passer » disponible en haut à droite — aucune friction bloquante.

2

Complété

Champs renseignés & sélecteur de date

Photo ajoutée, nom renseigné. Au tap sur la date d'anniversaire, un calendrier mensuel s'ouvre en bottom sheet, le jour sélectionné en teal plein.

Date picker natif calendrier mensuel navigable, jour actif en teal.
Cohérence DA même traitement du jour sélectionné que dans la prise de RDV.

5

Centres d'intérêt

« Ce qui te parle. » La personne choisit au moins 3 thèmes parmi les 5 domaines de vie. Ce choix alimente la personnalisation du feed et des recommandations de Héros et de Cercles.

Non sélectionnés puis sélectionnés

Les tuiles sont grisées tant qu'elles ne sont pas choisies ; un tap les colore dans la couleur de leur domaine. Le minimum de 3 débloque « Continuer ».

1

Non sélectionnés

Les 5 domaines, au repos

Toutes les tuiles sont grises au départ. La consigne « Choisis 3 thèmes minimum. On adaptera ton feed. » annonce l'effet du choix.

5 domaines de vie Bien-être, Argent, Famille, Spiritualité, Business.
Promesse explicite « On adaptera ton feed » — la valeur du choix est dite.

2

Sélectionnés

Chaque domaine prend sa couleur

Sélectionnées, les tuiles révèlent leur identité chromatique : orange (Bien-être), vert (Argent), rose (Famille), violet (Spiritualité), bleu (Business).

Couleur = sélection le feedback visuel est immédiat et mémorisable.
5 couleurs distinctes une par domaine, alignées sur le système chromatique de l'app.

6

Rejoindre un Cercle

L'amorçage de la communauté, étape stratégique de l'onboarding : avant d'entrer dans l'app, la personne rejoint des Cercles. C'est ce qui garantit un feed vivant dès la première ouverture — pas d'écran vide.

Pourquoi c'est clé

Le modèle économique repose sur l'abonnement des Héros, donc sur la rétention des Compagnons. Amorcer le réseau social dès l'onboarding est le levier de rétention le plus fort : la personne arrive dans une app déjà peuplée et active.

Communauté

Rejoins un Cercle

« Petits groupes thématiques pour partager au quotidien. » Cards riches : visuel, titre, description, pile d'avatars « +1K », bouton Rejoindre.

Cards de Cercle Méditation du dimanche, Cercle Yoga, Liberté financière…
Preuve sociale pile d'avatars + compteur « +1K » qui rassure sur la vie du groupe.

7

Suivre des Héros

Dans la continuité de l'amorçage : la personne suit directement des Héros, sélectionnés selon ses centres d'intérêt. Combiné aux Cercles rejoints juste avant, c'est ce qui garantit un feed déjà peuplé à la première ouverture.

Suivre · Héros

Suis des Héros

« Coachs certifiés qui correspondent à tes thèmes. » Liste de Héros à anneau or : avatar, nom, pseudo, bouton Suivre / Suivi(e). La sélection est filtrée sur les domaines choisis à l'étape Intérêts.

Anneau or signature visuelle du statut Héros sur chaque avatar.
Sélection personnalisée alimentée par les centres d'intérêt retenus.
Suivi en un tap bascule Suivre ↔ Suivi(e) sans quitter la liste.

Fin de l'onboarding

Après cette étape, la personne entre dans l'app : un feed déjà alimenté par les Cercles rejoints et les Héros suivis. Objectif « zéro écran vide » atteint.

8

Confirmation d'inscription

La validation finale du parcours d'inscription. Une feuille de confirmation rassure, rappelle les avantages du compte, et bascule la personne dans l'application.

Bottom sheet

Compte créé avec succès

Une feuille de confirmation glisse depuis le bas, par-dessus l'écran suivant déjà en place. Coche or, message de bienvenue, et rappel des avantages du compte.

Validation claire coche or sur fond doux, ton chaleureux.
Avantages rappelés Cercles, partage, rencontre de Héros — on réaffirme la promesse.
Un seul bouton « Commencer » enchaîne directement sur la suite.

Note DA

La feuille se superpose à l'écran « Suis des Héros » : la continuité est visuelle, on sent déjà l'app derrière. Le tutoiement est appliqué partout dans les avantages, cohérent avec le reste de l'onboarding.

9

Se connecter

Pour les utilisateurs qui reviennent. Même écran que l'inscription, onglet « Se connecter » actif. Identifiant + mot de passe, ou connexion sociale, avec accès direct à la récupération de mot de passe.

Retour

Content de te revoir

« Retrouve tes Cercles, tes Héros et ta progression. » Deux champs (nom de profil ou e-mail, mot de passe avec œil), le lien « Mot de passe oublié ? », et les options Google / Apple.

Identifiant souple nom de profil ou e-mail acceptés.
Afficher le mot de passe icône œil pour vérifier la saisie.
« Mot de passe oublié ? » point d'entrée direct vers la récupération (rubrique 10).

Note DA

C'est exactement l'écran d'inscription avec l'onglet inversé : un seul écran sert les deux usages, basculé par les onglets « Se connecter / S'inscrire ». Cohérence maximale, charge de design minimale.

10

Mot de passe oublié

Le parcours de récupération, dans l'ordre : on saisit son e-mail, on reçoit et on vérifie un code à usage unique, puis on définit un nouveau mot de passe. Une confirmation referme la boucle et renvoie vers la connexion.

Étape 1 · Saisie de l'e-mail

Le bouton « Réinitialiser le mot de passe » s'active dès qu'un e-mail valide est saisi.

1

E-mail · vide

Saisir son e-mail

« Veuillez saisir votre email pour réinitialiser votre mot de passe. » Un seul champ, bouton désactivé tant qu'il est vide.

Champ unique on ne demande que l'essentiel.
Bouton désactivé jusqu'à saisie valide.

2

E-mail · rempli

E-mail saisi, bouton actif

L'adresse renseignée, le bouton passe en teal plein. Un tap envoie le code à usage unique sur la boîte mail.

Action débloquée envoi du code en un tap.

Étape 2 · Vérification du code

Cinq cases pour le mot de passe à usage unique reçu par e-mail. Lien « Renvoyer le code » si rien n'arrive.

3

Code · vide

Vérifier le code

« Veuillez saisir le mot de passe à usage unique qui vous a été envoyé sur votre boîte mail. » Cinq cases vides, bouton « Vérifier le code » désactivé.

Code OTP 5 cases, saisie chiffre par chiffre.
« Renvoyer le code » filet de sécurité si l'e-mail tarde.

4

Code · saisi

Code complet, vérification possible

Les cinq cases sont remplies, leur contour passe en teal. Le bouton « Vérifier le code » s'active.

Cases actives contour teal une fois renseignées.

Étape 3 · Nouveau mot de passe

Mêmes règles de validation que l'inscription : 8 caractères, majuscules/minuscules, chiffre + symbole.

5

Définition

Définir un nouveau mot de passe

« Créez un nouveau mot de passe. Veillez à ce qu'il soit différent des précédents. » Champ unique avec œil, et les trois conditions rappelées.

Mêmes règles que l'inscription — cohérence du système.
Afficher icône œil pour contrôler la saisie.

6

Confirmation

Mot de passe réinitialisé

Une bottom sheet glisse par-dessus l'écran de connexion : coche teal, « Mot de passe réinitialisé ! », et un bouton « Se connecter » qui referme la boucle.

Boucle fermée retour direct à la connexion, déjà en place derrière.
Coche teal — même mécanique que la confirmation d'inscription (en or), adaptée à l'identité de connexion.

Note DA

Les deux feuilles de succès du parcours (inscription en or, reset en teal) partagent la même mécanique : superposition sur l'écran de destination, coche centrée, un bouton unique. La couleur seule change selon le contexte.

Le parcours d'entrée, de l'accueil au feed

Dix écrans qui couvrent toute l'arrivée dans Petits Pas : la personne découvre l'univers, déclare son intention, crée son compte, complète son profil, choisit ses thèmes, rejoint sa communauté et suit des Héros, puis sait se reconnecter et récupérer son accès. Un même système d'authentification sert Compagnons et Héros, distingués par la couleur (teal / or).