© Thibaut Lalanne 2018

I am a Product & UX Designer based in France who crafts digital experiences for the Web.

I am currently looking for a 5 month internship,
from April to August 2018.

Download my resumé

Projet 1

01

Spectrun

Spectrun helps runners find motivation to train. Spectra, with the silhouette and performance of other runners, contribute to improve the running experience through augmented reality.

Projet 2

02

Faro

Faro is a connected poster that shares the climatic conditions of a surfing spot. In addition to a quick and pleasant overview, the data is updated in real time thanks to a Weather API and Arduino technology.

Projet 3

03

WheeLens

WheeLens is an all-in-one smart object for people who like to travel in soft modes. Information is relayed on his visor to guide the user in a fun and safe way.

Projet 4

04

Google Workshop

Google designers came to animate the Workshop. We took their place for 3 days, adopting their tools and methodology to create a new concept based on existing Google products.

Projet 5

05

SEB On Hair

On Hair is an accessory connected to a whole range of SEB hairdressing products. Fixed by hand, the gestures of its users are captured to offer them inspiring and adapted hairstyles.

Contact details

thibaut.lalanne.design@gmail.com

(+33) 6 69 77 86 54

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

Period4-day Design sprint — July 2017
TeamGroup of 4 students
SkillsUX, AR, Motion

Particles Background

Period5 days — June 2016
TeamGroup of 3 students
SkillsUI, Prototyping

Wave Background

Period3 days — December 2017
TeamGroup of 4 students
SkillsUX, UI, IxD, Visual design

YouTube Learn Home Screen

Context

We chose to create Spectrun to improve the running experience, because we think it's useful to help runners find more motivation when it's time to practice. Thanks to augmented reality, Spectrun can bring a new way of training that increases both pleasure and performance.
This year, we decided to participate in the Adobe Design Achivement Awards. For this large-scale competition, we had to work 4 days on the conceptualization of Spectrun, in parallel with our courses.

Ideation

Because we had to hurry, we directly started to brainstorm on keywords such as running combined to Augmented Reality.
What kind of features we wanted to add to our product? What could be the future of running? What is most important for runners?

Spectrun Project

Team

We were 4 first year Master's students, coming from different specializations such as VR Design, Industrial Design and UX Tangible Design.

Thomas Herbreteau

Thomas
Herbreteau

Antoine Dehillerin

Antoine
Dehillerin

Gaël Hillion

Gaël
Hillion

Thibaut Lalanne

Thibaut
Lalanne

How can we improve the running experience through Augmented Reality?

Steps

Day 1 – We started with a brainstorming and an ideation session to define the main ideas of our concept.
Day 2 – We designed the interfaces with Adobe Photoshop (PS) and Adobe Illustrator (AI) softwares.
Day 3 – We filmed the concept with a GoPro HERO5 and a Nikon D7100 camera.
Day 4 – All of this assets helped us to make a video including Motion Design.

Spectrun Project

Concept

In our opinion, it was important to look beyond the current interfaces (smartphone, tablet, computer…). That is why we chose to have a prospective vision. We believe that glasses with the Augmented Reality technology are the perfect way to have an impact on running.
The goal of our concept is to help runners to overcome their limits by running against their own ghost (spectrum) or their friends and famous runners' one. This could certainly make running more fun and entertaining.

Tasks

Antoine worked on the 3D modeling of the glasses with Cinema 4D. The design needed to be as simple as possible. The most important thing of the project must stay the concept.
Thomas, Gaël and I worked on the interfaces, the video and animations using Adobe Photoshop (PS), Adobe Illustrator (AI) and Adobe After Effects (AE) softwares.

Spectrun® Glasses Black Model

Spectrun® Glasses White Model

Spectrun Project

Interfaces

We worked on 3 main screens: the Menu, the Running Mode and the Statistics. We began with quick 5-minute wireframes and discussed about it together, 5 minutes again, etc. until we found the best result as possible.

Menu

The runner needs to choose the ghost he wants to challenge. It can be a friend, someone around him or even a famous athlete he would like to beat in his dreams.

Running Mode screen

Running Mode

The interface needed to be as clear as possible and we knew the main goal was to overtake the ghost. So everything that appears on the screen is related to it.

Statistics screen

Statistics

How to improve your performance if you can't have a feedback about your last races?

Animation

Once we filmed the video, we had to animate the ghost and all the interfaces. We used a green room and the Particular plugin on Adobe After Effects.

Final Video

This project ends with a video. It's the best way to explain our concept for the contest. We tried to create a teaser for a prospective product.

Outcome

