Link TITLE

Width

butProductList;1;comparaison;## **Avant refonte**;butProductList-1.jpg;520;1485;Liste produits avant la refonte;;;butProductList;1;comparaison;## **Après refonte**;butProductList-2.jpg;520;1630;Liste produits après la refonte;;;butProductList;2;ol;## **Cellules produits versions "Grid" et "Line"**;butProductList-3.jpg;726;781;Page d'accueil après la refonte;La version "Line" de cette page est utilisée pour l'électroménager et le multimédia afin de permettre l'**affichage des caractéristiques produits** et ainsi **faciliter la comparaison d'un produit à l'autre**.;;butProductList;2;ol;## **Les filtres**;butProductList-4.jpg;996;1238;Page d'accueil après la refonte;Un problème majeur avait été constaté au niveau des **filtres**, un constat qu'ils étaient **peu ou mal utilisés**. Un manque de clareté et un problème d'inaccessibilité au scroll nous a poussé à **réétudier son ergonomie et son graphisme**. ;;butProductList;2;ol;## **Rattachement au magasin**;butProductList-5.jpg;967;793;Page d'accueil après la refonte;La zone rattachement au magasin souffrait du même problème que dans le header avant sa refonte, elle était difficilement comprise par l’utilisateur et manquait de visibilité. ;;butProductList;2;ol;## **Résultats de recherche**;butProductList-6.jpg;1035;428;Page d'accueil après la refonte;;;butProductList;2;ol;## **Refonte des pop-in**;butProductList-7.jpg;990;447;Page d'accueil après la refonte;;

**BUT international**, spécialiste dans la vente d'équipement de la maison

## **Refonte** de la liste produits version Desktop du site **but.fr**

butTracking;1;topOnly;## **Page prise de rendez-vous responsive** Mobile first;butTracking-2.png;481;562;Page prise de rendez-vous responsive;;;butTracking;1;topOnly;;butTracking-1.jpg;600;759;Page tracking version mobile;;;butTracking;2;flex;## **Version mobile**;butTracking-3.gif;459;940;Version mobile en détail;;;butTracking;2;flex;;butTracking-4.jpg;533;715;Fonctionnalité en détail;;;butTracking;2;flex;## **Version desktop**;butTracking-5.gif;975;878;Version desktop;;

## **Refonte fonctionnelle et graphique** de la prise de rendez-vous pour le retrait en magasin sur **but.fr**

butHomePage;1;comparaison;## **Avant refonte**;butHomePage-1.jpg;520;1617;Page d'accueil avant la refonte;;;butHomePage;1;comparaison;## **Après refonte**;butHomePage-2.jpg;520;2883;Page d'accueil après la refonte;;;butHomePage;2;ol;## **Header**;butHomePage-3.jpg;975;462;Refonte du header;;;butHomePage;2;ol;## **Header : zone de rattachement au magasin**;butHomePage-4.jpg;979;448;Refonte de zone de rattachement au magasin;La zone de ***rattachement au magasin** dans le header n'était pas optimale, nous avons constaté qu'elle était difficilement comprise par l'utilisateur.;;butHomePage;2;ol;## **Header : Menu**;butHomePage-5.jpg;977;567;Refonte du menu;Le **menu de navigation** avait un problème de lisibilité, les niveaux des catégories n'étaient pas assez distincts ce qui pouvait perdre l'utilisateur. Nous avons aussi constaté un problème de conception, le menu pouvait se refermer lors du passage d'un niveau à l'autre.;;butHomePage;2;ol;## **Carrousel**;butHomePage-6.jpg;977;1112;Refonte du carousel;L'équipe Marketing se sentaient limitée par une seule grande slide par défilement. Ayant augmenter la taille du conteneur, nous avons opté pour une **zone carrousel modulable** avec la possiblité d'une à trois slides par défilement.;;butHomePage;2;ol;## **Entrées sur les promotions et encarts spéciaux**;butHomePage-7.jpg;886;636;Refontes des entrées sur les promotions;J'ai fait le choix ici d'opter pour un style différent afin de les démarquer des zones de merchandising.;;butHomePage;2;ol;## **Zones de merchandising**;butHomePage-8.jpg;976;1284;Refonte des zones de merchandising;Il était essentiel d'homogénéiser ces zones afin de rendre le tout plus harmonieux et être en phase avec la **nouvelle charte graphique mise en place**.;;butHomePage;2;ol;## **Zones "Crédit et "Catalogues"**;butHomePage-11.jpg;934;437;Refonte de la zone "Crédits" et "Catalogues";;;butHomePage;2;ol;## **Zone blog**;butHomePage-9.jpg;932;592;Refonte de la zones "Blog";Le **blog BUT** manquait de visibilité, nous avons fait le choix d'implémenter un **carrousel avec les derniers articles publiés**.;;butHomePage;2;ol;## **Galerie Instagram**;butHomePage-10.jpg;989;961;Création d'une galerie Instagram;Afin d'augmenter le sentiment de **proximité des clients**, nous avons créé une **galerie Instagram** avec Olapic, offrant ainsi **une place de choix à la communauté BUT**.;;butHomePage;2;ol;## **Footer**;butHomePage-12.jpg;932;1865;Refonte du footer;;

