Bonjour, je m'appelle

Benjamin Louradour
photo Benjamin

et je suis

UX & UI Designer

et

Développeur web

UX

A propos de moi : User Experience

User hunt Découverte : Analyse, Personas, Interviews, Enquêtes
Idéation : Design Thinking, Parcours utilisateur, Storyboarding
Coloriage Prototypage : Basse / moyenne / haute fidélité, Wireframes
Test : Tests utilisateurs, Scénarios, Utilisabilité, UX

Mes outils :

Balsamiq, Pencil
Axure, Inkscape, Gimp
Photoshop, Illustrator
UI

A propos de moi : User Interface

Design d'interfaces
Prototypage haute fidélité graphique
Mise en place et application de guidelines graphiques
Création d'icônes et animations
DEV

A propos de moi : Développement

/****************************
3 ans d'expérience UX/UI et développement web
*****************************/
<article>
    HTML5 pour la structure
</article>
function() {
    Javascript
    pour le fonctionnement && les interactions;
    return ":)";
}
#CSS {
    CSS3
    pour-le: style;
    et-les: animations;
}
FUN

A propos de moi : Loisirs

Jeux vidéo
+ Game design
+ Serious games
Jeux de société
Voyages
Guadeloupe, Croatie, Pologne, Etats Unis, ..
Liste à compléter :)
Musique
Ecoute massive de tous genres
Sérievore
Biérophile

Travaux

Travaux : Ruwido


Type de mission : Cette mission était un stage de recherche en User Experience, et a duré 5 mois. Ruwido est une entreprise autrichienne - mais la partie recherche est basée à Toulouse -, spécialisée dans les télécommandes et systèmes de télévision interactive.
Note : Le travail effectué au cours de cette mission est encore sous accord de confidentialité, et je ne pourrai rentrer dans trop de détails.
Contexte : En analysant les spectateurs de la télévision, il s’avère que nombre d’entre eux utilisent plus ou moins fréquemment un second écran en complément de la télévision. Que ce soit un téléphone ou une tablette, ces appareils permettent de nouvelles interactions sociales. L’objectif de cette mission est d’analyser l’aspect social de l’utilisation de ce second écran, puis de développer et tester un prototype d’application visant à améliorer l’expérience utilisateur.
Équipe et mon rôle : La mission était encadrée par la directrice de recherche en User Experience de Ruwido, Regina Bernhaupt, mais il s’agit d’un projet en autonomie. Un autre étudiant travaillait sur un autre sujet à mes côtés, et nous pouvions ainsi confronter nos idées. Ruwido étant une entreprise internationale, toute communication et tout document ont été faits en anglais.
Démarche :
  • Etat de l'art scientifique : Dans un premier temps, il était important de comprendre les utilisateurs. La première tâche consistait donc à chercher et lire des articles, des études démographiques et d'étudier les usages des spectateurs de télévision en général, des utilisateurs d'un second écran, et des interactions sociales étudiées dans ce domaine. Ces recherches ont permis de rédiger un état de l'art scientifique, puis de définir la portée de la mission.
  • Conception et implémentation d’un prototype tablette : J'ai ensuite pu émettre des hypothèses et définir le but et la structure du prototype. Le prototype devait simplement aider à répondre à la question : "Est ce que mon idée améliore l'expérience utilisateur avec les interactions sociales qu'elle amène ?", et j'ai donc créé un prototype jetable. Ainsi, le design et développement du prototype étaient basés sur les futurs tests utilisateurs.
  • Tests utilisateurs : Ruwido possède son propre laboratoire d'utilisabilité. Je l'ai utilisé pour tester mon prototype auprès de 10 utilisateurs, après avoir préparé les protocoles de test, tâches, questionnaires, etc. Les retours ont été notés par un collègue pendant que je menais les entretiens, mais également enregistrés grâce à des micros et des caméras. Ces informations, ainsi que les résultats des questionnaires ont permis d'analyser l'expérience utilisateur ressentie par les participants.
Résultats : Cette mission a été un succès pour Ruwido et pour moi-même. L'analyse des résultats des tests utilisateurs a montré que mon idée, basée sur du contenu partagé par plusieurs utilisateurs sur un même programme télévisé, était appréciée et améliorait l'expérience sociale des utilisateurs. Enfin, cette mission a montré que de nouvelles études pourraient être lancées basés sur ces résultats.
Mon seul regret est que les utilisateurs que j'ai pu rencontrer ne correspondaient pas forcément au groupe cible étudié, et il serait intéressant de poursuivre des recherches en étant davantage méticuleux sur ce point.
Galerie :
[1]
[2]
[3]
[4]
Liste des travaux
Studec

