Présentation client · Fonctionnalité

L'arrivée dans Petits Pas
le parcours d'entrée, écran par écran

Le tout premier contact avec l'application : la personne découvre les quatre grandes fonctions de Petits Pas, crée son compte, complète son profil et rejoint sa communauté. On suit ce parcours de bout en bout — de l'écran d'accueil jusqu'au feed, en passant par la connexion et la récupération de mot de passe.

10
Rubriques
4
Fonctions présentées
21
Écrans
1

Écran d'accueil

La toute première image de l'application : le logo Petits Pas, centré sur un dégradé doux qui reprend les couleurs des domaines de vie. Un écran de lancement épuré, sans contenu ni action, qui installe l'identité de marque le temps du chargement avant d'ouvrir sur le carrousel de démarrage.

Écran d'accueil — logo
Lancement

Le logo, en ouverture

Un écran de démarrage minimal : le logo teal sur un fond dégradé multicolore, l'empreinte de pas en signature discrète. Pas de texte, pas de bouton — juste l'identité de marque, le temps que l'app se charge.

  • Dégradé des domaines les couleurs des 5 domaines de vie, diffuses en fond.
  • Écran épuré aucune sollicitation, le temps du chargement.
  • Transition enchaîne automatiquement sur le carrousel de démarrage.
2

Écrans de démarrage

L'entrée dans l'app est désormais unique : plus de bifurcation à ce stade, tout le monde suit le même chemin. Un carrousel de quatre écrans présente les quatre grandes fonctions de Petits Pas — le réseau social, les Cercles, les RDV avec les Pros et l'auto-coaching — avant d'inviter à commencer.

Structure du carrousel
Quatre écrans à la composition identique : collage photo en haut, titre en deux temps (accroche teal en italique + complément), sous-titre, puis trois bénéfices illustrés d'icônes. L'indicateur de progression en bas situe la personne dans le carrousel ; le bouton « Commencer » n'apparaît que sur le dernier écran.
1
Slide 1 — réseau social
Slide 1 · Réseau social

Partage tes Pas, inspire les autres

« Publie tes victoires, tes astuces et suis un fil qui te ressemble. » La première promesse est sociale : un fil personnalisé où chacun partage ses avancées.

  • Fil personnalisé par centre d'intérêt — le feed s'adapte à la personne.
  • Publier ses victoires et ses astuces — le cœur du partage.
  • Réagir, commenter, partager — les interactions classiques d'un réseau social.
2
Slide 2 — Cercles
Slide 2 · Cercles

Rejoins des cercles qui te ressemblent

« Des groupes thématiques pour avancer ensemble, au quotidien. » Le deuxième pilier : la communauté organisée en petits groupes.

  • Des Cercles par centre d'intérêt — chacun trouve les siens.
  • Soutien et motivation — la valeur émotionnelle du groupe.
  • Avancer en groupe, au quotidien — la régularité par le collectif.
3
Slide 3 — RDV avec les Pros
Slide 3 · RDV avec les Pros

Trouve le Pro qui t'accompagne

« Des professionnels certifiés, un RDV réservé en quelques secondes. » L'accompagnement individuel : chercher, filtrer et réserver un Pro.

  • Filtre par domaine et objectif — la recherche guidée.
  • Des Pros certifiés près de toi — la confiance par la certification.
  • Prise de RDV en quelques secondes — la promesse de simplicité.
4
Slide 4 — auto-coaching
Slide 4 · Auto-coaching

Avance chaque jour à ton rythme

« Des parcours d'auto-coaching pour te transformer, un pas après l'autre. » Le dernier écran présente les parcours — proposés par les Pros et par Petits Pas — et ouvre l'inscription.

  • Trouve le parcours qui te correspond — la bibliothèque de parcours.
  • Ton rappel du jour pour garder le cap — l'engagement quotidien.
  • Tes progrès se transforment en badges — la gamification de la progression.
Fin du carrousel
C'est le seul écran avec un bouton : « Commencer » enchaîne sur la création de compte. L'indicateur de progression, arrivé en dernière position, confirme la fin de la présentation.

À réfléchir côté client : les photos utilisées dans les collages sont des visuels provisoires. La question est de savoir ce que vous souhaitez montrer pour illustrer ces pages de présentation (photos de la communauté, mises en situation, illustrations…). Point mineur, modifiable à tout moment par la suite.

3

Inscription

La création de compte. Un formulaire unique — nom de profil, téléphone, e-mail, mot de passe — avec validation en temps réel 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
Inscription vide
Non rempli

Rejoins celles et ceux qui avancent

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
Inscription remplie
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.
Le nom de profil, identifiant unique du compte
Le nom de profil (par exemple @paul_p, @remi_k) ne peut pas être supprimé du formulaire : c'est l'identifiant unique du compte. Contrairement au nom et au prénom, deux utilisateurs ne peuvent pas avoir le même — c'est ce qui distingue les comptes entre eux, puisque deux personnes peuvent tout à fait porter les mêmes nom et prénom.
Le compte est validé dès cette étape
L'inscription est effective dès que la personne a renseigné son nom de profil, son e-mail, son téléphone et son mot de passe. Elle reçoit alors un mail de confirmation d'e-mail et d'inscription. Tout ce qui suit (photo, profil, centres d'intérêt, Cercles, Pros) peut être complété plus tard — l'onboarding l'y encourage, sans jamais l'imposer.
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
Profil non complété
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
Profil complété avec date picker
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.
La date d'anniversaire n'est pas publique
Par défaut, elle n'apparaît pas sur le profil. Elle sert surtout aux statistiques de l'application — connaître les tranches d'âge des utilisateurs. Si vous le souhaitez, une option peut être ajoutée pour permettre à chacun d'afficher ou non sa date d'anniversaire sur son profil.
5