## **Refonte** de la page d'accueil, du header et footer du site **but.fr**

butLiveShopping;1;topOnly;## **Live Shopping** version mobile;butLiveShopping-1.png;481;562;Live Shopping version mobile;;;butLiveShopping;1;topOnly;;butLiveShopping-2.jpg;600;584;Live Shopping version desktop;;;butLiveShopping;2;ol;## **Avant le live**;butLiveShopping-3.jpg;999;638;Live Shopping : avant le live;Avant le live, le visiteur peut demander à **être notifié** pour recevoir une alerte une heure avant le début du live. Il peut aussi **poser des questions** sur le produit qui sera présenté.;;butLiveShopping;2;ol;## **Pendant le live**;butLiveShopping-4.jpg;977;638;Live Shopping : pendant le live;Offrant aux consommateurs une **expérience immersive** et **interactive**, le live Shopping leur permet de **d’interagir avec l’influenceur** et d'**acheter des produits pendant le live**. ;;butLiveShopping;2;ol;## **Après le live**;butLiveShopping-5.jpg;982;658;Live Shopping : Après le live;Une fois le live terminé, le **replay** est disponible et permet d’**enrichir la fiche produit**.;

## Ajout d'un **Live Shopping** sur la fiche produit du site **but.fr**

dashboard;1;topOnly;## **Page d'accueil** Version mobile simplifiée : seuls les outils présents sur la home seront utiles.;dashboard-1.png;347;562;Page d'accueil du Dashboard version desktop;;;dashboard;1;topOnly;;dashboard-2.jpg;594;444;Widget Statistique;;;dashboard;2;ol;## **Barre de recherche**;dashboard-3.png;1080;382;Widget Emails;;;dashboard;2;ol;## **Widget Statistique**;dashboard-4.png;1080;332;To Do List;;;dashboard;2;ol;## **Widget Emails**;dashboard-5.png;1080;337;L'actu;;;dashboard;2;ol;## **To Do List**;dashboard-6.png;1080;721;Liste des favoris;;;dashboard;2;ol;## **L'actu**;dashboard-7.png;1080;726;Liste d'articles;;;dashboard;3;lineCenter;## **Liste des favoris**;dashboard-8.png;1080;796;Page article;Ayant un **grand nombre de favoris**, j'ai fait la choix de les stocker sur cette application afin de les retrouver plus rapidement et de n'importe quel poste de travail.;;dashboard;3;lineCenter;## **Liste d'articles**;dashboard-9.png;1080;840;Page d'accueil du Dashboard version mobile;;;dashboard;3;lineCenter;## **Page article**;dashboard-10.png;667;565;Barre de recherche;;

Projet personnel

## Création d’un dashboard sur **React.js** et **Google Apps Script**

