© Thibaut Lalanne 2018

Je suis un Product / UX Designer situé en France qui crée des expériences digitales pour le Web.

Je suis actuellement à la recherche d'un stage,
entre avril et août 2018.

Télécharger mon CV

Projet 1

01

Spectrun

Spectrun aide les coureurs à trouver la motivation pour s'entraîner. Des spectres, à la silhouette et aux performances d'autres coureurs, contribuent à améliorer l'expérience de course à pied grâce à la réalité augmentée.

Projet 2

02

Faro

Faro est une affiche connectée qui partage les conditions climatiques d'un spot de surf. En plus d'une vue d'ensemble rapide et agréable, les données sont mises à jour en temps réel grâce à une API Météo et la technologie Arduino.

Projet 3

03

WheeLens

WheeLens est un objet intelligent tout-en-un destiné aux adeptes de modes de déplacement doux. Des informations sont retransmises sur sa visière afin de diriger l'utilisateur de manière ludique et sécurisée.

Projet 4

04

Google Workshop

Des designers de Google sont venus animer l'atelier. Nous avons pris leur place 3 jours, en adoptant leurs outils et leur méthodologie, afin de réaliser un nouveau concept à partir de produits Google existants.

Projet 5

05

SEB On Hair

On Hair est un accessoire connecté à toute une gamme de produits de coiffure SEB. Fixé à la main, les gestes de ses utilisatrices sont captés pour leurs proposer des coiffures inspirantes et adaptées.

Détails du contact

thibaut.lalanne.design@gmail.com

06 69 77 86 54

L'École de Design Nantes Atlantique,
Rue Christian Pauc,
44306 Nantes, France.

Durée4 jours de sprint Design — Juillet 2017
TeamGroupe de 4 étudiants
CompétencesUX, RA, Animation

Particles Background

Durée5 jours — Juin 2016
ÉquipeGroupe de 3 étudiants
CompétencesUI, Prototypage

Wave Background

Durée3 jours — décembre 2017
ÉquipeGroupe de 4 étudiants
CompétencesUX, UI, IxD, Visual design

YouTube Learn Home Screen

Contexte

Nous avons choisi de créer Spectrun pour améliorer l'expérience de la course à pied, car nous pensons qu'il est utile d'aider les coureurs à trouver davantage de motivation quand vient le temps de pratiquer. Grâce à la réalité augmentée, Spectrun peut apporter une nouvelle forme d'entraînement qui augmente à la fois le plaisir et la performance.
Cette année, nous avons décidé de participer aux Adobe Design Achivement Awards. Pour cette compétition de grande envergure, nous avons dû travailler 4 jours sur la conceptualisation de Spectrun, en parallèle à nos cours.

Conceptualisation

Parce que nous devions nous dépêcher, nous avons directement commencé à réfléchir sur des mots-clés tels que courir en association avec la Réalité Augmentée.
Quel genre de caractéristiques voulons-nous ajouter à notre produit ? Quel pourrait être l'avenir de la course à pied ? Qu'est-ce qui est le plus important pour les coureurs

Spectrun Project

Équipe

Nous étions 4 étudiants en première année de Master, provenant de différentes spécialisations telles que le Design RV, le Design Industriel et le Design Tangible UX.

Thomas Herbreteau

Thomas
Herbreteau

Antoine Dehillerin

Antoine
Dehillerin

Gaël Hillion

Gaël
Hillion

Thibaut Lalanne

Thibaut
Lalanne

Comment pouvons-nous améliorer l'expérience de la course à pied grâce à la Réalité Augmentée ?

Étapes

Jour 1 – Nous avons commencé par un brainstorming et une session de conceptualisation pour définir les idées principales de notre projet.
Jour 2 – Nous avons conçu les interfaces avec les logiciels Adobe Photoshop (PS) et Adobe Illustrator (AI).
Jour 3 – Nous avons filmé le concept avec une caméra GoPro HERO5 et un appareil Nikon D7100.
Jour 4 – Tout cela nous a permis de monter une vidéo incluant de l'animation (Motion Design).

Spectrun Project

Concept