Finally, we finished among the semi-finalists of the competition, proud to see the work we could produce in just 4 days. This helps us to estimate how quickly and efficiently we can work during this amount of time, which will benefit us in the future.
Setting up this project, which was only an idea a few days ago, showed us that teamwork can be both fun and rewarding.

Context

Some of my acquaintances are regulars in bodyboarding and surfing. Despite their common passion, their tools for checking climatic conditions are different. Everyone agrees that it's sometimes difficult to obtain the same information, depending on when you look at it and the means used. It happens that they may expect a perfect session when, finally, it turns out to be a flat day (or vice versa).
What if we could find a new way to display surfing forecasts that helps surfers know if it's a good time to put the suit on?

Subject

During a week-long seminar, we had to train teams of 3 students in order to produce a connected device capable of solving a daily problem. We had a choice of subject matter and the only instruction was to use Arduino technology. This may include other programming interfaces such as a Weather API that was essential to our idea.

Faro Project

Team

We were 3 third-year students from the same Interaction Design program.

Thomas
Herbreteau

Gaël
Hillion

Thibaut
Lalanne

How else can we represent the forecast surfing weather data?

Research

The first step of this seminar was to find existing connected devices that share weather forecast data. While remaining in agreement with the subject, our search perimeter extended beyond surfing as the only aquatic activity. At sea, for example, sailors regularly have access to interfaces that tell them whether the weather conditions are good or bad for sailing. If, unlike surfers, they don't look for big waves, some data collected is similar to that from surfing forecasts. Looking for different representations of these data was a source of visual inspiration for the project's continuation.

Ideation

We spent a lot of time thinking about the most important features for Internet users when checking the forecasts and whether there were any new ones to include. We also focused on another way to post the information. Should it be a watch? a companion? Does it have to be completely different from what we've seen so far?
Determining the type of device that would be the simplest and most effective way to inform the user was the focal point of our overall questioning.

Faro Project

Concept

Faro finally reveals himself in the form of a living poster. Thus, information such as the wind direction, swell direction, the swell height, the wave period and wave heights is displayed on it in real time.
The animation is done by means of colour LEDs that light up and extinguish according to the data received by the Weather API on climate change.
We wanted our concept to be original and effective. The representation of climatic conditions is minimalist, enough to be easily readable. As for the choice of the poster, it's to preserve the idea of the decoration with which it's associated. The user first chooses the room in which to hang the Faro poster, and then can operate a few display settings from the dedicated application. The first parameter to specify is the surf spot. Then all he has to do is take a look at it whenever he wants.

Faro Concept

Faro Project

Prototyping

Once the idea was conceived, we started to build the prototype. This means that we cut and soldered a large LED strip, before programming the assembly so that the lights react to the Weather API data.
This was the most difficult part of the Seminar, as we discovered the C++ language used for Particle.io and had little experience in Javascript at the time. However, it has allowed us to touch new tools and we are pleased that we have succeeded in doing what we wanted to do. That's right! After 4 days, several attempts and a few failures, our Faro prototype was up and running.

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Faro Prototyping

Mobile App screen design

Because we took a lot of time for the prototype, we had to move very fast to design the app and create a visual identity. The app works as a remote. The user choose his favorite surfing spot and set his preferences.

Faro Mobile Application 1

Search and Surfing spot selection

Select your favorite spot thanks to the map or the list.

Faro Mobile Application 2

Spot details

Summary of all spot information for a quick overview.

Faro Mobile Application 3

Your spot

Once you've selected your spot, you can also view the forecasts directly from this area.

Faro Mobile Application 4

Settings

Control your poster on this screen. For example, you can select the maximum wave height you want to display.

User tests

We asked surfers (6 users) and non-surfers (10 users) to try to understand the information displayed on the Faro poster.
Surfers quickly understood how it works and had positive reactions.
Non-surfers have taken longer to understand the poster, but even if they are not our target, their feedback can help us improve our project.

Outcome

Less than 1 hour before the presentation marking the end of the seminar, the poster was working perfectly. And then, we had a problem with half the LEDs in the poster that didn't light up anymore.
On the one hand, we learned to work quickly and efficiently. On the other hand, we are now ready to deal with unforeseen situations and adapt our work if there is a problem.

Context

Three former students of my school who are now working at Google came to animate a workshop. The goal of this exercise was to work as a Google designers, with the same tools and methodology. We had 3 days to produce a new concept, using existing technologies and products from Google.

Subject

Google's mission is to organize the world's information and make it universally accessible and useful. At Google, some teams are focusing on a specific user, some on emerging technologies and others on existing Google products. The goal of the workshop was to pick 3 Google products, a user and try to design a product that can only be developed by Google.

Products

Users

Team

We were 4 UX designers in the last year of our Master's degree in the team, but with various design skills.

Marcelo S. Coelho

Marcelo
S. Coelho