inmac;1;topOnly;## **Responsive Design** Longue page optimisée pour du Mobile First;inmacGlobal-1.png;481;2760;Page d'accueil du site d'Inmac Wstore version desktop;;;inmac;1;topOnly;;inmacGlobal-2.jpg;600;562;Page d'accueil du site d'Inmac Wstore version mobile;;;inmac;1;topOnly;## **Page intermédiaire de la catégorie PC portables**;inmacGlobal-3.jpg;425;1061;Page intermédiaire de la catégorie "PC portable" destkop;;;inmac;1;topOnly;;inmacGlobal-4.png;425;445;Page intermédiaire de la catégorie "PC portable" mobile;;;inmac;2;flex;## **Centre d'aide évolué**;inmacGlobal-5.jpg;600;931;Accueil du centre d'aide évolué;;;inmac;2;flex;## **Devenir affilié**;inmacGlobal-6.jpg;502;779;Page affilié du centre d'aide évolué;;;inmac;2;flex;## **Plan du site**;inmacGlobal-7.jpg;502;779;Page plan du site du centre d'aide évolué;;;inmac;2;flex;## **Contact**;inmacGlobal-8.jpg;502;454;Page de contact du centre d'aide évolué;;;inmac;2;flex;## **E-procurement**;inmacGlobal-9.jpg;502;1010;Page "E-procurement le guide client" du centre d'aide évolué;;

**Groupe Betchle** , spécialiste de la vente de matériel informatique pour professionnels

## **Refonte responsive** du site e-commerce Inmac Wstore

newsAssu;1;masonry;## **Newsletter ASSU2000 France** Envoi mensuel;assunews-1.jpg;502;806;Newsletter ASSU2000 France;;;newsAssu;1;masonry;## **Newsletter Euro-Assurance** Envoi pour l'année 2013, Euro-Assurance est une marque d'ASSU2000;assunews-3.jpg;502;945;Newsletter Euro-Assurance;;;newsAssu;1;masonry;## **Emailing Maxance santé** Tirage au sort pour un week-end bien-être, Maxance est une filiale d'ASSU2000;assunews-6.jpg;502;754;Emailing Maxance santé;;;newsAssu;1;masonry;## **Emailing Euro-Assurance** Email de rappel pour une demande de devis;assunews-8.jpg;500;600;Emailing Euro-Assurance;;;newsAssu;1;masonry;## **Emailing Euro-Assurance** Rappel pour une validation de devis;assunews-10.jpg;502;586;Emailing Euro-Assurance;;;newsAssu;1;masonry;## **Newsletter ASSU2000 Espagne** Envoi mensuel;assunews-2.jpg;502;929;Newsletter ASSU2000 Espagne;;;newsAssu;1;masonry;## **Emailing Euro-Assurance** Tirage au sort en partenariat avec "Smartbox";assunews-4.jpg;502;540;Emailing Euro-Assurance;;;newsAssu;1;masonry;## **Emailing ASSU2000** Tirage au sort en partenariat avec Saintélyon;assunews-7.jpg;502;522;Emailing Maxance Santé;;;newsAssu;1;masonry;## **Emailing Maxance Santé** Offre d'une promotion sur un contrat santé;assunews-9.jpg;502;815;Emailing Maxance Santé;;;newsAssu;1;masonry;## **Emailing Euro-Assurance** Rappel de devis abandonné;assunews-5.jpg;500;482;Emailing Euro-Assurance;;

Propositions graphiques sur mesure pour le courtier en assurances **ASSU2000**

## **Création de newsletters et emailings** pour le compte d’ASSU2000

inmacCreateAccount;1;topOnly;## **Responsive Design** Création de compte optimisée pour du mobile first;inmacCreateAccount-1.png;600;558;Page de création de compte d'accueil du site d'Inmac Wstore version mobile;;;inmacCreateAccount;1;topOnly;;inmacCreateAccount-2.jpg;481;562;Page de création de compte d'accueil du site d'Inmac Wstore version desktop;;;inmacCreateAccount;2;ol;## **Choix du type de compte**;inmacCreateAccount-3.jpg;1343;148;Le choix du type de compte;;;inmacCreateAccount;2;ol;## **Création des identifiants**;inmacCreateAccount-4.jpg;1343;706;Création des identifiants;;;inmacCreateAccount;2;ol;## **Les données personnelles**;inmacCreateAccount-5.jpg;1343;624;Les données personnelles;;;inmacCreateAccount;2;ol;## **Les informations de société**;inmacCreateAccount-6.jpg;1343;1571;Les informations de société;;;inmacCreateAccount;2;ol;## **Validation du compte**;inmacCreateAccount-7.jpg;1343;523;Validation du compte;;