Selon nous, il était important de voir au-delà des interfaces actuelles (smartphone, tablette, ordinateur…). C'est pourquoi nous avons choisi d'avoir une vision prospective. Nous pensons que les lunettes dotées de Réalité Augmentée sont le meilleur moyen d'avoir un impact sur la course à pied.
L'objectif de notre concept est d'aider les coureurs à dépasser leurs limites en courant contre leur propre fantôme (spectre) ou celui de leurs amis et de coureurs célèbres. Cela pourrait certainement rendre la course à pied plus amusante et divertissante.

Missions

Antoine a travaillé sur la modélisation 3D des lunettes avec Cinema 4D. La conception devait être aussi simple que possible. La chose la plus importante du projet doit rester le concept.
Thomas, Gaël et moi avons travaillé sur les interfaces, la vidéo et les animations à l'aide des logiciels Adobe Photoshop (PS), Adobe Illustrator (AI) et Adobe After Effects (AE).

Spectrun® Glasses Black Model

Spectrun® Glasses White Model

Spectrun Project

Interfaces

Nous avons travaillé sur 3 écrans principaux : le Menu, le Mode de Course et les Statistiques. Nous avons commencé par de rapides wireframes de 5 minutes et nous en avons discuté ensemble, 5 minutes encore, etc. jusqu'à ce que nous trouvions le meilleur résultat possible.

Menu

Le coureur doit choisir le fantôme qu'il veut défier. Cela peut être un ami, quelqu'un autour de lui ou même un athlète célèbre contre qui il rêve de gagner.

Running Mode screen

Mode de Course

L'interface devait être aussi claire que possible et nous savions que l'objectif principal était de dépasser le fantôme. Ainsi, tout ce qui apparaît à l'écran a été pensé en fonction de ça.

Statistics screen

Statistiques

Comment améliorer vos performances si vous ne pouvez pas avoir un retour de vos dernières courses ?

Animation

Une fois la vidéo filmée, il a fallu animer le spectre et toutes les interfaces. Nous avons utilisé une salle verte et le plugin Particular sur Adobe After Effects.

Vidéo Finale

Ce projet se termine par une vidéo. C'est la meilleure façon d'expliquer notre concept pour le concours. Nous avons essayé de créer un "teaser" pour un produit prospectif.

Conclusion

Finalement, nous avons terminé parmi les demi-finalistes du concours, fiers de voir le travail que nous avons pu produire en seulement 4 jours. Cela nous aide à estimer avec quelle rapidité et efficacité nous pouvons travailler durant ce laps de temps, ce qui nous sera bénéfique par la suite.
Mettre sur pied ce projet, qui n'était encore qu'une idée quelques jours auparavant, nous a montré que le travail d'équipe peut être tout autant plaisant que gratifiant.

Contexte

Quelques unes de mes connaissances ont l'habitude de pratiquer du bodyboard et du surf. Malgré leur passion commune, leurs outils pour vérifier les conditions climatiques sont différents. Tous sont unanimes sur le fait qu'il est parfois difficile d'obtenir les mêmes informations, selon le moment où on les regarde et le moyen utilisé. II arrive qu'ils s'attendent à une session parfaite alors que cette dernière s'avèrera, finalement, être une journée plate (ou inversement).
Et si nous trouvions une nouvelle façon d'afficher les prévisions de surf qui aide les surfeurs à savoir si le moment est bien choisi pour enfiler la combinaison ?

Sujet

Pendant un séminaire d'une semaine, nous devions former des équipes de 3 étudiants afin de produire un appareil connecté capable de résoudre un problème quotidien. Nous avions le choix du sujet et pour seule consigne de nous servir de la technologie Arduino. Cela peut donc inclure d'autres interfaces de programmation telle qu'une API Météo qui nous était essentielle dans le cadre de notre idée.

Faro Project

Équipe

Nous étions 3 étudiants de troisième année en provenance de la même filière Interaction Design.

Thomas
Herbreteau

Gaël
Hillion

Thibaut
Lalanne

Comment pouvons-nous représenter autrement les prévisions météorologiques de surf ?

Veille