Travaux : STUDEC


Type de missions : J’ai travaillé 3 ans à Studec comme Ingénieur Etudes. J’ai été recruté pour ma vision utilisateur final et mon sens du détail au niveau des interfaces. Au cours de ces 3 ans, j’ai pu travailler sur différents projets, dont l’objectif variait selon le projet :
  • Maintenance et évolution d’un logiciel existant
  • Création d’un nouveau produit
  • Refonte graphique et technique d’un produit existant
Contexte : Studec est spécialisée dans la donnée technique pour la maintenance d’avions et hélicoptères. La partie logicielle de Studec produit des solutions informatiques et interactives de consultation de la documentation sur ordinateur ou tablette. J’ai travaillé sur deux types de logiciels : ceux utilisés par les rédacteurs de documentation technique, et principalement ceux utilisés par des opérateurs de maintenance aéronautique.
Équipe et mon rôle : J’ai travaillé au sein de différentes équipes, allant de 5 à 12 personnes. Dans chaque équipe, j’étais responsable ou co-responsable de l’interface de nos produits. J’avais principalement un rôle de développeur web front end, mais j’intervenais régulièrement pour définir de nouvelles interfaces, travailler sur les parcours utilisateurs et globalement pour améliorer l’expérience utilisateur.
Démarche : Le besoin était généralement identifié par Studec et le client, et mon intervention avait lieu après cette phase. Voici mon travail pour un projet type :
  • Conception fonctionnelle : Studec fournit à ses clients des documents de spécification fonctionnelle des logiciels, décrivant chaque fonctionnalité et comment les besoins sont couverts. Je participais régulièrement à l'écriture de ces documents, ainsi qu'à la rédaction de "user stories", petits scénarios fonctionnels.
  • Design graphique : Les produits que nous faisions devaient être agréables à utiliser, et esthétiques. Généralement, nous options pour un thème graphique que nous adaptions à l'identité graphique de nos clients. Par exemple, nous avons utilisé Material Design pour habiller plusieurs logiciels, mais les couleurs que nous utilisions étaient différentes selon les clients.
    Etant donné que le contexte métier est précis, j'ai parfois créé des icones (en respectant les guidelines Material Design), pour correspondre au langage des utilisateurs.
  • Prototypage et évaluation : Afin de valider nos choix de design, je réalisais des maquettes des différents écrans concernés. Je faisais d'abord des maquettes papier, que je montrais aux autres membres de l'équipe pour que l'on en discute et que je puisse les modifier. Puis je reprenais ces maquettes sur un logiciel de wireframes (Pencil, Balsamiq, Axure) pour l'intégrer aux documents de spécifications ou pour communiquer avec le client. Parfois je réalisais des maquettes de plus haute fidélité graphique (avec Photoshop par exemple) pour montrer comment pourrait être le résultat final.
  • Développement des interfaces et interactions : Nos logiciels ont une partie serveur et une partie client. Je m'occupais du développement de la partie client, en communiquant avec les responsables de la partie serveur. Mon développement portait donc sur les langages Javascript (et frameworks associés : jQuery, AngularJS, Polymer), HTML5, CSS3.
Résultats : Je suis devenu la personne à voir pour tout problème de représentation de données ou de concepts, et j'apportais au quotidien à Studec ma culture de l'UX et UI Design. Mes prototypes ont servi de support de discussion, apprécié par le client et m'ont permis de partager une vision commune de nos produits en cours de développement.
Cepandant il n'était pas facile de faire valoir les bienfaits d'une approche centrée utilisateur auprès de Studec, et je n'ai pas pu rencontrer les utilisateurs ou les clients.
Galerie :
[1]
[2]
[3]
[4]
Ruwido
Liste des travaux
HPC SA

Travaux : HPC SA