## **Refonte responsive** de la page de création de compte du site Inmac Wstore

hyperburo;1;flex;## **Page d'accueil** avec zones personnalisables par points de vente;hyperburo-1.jpg;600;882;Page d'accueil du site HyperBuro;;;hyperburo;1;flex;##  **Page de présentation du groupe**;hyperburo-2.jpg;425;616;Pages de présentation de la société;;;hyperburo;1;flex;## **Page de présentation des engagements**;hyperburo-3.jpg;425;579;Pages de présentation de la société;;;hyperburo;1;flex;## **Présentation des catalogues interactifs**;hyperburo-4.jpg;593;690;Page de présentation des catalogues interactifs;;;hyperburo;2;fullSize;## **Module de géocalisation** pour trouver le magasin de sa région et y passer commande;hyperburo-5.jpg;1901;739;Module de géolocalisation;300,550;;hyperburo;3;flex;## **Page Liste produits** avec un filtres de recherche avancée et un module de comparaison de produit;hyperburo-6.jpg;502;700;Page "Liste produits";;;hyperburo;3;flex;## **Page Fiche Produit** avec un caroussel d'images produit et un module "Produits complémentaires";hyperburo-7.jpg;502;810;Page "Fiche produit";;;hyperburo;3;flex;## **Page Panier** avec un module "Code Promo";hyperburo-8.jpg;502;572;Page "Panier";;

**Groupe CS Comlandi** Spécialiste des fournitures de bureau et des fournitures scolaires

## **Création du site e-Commerce** d’Hyperburo

assu;1;flex;## **Page d'accueil**;assu-1.jpg;600;772;Page d'accueil du site Euro-assurance;;;assu;2;masonry;## **Page Twitter**;assu-2.jpg;425;356;Page "Réseaux sociaux";;;assu;2;masonry;## **Page Facebook**;assu-3.jpg;425;382;Page "Réseaux sociaux";;;assu;2;masonry;## **Page Assurance Chien-chat**;assu-4.jpg;502;1085;Page "Assurance Chien-chat";;;assu;2;masonry;## **Page Assurance Habitation**;assu-5.jpg;502;847;Page "Assurance Habitation";;;assu;2;masonry;## **Page Assurance Voiturette**;assu-6.jpg;1299;2694;Page "Assurance Voiturette";;

**ASSU2000**, courtier en assurance auto, moto, scooter et habitation

## **Refonte graphique** du site Euro-Assurance

inmacProductList;1;topOnly;## **Responsive Design** Liste produit optimisée pour du Mobile First;inmacProductList-1.png;481;562;Page "liste produits" du site d'Inmac Wstore version mobile;;;inmacProductList;1;topOnly;;inmacProductList-2.jpg;600;728;Page "liste produits" du site d'Inmac Wstore version desktop;;;inmacProductList;2;lineCenter;## **Centre d'aide évolué**;inmacProductList-3.png;600;1302;Centre d'aide évolué;;;inmacProductList;3;flex;## **Module de comparaison de produits**;inmacProductList-4.jpg;502;629;Module de comparaison de produit;;;inmacProductList;3;flex;## **Option d'affichage en ligne ou en grille**;inmacProductList-5.jpg;502;460;Option d'affichage en ligne ou en grille;;

## **Refonte responsive** de la liste produits du site Inmac Wstore