Thomas Herbreteau

Thomas
Herbreteau

Gaël Hillion

Gaël
Hillion

Thibaut Lalanne

Thibaut
Lalanne

How can we create a concept for kids using YouTube, Google Suite and Assistant?

Brainstorming process 1

Brainstorming process 2

Brainstorming

What if we could improve the (self-)learning by using our products? What if YouTube could be educational? We brainstormed on our products, and tried to find the most interesting features for each of them, and then combine them.

Research

We did some research about the education system and how it was working so far. We also wanted to find if there were innovations. Here is what we learned:

Teacher testimony

« I have guidelines for smartphone use, but it's a constant struggle to keep kids engaged in lessons and off their phones. Even when I know I've created a well-structured and well-paced lesson plan, it seems as if no topic, debate, or activity will ever trump the allure of the phone. »
[Source: Paul Barnwell, « Do Smartphones Have a Place in the Classroom? », Article published by The Atlantic, April 27, 2017, Kentucky]

Studies & Stats

Statistics suggest that the student population may well be the UK's most distracted demographic group, with the strongest bond to their devices of all age groups. Universities that are developing or refreshing their digital strategies may want to be sure that mobile is central to their approach.
[Source: Julie Mercer, Paul Lee, Ed Roddis, « How do today's students use mobiles? », Article published by Deloitte, April 4, 2016, United Kingdom]

Internet Watch 1

Internet Watch 2

Ideation

We learned that the educational system could be improved in many ways and that teachers are struggling with their students who are more engaged with their phones than in lessons. Because there is a lot of educational content, YouTube could definitely be a great place to learn new topics in class, but also for self-learning. Google Suite (Classroom) and Assistant could also be integrated to this idea.

Personas

We created personas to define our user target and understand the real needs.

Idea

Persona 1

Camille
14-year-old
Student

Behaviors

• Always connected.
• Comfortable with technology.
• Difficulties concentrating.
• Not always interested in school.
• Likes to entertain herself with games.

Needs and goals

• Do not miss class.
• Have good grades.
• Have fun during activities.
• Overcome her difficulties with math.

Persona 1

Chloé
32-year-old
Teacher

Behaviors

• Lots of work and, consequently, little time for herself.
• Has difficulties attracting students' attention because of their phones.
• Perceives her students are not always engaged as much as she wishes.

Needs and goals

• Develop course content at school.
• Teach her students well.
• Monitor students in difficulty more closely.

Concept

Youtube Learn is a YouTube platform that gathers all educational videos. At the end of each video, a quiz is generated, either thanks to machine learning (artificial intelligence of the Google Assistant) or personal questions (suggestions, own creation…).
In this way, the teacher will find a fun way to learn. This allows students to use tools they like and helps them to be more engaged in the class.

Concept 1

Concept 2

Concept 3

Scenario

We created a scenario to explain how our concept is working.

Scene 1

1 – The teacher shares his video with quiz to the students.

Scene 2

2 – The students receive the video on their Google Account, and interact with Google Classroom system.

Scene 3

3 – The video is first shown and explained in class.

Scene 4

4 – After a video, the interface shows the quiz – each student can answer with their smartphone.

Scene 5

5 – After the quiz, all the student's statistic are available for the teacher.

Scene 6

6 – New videos + quiz can be sent for students with difficulties in certain subjects.

YouTube Learn

Screen design

We splited the work. I worked on the quiz pages for the desktop version. Students and teacher can play with all kind of device, from smartphone to computer.

Desktop

Youtube Learn 1

1 – The teacher is looking for a new video related to his course.

Youtube Learn 2

2 – He finds the right video.

Youtube Learn 3

3 – He can edit his own quiz or use the one proposed by the machine learning.

Youtube Learn 4

4 – He shares it to his students.

Youtube Learn 5

5 – Students are joining the quiz session.

Youtube Learn 6

6 – They are answering questions related to the video.

Youtube Learn 7

7 – There is a team ranking to foster a competitive spirit.

Youtube Learn 8

8 – After the quiz, the teacher can check statistics about students and questions.

Youtube Learn 9

9 – Students can also consult their statistics.

Youtube Learn 10

10 – And discover new videos by themselves.

Mobile

Youtube Learn Mobile 1

1 – Students receive notification.

Youtube Learn Mobile 2

2 – They are joining the session and become part of a team.

Youtube Learn Mobile 3

3 – They then answer questions.

Youtube Learn Mobile 4

4 – And take into account their team score.

Outcome

This project was the opportunity to learn how Google designers are working. Because we picked 3 Google products and mixed everything, it challenged our creativity and team spirit. We worked very quickly and received great feedbacks from Google designers. YouTube Learn could already be part of their products.