Sciences Po LilleSciences Po LilleSciences Po LilleSciences Po Lille
Le client.
Sciences Po Lille est une grande
école publique de sciences
humaines et sociales. Membre du
Réseau ScPo, associée à
l'Université de Lille et membre
de la Conférence des grandes
écoles, elle forme quelque
1 700 étudiantes et
étudiants à comprendre les
grandes transformations du monde
contemporain, et à agir face à
elles.
Science politique, droit,
économie, histoire, sociologie,
relations internationales :
l'école fait dialoguer les
disciplines, adosse ses
enseignements à une recherche
active et intègre à chaque
parcours une année à l'étranger,
au sein d'un réseau de plus de
230 universités partenaires
réparties dans une cinquantaine
de pays. Le tout sur un campus à
taille humaine, niché dans le
quartier Saint-Michel.
Deux sites, une école.
Derrière ce projet se cachent en
réalité deux sites. D'un côté,
le site institutionnel, vitrine
publique de l'école : il
s'adresse aux lycéennes et
lycéens qui préparent le
concours, aux familles, aux
candidatures internationales,
aux entreprises qui recrutent ou
versent leur taxe
d'apprentissage, sans oublier
7 600 alumni. De l'autre,
un intranet réservé à celles et
ceux qui font vivre l'école au
quotidien : étudiantes et
étudiants, équipes enseignantes,
chercheuses et chercheurs,
personnel administratif.
Deux publics, deux usages, une
même exigence. Le site public
devait rendre lisible une
arborescence dense (sept grandes
rubriques, de
« L'école » à
« Entreprises et
partenaires ») et suivre le
rythme soutenu de la vie de
l'école : conférences,
colloques, débats, actualités,
campagnes d'admission.
L'intranet, lui, devait devenir
le point d'entrée quotidien de
toute la communauté. Avec, en
ligne de mire, une promesse à
tenir :
« Penser le monde
d'aujourd'hui. Préparer
celui de demain. »
Brique & pierre.
Hands a imaginé un univers
ancré dans le territoire de
l'école. La palette puise dans
la matière même de Lille :
la brique de ses façades, la
pierre de ses bâtiments
historiques, et le rouge
Sciences Po en signature.
Quelques touches de jaune et de
vert « stabilo »
viennent surligner l'essentiel,
comme dans des notes de
révision.
Côté typographie, l'Ortica
Linear donne aux titres une
élégance éditoriale, le DM Sans
assure le confort de lecture et
le DM Mono habille les
informations pratiques :
dates, lieux, catégories. Un jeu
d'icônes dédié complète
l'ensemble. De mon côté, j'ai
traduit cette direction
artistique en composants
fidèles aux maquettes, partagés
entre le site public et
l'intranet, et pensés pour se
combiner librement sans jamais
sacrifier la fluidité.
Sous le capot.
Les deux sites reposent sur une
architecture
headless : un back-office
WordPress, familier pour les
équipes éditoriales, alimente
des fronts Nuxt rendus côté
serveur et construits sur une
bibliothèque de composants
commune. Une information peut
ainsi être publiée une seule
fois, puis diffusée sur le site
public, sur l'intranet ou sur
les deux selon le public visé.
Résultat : des pages
rapides, bien référencées côté
public, avec des états de
chargement soignés plutôt que
des écrans blancs.
Au-delà des pages de contenu, le
site institutionnel embarque de
vrais services : une recherche
globale, un agenda filtrable par
type d'événement avec
inscription en ligne, la
possibilité de proposer un
événement, une carte interactive
pour rejoindre le campus, ou
encore l'affluence de la
bibliothèque en direct,
prévisions à l'appui. Pratique
pour savoir s'il reste une place
avant de traverser la place
Georges-Lyon.
Un intranet à la carte.
Réservé aux membres de l'école,
l'intranet s'ouvre avec les
identifiants habituels grâce à
l'authentification centralisée
(CAS) : une seule
connexion, et l'on retrouve son
espace. Les contenus s'adaptent
ensuite au profil. Une étudiante
de première année, un
enseignant-chercheur ou une
gestionnaire de scolarité ne
cherchent pas la même chose, et
l'intranet présente d'abord à
chaque profil ce qui le
concerne : actualités
internes, scolarité, démarches
administratives, documents
utiles.
Au cœur de l'intranet, un espace
individuel entièrement
personnalisable. Chacune et
chacun compose son tableau de
bord en ajoutant, masquant ou
réorganisant ses modules
(raccourcis vers les outils du
quotidien, agenda, actualités,
favoris), et retrouve ses
préférences d'une session à
l'autre. Côté front, j'ai veillé
à rendre cette personnalisation
évidente : glisser-déposer
fluide, enregistrement
instantané et interface
utilisable au clavier. Un vrai
bureau numérique, au service de
toute la communauté.
Accessible et ouvert au monde.
Établissement public, Sciences
Po Lille se doit de proposer des
outils numériques utilisables
par toutes et tous. Les
exigences du RGAA ont donc guidé
la conception des deux sites dès
les premières maquettes : liens
d'évitement, navigation au
clavier, hiérarchie des titres,
contrastes maîtrisés. Côté vie
privée, les contenus tiers,
vidéos en tête, ne se chargent
qu'après consentement.
L'ouverture internationale se
lit aussi dans l'interface :
le site institutionnel est
disponible en cinq
langues (français, anglais,
espagnol, italien et allemand)
pour accueillir
les quelque 350 étudiantes et
étudiants internationaux de
l'école et dialoguer avec ses
partenaires aux quatre coins du
monde.
Le mot de la fin.
Accompagner une grande école
dans la refonte de son site et
de son intranet, c'est concevoir
à la fois une vitrine pour le
grand public et un outil du
quotidien pour celles et ceux
qui feront le monde de demain.
Un projet exigeant, à l'image de
l'école, où la rigueur
académique rencontre le plaisir
d'une expérience web soignée.
Merci aux équipes de
Sciences Po Lille pour leur
confiance, et à Hands pour
cette nouvelle collaboration.
Les deux sites ont été mis en
ligne en septembre 2026, juste à
temps pour la rentrée.
Crédits : stratégie,
UX & direction
artistique par
Hands
· développement Wordpress par
Virgil Bedin · développement front du
site et de l'intranet,
intégration headless,
performances & accessibilité par Alexandre
Pinot.