icomChannel;1;portfolio;;icomChannel-1.jpg;540;440;Illustration emailing ICOM Channel "Zen";;;icomChannel;1;portfolio;;icomChannel-2.jpg;540;440;Illustration emailing ICOM Channel "Men in Black";;;icomChannel;1;portfolio;;icomChannel-3.jpg;540;440;Illustration emailing ICOM Channel "Noël";;;icomChannel;1;portfolio;;icomChannel-4.jpg;540;440;Illustration emailing ICOM Channel "Palme d'or";;;icomChannel;1;portfolio;;icomChannel-5.jpg;540;440;Illustration emailing ICOM Channel "Le parrain";;;icomChannel;1;portfolio;;icomChannel-6.jpg;540;440;Illustration emailing ICOM Channel "Cirque";;;icomChannel;1;portfolio;;icomChannel-7.jpg;540;440;Illustration emailing ICOM Channel "Plage";;;icomChannel;1;portfolio;;icomChannel-8.jpg;540;440;Illustration emailing ICOM Channel diverses;;;icomChannel;1;portfolio;;icomChannel-9.jpg;540;440;Illustration emailing ICOM Channel "Cloud";;;icomChannel;2;flex;## **Emailing de lancement**;icomChannel-10.jpg;502;629;Emailing de lancement;;;icomChannel;2;flex;## **Autre exemple d'emailing du pack**;icomChannel-11.jpg;502;653;Autre exemple d'emailing du pack;;;icomChannel;2;flex;## **Pleine page dans le magazine EDI**;icomChannel-12.jpg;600;827;Pleine page dans le magazine EDI;;

**I-com Software**, spécialiste dans la distribution B2B

## **Création d’une campagne emailing** pour ICOM Channel

inmacOrder;1;topOnly;## **Responsive Design** Panier optimisée pour du mobile first;inmacOrder-1.png;481;562;Page panier du site d'Inmac Wstore version mobile;;;inmacOrder;1;topOnly;;inmacOrder-2.jpg;600;524;Page panier du site d'Inmac Wstore version desktop;;;inmacOrder;2;ol;## **Panier**;inmacOrder-3.png;990;802;Panier en détail;;;inmacOrder;2;ol;## **Identification**;inmacOrder-4.png;867;537;Identification;;;inmacOrder;2;ol;## **Abonnement à Office 365**;inmacOrder-5.png;952;1104;Abonnement à Office 365;;;inmacOrder;2;ol;## **Livraison et paiement**;inmacOrder-6.png;990;1037;Livraison et paiement;;;inmacOrder;2;ol;## **Confirmation de la commande**;inmacOrder-7.png;990;1233;Confirmation de la commande;;

## **Refonte responsive** du process de commande du site Inmac Wstore

burocom;1;flex;## **Page d'accueil** avec mise en avant des produits et services;burocom-1.jpg;600;707;Page d'accueil d'Espace Burocom;;;burocom;1;flex;## **Espace "Actualité" de type blog"**;burocom-2.jpg;425;447;Espace "Actualité" de type "blog";;;burocom;1;flex;## **Page Article**;burocom-3.png;425;327;Espace "Actualité" de type "blog";;;burocom;1;flex;## **Page de présentation des logiciels et solutions**;burocom-4.jpg;502;672;Page de présentation des logiciels et solutions;;;burocom;1;flex;## **Page de présentation des services**;burocom-5.jpg;502;547;Page de présentation des services;;;burocom;1;flex;## **Page d'information sur les produits Xerox**;burocom-6.jpg;502;526;Page d'information sur les produits Xerox;;

**Groupe ROS**, distributeur de solutions bureautiques et informatiques

## **Création du site e-Commerce** d’Espace Burocom

logo;1;portfolioSquare;;logo-1.jpg;444;402;Logo "Hello Sunshine !";#FFFFFF;;logo;1;portfolioSquare;;logo-2.png;400;236;Logo "L'atelier du design";#000000;;logo;1;portfolioSquare;;logo-3.jpg;309;246;Logo "Diy Or Die";#FFFFFF;;logo;1;portfolioSquare;;logo-4.png;229;177;Logo "L'étoile de Melle";#282828;;logo;1;portfolioSquare;;logo-5.jpg;819;905;Logo "L'atelier du design";#FFFFFF;;logo;1;portfolioSquare;;logo-6.png;426;88;Logo "Yellowww";#C6BAA4;

## **Création de logos** sur mesure

