Workshop ThreeJS : ¯\_(ツ)_/¯

Dévelopeur : Robinson Lacotte
Formation : BDDI 2019
Technologie : Javascript / Three.js
Durée du projet : 4 jours
Lien : https://ichbinrob.github.io/3dviz/
Musique : MonPlaisir – Morph

Projet réalisé dans le cadre du Bachelor Designer et Développeur Interactif 2018/2019.
L’objectif était de réaliser une expérience interactive réagissant à la musique avec three.js
(Merci Louis pour la description)

Workshop vidéo – STIGMA

Equipe : Zohra Mrad (Designer)Rémy Bourçois (Designer) avec l’aide de Thomas Crémier et Mrwn pour l’ambiance sonore et Dorian Guitel pour la prise des photos packshot.
Formation : BDDI 2019
Techniques : Prise de vue / After Effects
Durée du projet : 7 jours
Dossier de conception : Intention STIGMA
Pitch : Suivre le cheminement d’une femme qui se croit suivie.

Workshop vidéo sur le thème « Noir et blanc ».
La demande était de réaliser un motion design à partir de vidéos filmées avec un smartphone.

Workshop Louvre : Ekur – L’histoire immersive de l’Orant Cubiste

Equipe : An Truong (Développeur) – Rémy Bourçois (Designer) – Robinson Lacotte (Développeur) – Nicolas Michot (Développeur)
Formation : BDDI 2019
Technologie : Three.js
Durée du projet : 10 jours
Dossier de conception
Le Projet : Nous avons voulu inviter les utilisateurs à découvrir notre hypothèse sur l’histoire de l’Orant Cubiste en les immergeant dans un univers en réalité virtuelle.
Le Support : Ordinateur / VR

Dataviz – AÉSTHER

Equipe : Bastien Robert (Développeur)Rémy Bourçois (Designer)
Formation : BDDI 2019
Technologie : Three.js
Durée du projet : 4 jours
Dossier de conception : Intention AÉSTHER
Lien : http://bastienrobert-dataviz.surge.sh/
Pitch : Comment ont évolué les émissions de gaz à effet de serre depuis 1960 par pays, proportionnellement à l’accroissement de la population ?
Principe : Expérience digitale qui rend compte de l’empreinte écologique par pays et par années.

Projet réalisé dans le cadre du Bachelor Designer et Développeur Interactif 2018/2019.
L’objectif était de réaliser un graphique interactif en data visualisation qui permet de comprendre et identifier les différentes caractéristiques d’un sujet.
Les groupes étaient constitués d’un designer et un développeur avec pour thème, le changement climatique.

Motio, quand tes émotions écrivent l’histoire

Affiche Motio

 

Équipe : Arnaud Pinot (Développeur) – Jean Ndoulou (Développeur) – Clémentine Espinel (Designer) – Cassandre Leguay (Designer)

Formation : BDDI 2018

Technologie : Unity – Vuforia – Firebase

Durée du projet : 6 mois

Dossier de conception :
 Dossier de conception

Lien :
 http://motio.netlify.com/

Pitch :
Découvrez le premier livre jeunesse où l’atmosphère de l’histoire s’adapte à l’état d’esprit du lecteur. Motio propose une nouvelle expérience de lecture en réalité augmentée avec un texte agrémenté d’illustrations variables. Rentrez dans l’histoire et laissez-vous surprendre.

Cité de la céramique

Cité de la céramique

Équipe :

 La team céramique

Formation : Certification UX Design (MC-11) 2018
Technologie : Espace immersif – (composé de tables tactiles, casques VR, objets à toucher…)
Durée du projet : 5 mois
Dossier de conception : Cité de la céramique – Dossier PDF

Pitch :

La “Cité de la céramique – Sèvres & Limoges” réunit la Manufacture nationale de Sèvres, le Musée national de la céramique et le Musée national Adrien Dubouché de Limoges.

Si les flâneurs des couloirs du Musée de Sèvres sont émerveillés par ce qui leur est présenté, ils n’ont pas aujourd’hui la possibilité d’apprécier les techniques et le savoir-faire qui ont permis de donner vie à une partie de ces oeuvres. Aucun dispositif efficace ne permet au visiteur de faire le lien entre ce qu’il voit et le processus de création qui pourtant se trouve à quelques mètres de lui.

Comment faire connaître, faire vivre aux visiteurs du musée les procédés de fabrication des œuvres ?

Mais qui sont ces visiteurs ? C’est la première question qui nous est venue à l’esprit. Le public se voulant le plus large possible, du sénior en balade, au jeune en sortie scolaire. Tout le monde doit se retrouver dans sa visite du musée. Certains auront des attentes plus fortes que d’autres. Une limite de concentration différente. Puis le système muséal français accorde aussi une importance grandissante au public en situation de handicap.