Type de mission : Cette mission était un stage en tant que User Experience designer, et a duré 5 mois. HPC SA (aujourd’hui rachetée par Graitec), est l’éditeur du logiciel ArchiWIZARD. L’objectif de cette mission était de conseiller HPC SA, et s’est concentré sur la partie analyse de l’activité des utilisateurs et la conception d’une nouvelle version du logiciel.
Contexte : ArchiWIZARD est un logiciel permettant de visualiser / créer / modifier des modèles 3D des bâtiments. Le logiciel calcule alors les pertes de chaleur, la conformité aux réglementations thermiques en vigueur, et de nombreux autres informations nécessaires pour valider un projet architectural.
Les utilisateurs ont des profils bien différents : architectes, bureaux d’études, constructeurs de maisons individuelles, économistes, enseignants en école d’architecture. Cependant, HPC SA ne connaissait pas assez les usages, parfois très différents les uns par rapport aux autres, liés à chacun de ces métiers, ainsi que leurs besoins respectifs. Le logiciel existait déjà avant mon intervention, et la version suivante n’avait pas été amorcée.
Équipe et mon rôle : J’étais intégré à l’équipe de développement, composée d’une dizaine de personnes. Mon rôle était cependant en autonomie, car j’apportais une connaissance qu’aucun membre de l’équipe n’avait. Cette mission était néanmoins supervisée par le chef de projet ArchiWIZARD, Clément Viguier.
Démarche :
  • Analyse de l'utilisateur : Dans un premier temps, je me suis intéressé à connaître les utilisateurs. Qui sont ils ? Pourquoi ont ils besoin d'un logiciel comme ArchiWIZARD ? Comment se déroule un projet architectural, et qui sont les parties prenantes ?
    Mes recherches démographiques et métier, ainsi que les différentes interviews que j'ai menées m'ont permis d'établir des profils types d'utilisateurs, sous forme de personas.
  • Analyse de l'utilisabilité de la version existante : De nombreux professionnels utilisaient déjà ArchiWIZARD. J'ai pu aller à la rencontre de certains d'entre eux, ainsi que des étudiants en école d'architecture. J'ai alors procédé par observation, pour détecter les points sur lesquels les utilisateurs se perdent ou se sentent confus, et les points qu'ils apprécient.
    J'ai également mené une évaluation heuristique pour identifier les axes à améliorer, basée sur des principes ergonomiques.
  • Analyse des besoins : A partir des profils types d'utilisateurs, j'ai pu rédiger des scénarios de travail liés à leur activité, que j'ai illustrés avec des modèles de données du domaine architectural. Les points forts et faibles de chaque scénario m'ont servi de base pour établir une liste des besoins.
  • Conception d'une nouvelle version : Au vu de la variété d'utilisations possibles du logiciel, j'ai choisi d'explorer de nombreux choix de design. J'ai rédigé des scénarios d'utilisation pour chaque écran, que j'ai déroulés auprès de membres de l'équipe du projet sous forme de Design Walkthrough, en expliquant chaque choix de design.
    Le prototype papier que j'ai créé était dynamique, composés de plusieurs couches de papier, pour s'adapter aux différentes options. J'ai pu itérer 3 fois sur ce prototype, grâce aux retours des membres du projet et grâce à une phase de Design Rationale, où j'ai pu justifier certains choix selon des critères bien définis.
Résultats : Je suis ravi d'avoir pu pleinement mettre en oeuvre mes compétences d'UX designer dans un contexte où ce rôle était nécessaire et où personne dans l'équipe n'avait cette compétence. J'ai eu un véritable rôle de conseiller, et j'ai pu organiser cette mission en totale autonomie. Les utilisateurs types ont pu être identifiés et détaillés, pour que chaque membre de l'équipe sache pour qui est destiné le logiciel. La conception d'une nouvelle version a permis d'amorcer de nombreux axes d'amélioration, et de justifier ces choix par des critères et des évaluations. La phase d'analyse m'a permis d'aller au contact des utilisateurs finaux et d'analyser leurs besoins réels. Cependant, je regrette de ne pas avoir pu confronter le prototype à des vrais utilisateurs, et de ne pas avoir créé un second prototype, de plus haute fidélité graphique.
Galerie :
[1]
[2]
[3]
[4]
[5]
[6]
Studec
Liste des travaux
Ce site

Travaux : Ce site


