Charles Guillocher

Bonjour, je suis Charles Guillocher
et je suis UX Designer

Voir mes compétences

Compétences


Métier

Interviews utilisateur
Animation d'ateliers
Personas
Task flow / Customer journey map
Zoning / Wireframes / Mockups
Prototypes papiers
Prototypes interactifs
Tests d'utilisabilité
Web analytics & A/B Testing
Méthode Agile

Outils & Logiciels

Axure
Balsamiq
Omnigraffle
Illustrator
Photoshop
HTML / CSS / jQuery
Bootstrap
AngularJS
PHP / MySQL

Humaines

Curieux
Exigeant
Persévérant
Ponctuel
Volontaire
Procrastinateur
INTERNET
Windows 7
Windows 8
Mac
Anglais

Portfolio


Fermer

Alfred Booking

Problème

Marc, fraîchement embauché dans un label musical, explique son nouveau workflow de booker. Emails, calendrier, excels en cascade, bouts de notes, ... aucun outil ne lui permet de gérer intégralement ses différentes tâches.
L'objectif est donc de lui proposer un outil qui centralise ses besoins pour lui simplifier la gestion des groupes qu'il manage.

Identification des besoins

La première étape a été d'identifier les besoins de Marc. Je l'ai donc interviewé afin de mieux comprendre ses attentes, ses usages et les fonctionnalités attendues. A l'aide de différentes ressources, j'ai établi une grille d'interview.

    Questions générales de cadrage

  • Quelle est l’activité de l’entreprise ?
  • A quoi est destiné ce projet ?
  • A qui est destiné ce projet / quels sont les différents utilisateurs ?
  • Quel est l'utilisateur principal / prioritaire ?
  • Qu’est-ce qui définit le succès du projet ?
  • Qu’est-ce qui définit l’échec du projet ?
  • Quels sont les potentiels écueils / erreurs à éviter du projet ?
  • Questions posées à chaque typologie d'utilisateur

  • Quelle est votre fonction ?
  • Quel est l’attribut le plus crucial pour mener à bien vos tâches ?
  • Quelles sont vos tâches / votre workflow, étapes par étapes, fonctions par fonctions ?
  • De quel type d’informations avez-vous besoin pour faire votre travail ?
  • Que faites-vous quand avez besoin d’une information ?
  • Quels sont les points de friction avec le processus actuel ?
  • Quelle est l’information la plus difficile à trouver ?
  • Quelle est la tâche la plus difficile à accomplir ?
  • Que faites-vous quand vous n’arrivez pas à accomplir une tâche ?
  • Qu’est-ce qui vous fait perdre du temps ?
  • Quels sont les problèmes que cet outil tend à résoudre pour vous ?
  • A quelles étapes imaginez-vous que ce nouvel outil trouvera le plus son utilité ?
  • Quels seraient les contextes d’utilisation de cet outil (dans le bureau ? en dehors ? online / offline ? dans la durée ? … ?)
  • Sur quels supports cet outil serait utile ?
  • Imaginez-vous des utilités spécifiques selon son support (desktop, tablettes, smartphones) ?
  • Quels outils similaires existent aujourd’hui ?
  • Quelle est leur singularité / particularité ? Leurs forces et leurs faiblesses ?
  • En quoi cet outil doit-il être différent ?
  • Si vous aviez une baguette magique pour faire un meilleur outil, qu’est-ce que vous feriez ?
  • Quel est votre background / votre maitrise des différents outils numériques (desktop, tablettes, smartphones) ?
  • Y a-t-il des collaborations / tâches partagées ? A quelles étapes ? Comment / Pourquoi ?

Personas

Suite aux données récoltées lors de l'interview, j'ai pu établir les personas suivants :

Persona Marc
Persona Christian

Workflow

Afin de m'assurer de la bonne compréhension des tâches de l'interviewé, j'ai d'abord schématisé le workflow actuel. Suite à quoi j'ai proposé un nouveau workflow, prenant en compte l'outil Alfred Booking et les outils facilitateurs attenants.

Alfred Booking est ainsi conçu pour centraliser en un seul endroit tous les statuts des tournées en cours et échanges avec les différents interlocuteurs.
Pour autant, Alfred Booking n'oblige pas Marc à changer son outil professionnel principal : sa boite email.
Alfred Booking a été pensé spécifiquement en intégrant context.io au cœur de son fonctionnement.
A travers ce service, les emails entrants et sortants sont qualifiés, permettant ainsi d'assigner automatiquement des statuts aux tournées, sans intervention manuelle de l'utilisateur. Ce dernier se trouve néanmoins notifié dans son interface des derniers changements afin de garder le contrôle complet si besoin.