Pour aborder notre problématique, nous avons donc commencer par des interviews utilisateurs in situ. Avant la visite, après, le personnel, les visiteurs déficients visuel,  auditifs ou moteur… Tous ont des attentes différentes en matière d’enseignements mais tous aimeraient la même chose. Qu’on les emporte dans des histoires passionnantes, avec un effet époustouflant.

Une session de shadowing, une étude précédente nous ont donné les premières briques. S’en est suivi plusieurs sessions d’idéation avec nos commanditaires du projet qui nous ont amené à une recommandation ludique et pédagogique accessible à la majorité des visiteurs. Celle-ci reste une recommandation, qui sera prise en compte par le musée pendant sa future rénovation et qui pourrait nous l’espérons, donner un coup de fraîcheur à  l’expérience visiteur.

 

Artisan emailleur en pleine action
Artisan emailleur en pleine action
Session de shadowing in situ
Session de shadowing in situ
Test utiilsateur au labo des Gobelins
Test utiilsateur au labo des Gobelins
Entretien visiteur
Entretien visiteur
Atelier d'idéation - crazy 8
Atelier d’idéation – crazy 8

Toolz Solutions interactives en 3D et VR

Équipe
Juliette Delaporte – Chef de projet Éditorial, Conceptrice-rédactrice et UX Designer / juliette.delaporte@gmail.com
Cécile Duchenne – Responsable Maîtrise d’ouvrage
Sophie – Manager Nouvelles Technologies


La formation

MC11 2018
Certification UX Design de l’Ecole des Gobelins

Technologie

Site internet responsive, desktop et mobile

Le sujet 
Une représentation 3D du territoire au service du Budget participatif des villes

Le dossier UX2018_TOOLZ_dossier_pour_casestudy5mega


La commande

Toolz, un studio de création 3D, dirigé par David Laure, notre commanditaire, nous sollicite pour concevoir une solution digitale qui représente en 3D l’environnement et les projets d’aménagement d’une ville proposés lors de concertations publiques. Deux critères importent : d’une part, la solution devrait tenir compte de la volonté du commanditaire d’impliquer pleinement les citoyens dans la construction de leur ville ; d’autre part, la solution devrait utiliser les modules de représentation 3D conçus par Toolz.

Le challenge
Nous identifions le challenge suivant : Comment adapter la future solution aux enjeux d’un site de budget participatif d’une ville ?
Pourquoi choisit-on ce cas particulier de la concertation qu’est le budget participatif ? La solution doit permettre d’augmenter la participation et la représentativité des votants. Or le budget participatif qui est un cas actionnable de la concertation, a justement pour vocation d’impliquer l’ensemble des citoyens d’une ville dans la construction de celle-ci. En effet, la mairie d’une ville alloue entre 5 et 20 % de ses ressources au budget participatif qui regroupe des projets d’aménagement proposés par des citoyens et votés par l’ensemble des habitants.
À la suite d’une exploration large et resserrée – entretiens avec des élus, des promoteurs, des architectes, des agences de concertations et des citoyens – nous nous appuyons sur 5 principes directeurs pour concevoir notre solution :
La simplicité : la solution doit être accessible à n’importe quel citoyen
La responsabilisation : voter au budget participatif est un acte civique
La transparence : tout le processus de sélection et de vote doit être explicité
L’équité : tous les projets doivent être présentés de la même manière
La disponibilité : les projets doivent présentés de manière courte pour satisfaire le citoyen pressé et détaillée pour le citoyen qui a davantage de temps

La solution
Notre solution doit tenir compte des enseignements des différentes phases de recherche et intégrer les modules 3D du studio de création Toolz.
Nous concevons un site internet responsive intégrant une cartographie 3D et la modélisation 3D des projets.
Consultable sur ordinateur, tablette et téléphone – le site permet d’élargir l’accès à toute la population d’une ville.
L’objectif est d’accompagner l’utilisateur lorsqu’il sélectionne les projets pour lesquels il veut voter et lorsqu’il vote. Le site présente donc d’abord l’ensemble des projets proposés par le citoyens sur une page liste. Ensuite, l’utilisateur est accompagné pour pré-sélectionner et voter les projets.
Nous effectuons plusieurs tests de concepts : géolocalisation, partage du vote sur les réseaux sociaux… Par exemple, nous testons les pages qui présentent les projets individuellement , nous produisons les contenus de celle-ci en fonction des enquêtes utilisateurs ; de l’enquête utilisateurs, ressort que les informations capitales pour choisir parmi les projets et voter sont :
Le calendrier des travaux
Le thème du projet : ville verte, ville mobile, ville connectée, ville solidaire…
Un descriptif texte des projets
La géolocalisation des projets
Un visuel des projets
Le coût du projet

 

Nous menons des ateliers avec les utilisateurs pour vérifier nos hypothèses concernant les pages projets. De quelles informations l’utilisateur a-t-il besoin pour évaluer un projet lorsqu’il est sur la page de celui-ci ? Parmi les contenus proposés : le calendrier des travaux, le visuel 3D du projet, la géolocalisation le descriptif des projets… Nous demandons à l’utilisateur « Quels contenus choisiriez-vous en premier et pourquoi ? »

