Blog Kollori
Blog
Un site coloré au service de l’aménagement de bureau et du bien-être au travail.
Présentation & demande initiale
Fondée en 2012 et installée à Boulogne-Billancourt, Kollori vend du mobilier de bureau design aux entreprises et les accompagne dans l’aménagement de leurs espaces de travail. Son blog décrypte les tendances du monde du travail : aménagement, ergonomie, bien-être au bureau.
La marque venait de refondre son identité visuelle et son site e-commerce. Il fallait donc mettre à jour le blog pour qu’il porte la même identité.
- Année
- 2024
- Secteur
- E-commerce
Audit de l'existant
La nouvelle identité de Kollori a été conçue par Studio Aeria. Le logo joue sur le « O » de Kollori, où se glissent des formes et des couleurs : une manière de dire qu’un espace de travail se façonne et s’anime. L’orange emblématique de la marque a été conservé.
Il en découle une identité modulaire et colorée, déclinée en tout un univers graphique qui illustre les multiples façons d’aménager un bureau. C’est dans cet univers que le blog devait trouver sa place.
Contexte
J’ai réalisé ce projet pendant mon stage chez Kollori, dans le cadre de ma formation de Concepteur Designer UI (2023-2024), en lien direct avec l’équipe de la marque. Une contrainte technique était posée dès le départ : le blog devait rester sous WordPress.
Avant de concevoir quoi que ce soit, j’ai analysé le projet :
- Analyse technique du blog existant
- Analyse de son référencement
- Benchmark des blogs concurrents
- Personas et experience map
Intervention
- Analyse — étape réalisée
- Identité — étape hors périmètre
- Conception — étape réalisée
- Intégration — étape réalisée
- Suivi — étape hors périmètre
Wireframes & maquettes
Wireframe
Maquette
Composants
Animation par défaut & au survol/au clic
Responsive
Choix & contraintes
Le moins d’extensions possible
Le blog a été réalisé avec WordPress, mais je voulais installer le moins d’extensions possible pour garder un site léger et simple à maintenir. Les animations, comme l’avion en papier, sont donc écrites en CSS plutôt que confiées à un plugin.
Dans la continuité de l’identité
Je voulais rester au plus près de la nouvelle identité : les composants propres au blog (cartes d’articles, en-têtes, animations…) ont été imaginés comme un prolongement de cet univers modulaire et coloré, pour que le blog et la boutique parlent d’une même voix.
Stack technique
Le blog repose sur WordPress (en PHP) ; le front-end est écrit en HTML, CSS et JavaScript natifs, sans framework.
Back-office
L’objectif était que l’équipe de Kollori puisse faire vivre le blog en toute autonomie. J’ai donc structuré le back-office avec des Custom Post Types et Advanced Custom Fields (ACF) : chaque type de contenu dispose de ses propres champs, clairs et guidés, sans qu’il soit nécessaire de toucher au code.
Périmètre
Je ne suis pas à l’origine de l’identité visuelle, créée par Studio Aeria. J’ai mené l’analyse du projet, conçu les wireframes et les maquettes du blog, puis développé son intégration sous WordPress, back-office compris.