Type de projet / Contexte : Ce site est mon premier portfolio. C'était un challenge pour moi pour plusieurs raisons. Tout d'abord, le travail d'un UX/UI designer n'est pas toujours facile à montrer, il s'agit bien souvent davantage d'une façon d'aborder les problèmes que de la solution en elle-même. Ensuite, il était important pour moi de choisir quels projets présenter et en quoi ils ont été importants dans ma vie personnelle et professionnelle.
Enfin, je voulais que ce site démontre ma passion pour l'UX et l'UI, bien devant mon côté développeur qui est pour moi simplement un outil de plus à ma ceinture. Cependant, je tenais à faire le site moi-même de A à Z, sans passer par des templates comme Wordpress qui sont moins personnels à mon goût.
Démarche : Pour réaliser ce portfolio, j'ai choisi d'adopter une méthode mobile first, c'est à dire de concevoir le site pour une utilisation mobile, puis d'adapter cette version à une utilisation web par la suite. Je connais bien la méthode mais c'est la première fois que je l'applique dans un projet concret.
  • Maquettes papier : N'ayant jamais eu de portfolio auparavant, il fallait que je réfléchisse à ce que je voulais montrer. J'aime les sites en "single page", et j'ai voulu adopter ce modèle là. A partir de là, j'ai choisi de découper ce site en 3 parties, et les maquettes papier m'ont permis de structurer les informations.
  • Prototype mobile Balsamiq : Une fois la structure un peu plus claire, j'ai repris mes maquettes sous un format de meilleure fidélité graphique, avec Balsamiq. J'ai conçu uniquement la partie mobile dans un premier temps, ce qui m'a permis d'avoir une meilleure vision sur les proportions de mes écrans.
  • Développement mobile : Pour le développement mobile, il était tout de même important de poser les bases d'une future version web, pour faire un site responsive plutôt qu'un site mobile et un site web. Pour certains éléments, j'ai utilisé le sytème de grilles de Bootstrap, permettant un affichage différent selon la taille de l'écran. J'ai également essayé de structurer mes styles CSS, en déterminant ce qui est exclusif au mobile et ce qui est commun aux deux versions.
  • Ajout de contenu : J'ai ensuite sélectionné les projets que je voulais montrer, qu'ils soient professionnels ou personnel. Mon objectif était de montrer le problème que j'avais à résoudre, les moyens que j'ai mis en place et en quoi ça a fonctionné ou aurait pu être amélioré.
  • Version web : Une fois que le site mobile me convenait, j'ai pu attaquer la version web. Pour cela, j'ai retravaillé les maquettes papier et Balsamiq, étant donné que le design de mon portfolio s'était affiné. J'ai utilisé les media queries de CSS, permettant un style différent selon la taille de l'écran, pour travailler sur un style qui ne casse pas la version mobile.
Résultats : Ce portfolio était une expérience agréable, et je suis assez satisfait du résultat. Au vu de la simplicité de ce genre de site, je n'ai pas utilisé les méthodes de conception centré utilisateur, mais je compte sur vous pour me faire des retours :).
Travailler en mobile first était enrichissant, mais avec plus de temps j'aurais aimé faire une version tablette également, ou quelque chose de complètement adaptatif.
Galerie :
[1]
[2]
[3]
[4]
[5]
[6]
HPC SA
Liste des travaux
EADS IW

Travaux : EADS IW


Type de mission : Cette mission était un projet fil rouge de ma dernière année d'étude au sein du master Interaction Homme-Machine. Ce type de projets permet aux étudiants de mettre en pratique les techniques et méthodes vues pendant le master, auprès d'une entreprise ou d'un laboratoire de recherche. Ce projet a eu lieu sur un semestre, avec la section recherche et développement de EADS Innovation Works.
Contexte : EADS IW a développé NOMAD, une plateforme d'accès à la documentation technique de maintenance d'un avion. L'objectif de ce projet était d'étudier l'activité réelle des opérateurs de maintenance aéronautique, et de proposer une nouvelle version de la plateforme adaptée à un usage en mobilité (tablette, lunettes interactives).
Équipe et mon rôle : Nous étions 5 étudiants à travailler sur ce projet, proposé et encadré par Pascale Hugues - chef d'équipe de recherche chez EADS IW -, et supervisé par l'équipe pédagogique du master. Nous n'avions pas véritablement de rôle défini, car nous devions tous répondre au projet proposé et mettre en oeuvre nos compétences acquises.
Démarche : Pour ce projet, nous avons adopté une démarche centrée utilisateur. Tout au long du projet, nous avons pu être en contact avec deux types d'utilisateurs : des opérateurs de maintenance (experts) et des étudiants de BTS aéronautique (novices).
  • Analyse de l'activité : Le métier d'opérateur de maintenance nous était inconnu. Nous avons pu mener des interviews contextuelles auprès d'opérateurs de maintenance du Beluga (Airbus), afin de comprendre leur quotidien et les tâches qu'ils ont à accomplir. Nous avons également mené des observations auprès d'étudiants, qu'ils soient en atelier ou devant un ordinateur pour chercher leur documentation.
  • Conception participative : Pour répondre au projet, nous avons réalisé un brainstorming pour générer de nombreuses idées. Nous avons alors réalisé un prototype papier des idées retenues et rédigé des scénarios de conception. Nous avons présenté ce prototype à des opérateurs de maintenance et pu itérer grâce à leurs retours d'experts.
  • Développement de prototypes : Nous avons choisi de développer un prototype tablette en Android, car il s'agit d'une technologie classique pour ce genre d'application. Le développement s'est porté principalement sur l'affichage (navigation, document, images), afin de pouvoir le tester rapidement auprès d'utilisateurs.
  • Tests utilisateurs : Nous avons mis en place un protocole pour les tests utilisateurs, afin d'étudier notamment l'utilisabilité de notre prototype. Les tests ont été effectués une première fois avec des étudiants, nous permettant de retravailler le prototype, puis une seconde fois auprès d'opérateurs de maintenance.
