Naos : aligner 4 marques à la création d’une plateforme pédagogique et transparente pour leurs consommateur·rice·s

Naos : aligner 4 marques à la création d’une plateforme pédagogique et transparente pour leurs consommateur·rice·s

2018 - 2019 | COLLAB w/ NOVIUS | Conseils stratégiques et conception

Naos : aligner 4 marques à la création d'une plateforme pédagogique et transparente pour leurs consommateur·rice·s

Naos est le groupe qui possède les marques Bioderma, Esthederm et État Pur.

Un contexte planétaire inédit qui rabat les cartes de ce géant de la télécommunication Québecoise

Le groupe Naos souhaitait créer une plateforme capable de vulgariser la composition de ses produits cosmétiques auprès du grand public.

Mon rôle

UX Designer au sein d’une équipe projet composée de :

  • 4 UX designers et 1 UI designer (de l’agence Novius dont je faisais partie)
  • équipes marketing, équipes produits et directions des marques du groupe Naos, y compris le PDG.

Enjeux

Le projet devait donc réunir les marques de groupe : équipes marketing et directions autour d’une vision commune, encore floue et à structurer de A à Z.

Mon approche

Extraits de l'audit du site de Margoo

Benchmark, étude de marché, idéation et inspirations

Co-animation de +10 ateliers collaboratifs

  • Idéation
  • Business goals
  • Persona
  • Parcours (flow chart)
  • Arborescence (tri de cartes)
  • Tri et priorisation des fonctionnalités et contenus clés (buy a feature)
  • Stratégie éditoriale
  • Storytelling
  • Data et KPI (à collecter et à surveiller/analyser)
  • Sketching / Zoning

Structuration des parcours et de l’arborescence

Extraits de l'audit du site de Margoo

Conception : wireframes et prototypes interctifs

Tests utilisateur·rice·s et amélioration continue

Formalisation de la vision produit numérique final (Cahier des charges et users stories)

Extrait du rapport

Présenté aux différentes directions de la banque ainsi qu'aux vice-président·e·s

Résultats obtenus

Création d’une plateforme durable (toujours utilisée +5 ans après son lancement) : Ask Naos

Vulgarisation de contenus scientifiques complexes

Si tu as aimé le cas de la BDC,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Margoo

Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

Exemple du revamp de la charte graphique de Margoo, avant et après
CDPQ : faire du design centré sur l’humain un langage commun à toute une organisation

CDPQ : faire du design centré sur l’humain un langage commun à toute une organisation

2024 - 2025 | COLLAB w/ MALTEM CANADA | Formation d'entreprise

CDPQ : Faire du design centré sur l'humain un langage commun à toute une organisation

CDPQ est la Caisse de dépôt et placement du Québec, une société gouvernementale.

Lancement d'un Centre d'Action Climatique

Voici comment une formation e-learning sur-mesure a permis de faire du design centré sur l’humain, un réflexe collectif (et plus seulement le sujet de l’équipe UX).

Particularités du projet

  • Stratégie et cadrage du programme de formation
  • Création d’un parcours e-learning UX sur-mesure
  • Production de +40 leçons vidéos et supports pédagogiques
  • Structuration des parcours par métiers et niveaux
  • Direction des tournages et coordination de production
  • Projet mené 100 % à distance en méthodologie agile

Contexte

La CDPQ souhaitait former +500 collaborateur·rice·s aux pratiques de design centré sur l’humain très différents : Product Owners, développeur·euse·s, équipes produit, analystes d’affaires, équipes marketing, gestionnaires, etc.

L’objectif n’était pas simplement de “former à l’UX”, mais de créer un langage commun entre les équipes et clarifier les rôles liés au design.

Enjeux

Plusieurs problématiques freinaient les collaborations internes :

  • des niveaux de maturité UX très variés,
  • des rôles UX/UI souvent confondus,
  • une équipe design sollicitée trop tard,
  • des Product Owners peu autonome pour prendre des décisions centrées utilisateur·rice·s sur certains sujets.

Le défi : rendre les méthodologies UX concrètes, accessibles et applicables à grande échelle, dans un environnement corporate structuré.

Mon approche

Pour transformer les méthodologies UX en réflexes concrets au quotidien, j’ai conçu avec et pour eux, un programme de formation progressif et adapté aux réalités terrains de la CDPQ.

Extraits de l'audit du site de Margoo

Cadrer les besoins et structurer le projet

Analyse des enjeux internes, définition des objectifs pédagogiques et cadrage complet du projet.

Concevoir un programme e-learning sur-mesure

Création d’un parcours de formation composé de 6 modules et +40 leçons adaptées aux différents métiers et niveaux de maturité UX dans l’organisation.

Adapter les contenus à la réalité interne de la CDPQ

Immersion dans les pratiques des équipes pour créer des contenus directement liés à leur quotidien, leurs outils et leurs méthodologies.

Extraits de l'audit du site de Margoo

Créer des supports clairs et accessibles

Rédaction des scripts, conception des présentations et création de contenus pédagogiques, clairs et inclusifs.

Extraits de l'audit du site de Margoo

Piloter la production des vidéos e-learning

