Le nouveau site Papillon
Un design clair, une page pour chaque fonctionnalité, un blog et une version anglaise : papillon.bzh fait peau neuve.
papillon.bzh change complètement. Le site passe d'un thème sombre à un design clair qui reprend celui de l'app, chaque fonctionnalité a sa propre page et sa propre couleur, l'association et l'histoire du projet sont racontées en détail, et on lance un blog. Le tout en français et en anglais, sur ordinateur comme sur mobile.
papillon.bzh, c'est la vitrine de Papillon. C'est souvent la première chose qu'on voit de l'app, avant même de la télécharger. Et depuis aujourd'hui, elle a complètement changé.
Nouveau design, nouvelles pages, un blog, une version anglaise... Alors, qu'est-ce qui a changé ?
L'ancien site
L'ancien site tenait en trois pages : l'accueil, l'association et le téléchargement. Un fond sombre aux reflets verts, un grand titre « Votre vie scolaire, avec de la magie en plus. », et un iPhone tenu en main pour montrer l'app.
Il a bien fait son travail. Mais avec le temps, il ne suffisait plus, notamment :
- Trop peu de place : toutes les fonctionnalités tenaient dans trois blocs sur l'accueil. Impossible d'expliquer comment marche le calcul de la moyenne, ou ce que fait l'emploi du temps quand un cours est annulé.
- Aucune actu : pas d'endroit pour parler des mises à jour ou des coulisses du projet, à part nos réseaux sociaux.
- Uniquement en français : alors que Papillon est disponible dans de nombreuses langues.
Comment faire mieux ?
Un site à l'image de l'app
Le premier changement se voit tout de suite : le site passe en clair. Fond blanc, texte noir, et le vert de Papillon pour les boutons. Comme dans l'app.
On a aussi repris la police de l'app, SN Pro, avec les mêmes graisses que dans nos maquettes Figma. Les cartes, les arrondis et les icônes (nos Papicons, évidemment) viennent du même design system. Résultat : en passant du site à l'app, on ne change pas d'univers.
L'accueil s'ouvre quand même sur un hero sombre : une vidéo de l'app qui se dévoile, et un titre « La nouvelle vie scolaire » entre les mots duquel s'animent les emojis de l'app. Puis, dès les premiers pixels de scroll, la page passe du noir au blanc, et la barre de navigation bascule avec elle.
Une navigation repensée
La navigation a été entièrement repensée, autour de quatre menus : Fonctionnalités, À propos, Développer et Blog. Le menu des fonctionnalités montre un aperçu de chaque page, avec un morceau d'interface de l'app.
Au survol, une seule surbrillance glisse d'un élément à l'autre. Et le bouton de téléchargement cache un petit menu, pour choisir directement son store ou rejoindre les bêtas.
Sur mobile, le menu s'ouvre en plein écran, avec un sous-menu pour chaque rubrique.
L'accueil
L'accueil a été réécrit de A à Z. Il commence par une grille de cartes animées, qui résument Papillon en cinq mots : Connecté, Privé, Instantané, Malin et À votre image. Chaque carte a sa petite illustration vivante : un compte qui se connecte, un mot de passe masqué, un devoir qu'on coche, une courbe de moyenne ou un sélecteur de couleur.
Puis viennent :
- Les appareils : iPhone, Android, iPad, Mac et iPhone Duo, chacun avec ses propres captures.
- Le fonctionnement : comment se connecter en quatre étapes, sans créer de compte.
- La confiance : l'open source, la vie privée et la sécurité, avec nos contributeur·rice·s GitHub.
- Les avis : un défilé d'avis de l'App Store et du Play Store, avec nos chiffres.
La section sur la confiance est sombre, en plein milieu d'une page claire. Et c'est un petit détail dont on est assez fiers : quand on la fait défiler, la barre de navigation passe automatiquement en sombre, puis redevient claire juste après.
Une page par fonctionnalité
C'est la plus grosse nouveauté. Les notes, l'emploi du temps, les devoirs et les actualités ont maintenant chacun leur propre page.
Et chaque page a sa couleur : vert pour les notes, rouge pour l'emploi du temps, orange pour les devoirs et bleu pour les actualités. Toute la page suit : le fond du hero, les icônes, les boutons.
Sur chacune de ces pages, on prend enfin le temps d'expliquer ce que fait vraiment l'app : comment la moyenne est calculée avec les coefficients, combien une note fait gagner ou perdre sur la moyenne générale, comment un cours annulé apparaît dans la journée... Le tout avec des captures annotées, une section pour les grands écrans, et une FAQ propre à chaque fonctionnalité.
L'association et notre histoire
La page de l'association avait un ton assez général : des valeurs, une équipe, mais peu de concret.
Elle a été réécrite pour raconter qui on est vraiment : six étudiants, une asso loi 1901 et une app qu'on fait tourner entre deux cours. Le hero est une mosaïque de photos prises lors de nos événements.
On y retrouve aussi une carte de France qui relie nos cinq villes, la présentation de chaque membre de l'équipe avec son école, et nos engagements : gratuit, open source, et sans jamais garder vos identifiants.
Et pour remonter plus loin, une nouvelle page Notre histoire retrace Papillon de 2021 à aujourd'hui : la toute première version, que j'avais codée pour moi seul, le passage en open source, le changement de nom de Pronote+ à Papillon, le passage à React Native, et jusqu'à la v8.
Le blog
Tu es en train de le lire ! Le site a maintenant un blog, pour parler des nouveautés de l'app, des coulisses du projet et de ce qu'on apprend en chemin.
Les articles sont rangés en trois catégories : Articles, Développement et Notes de mise à jour. Chacun commence par un résumé, et peut être traduit en anglais.
Et aussi
Quelques autres changements, plus discrets :
- Téléchargement : une page plus claire, avec un QR code qui mène au bon store, chaque plateforme (iPhone et iPad, Android, Mac) et les bêtas.
- In English : tout le site est disponible en anglais, avec un sélecteur de langue dans la navigation.
- Animations : toutes faites avec Motion, sur une même courbe, et réduites si ton appareil demande moins de mouvement.
- Sons : de petits clics discrets accompagnent les boutons et les menus.
- La page 404 : une page qui sèche les cours, et un papillon à attraper.
Sous le capot
Côté technique, le site est construit avec Next.js 16, Tailwind CSS 4 et Motion. Toutes les couleurs et les tailles passent par des tokens communs. C'est ce qui permet aux sections sombres ou aux pages de fonctionnalités de changer de thème localement, sans réécrire un seul composant.
Les textes sont rangés dans des dictionnaires, un pour le français et un pour l'anglais, et les articles du blog sont écrits en MDX. Ajouter un article ou une traduction ne demande donc pas de toucher au code.
Conclusion
L'ancien site présentait Papillon. Le nouveau prend le temps de l'expliquer : chaque fonctionnalité, l'équipe derrière, et tout ce qui se passe entre deux mises à jour.
Et surtout, il ressemble enfin à l'app qu'il présente.
N'hésite pas à faire le tour, et à nous faire tes retours sur Discord !