Résultats : Ce projet était à but pédagogique, mais dans un contexte concret et avec de vrais professionnels et utilisateurs. Nous avons pu nous former sur les techniques clés d'un UX/UI designer. Le prototype que nous avons réalisé et les retours associés nous ont permis de rédiger un document de recommendations pour ce type d'applications, et l'ensemble de ces résultats ont pu servir à lancer de nouveaux projets au sein de EADS IW.
Galerie :
[1]
[2]
[3]
[4]
[5]
[6]
Ce site
Liste des travaux
Red square

Travaux : Red square


Type de projet : Ce projet est un jeu web que j'ai développé sur une période d'un an pendant mon temps libre. Il s'agit d'un projet personnel pour me former à la création de jeux.
Contexte : Le jeu n'a pas eu de réelle conception, je suis parti de l'élément canvas HTML5 et j'ai progressivement construit le jeu en m'amusant à rajouter du contenu. L'objectif du jeu est de déplacer un carré rouge sur la droite ou la gauche pour éviter les ennemis qui se ruent sur lui, c'est pourquoi j'ai nommé le jeu Saving private RedSquare ("Il faut sauver le soldat CarréRouge").
Démarche :
  • Canvas et absence de framework : La seule chose dont j'étais sûr en commençant ce projet est que je voulais utiliser le canvas et ne pas passer par un framework de création de jeu. L'idée était d'apprendre, j'ai donc dessiné un carré rouge, me suis dit "Et si je faisais glisser un objet ?", "Pourquoi pas un ennemi ?", etc.
    J'ai également décidé de ne pas utiliser d'image, et ainsi de tout dessiner sur le canvas (ennemis, bonus, décors, boss, menus).
  • Evolution au cours d'une partie : Je voulais que l'expérience de jeu évolue pendant une partie, et que chaque nouvelle partie recommence de zéro. Pour cela, j'ai introduit des niveaux. Chaque nouveau niveau est atteint après un certain temps, et chaque niveau augmente la vitesse, la difficulté, etc. Cependant, j'ai vraiment voulu expérimenter, et j'ai fait la chose suivante : le canvas contenant le jeu devient un peu moins grand et un peu plus large. De plus, à partir du niveau 10, le canvas bouge légèrement de manière horizontale, puis de manière verticale à partir du niveau 20, et enfin il se met à tourner à partir du niveau 30.
  • Les ennemis et les boss : Pour ajouter un peu de variété, les ennemis sont de trois types et chaque type a une vitesse différente, mais ils arrivent en même temps sur une ligne. Cependant le jeu était trop monotone, et j'ai decidé d'ajouter des niveaux spéciaux : les niveaux boss. Ils sont au niveau de 4, un tout les 10 niveaux, et changent beaucoup la façon dont le jeu fonctionne.
Résultats : Ce jeu est sans prétention, mais je me suis vraiment amusé à le créer. Je ne pense pas le faire évoluer, mais cette version est complète et il était intéressant de mener ce projet de bout en bout.
Un détail qui m'amuse beaucoup est que les gens qui y jouent pour la première fois ne se rendent pas compte que le canvas bouge. Cependant, les retours que j'ai du jeu sont qu'il est bien trop difficile, et très répétitif, mais tout de même agréable.
Galerie :
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
EADS IW
Liste des travaux