UI – UX – Karine Deflandre Portfolio https://karine-deflandre.com Mon, 01 Dec 2025 23:13:54 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9 https://karine-deflandre.com/wp-content/uploads/2025/11/cropped-Logo_KD_500x500-32x32.png UI – UX – Karine Deflandre Portfolio https://karine-deflandre.com 32 32 Optimisation de l’affichage des Product Cards et banners Lapeyre.fr https://karine-deflandre.com/portfolio/optimisation-de-laffichage-des-product-cards-et-banners/ Sun, 30 Nov 2025 21:08:56 +0000 https://karine-deflandre.com/?post_type=rara-portfolio&p=4131

Le problème identifié concernait une présentation non optimale des banners et des product cards en page liste à 3 colonnes sur différents écrans, avec des dimensions variables entraînant des contenus tronqués et difficilement lisibles, notamment sur petits écrans.

Objectifs et solutions mises en place :
  • Fixer la hauteur des product cards à 490 px, basée sur le cas maximal d’affichage de trois options produits. Puis, fixer la largeur des Product Cards à 320 px, correspondant à la taille d’une colonne mobile.
  • Maintenir des dimensions constantes des cards quel que soit l’appareil utilisé.
  • Revoir la taille des banners pour qu’elles s’adaptent aux dimensions fixes des product cards.
  • Appliquer des breakpoints cohérents (1400 px, 1200 px, 767 px, 575 px) pour garantir un affichage stable et lisible, en reprenant les standards web.
  • Itération étroite avec les développeurs via JIRA pour ajuster les implémentations et garantir un résultat final conforme et satisfaisant.
Résultat : Cette refonte a permis une meilleure uniformité visuelle, une meilleure lisibilité des contenus marketing et une expérience utilisateur optimisée sur tous les appareils.
]]> Réalisation d’une landing page – site e-commerce – Lapeyre.fr  https://karine-deflandre.com/portfolio/realisation-dune-landing-page-site-e-commerce-lapeyre-fr/ Sun, 23 Nov 2025 16:05:54 +0000 https://karine-deflandre.com/?post_type=rara-portfolio&p=3985
La gamme Formeo de Lapeyre est une collection de meubles de salle de bains modulables, pensées pour offrir à la fois fonctionnalité, élégance et simplicité. Elle se caractérise par des lignes épurées, des matériaux durables et une modularité qui permet de composer des configurations personnalisées selon les besoins de chaque espace.

 

Pour concevoir la landing page dédiée à la gamme Formeo, j’ai dû prendre en compte un environnement sans CMS et sans intégrateur interne.

Ce projet a été mené dans un cadre technique particulièrement contraint : absence d’outil de gestion de contenu, impossibilité d’intégrer de nouveaux composants et obligation de s’appuyer uniquement sur des blocs de code existants.
Ce contexte a exigé une approche de conception à la fois créative, pragmatique et très précise, afin de maintenir :

  • la cohérence graphique et éditoriale propre à la marque Lapeyre,

  • la lisibilité et la hiérarchisation des contenus,

  • la performance et la stabilité technique du site,

  • tout en respectant les limites strictes du système actuel.

J’ai optimisé le contenu, clarifié la hiérarchie visuelle et adapté les blocs existants pour valoriser la gamme Formeo et assurer une intégration fluide dans l’environnement technique en place.

Résultat : une page claire, cohérente et performante, construite malgré un cadre technique rigide.
Ce projet illustre ma capacité à adapter une conception UX/UI aux contraintes de production réelles, à trouver des solutions efficaces sans perdre en qualité, et à collaborer étroitement avec les équipes internes dans un contexte sans intégration dédiée.

Lien vers la page : 

https://www.lapeyre.fr/c/meubles-salle-de-bains-formeo
]]> Refonte de la page Configurateurs – site e-commerce – Lapeyre.fr https://karine-deflandre.com/portfolio/maquettes-lapeyre/ Fri, 10 Oct 2025 10:23:40 +0000 https://karine-deflandre.com/?post_type=rara-portfolio&p=3696

Contexte

L’entreprise disposait de plusieurs configurateurs produits permettant aux utilisateurs de personnaliser leurs articles avant achat. La page existante était dense, peu lisible et difficile à comprendre, ce qui affectait l’engagement et augmentait les abandons de parcours.

Problématique

L’ancienne page présentait plusieurs points de friction :

Informations peu hiérarchisées, navigation complexe, manque d’indications sur la valeur des configurateurs, adaptation mobile insuffisante

Objectif : rendre la page plus claire, intuitive et efficace.

Public cible & besoins identifiés

Les utilisateurs cherchent : À comprendre rapidement quel configurateur correspond à leur besoin. À accéder facilement à l’outil adapté. À naviguer dans une interface visuelle, simple et claire. À personnaliser leurs produits sans effort, y compris sur mobile.

Démarche & Processus UX

1. Analyse de l’existant

  • Cartographie de la page actuelle

  • Évaluation de la lisibilité et de la hiérarchie

  • Identification des frictions et des redondances

2. Elaboration

  • Propositions de simplification de la structure

  • Définition d’une nouvelle organisation par catégories

3. Wireframes

  • Création de prototypes

  • Test interne pour valider l’organisation

4. UI Design

  • Refonte complète :

  •  

    Blocs et cards plus lisibles
  • Visuels produits mis en valeur
  • CTA clairs et homogènes
  • Charte graphique respectée
  • Déclinaisons mobile & desktop

5. Itérations

  • Ajustements suite aux retours des équipes.

  • Définition d’une version équilibrée entre design & performance.

Solution finale

  • Mise en avant des configurateurs sous forme de cards organisées.

  • Hiérarchisation claire des informations.

  • Interface plus moderne, respirante et efficace.

  • Navigation mobile optimisée.

  • Page alignée sur l’identité visuelle de la marque.

  • Parcours simplifié → moins d’abandon, plus d’engagement.

Résultats & Impact

Même sans métriques exactes, la refonte apporte :

  • Une meilleure compréhension immédiate des options

  • Un accès simplifié aux configurateurs

  • Une expérience mobile fluide

  • Une image plus professionnelle et cohérente

Apprentissages & Suite

Ce projet a renforcé :

  • L’importance d’une hiérarchie visuelle solide

  • La valeur d’une approche Design Thinking (analyse → élaboration→ test)

  • La collaboration étroite entre équipes pour affiner l’expérience

Prochaines pistes : tests A/B, ajout de micro-animations, optimisation des taux de clics.

 

]]>