CyberSagesse — Parcours d’aide & communauté
CyberSagesse — Parcours d’aide & communauté
CyberSagesse — Parcours d’aide & communauté
Maquette d'application contre le cyberharcelement
Maquette d'application contre le cyberharcelement
Maquette d'application contre le cyberharcelement
CyberSagesse est un projet universitaire qui s’attaque au cyber-harcèlement avec un dispositif complet : une charte lisible, une capsule de sensibilisation, un prototype d’app mobile et un forum pour structurer l’entraide. Mon rôle a couvert le design (logo, moodboard, UI), le storyboard vidéo, le userflow et la mise en place WordPress (hébergement + forum).
CyberSagesse est un projet universitaire qui s’attaque au cyber-harcèlement avec un dispositif complet : une charte lisible, une capsule de sensibilisation, un prototype d’app mobile et un forum pour structurer l’entraide. Mon rôle a couvert le design (logo, moodboard, UI), le storyboard vidéo, le userflow et la mise en place WordPress (hébergement + forum).
CyberSagesse est un projet universitaire qui s’attaque au cyber-harcèlement avec un dispositif complet : une charte lisible, une capsule de sensibilisation, un prototype d’app mobile et un forum pour structurer l’entraide. Mon rôle a couvert le design (logo, moodboard, UI), le storyboard vidéo, le userflow et la mise en place WordPress (hébergement + forum).
Client
IUT de Toulon (BUT MMI)
Services
Comprendre, Concevoir, Exprimer, Développer, Entreprendre
Industries
mobile-first, accessibilite, motion, wordpress, forum, charte
Date
2023
Nous avons d’abord posé les fondations visuelles : logo, palette et moodboard. Mon intention graphique part d’un lexique “santé/protection” (gammes de verts/bleus, symbole d’infini pour l’idée “il y a toujours une solution”), puis se décline en règles d’usage pour garantir la cohérence sur le site, l’app et les supports. Pour l’expérience mobile, j’ai formalisé un userflow clair (rôles utilisateurs / modérateurs, points d’entrée et décisions) puis un prototype Figma qui matérialise le parcours Signaler → Comprendre → Agir. L’interface est pensée mobile-first Enfin, j’ai pris en charge l’hébergement du site et l’installation d’un forum pour la communauté. Le choix s’est porté sur WordPress + bbPress : un couple sobre, intégré nativement à l’écosystème WP et suffisamment modulable pour démarrer vite puis étendre avec des add-ons si besoin.
Nous avons d’abord posé les fondations visuelles : logo, palette et moodboard. Mon intention graphique part d’un lexique “santé/protection” (gammes de verts/bleus, symbole d’infini pour l’idée “il y a toujours une solution”), puis se décline en règles d’usage pour garantir la cohérence sur le site, l’app et les supports. Pour l’expérience mobile, j’ai formalisé un userflow clair (rôles utilisateurs / modérateurs, points d’entrée et décisions) puis un prototype Figma qui matérialise le parcours Signaler → Comprendre → Agir. L’interface est pensée mobile-first Enfin, j’ai pris en charge l’hébergement du site et l’installation d’un forum pour la communauté. Le choix s’est porté sur WordPress + bbPress : un couple sobre, intégré nativement à l’écosystème WP et suffisamment modulable pour démarrer vite puis étendre avec des add-ons si besoin.
Nous avons d’abord posé les fondations visuelles : logo, palette et moodboard. Mon intention graphique part d’un lexique “santé/protection” (gammes de verts/bleus, symbole d’infini pour l’idée “il y a toujours une solution”), puis se décline en règles d’usage pour garantir la cohérence sur le site, l’app et les supports. Pour l’expérience mobile, j’ai formalisé un userflow clair (rôles utilisateurs / modérateurs, points d’entrée et décisions) puis un prototype Figma qui matérialise le parcours Signaler → Comprendre → Agir. L’interface est pensée mobile-first Enfin, j’ai pris en charge l’hébergement du site et l’installation d’un forum pour la communauté. Le choix s’est porté sur WordPress + bbPress : un couple sobre, intégré nativement à l’écosystème WP et suffisamment modulable pour démarrer vite puis étendre avec des add-ons si besoin.
AC11.05 — Identifier les cibles et leurs contextes d’usage (victimes / témoins / modérateurs). AC21.04 — Décrire les parcours et points de décision (userflow → proto). AC12.01 — Concevoir en termes d’usage & fonctionnalités (Signaler → Comprendre → Agir). AC13.05 — Designer l’interface Web/mobile (UI, états, feedbacks). AC23.06 — Produire une animation pédagogique (capsule de sensibilisation). AC14.06 — Déployer & personnaliser via un CMS (WordPress + forum bbPress). AC25.01 — Gérer le projet en itérations (priorisation, livrables testables).
AC11.05 — Identifier les cibles et leurs contextes d’usage (victimes / témoins / modérateurs). AC21.04 — Décrire les parcours et points de décision (userflow → proto). AC12.01 — Concevoir en termes d’usage & fonctionnalités (Signaler → Comprendre → Agir). AC13.05 — Designer l’interface Web/mobile (UI, états, feedbacks). AC23.06 — Produire une animation pédagogique (capsule de sensibilisation). AC14.06 — Déployer & personnaliser via un CMS (WordPress + forum bbPress). AC25.01 — Gérer le projet en itérations (priorisation, livrables testables).
AC11.05 — Identifier les cibles et leurs contextes d’usage (victimes / témoins / modérateurs). AC21.04 — Décrire les parcours et points de décision (userflow → proto). AC12.01 — Concevoir en termes d’usage & fonctionnalités (Signaler → Comprendre → Agir). AC13.05 — Designer l’interface Web/mobile (UI, états, feedbacks). AC23.06 — Produire une animation pédagogique (capsule de sensibilisation). AC14.06 — Déployer & personnaliser via un CMS (WordPress + forum bbPress). AC25.01 — Gérer le projet en itérations (priorisation, livrables testables).