La première étape de ce séminaire consistait à trouver des appareils connectés existants qui partagent des données de prévision météorologique. Tout en restant en concordance avec le sujet, notre périmètre de recherche s'étendait au-delà du surf comme seule activité aquatique. En mer, par exemple, les marins ont régulièrement accès à des interfaces qui leurs indiquent si les conditions climatiques sont bonnes ou mauvaises pour naviguer. Si à l'inverse des surfeurs, eux ne recherchent pas les grosses vagues, certaines données récoltées sont similaires à celles des prévisions de surf. Rechercher différentes représentations de ces données a été une source d'inspirations visuelles pour la suite du projet.

Conceptualisation

Nous avons passé beaucoup de temps à réfléchir aux caractéristiques les plus importantes pour les surfeurs lors de la vérification des prévisions et à savoir s'il y en avait de nouvelles à inclure. Nous nous sommes également concentré sur une autre façon d'afficher les informations. Doit-il s'agir d'une montre ? d'un compagnon ? Cela se doit-il d'être complètement différent de ce que nous avions vu jusque là ?
Notre questionnement global s'est porté sur le type d'appareil qui serait le plus simple et efficace pour renseigner l'utilisateur.

Faro Project

Concept

Faro se dévoile finalement sous la forme d'un poster vivant. Ainsi, les informations telles que la hauteur de marée, la direction du vent, la direction des vagues, la période entre les vagues et la hauteur des vagues sont affichées dessus en temps réel.
L'animation se fait grâce à des LEDs de couleurs qui s'allument et s'éteignent en fonction des données reçues par l'API Météo sur l'évolution du climat.
Nous voulions que notre concept soit original en plus d'être efficace. La représentation des conditions climatiques est minimaliste, suffisamment pour être rapidement lisible. Quant au choix de l'affiche, c'est pour conserver l'idée de la décoration à laquelle elle est associée. L'utilisateur choisit d'abord la pièce dans laquelle accrocher le poster Faro, puis peut opérer à quelques réglages d'affichage depuis l'application dédiée. Le premier paramètre à indiquer étant le spot de surf. Il n'a alors plus qu'à y jeter des coups d'œil quand bon lui semble.

Faro Concept

Faro Project

Prototypage

Une fois l'idée dessinée, nous nous sommes lancés dans la fabrication du prototype. Cela signifie que nous avons coupé puis soudé une grande bande de LEDs, avant de programmer l'ensemble pour que les lumières réagissent aux données de l'API Météo. Il s'agissait de la partie la plus difficile du Séminaire, car nous découvrions le langage C++ utilisé pour Particle.io et avions peu d'expérience en Javascript à ce moment là. Toutefois, cela nous a permis de toucher à de nouveaux outils et nous sommes satisfaits d'avoir réussi à faire ce que nous voulions. Eh oui ! Après 4 jours, plusieurs tentatives et quelques ratés, notre prototype Faro était fonctionnel.

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Conception d'écrans de l'Application mobile

Parce que nous avons pris beaucoup de temps pour le prototype, il nous a fallu aller très vite pour concevoir l'application et créer une identité visuelle. L'application fonctionne comme une télécommande. L'utilisateur choisit son spot de surf préféré et définit ses préférences.

Faro Mobile Application 1

Recherche et sélection du spot de surf

Sélectionnez votre spot préféré grâce à la carte ou à la liste.

Faro Mobile Application 2

Détails du spot.

Résumé de toutes les informations relatives au spot pour un aperçu rapide.

Faro Mobile Application 3

Votre spot

Une fois que vous avez sélectionné votre spot, vous pouvez également consulter les prévisions directement depuis cet espace.

Faro Mobile Application 4

Réglages

Contrôlez votre poster sur cet écran. Par exemple, vous pouvez sélectionner la hauteur de vague maximale que vous souhaitez afficher.

Tests utilisateurs

Nous avons demandé à des surfeurs (6 utilisateurs) et des non-surfeurs (10 utilisateurs) d'essayer de comprendre les informations affichées sur le poster Faro.
Les surfeurs ont vite compris le fonctionnement de ce dernier et ont eu des réactions positives.
Les non-surfeurs ont pris plus de temps pour comprendre l'affiche, mais même s'ils ne sont pas notre cible, leurs retours peuvent nous aider à améliorer notre projet.