mismo;1;flex;## **Page d'accueil** avec une présentation des produits par profils d'utilisateurs et deux sélecteurs de cartouches d'encres.;mismo-1.jpg;600;904;Page d'accueil du site Mismo;;;mismo;1;flex;## **Page Liste Produits** avec un trie par prix, une colonne de filtrage par marque et un comparateur de produits.;mismo-2.jpg;502;554;Page "Liste produits";;;mismo;1;flex;## **Page produit** avec une fiche technique détaillées et un module d'envoi de fiche produit par email.;mismo-3.jpg;502;686;Page "Produit";;;mismo;1;flex;## **Page Panier** avec un module "Code Promo;mismo-4.jpg;1004;1124;Page "Panier";;;mismo;1;flex;## **Pages de confirmation de commande**;mismo-5.jpg;425;705;Pages "Livraison" et "Confirmation de commande";;;mismo;1;flex;## **Page de livraison de commande**;mismo-6.jpg;425;451;Pages "Livraison" et "Confirmation de commande";;;mismo;1;flex;## **Espace Client** Page Liste de commandes;mismo-7.jpg;502;416;Espace client;;

**Mismo**, vente de services informatiques et numériques

## **Création du site e-commerce** Mismo

papeterie;1;masonry;## **Antilles Papeterie** Distributeur de fournitures et matériels de bureau en Guadeloupe;papeterie-1.jpg;502;833;Page d'accueil d'Antilles Paperterie;;;papeterie;1;masonry;## **BestPaper** vendeur de consommables d'impression, de périphériques informatiques et de fournitures de bureau.;papeterie-3.jpg;502;798;Page d'accueil BestPaper;;;papeterie;1;masonry;## **France Fourniture** Vendeur de consommables d'impression, de périphériques informatiques et de fournitures de bureau.;papeterie-2.jpg;502;631;Page d'accueil Fourniture;;

Propositions graphiques sur mesure

## **Création de chartes graphiques** dans le secteur de la papeterie

distributionIT;1;masonry;## **Webco** Spécialiste cablage et réseau;distributionIT-1.jpg;502;1062;Page d'accueil du site Webco;;;distributionIT;1;masonry;## **Pourmonpc** Revendeur d'accessoires pour ordinateurs portables et tablettes;distributionIT-2.jpg;502;804;Page d'accueil du site Pourmonpc;;;distributionIT;1;masonry;## **SMSwebStore** Revendeur de matériel informatique;distributionIT-3.jpg;502;1451;Page d'accueil du site SMSwebStore;;;distributionIT;1;masonry;## **myCADstore** Spécialiste dans la vente de matériel HP;distributionIT-4.jpg;502;911;Page d'accueil du site myCADstore;;

## **Création de chartes graphiques** dans le secteur de la distribution IT

inmacProductPage;1;topOnly;## **Responsive Design** Liste produit optimisée pour du Mobile First;inmacProductPage-1.png;347;562;Page "Produit" du site d'Inmac Wstore version mobile;;;inmacProductPage;1;topOnly;;inmacProductPage-2.jpg;600;944;Page "Produit" du site d'Inmac Wstore version desktop;;;inmacProductPage;2;lineCenter;## **Carrousel d'images avec zoom**;inmacProductPage-3.png;1182;331;Carrousel d'images avec zoom;;;inmacProductPage;2;lineCenter;;inmacProductPage-4.png;1151;490;Entête et éléments techniques fixés au scroll;;;inmacProductPage;2;lineCenter;## **Zone "Avis clients"**;inmacProductPage-5.png;1338;1341;Zone "Avis clients";;

## **Refonte responsive** de la fiche produit du site Inmac Wstore

icom;1;flex;## **Page d'accueil**;icom-1.jpg;600;701;Page d'accueil du site d'Icom Software;;;icom;2;flex;## **Page de présentation de la société**;icom-2.jpg;425;664;Page "Notre entreprise";;;icom;2;flex;## **Référence de la société**;icom-3.jpg;425;630;Page "Références";;;icom;2;flex;## **Page "Abonnement Meta-Catalogue"**;icom-4.jpg;502;638;Pages de présentation des services proposés;;;icom;2;flex;## **Page "Ouvrir et gérer un site e-commerce de qualité"**;icom-5.jpg;502;598;Pages de présentation des services proposés;;;icom;2;flex;## **Page "Suivez votre business en temps réel"**;icom-6.jpg;502;685;Pages de présentation des services proposés;;

Réalisations

Ajout d'un Live Shopping sur la fiche produit du site but.fr

Live Shopping version mobile

Avant le live

Pendant le live

Après le live