Centres d'intérêt

« Ce qui te parle. » La personne choisit ses thèmes parmi les 5 domaines de vie. Ce choix alimente la personnalisation du feed et des recommandations de Pros et de Cercles.

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

Au repos, les tuiles sont en contour coloré sur fond clair ; un tap les remplit de la couleur pleine de leur domaine.

1
Intérêts non sélectionnés
Non sélectionnés

Les 5 domaines, au repos

« Sélectionne les domaines qui te parlent vraiment. Chaque thème choisi colore ton feed. » Chaque tuile affiche déjà sa couleur en contour et sur l'icône ; le bouton « Continuer » reste désactivé tant que rien n'est choisi.

  • 5 domaines de vie Bien-être, Argent, Famille, Spiritualité, Business.
  • Promesse explicite « Chaque thème choisi colore ton feed » — la consigne annonce à la fois le geste et son effet.
  • Aucun minimum imposé l'étape reste entièrement libre, « Passer » disponible.
2
Intérêts sélectionnés
Sélectionnés

Chaque domaine prend sa couleur pleine

Sélectionnées, les tuiles se remplissent : orange (Bien-être), vert (Argent), rose (Famille), violet (Spiritualité), bleu (Business). Le bouton « Continuer » s'active.

  • Couleur pleine = 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.
Pourquoi aucun minimum n'est imposé
L'inscription étant validée dès le clic sur « S'inscrire », cette étape n'est pas obligatoire. La maquette imposait initialement un minimum de 3 domaines ; nous l'avons retiré. Le choix des domaines sert surtout à amorcer l'algorithme : savoir quoi proposer à un profil tout neuf. Ensuite, à mesure que le profil vit (likes, partages, commentaires, participation aux auto-coachings), l'algorithme propose avant tout des contenus liés à ses centres d'intérêt, avec quelques posts d'autres domaines susceptibles de plaire — le principe de tous les réseaux sociaux. Les réglages conservent la possibilité de modifier ses domaines de prédilection à tout moment.
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 Pros, donc sur la rétention des membres. 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.
Rejoindre un Cercle
Communauté

Cercle de Transformation

« Rejoins un cercle pour accélérer ta transformation sur le thème de ton choix. » Cards riches : visuel, titre, description, pile d'avatars « +1K », bouton Rejoindre.

  • Cards de Cercle Méditation du dimanche, Cercle Yoga, entrepreneuriat…
  • Preuve sociale pile d'avatars + compteur « +1K » qui rassure sur la vie du groupe.
  • « Passer » toujours présent l'étape reste facultative, comme tout l'après-inscription.
7

Suivre des Pros

Dans la continuité de l'amorçage : la personne suit directement des Pros, 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 des Pros
Suivre · Pros

Les Pros de Petits Pas

« Suivre des Professionnels de la communauté Petits Pas. » Liste de Pros à 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 Pro sur chaque avatar, et « Pros » en or dans le titre.
  • 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 Pros suivis. Objectif « zéro écran vide » atteint.
8

Confirmation d'inscription

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

Confirmation d'inscription
Bottom sheet

Compte créé avec succès

Une feuille de confirmation glisse depuis le bas, par-dessus l'écran « Les Pros de Petits Pas » déjà en place. Coche teal, message de bienvenue, et rappel des avantages du compte.

  • Validation claire coche teal sur fond doux, ton chaleureux.
  • Avantages rappelés Cercles, partage, rencontre de Pros — on réaffirme la promesse.
  • Un seul bouton « Commencer » fait entrer dans l'application.
Pourquoi la confirmation arrive à la fin du parcours
Le compte est déjà validé depuis le clic sur « S'inscrire » (rubrique 3), et le mail de confirmation déjà envoyé. Le pop-up de confirmation est volontairement placé à la fin des étapes de complétion : c'est ce qui encourage la personne à dérouler profil, intérêts, Cercles et Pros. Sans cela, la plupart des utilisateurs ne finalisent pas leur profil.
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.

Connexion
Retour

Content de te revoir

« Retrouve tes Cercles, tes Pros 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
Email vide
E-mail · vide

Saisir son e-mail

« Saisis ton email pour réinitialiser ton 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
Email rempli
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
Code · vide

Vérifier le code

« Saisis le mot de passe à usage unique qui t'a été envoyé sur ta 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 rempli
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
Nouveau mot de passe
Définition

Définir un nouveau mot de passe

« Crée un nouveau mot de passe. Veille à 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 reset
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.
  • Même mécanique que la confirmation d'inscription : superposition, coche centrée, bouton unique.
Note DA
Les deux feuilles de succès du parcours (inscription et reset) partagent la même mécanique : superposition sur l'écran de destination, coche teal centrée, un bouton unique. La continuité visuelle fait sentir l'app déjà présente derrière.

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

Dix rubriques qui couvrent toute l'arrivée dans Petits Pas : la personne découvre les quatre fonctions de l'app dans le carrousel, crée son compte — validé dès l'inscription —, complète son profil, choisit ses thèmes, rejoint sa communauté et suit des Pros, puis sait se reconnecter et récupérer son accès. Un parcours unique pour tous, sans bifurcation à l'entrée.