Conclusion

Moins d'1 heure avant la présentation qui marque la fin du séminaire, le poster fonctionnait parfaitement. Et puis, nous avons eu un problème avec la moitié des LEDs de l'affiche qui ne s'allumaient plus.
D'une part, nous avons appris à travailler rapidement et efficacement. D'autre part, nous sommes maintenant prêts à faire face à des situations imprévues et à adapter notre travail en cas de problème.

Contexte

Trois anciens élèves de mon école qui travaillent actuellement chez Google sont venus animer un atelier. L'objectif de cet exercice était de travailler en tant que designers de Google, avec les mêmes outils et la même méthodologie. Nous avons eu 3 jours pour réaliser un nouveau concept, en utilisant les technologies et produits existants de Google.

Sujet

La mission de Google est d'organiser l'information mondiale et de la rendre accessible et utile à tous. Chez Google, certaines équipes se concentrent sur un utilisateur spécifique, certaines sur les technologies émergentes et d'autres sur les produits existants de Google. La consigne de ce Workshop était de sélectionner 3 produits de Google, un utilisateur et d'essayer de concevoir un produit qui ne peut être développé que par Google.

Produits

Utilisateurs

Équipe

Nous étions une équipe de 4 UX Designer en dernière année de notre cycle Master, avec différentes compétences.

Marcelo S. Coelho

Marcelo
S. Coelho

Thomas Herbreteau

Thomas
Herbreteau

Gaël Hillion

Gaël
Hillion

Thibaut Lalanne

Thibaut
Lalanne

Comment pouvons-nous créer un concept pour les enfants en utilisant YouTube, Google Suite et Assistant ?

Brainstorming process 1

Brainstorming process 2

Brainstorming

Et si nous pouvions améliorer l'(auto-)apprentissage en utilisant nos produits ? Et si YouTube pouvait être éducatif ? Nous avons fait un brainstorming sur nos produits, nous avons essayé de trouver les fonctionnalités les plus intéressantes pour chacun d'entre eux, puis de les combiner.

Veille

Nous avons fait des recherches sur le système d'éducation et sur la façon dont il fonctionnait jusqu'à présent. Nous voulions aussi savoir s'il y avait des innovations. Voici ce que nous avons appris :

Témoignage d'un enseignant

« J'ai des règles restrictives sur l'utilisation des smartphones, mais c'est une lutte constante pour garder les enfants concentrés sur les leçons sans qu'ils utilisent leur téléphone. Même quand je pense avoir planifié un cours bien structuré et bien ficelé, il semble qu'il n'y ait pas de sujet, de débat ou d'activité qui l'emportera sur l'attrait du téléphone. »
[Source : Paul Barnwell, « Do Smartphones Have a Place in the Classroom? », Article publié par The Atlantic, 27 avril 2017, Kentucky]

Études et statistiques