Prototypes Papier

Une fois le nouveau workflow validé, j'ai dessiné des prototypes papier et les ai soumis à Marc. Ils ont pu permettre d'expliquer et de vérifier dans les grandes lignes le parcours utilisateur ainsi que les interfaces fonctionnelles des étapes princpales.
Cette proposition a été jugée pertinente et répondant aux besoins exposés.

Prototype papier 1 Prototype papier 2
Prototype papier 3 Prototype papier 4
Prototype papier 5 Prototype papier 6

Prototypes Interactifs

Sur la base de ces prototypes papier, j'ai réalisé des prototypes interactifs sur Axure en détaillant davantage chacun des écrans et en illustrant le principe de notification "automatique" grâce à context.io.

Testez en live ces prototypes en cliquant ici  

A venir...

  • Tests d'utilisabilité des prototypes interactifs
  • Amélioration itérative des prototypes
  • Conclusion
Fermer

Triox

Triox est un complément alimentaire prêt-à-boire et personnalisable. Lancé en 2013, il est alors unique sur le marché et se vend exclusivement sur son site internet mytriox.com.

Problème

L'offre de Triox est innovante, dense et complexe. Il s'agit donc de faire comprendre le produit, de valoriser l'offre et d'assurer la crédibilité d'un laboratoire peu connu.

Parcours utilisateur

Sans notoriété, nos premiers visiteurs seraient acquis principalement par du trafic payant.
Nous aurions donc la possibilité d'appréhender leur provenance et leur proposer des parcours en affinité avec les besoins exprimés.
Voici un rapide recensement des leviers d'acquisition et des landings pages associées qui a été réalisé au tout début du projet :

Parcours selon leviers d'acquistion

La conception du site a été guidée par ce principe de "porte d'entrée" afin de toujours orienter l'utilisateur vers le parcours le plus optimal par rapport aux besoins qu'il a exprimés et à sa connaissance du produit.

Définition de l'arborescence

Le site Triox a plusieurs buts :

  • Informationnel : le site internet est le point central d'information, le consommateur doit pouvoir comprendre et valoriser l'offre le plus rapidement possible
  • Marchand : le site internet est une e-boutique, il faut donc y gérer catalogue produit, tunnel d'achat, compte client, ...
  • Serviciel : Triox offre également des conseils d'experts personnalisés (selon les objectifs et le profil renseigné). Le client doit pouvoir accéder et consulter ses conseils facilement.

En conséquence de ces différents aspects, de la logique "porte d'entrée" et des premières discussions, j'ai défini l'arborescence suivante :
Note : à ce moment, la marque ne s'appelait pas encore Triox mais BodyJoothies

Arborescence site Triox

Sur la base de cet arborescence, j'ai établi un rapide cahier des charges recensant les fonctionnalités attendues sur les différentes pages.

Conception

Ensuite, j'ai commencé par réaliser une première conception des écrans principaux sur Balsamiq.

Wireframe Triox Home
Wireframe Triox Composition
Wireframe Triox Fiche Produit

Balsamiq a été, pour cette première étape, d'une simplicité et d'une efficacité incroyables. Très à l'aise sur le logiciel, et ne connaissant pas encore Axure, j'ai alors produit tous les écrans, toujours sur Balsamiq.
Pour autant, à vouloir maquetté tout le site pour obtenir l'exhaustivité des pages, la tâche s'est révélée de plus en plus fastidieuse, d'autant plus qu'il a fallu trouver quelques workarounds afin de pouvoir simuler le comportement des interactions (tooltips, menus accordéon, ...).
Consultez l'ensemble de la conception en PDF (31 pages)  

Recherche utilisateur

