Persona App
Le projet
Un outil né d’une demande en agence
Dans l’agence où je travaillais, mon responsable m’a demandé de développer un outil pour créer des fiches persona. L’objectif était de guider la saisie des informations et de pouvoir partager une fiche claire une fois complétée.
J’ai commencé par hiérarchiser le contenu, définir les fonctionnalités nécessaires et rechercher les bibliothèques adaptées. J’ai ensuite développé une première version simple, avec un design reprenant l’identité visuelle de l’agence.
Les retours reçus m’ont permis de faire évoluer le projet : amélioration du parcours, export PDF, sauvegarde et gestion de plusieurs personas. L’outil est désormais en ligne et opérationnel.
Cette application n’est pas disponible sur téléphone.
Exemple fictif
SortableJS · jsPDF
Frameworks
Application web
Type de projet
Conception, design, dév
Mon rôle
HTML · CSS · JavaScript
Stack principale
L’application en action
Un outil pour mieux comprendre sa cible
Un parcours guidé permet de compléter les informations étape par étape. Les réponses sont ensuite rassemblées dans une fiche personnalisable, avec un avatar, des sections réorganisables et des questions adaptées au type de cible.
Plusieurs personas peuvent être sauvegardés dans le navigateur. Chaque fiche peut être téléchargée en PDF ou exportée dans un fichier modifiable pour être reprise sur un autre appareil.
Processus de réalisation
Les différentes étapes de la conception
Analyse du besoin et organisation du contenu
Avant de coder, j’ai organisé les informations à recueillir et défini les étapes du parcours. Il fallait répartir les questions pour éviter un formulaire trop long, tout en conservant une vue d’ensemble à la fin.
J’ai également listé les éléments nécessaires au fonctionnement de l’outil : avatar, champs de saisie, personnalisation, réorganisation des sections et exports.
Recherche des frameworks et première version
La recherche de bibliothèques adaptées a été l’une des difficultés du projet. Je devais trouver celles qui correspondaient aux fonctionnalités prévues, comprendre leur fonctionnement et les intégrer à mon code.
J’ai utilisé SortableJS pour déplacer les sections et jsPDF pour générer les PDF. La première version reposait sur un système simple et reprenait le style graphique de l’agence.
Cette étape m’a appris à évaluer les possibilités et les limites d’une bibliothèque avant de construire une fonctionnalité autour d’elle.
Retours et amélioration des fonctionnalités
Une fois la première version terminée, plusieurs retours ont permis d’identifier ce qui manquait et ce qui devait être revu.
J’ai retravaillé la navigation, ajouté la sauvegarde de plusieurs personas et mis en place un export/import modifiable. Les questions ont aussi été adaptées aux contextes B2B, B2C et B2B2C.
L’export PDF a demandé une attention particulière : certains blocs étaient coupés et des éléments se chevauchaient. J’ai revu sa construction pour mieux gérer les sauts de page, le logo et l’avatar.
Restructuration et mise en ligne
Avec l’ajout des fonctionnalités, j’ai revu la structure du code pour faciliter les modifications. Les questions sont maintenant définies une seule fois, puis utilisées dans le parcours guidé et le récapitulatif.
J’ai également adapté l’interface à mon site personnel avant de mettre l’outil en ligne. Sur les écrans trop petits, un message invite à utiliser un ordinateur afin de conserver une utilisation confortable.
Ce travail m’a appris à faire évoluer une première solution sans accumuler les duplications, et à vérifier que les améliorations conservent les réponses et les fonctionnalités existantes.