Comment sont intégrés les modules 3D du studio ? Le studio de création 3D peut apporter une véritable plus-value sur les deux dernières catégories : visuel des projets et géolocalisation des projets qui seront traités en 3D.

Pour la géolocalisation, sur la Page liste de projets, ci-dessous, la carte à droite permet une visualisation 2D et une visualisation 3D. En effet, une carte 3D de la ville peut être une manière ludique de circuler parmi les projets potentiels pour la ville. Il faut cependant conserver une carte 2D qui reste le moyen le plus clair pour l’utilisateur de repérer un projet dans la ville. Sur la vue ci-dessous, la carte 3D est sélectionnée.

Sur la page Liste projets, l’utilisateur peut naviguer au choix sur une carte 2D ou une carte 3D pour repérer un projet dans la ville. Ici la vue affiche la carte 3D.

Concernant le visuel des projets pris individuellement, notre enquête utilisateur a montré combien l’utilisateur parvient davantage à se projeter à l’aide d’un visuel 3D. Sur le visuel 3. Page projet détaillé de la conception détaillée ci-dessous, l’utilisateur a la possibilité de voir le futur projet en 3D, ici une borne de réparation de vélo.

Conception détaillée de l’interface du site web

En conclusion : il est nécessaire de penser tout le parcours du citoyen susceptible de voter. Le site web est un moment clé, mais ce n’est pas le seul moment du parcours. Nous préconisons donc de penser aussi les usages du citoyen avant et après le vote sur site web. Également il est nécessaire de penser l’alternative avec le vote en physique dans des bureaux pour les populations éloignées des outils numériques. 

L’expérience sur le site web ne suffit donc pas à elle seule à répondre au défi d’augmenter la participation à un budget participatif et d’attirer des votants représentant toute la population d’une ville.

Il est nécessaire de mener des actions en amont et en aval permettant de générer du trafic vers la plate-forme pour le vote numérique, d’amener les citoyens dans les bureaux pour le vote physique et de prolonger l’expérience au delà du vote : des newsletters régulières, une rubrique consacrée au budget participatif dans la gazette mensuelle, une campagne d’affichage, par exemple, peuvent renforcer le potentiel de viralité et le caractère satisfaisant de la concertation citoyenne. Ce travail de communication doit s’étendre sur plusieurs années.

Thymia

Équipe:  Antoine Charrier (Designer), Mathils Laffond  (Designer), Thomas Van Glebeke (Développeur), Dorian Lods (Développeur)

Formation: BDDI 2017

Technologie: WebGL – Web

Durée du projet: 5 mois

Dossier de conception: Dossier.pdf

Lien: http://thymia.world

Pitch :

Lors de cette expérience vous ferez la connaissance de Thymia, la voix douce et féminine qui va vous guider tout au long de cette expérience. Thymia est votre nouvelle confidente. C’est grâce à elle que vous allez prendre réellement conscience de vos humeurs.

Après vous être confié à elle vous découvrirez un univers personnalisé qui représente votre humeur à l’instant T. Suite à cette visualisation vous pourrez partager votre univers du moment ou le garder personnel tout en constituant une timeline privée de votre humeur générale.

Thymia vous permet aussi de nourrir votre curiosité et de découvrir l’humeur visuelle d’autres personnes dans le monde.

 

Pour démarrer l’expérience, rendez-vous ici : http://thymia.world

Iterium

Équipe :

Mélanie Samedi (Développeuse) – Paul Destandau (Designer) –  Emmanuelle Persson (Designeuse) – Thanh-Binh Tang (Développeur)

Formation :

Bachelor « Designer & Développeur Interactif  » 2017

Technologies :

Unity

Durée du projet :

6 mois

Dossier de conception :  Iterium

Pitch :

Iterium est un jeu sur tablette, conçu en 3D où l’utilisateur doit interagir avec certains principes physiques pour évoluer dans le jeu et aider le personnage à rentrer chez lui.

Fondé sur le principe du puzzle-game, le but est de débloquer des passages en proposant un gameplay novateur et non-répétitif, chaque monde du jeu aura sa propre interaction (définie par le principe physique), et stimulera ainsi la réflexion de l’enfant.


Reset

Équipe :

Manon Jouet (Designeuse) – Ivan Daum (Développeur) –  Cécile Delmon (Développeuse) – Florian Moreau (Designer)

Formation :

Bachelor « Designer & Développeur Interactif  » 2017

Technologies :

socket.iothreejs

Durée du projet :

6 mois

Dossier de conception :  Reset

Pitch :

Reset est une expérience collaborative dans laquelle les joueurs vont devoir ré-illuminer leur monde. En collaborant en temps réel, ils débloqueront des obstacles afin de ramener la lumière.