Après quelques mois d'existence officielle, il a été décidé de réaliser un focus group afin de valider le concept du produit, vérifier les aspirations des participants et voir comment était perçu le produit et son discours.
Le concept du produit (personnalisable, 3 "bienfaits" en 1 seule prise, simple d'utilisation, préparé en laboratoire pharmaceutique, préparé en France) a été validé et largement apprécié par les 12 participantes.
Néanmoins, dans l'éxécution (charte graphique, discours, site), elles ne présentaient pas le même enthousiasme. Forts de leurs différents retours, nous avons alors entrepris de faire évoluer notre positionnement de "santé" à "bien-être". Ce qui devait être quelques modifications d'ajustements s'est finalement transformé en refonte graphique complète.

Refonte

Afin d'apporter un œil neuf sur le produit, nous avons choisi de nous entourer d'un Concepteur-Rédacteur suffisamment à l'aise graphiquement pour proposer également une direction artistique aboutie.

Au fur et à mesure du travail, la base de la conception fonctionnelle a peu bougé, mais les formulations, les termes choisis et les habillages ont eux beaucoup évolué.
Pour obtenir cette dimension "bien-être" sans perdre notre positionnement premium, nous avons modernisé nos codes visuels (du flat, principalement), arrondi beaucoup d'éléments, sélectionné des typographies plus douces, fait la part belle aux visuels, préféré des photos montrant le produit en situation (afin de le rendre accessible et de le projeter dans le quotidien) et privilégié des formulations claires et simples quitte à ralonger la taille des textes.

Avec l'expérience des derniers mois écoulés, nous avons également décidé d'une évolution importante : changer d'angle. Alors que nous renvoyions principalement l'utilisateur vers des modules pour qu'il personnalise lui-même son Triox, nous avons alors proposé et mis en avant des "Packs" déjà "assemblés".

Ecran Triox Home
Ecran Triox Fiche produit
Ecran Triox Pack

Optimisation

Suite à cette refonte, nous avons accéléré les investissements marketing. Pour mieux monitorer les résultats, j'ai alors installé des trackers Google Analytics spécifiques permettant de mieux visualiser le parcours d'un visiteur et d'identifier jusqu'à quel hauteur de page il scrollait (via des Events), afin de connaître les moments et arguments où il "décroche".
Nous avons alors testé plusieurs dizaines de landing pages pour finalement préférer notre fiche produit initiale qui performait mieux. Des photos et intitulés ont également évolué au gré de nos tests.
Aujourd'hui, le site est en constante évolution et est accessible à l'adresse mytriox.com.

Ecran Triox Home
Ecran Triox Fiche produit
Ecran Triox Pack

Autres champs d'intervention

J'ai fait partie de la structure Triox pendant 3 ans, de sa création à son rachat.
Des premiers prototypes produits jusqu'au développement commercial, en tant que Responsable e-commerce, j'ai été le pilier digital de la structure et ai pu appréhender différents domaines d'action dans leur ensemble :

  • Stratégie de développement / marketing de l'offre
  • Conception du site
  • Déclinaison graphique / Rédaction (Landing pages, bannières, newsletters, sites évènementiels)
  • Intégration HTML / CSS / jQuery
  • Développement PHP / MySQL (frameworks Wordpress et Prestashop)
  • Google Analytics (reportings & optimisation)
  • Traffic Management (SEO, SEA, Campagnes bannières, RTB, Emailings, Etude de la qualité du traffic généré)
  • Community Management (Facebook, Twitter, Instagram, Relations blogueurs, Organisation d'évènements)
  • Gestion quotidienne de la boutique (offres commerciales, SAV, gestion des partenaires)
  • Facilités et difficultés d'une start-up
Fermer

Adhemar.net

Problème

Mon parcours professionnel est celui d'un chef de projet. A travers ce portfolio, je souhaite aujourd'hui démontrer à d'éventuels recruteurs que même si mon expérience professionnelle en tant qu'UX Designer fait encore défaut, j'en ai toutes les compétences.

Persona

Afin de ne pas perdre mon objectif de vue, j'ai créé un proto-persona de recruteur. Sur la base des échanges que j'ai pu avoir (emails, téléphone, entretiens), j'ai essayé d'en traduire leurs attentes, besoins et contraintes pour me guider dans la conception de mon portfolio.

Persona Responsable recrutement digital

Prototype papier

Avant de faire un benchmark et de me laisser influencer par ce que d'autres avaient fait, j'ai voulu produire rapidement des prototypes papiers, principalement pour 2 raisons :

  • voir à quoi aurait ressemblé mon premier jet
  • d'ores et déjà me confronter à d'éventuels problèmes et observer comment ils ont été contournés dans mon benchmark à venir

Voici ce premier jet :

Prototype papier Adhemar.net

Benchmark

Avant d'aller plus loin, j'ai donc voulu jeter un œil aux best-practices de portfolio d'UX Designer.
Le rôle de l'UX n'est pas de livrer des écrans graphiques mais plutôt un travail de recherche sur l'utilisateur, son parcours, ses différents points de contact, de prototypage d'interface, ... des éléments qui méritent souvent plus de texte que d'images pour expliquer le chemin de réflexion. Répondant à cette démarche, 3 portfolios ont particulièrement attiré mon attention :

Architecture du contenu

Suite à ce benchmark, j'ai modifié l'organisation initiale de mes prototypes papier pour en obtenir la séquence suivante :

  • Ecran d'accueil : Un écran simple et clair avec un call-to-action sans équivoque pour engager la visite (à la façon de Edmund Yu). Je souhaitais également introduire une photo pour humaniser l'environnement et que le visiteur puisse me représenter immédiatement. Dans cet écran d'accueil, pensé comme une landing page, je cherchais aussi à me différencier, créer immédiatement un lien émotionnel avec le visiteur et en dire le plus possible sur ma personnalité, éléments essentiels de toute bonne UX. C'est ainsi que l'idée de faire un gif animé façon "trombinoscope en stop-motion" a émergé.
  • Compétences : Dans mes entretiens, ma maîtrise de telle méthodologie ou de tel logiciel est une question qui est souvent revenue. Il s'agissait donc d'un besoin qu'il fallait adresser en priorité. De plus, étant junior et doté d'un portfolio encore fluet, prioriser la section Compétences m'est apparu essentiel. Pour cette partie, j'ai voulu m'inspirer de Peter Schuszter.
  • Portfolio : Ici, je souhaitais trouver le juste milieu entre les présentations très succinctes de Peter Schuszter et celles trop volubiles de Simon Pan, d'autant que, soyons honnête, mes projets n'ont pas la même ampleur. Je souhaitais expliquer mes projets, les différentes étapes, réflexions et livrables qu'ils avaient générés.
  • Expériences : Encore junior en tant qu'UX Designer mais avec déjà quelques années d'expérience professionnelle à mon actif, la section Expérience a pour but d'exposer mon parcours, mes différents domaines d'action et d'éviter l'étiquette "tout juste sorti des bancs de l'école".
  • Contact : Cette section devait présenter les principaux réseaux sociaux où l'on peut me retrouver. Pour rester dans le code des landing pages, je voulais inclure un call-to-action afin de ne laisser aucun doute sur la façon de me contacter.

Mon intention était de présenter ce contenu de la façon le plus simple et concise possible.
Pour limiter les temps de chargement et faciliter la navigation, j'ai donc décidé de partir sur un format de one-page website. A ce titre, je trouvais la navigation de Edmund Yu particulièrement efficace mais peu adaptée au long format texte de ma partie Portfolio. J'ai alors choisi d'afficher mes projets de Portfolio comme des overlays en plein écran. Cela me permettait de profiter tout l'espace de l'écran pour présenter mes projets tout en concentrant l'attention du lecteur sur ce seul élément.
Pour assurer la bonne compréhension du visiteur de sa localisation dans le site, la façon de faire apparaître cet overlay était cruciale. A l'instar de l'écran d'accueil d'iPhone, j'imaginais à cette étape qu'un clic provoque l'élargissement de l'aperçu du projet jusqu'à sa taille plein écran.

Afin de "créer un univers" tout en présentant ma personnalité, j'ai aussi voulu trouver un ton, entre efficacité, simplicité et humour. Cette dimension se retrouverait dans la rédaction, certains call-to-action, quelques liens et images.

Enfin, dans une démarche UX, je souhaitais recueillir des informations sur l'efficacité de ce portfolio, s'il répondait à toutes les attentes et présentait suffisamment mon profil afin d'opérer les ajustements nécessaires si besoin. L'intégration d'un questionnaire via le service Typeform m'apparaissait alors intéressante.

Prototype interactif

Au vu de l'étendue limitée de ce projet, le prototype interactif serait directement la version finale. Après quelques recherches, j'ai découvert le thème Freelancer, basé sur Bootstrap, qui me servirait de bonne base de départ.
J'ai ensuite intégré les éléments issus des étapes précédentes. J'ai pris soin d'assurer la cohérence des éléments statiques (couleurs blanches et noires) et interactifs (boutons noirs arrondis, couleur orange) ainsi que de l'affordance des boutons par rapport à leur action.
Des ressources (merci Codrops !) m'ont d'ailleurs permis de réaliser l'effet d'élargissement de l'aperçu du projet jusqu'à sa taille plein écran que j'avais en tête.
Quelques autres difficultés techniques se sont dressées au fil de la réalisation, mais rien d'insurmontable avec un peu de temps et de persévérance.

Tests d'utilisabilité

En cours...
(ce n'est certes pas le projet le plus riche pour le faire, mais autant s'entraîner le plus possible, non ?)

Optimisation continue

Comme tout projet avec une démarche UX, ce portfolio est voué à être optimisé de façon continue pour répondre le plus efficacement aux besoins des visiteurs ciblés : les recruteurs.
J'ai donc mis en place un questionnaire Typeform dont je répertorie et analyse les réponses.
Pour ce projet, j'ai également voulu tester le service Heap afin de surveiller tous les clics et défilement de page et ainsi déterminer quels éléments concentrent le plus d'attention et si des modifications méritent d'être apportées.

Ce portfolio a été lancé tout récemment et le volume d'informations récoltées n'est pas encore significatif pour en tirer des conclusions pertinentes.

Fermer

Padlezard

Padlezard est un mini-jeu mobile, fruit d'un "hackathon" lors d'une semaine au ski pour contrer l'invasion aliénante et individualisante de 2048.

Post-tartiflette, nous étions alors 12 à table, chacun rivé sur son écran de téléphone à swiper les 2 et les 4 de 2048. Avec l'ami Joan, nous avons donc entrepris de dédier 2 soirées (= nuits) à concevoir et produire un mini-jeu mobile qui nous permettrait de jouer tous ensemble, dans un esprit potache et stimulatoire.

Padlezard se joue à 2 équipes avec au moins 2 joueurs dans chaque équipe. Chaque partie se déroule en 20 rounds. A chaque round, un capitaine est nommé aléatoirement dans chaque équipe. Il doit faire deviner au reste de son équipe la combinaison témoin qui lui est indiquée : mot, couleur de typo, couleur de fond.
A chaque mauvaise réponse, un malus de temps est appliqué à l'équipe. La première équipe à finir les 20 rounds obtient un bonus de temps.
L'équipe qui totalise le temps le plus faible remporte la partie !

http://adhemar.net/padlezard_dev/
Fermer

Six Feet Away

Six Feet Away est un prototype d'application mobile propulsée par NFC qui repère à proximité les personnes partageant des centres d’intérêt communs.

Fermer

World of Deuh

World of Deuh est un Alternate Reality Game dont l’univers se développe sur des supports numériques mais dont le « plateau de jeu » est le réel.
Le jeu fonctionne sur une base "Capture du drapeau". Les joueurs ont pour but de conquérir des territoires virtuels dont la matérialité s’exprime par des QR codes disséminés dans la ville.

Expériences


2011 - 2014

3 ans

Responsable e-commerce @ Triox (start-up santé/bien-être)

  • Conception du site marchand mytriox.com
  • Déclinaison graphique / Rédaction (Landing pages, bannières, newsletters, sites évènementiels)
  • Intégration HTML / CSS / jQuery
  • Développement PHP / MySQL (frameworks Wordpress et Prestashop)
  • Google Analytics (reportings & optimisation)
  • Traffic Management (SEO, SEA, Campagnes bannières, RTB, Emailings)
  • Community Management (Facebook, Twitter, Instagram, Relations blogueurs)

2009 - 2010

9 mois

Chef de projet digital @ Lowe Stratéus

  • Gestion de projet (commerciale, équipes créatives et techniques)
  • Créations de sites web corporate ou évènementiels
  • Dispositifs sur les médias sociaux (chaîne YouTube, application Facebook, Animation)
  • Gestion de campagnes bannières
  • Clients : Sojasun, Sécurité routière, Crédit coopératif, Maif, Nett, Kia, Notaires de France

 

2009

2008

2008

2007

2006

Expériences précédentes

  • Auto-entrepreneur
  • Blogrider
  • Ameline Communication
  • Adgency
  • Newdealcasting.com

 

2013

2012

2010

2006

Formation

  • Auto-formation à l'UX Design (livres, lectures web, MOOC, vidéos)
  • Master Création et Edition Numérique (mention Bien)
  • Licence en Information et Communication (mention Bien)
  • Bac ES (mention Bien)

Extras

Running, Expos, Raclette, Batteur (And this is Max!), Guitariste/Bassiste (Soleil Vert), Développeur du dimanche, Raccourcis clavier

Contact


Charles Guillocher fait des grimaces

Charles Guillocher

Paris, France (mais prêt à voir ailleurs)

Fermer

Vous êtes là depuis plus de 1mn (!).
Avez-vous trouvé ce que vous cherchiez ?

   

répondre à quelques questions (2mn) pour améliorer ce site ?

    Non