Organisation des tournages, coordination des étapes de production et supervision du montage des vidéos.

Structurer des parcours par métiers

Mise en place de parcours “obligatoires” et “facultatifs” selon les rôles métiers afin de rendre chaque apprentissage réellement utile.

Extraits de l'audit du site de Margoo

Coordonner le projet en agile

Construction d’une roadmap de production sur 6 mois avec livraisons progressives, en collaboration avec les équipes internes et la cheffe de projet.

Extrait du rapport

Présenté aux différentes directions de la banque ainsi qu'aux vice-président·e·s

Résultats obtenus

Le programme a permis à la CDPQ de structurer la montée en compétence UX à grande échelle et de faire du design centré sur l’humain une responsabilité plus collective.

Former +500 collaborateur·rice·s en autonomie

Produire +800 minutes de contenus pédagogiques

Déployer 6 modules de formation et +40 leçons vidéos

Si tu as aimé le cas de la BDC,
tu devrais également adorer découvrir celui-ci...

Image représentant le site Margoo

Comment l’audit complet du site publique de la BDC a mené à une restructuration complète du menu de navigation en place depuis plusieurs années ?

Exemple du revamp de la charte graphique de Margoo, avant et après
UPF Boutique

UPF Boutique

Juin 2020 | UPGRADE TON SITE | Refonte totale

UPF Boutique

Audrey Daly, vends sur son site en ligne les meilleures marques de vêtements et accessoires anti-UV, certifiés UPF 50+ et avec du style. Comme elle le dit si bien, elle n'a qu'un seul but "que la protection solaire devienne une habitude agréable pour tous".

Photo représentant le site d'UPFBoutique
[dsm_text_badges main_text="Shopify" badges_text="CMS" badges_placement="before" _builder_version="4.27.4" _module_preset="default" header_level="h6" header_font="Ysabeau - regular|500|||||||" header_font_size="19px" badges_font="|||on|||||" custom_margin="||0px|||" hover_enabled=0 global_colors_info="{}" locked="off" sticky_enabled=0][/dsm_text_badges]

Score performance
(Google Lighthouse)

Score performance mobile
(Google Lighthouse)

Score SEO
(Google Lighthouse)

Score d'éco-conception
(Eco-index)

gCO2 émis en moyenne pour une visite par page
(Website carbon)

Niveau d'accessibilité
(RGAA)

Les données ci-contre ont été récoltées 3 mois après la mise en ligne du site.

Aperçu du projet

J'ai été approché par Audrey Daly, la fondatrice d'UPF Boutique pour optimiser son site web et effectuer une refonte graphique afin de propulser son entreprise un rang plus loin. Après avoir remporté la 2ème place du concours de Lyon Start-up en 2019, elle a ressenti le besoin de mettre un vrai coup d'accélérateur à son projet qui était en pleine évolution. Son site étant son moyen pour vendre ses produits et pour mettre en lumière ses convictions, ses valeurs et sa bataille qui relève de la santé publique, c'est tout naturellement que nous avons décidé de collaborer ensemble pour lui offrir la visibilité et l'image qu'elle mérite.

01

Accessibilité et éco-responsabilité

Colorimétrie

Le choix des couleurs a été fait de façon créative et stratégique. Les couleurs reflètent directement les marqueurs visuelles estivales d'une belle journée ensoleillée à la plage. Le contraste entre chaque texte et la couleur de son arrière plan a été testé pour répondre aux normes d'accessibilité web avec que le lisibilité pour tous soit respectée.

Typographie

Le choix des polices du site a été fait de sorte à répondre aux normes d'accessibilité (une police simple et lisible) mais aussi aux principes d'éco-responsabilité qui préconnise de n'avoir pas plus de deux polices d'écritures différentes. 

Images

Les images ont toutes été optimisé pour le site : export de chaque image au bon format, adapté au web et à sa taille réelle d'affichage sur le site et compression des images. De plus la balise alt de chaque image a été renseigné afin de facilité la lecture du site aux personnes non-voyantes, utilisant des lecteurs d'écrans. Un combo gagnant, puisque cette balise alt, une fois renseignée, favorise aussi le référencement naturel du site.

02

Esthétisme

Structure

Le site a été structuré de manière simple et efficace, pas de fioriture, pas d'éléments superflus. Chaque élément est positionné à une place réfléchit pour favoriser la conversion tout en allant à l'essentiel. Cette façon de penser le site permet de prioriser et limiter le nombre d'éléments affichés afin de ne pas trop alourdir le site au niveau de son poids, mais aussi au niveau visuel. Qui dit site moins lourd dit aussi empreinte carbone limité.

03

Ethique

Dark Patterns

Un Dark Patterns c’est le design d’une élément sur un site qui vise à la manipulation de l’utilisateur. Il faut éviter à tout prix d'en avoir si on ne veut pas briser la confiance des utilisateurs. C’est une question d’éthique. C'est une pratique surtout utilisé dans le milieu du e-commerce pour pousser à l'achat rapide. Dans ce contexte, aucun Dark Patterns n'a été utilisé afin de respecter tout un chacun.

Tu as des questions, un projet ?

Tu veux voir d'autres projets réalisés ?