Les statistiques suggèrent que la population étudiante pourrait bien être le groupe démographique le plus distrait du Royaume-Uni, tenant le lien le plus fort avec ses appareils de tous les groupes d'âge. Les universités qui développent ou renouvellent leurs stratégies numériques voudront sûrement s'assurer que le mobile soit au cœur de leur approche.
[Source : Julie Mercer, Paul Lee, Ed Roddis, « How do today's students use mobiles? », Article publié par Deloitte, 4 avril 2016, Royaume-Uni]

Internet Watch 1

Internet Watch 2

Conceptualisation

Nous avons appris que le système éducatif pouvait être amélioré de bien des façons et que les enseignants se donnaient du mal avec leurs élèves qui sont davantage occupés par leur téléphone que par les cours. Parce qu'il y a beaucoup de contenu éducatif, YouTube pourrait certainement être une excellente source pour apprendre de nouveaux sujets en classe, mais aussi pour l'auto-apprentissage. Google Suite (Classroom) et Assistant pourraient également être intégrés à cette idée.

Personas

Nous avons créé des personas pour définir notre utilisateur cible et comprendre les besoins réels.

Idea

Persona 1

Camille
14 ans
Élève

Comportements

• Toujours connectée.
• À l'aise avec la technologie.
• Difficultés à se concentrer.
• Pas toujours intéressée par l'école.
• Aime se distraire avec des jeux.

Besoins et objectifs

• Ne pas manquer la classe.
• Avoir de bonnes notes.
• S'amuser lors d'activités.
• Surmonter ses difficultés en maths.

Persona 1

Chloé
32 ans
Enseignante

Comportements

• Beaucoup de travail et, par conséquent, peu de temps pour elle.
• À du mal à attirer l'attention de ses élèves à cause de leurs téléphones.
• Perçoit que ses élèves ne sont pas toujours concentrés autant qu'elle le souhaite.

Besoins et objectifs

• Élaborer le contenu des cours à l'école.
• Bien enseigner à ses élèves.
• Suivre de plus près les élèves en difficulté.

Concept

Youtube Learn est une plateforme de YouTube qui rassemble toutes les vidéos éducatives. À la fin de chaque vidéo, un quiz est généré, soit grâce à la "machine learning" (intelligence artificielle de l'Assistant Google), soit par des questions personnelles (suggestions, création individuelle, …).
De cette façon, l'enseignant trouvera un moyen ludique d'apprendre. Cela permet aux élèves d'utiliser les outils qui leur plaisent et les aide à s'impliquer davantage en classe.

Concept 1

Concept 2

Concept 3

Scénario

Nous avons créé un scénario pour expliquer le fonctionnement de notre concept.

Scene 1

1 – L'enseignant partage sa vidéo avec le quiz aux élèves.

Scene 2

2 – Les étudiants reçoivent la vidéo sur leur compte Google et interagissent avec le système Google Classroom.

Scene 3

3 – La vidéo est d'abord montrée et expliquée en classe.

Scene 4

4 – Après une vidéo, l'interface montre le quiz – chaque étudiant peut répondre avec son smartphone.

Scene 5

5 – Après le quiz, toutes les statistiques de l'élève sont à la disposition du professeur.

Scene 6

6 – De nouvelles vidéos + quiz peuvent être envoyées aux étudiants qui ont des difficultés dans certaines matières.

YouTube Learn

Conception des écrans

Nous avons partagé le travail. J'ai travaillé sur les pages de quiz pour la version desktop (bureau). Les élèves et l'enseignant peuvent jouer avec tout type d'appareil, du smartphone à l'ordinateur.

Desktop

Youtube Learn 1

1 – Le professeur est à la recherche d'une nouvelle vidéo en rapport avec son cours.

Youtube Learn 2

2 – Il trouve la bonne vidéo.

Youtube Learn 3

3 – Il peut éditer son propre quiz ou utiliser celui de la machine learning.

Youtube Learn 4

4 – Il le partage avec ses élèves.

Youtube Learn 5

5 – Les élèves se joignent à la session du quiz.

Youtube Learn 6

6 – Ils répondent aux questions relatives à la vidéo.

Youtube Learn 7

7 – Il y a un classement par équipe pour favoriser un esprit de compétition.

Youtube Learn 8

8 – Après le quiz, l'enseignant peut analyser les statistiques sur les élèves et les questions.

Youtube Learn 9

9 – Les élèves peuvent également voir leurs statistiques.

Youtube Learn 10

10 – Et découvrir de nouvelles vidéos par eux-mêmes.

Mobile

Youtube Learn Mobile 1

1 – Les élèves reçoivent une notification.

Youtube Learn Mobile 2

2 – Ils rejoignent la session et intègrent une équipe.

Youtube Learn Mobile 3

3 – Ils répondent alors aux questions.

Youtube Learn Mobile 4

4 – Et prennent compte de leur score d'équipe.

Conclusion

Ce projet a été l'occasion d'apprendre comment les designers de Google travaillent. Parce que nous avons choisi 3 produits de Google et tout entrelacé, cela a mis au défi notre créativité et notre esprit d'équipe. Nous avons travaillé très rapidement et avons reçu d'excellents retours de la part des designers de Google. YouTube Learn pourrait déjà faire partie de leurs produits.