ANCO LPC

Equipe: Jérémy GUIGNETTE (Chef de Projet) – Amélie MEPPIEL  (UX Designer) – Linda AKSONESILP (Directrice Artistique) – Florence VINCENT (UI Designer) – Anthony BACCOUCHE (Développeur)

Formation: Designer Développeur Intéractif 2018

Durée du Projet: 4 mois

Dossier de Conception: Dossier de Conception Anc

Lien:  https://ancolpc.fr/

Pitch: Refonte du site de l’Association Nationale des Codeurs LPC (Langue Parlée Complétée):

Dans le cadre de notre projet de fin d’année DDI, nous avons réalisé une refonte totale du site de l’Association Nationale des Codeurs LPC.

L’objectif de l’association? Devenir le site de référence pour tous les codeurs LPC français.

Voici les différents éléments développés durant ces 4 mois:

  • Création d’une plateforme pour les codeurs LPC professionnels (échanges d’informations
  • Création d’un espace d’adhésions et de dons en ligne.
  • Création d’un espace « emploi » avec possibilité de dépôt d’offres/candidatures en ligne
  • Création d’un espace membre.
  • Modernisation du Design du site.
  • Travail sur l’ergonomie du site.

 

 

 

 

 

 

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.

Unknowns

Équipe :

Formation : Certification UX Design (MC-11) 2018
Technologie : Application mobile
Durée du projet : 5 mois
Dossier de conception : Unknowns – Dossier PDF
Lien : Prototype

Pitch :
Le cabinet Unkowns a mené une étude sur les usages de l’argent qui conclue que les individus gèrent leur argent en fonction de son origine et de sa destination (l’argent donné par notre grand-mère par exemple ne pourra être dépensé aux jeux ou pour faire ses courses quotidiennes) et que les banques gèrent l’argent comme une quantité sans lui affecter d’émotion. Dans le cadre du projet en équipe, Unknowns nous a demandé de réfléchir à un service pour répondre aux usages affectifs de l’argent.

Nous avons mené des entretiens pour comprendre comment les individus fonctionnent avec l’argent et avons retenu que les problèmes de gestion de budget étaient les plus cités. Nous avons posé une hypothèse de service : tel un coach sportif, peut-on avoir un coach pour son budget ?

La majorité des passants auprès de qui nous avons testé l’appétence des services d’un coach, indépendant d’une banque, qui aiderait l’individu à gérer son budget et à acquérir des connaissances sur les rouages et le fonctionnement de produits d’épargne, ont validé cette proposition.

En analysant plus précisément nos entretiens, nous avons constaté que les jeunes s’étaient particulièrement exprimés sur les problèmes de gestion de budget. C’est pourquoi nous avons resserré le sujet de notre projet de groupe en imaginant un service de gestion de budget dédié aux jeunes.

Ils sont en manque d’éducation financière (d’autres entretiens dédiés aux jeunes ainsi que différentes études sur leurs comportements et connaissances nous ont confortés dans cette hypothèse), en âge d’acquérir leur indépendance, appétents à changer leurs habitudes pour être débarrassés des problèmes quotidiens de gestion d’argent.

Notre problématique était donc : comment accompagner les 17-25 ans vers une autonomie autour des questions d’argent ?

Grace à une campagne de brainstorming en ligne (Site Braineet) ainsi qu’un atelier avec une quinzaine de jeunes de 17-25 ans nous avons précisé ce que notre service devait contenir : un accompagnement à personnaliser suivant ses besoins et envies, quelques chiffres clés pour vérifier rapidement où en est notre budget, un accès à des tutoriels pragmatiques, et des moyens digitaux pour échanger avec le coach.

Nous avons conçu un prototype présenté à 5 testeurs au Laboratoire Ergo-Design des Gobelins qui ont aimé ce service dont l’interface a été jugée fluide et simple, donnant un accès facile aux informations.

Nous l’avons amélioré pour mieux mettre en valeur le service de coaching et simplifier la connexion.

“Ça vous est déjà arrivé de faire face à des questions d’argent et de ne pas trouver la réponse ?”

Vous n’en avez pas assez des conseillers bancaires qui essaient de vous vendre des produits mais qui ne vous apportent ni conseils concrets ni de solution rapidement ?

Et bien, c’est comme Maxime : comme beaucoup de jeunes il est un peu hédoniste, il dépense son argent sans trop faire attention. Il sort, il se fait plaisir, et il est souvent à découvert… Si bien que quand il voit le numéro de son conseiller bancaire s’afficher sur son téléphone il ne décroche jamais, il est en panique. Il ne l’aime pas trop son conseiller.

En même temps s’il ne s’en sort pas avec l’argent ce n’est pas vraiment de sa faute : personne ne lui a jamais expliqué. C’est vrai, à l’école ça ne s’apprend plus et en parler avec ses parents ou les copains c’est toujours un peu compliqué.

Avec Avizé, la vie de Maxime a changé

Interview utilisateur lors de première phase de recherche 


L’équipe en plein travail d’analyse des interviews utilisateurs


Le test d’appétence 


Le lancement du workshop de co-création avec 15 jeunes

Quelques exemples d’écrans de l’application

Cheerly

logo-cheerly-banner

Equipe :
team-projet-cheerly

Formation : Certification UX Design (MC-11) 2018
Technologie : Site internet mobile
Durée du projet : 5 mois
Dossier de conception : Cheerly – Dossier PDF

Pitch :

« Comment organiser sans prise de tête des événements festifs avec ses amis ? »

Facile, on se met d’accord sur un lieu, une date, peut-être un cadeau et c’est parti ! Enfin, en théorie.
Les contraintes personnelles ou professionnelles, l’emplacement géographique, l’absence de réponse, la divergence des goûts, des avis ou pire, l’absence d’opinion peuvent vite complexifier l’affaire.

Pour remédier à cela, le service Cheerly permet aujourd’hui d’organiser des événements, de les communiquer aux participants via les réseaux sociaux ou les apps de messagerie populaires pour ainsi les faire voter sur une ou plusieurs dates, lieux, idées cadeaux ou liste de courses.

Dans le cadre de ce projet d’étude, nous avons interviewé des personnes concernées par ces problématiques, tenté de savoir quels étaient leurs habitudes, leur rôle dans l’organisation, les outils qu’ils utilisaient, les raisons d’utiliser ces outils et ce dont ils auraient besoin pour faciliter l’organisation de leurs rencontres.

Nous sommes ensuite passés par une phase d’idéation avec le commanditaire du projet pour définir des fonctionnalités ou des optimisations en se concentrant sur ce que Cheerly pouvait faire de plus que les canaux de communication habituels.
Ces propositions ont été testées au laboratoire ErgoDesign LUTIN-GOBELINS dont voici le résultat qui, nous l’espérons, aura permis à l’équipe Cheerly de progresser dans la connaissance de ses utilisateurs et des pistes à explorer pour continuer de développer son service.

interview-utilisateur-cheerly
Interview « guerilla » en binôme pour mieux comprendre comment les événements sont vécus / considérés par les gens

workshop-crazy8s-cheerly
L’équipe au beau milieu d’un workshop (crazy 8s)

user-test-cheerly
Test utilisateur au laboratoire ErgoDesign LUTIN-GOBELINS à l’aide d’une barre oculométrique (eye tracking)

L’UX pour gérer la contrainte du port des EPI

Romuald TISSERAND

Formation : Certification UX Design (MC11) 2017

Durée : 2 mois

Mémoire : UX2017_Mémoire_RTISSERAND

Résumé :

L’inspection industrielle est une activité de terrain, qui peut s’exercer dans des  conditions qui présentent des risques pour les personnes. Afin de prévenir les accidents, le port d’équipement de protection individuelle (ou EPI) y est strictement encadré.
Jeune société nantaise, Novyspec édite une solution numérique pour outiller ces processus d’inspection.

De scénarios “low tech” à d’autres plus évolués technologiquement, l’étude présentée ici analyse dans quelles conditions le contrôle du port des EPI pourrait être intégré dans la solution afin de minimiser les risques pour les inspecteurs opérant sur le terrain.

Ce mémoire ne présente qu’un point d’étape, le travail est toujours en cours.

 

La mesure des émotions pour améliorer l’expérience utilisateur


Franck Weens (UX Designer)

Formation : MC11 2017

Méthodologie :

  • Recherche primaire et secondaire
  • Étude en ligne
  • Mesure des émotions

Technologie :

  • Blockchain
  • Outil de vote électronique
  • youXemotions

Durée du projet :

1 mois

Pitch :

La mesure des émotions
pour améliorer l’expérience utilisateur. Cas pratique d’un outil de  Vote  Électronique  à  destinations de communes conçu par Orange Vallée

Résumé du mémoire :

Face à un produit, un utilisateur va éprouver des émotions positives ou négatives. La qualité de l’expérience utilisateur va dépendre de ces émotions.

L’auteur propose un test utilisateur afin d’évaluer les émotions de testeurs utilisant un outil de vote électronique. Après avoir présenté le vote électronique ainsi que ses avantages et inconvénients, l’auteur nous indique les motivations à utiliser un tel service.

Quelques initiatives existantes sont ensuite listées. L’auteur se concentre ensuite plus particulièrement sur le produit « Le Vote », une solution de vote électronique développée par Orange et basée sur la technologie blockchain.


capture d’écran du site levote.orange.com

Après avoir comparé ce produit avec des offres concurrentes, les études d’utilisabilité déjà réalisées sur le produit le Vote sont présentées ; on peut citer les entretiens utilisateurs, les matrices de Bastien et Scapin et l’AttrakDiff.

Ensuite un courte partie théorique présente les émotions ainsi que les outils digitaux permettant aux utilisateurs d’évaluer leurs émotions ; par exemple une version de la roue de Plutchik est disponible en ligne.

L’auteur décrit ensuite un jeu de rôle qui a été proposé à plus de 23 utilisateurs pendant 2 semaines. Dans ce jeu, l’auteur était le maire d’une commune virtuelle et les utilisateurs les citoyens. Chaque jour les citoyens se sont exprimés par vote et ont exprimés leurs émotions avant et après le vote. Les utilisateurs étaient répartis en deux groupes : un groupe avec plus de retour du maire et un autre avec moins…

Des éléments perturbateurs sont intervenus pendant la période de tests afin de déterminer l’influence sur les émotions des participants.


mesures des émotions avec l’outil youXemotions

En conclusion, l’auteur :

  • Résume les retours utilisateurs pour l’équipe projet.
  • Fait un retour sur 3 hypothèses.
  • Liste des recommandations pour l’équipe projet.
  • Fait le point sur les limites de la démarche et sur les outils.
  • Conclu sur un paragraphe introspective.

Le test à montré qu’un outil simple de mesure des émotions pouvait être utilisé pour obtenir un retour intéressant sur l’expérience utilisateur…

Mémoire : UX2017_mémoire_WEENS_Franck

On The Rocks

Nicolas Bernard (Designer) – Hélène Le Mouellic (Designer) – Franck Weens (UX Design)

Formation : Certification UX (MC11) 2017
Durée du projet : 3 mois
Dossier de conception : https://goo.gl/4gHm1W

Pitch : La seule application de streaming musical live qui sert autant en soirée que chez soi.

Dans le cadre du rebranding de deux de ses clubs et de sa nouvelle activité de diffusion d’évènements en live sur Facebook, l’agence Uzik (Festival Calvi On The Rocks, Communion, Garage…) a fait appel à Gobelins pour réfléchir à de nouvelles formes d’interactivé autour de ses soirées, en vue de fédérer une communauté attachée à sa future marque On The Rocks Paris.

Après avoir étudié les possibilités techniques, le marché actuel et les besoins/freins de la cible, nous avons cherché à développer un dispositif innovant et facilitateur sous la forme d’une application pour smartphone.

 

Nos objectifs :

  • Valoriser les investissements d’Uzik, et la richesse de leurs lieux pour proposer des interactions de qualité.
  • Compenser les limitations techniques par une expérience utilisateur avant, pendant et après les évènements.
  • Inviter le public à participer au voyage, même s’il n’est pas présent sur le lieu.

 

Fonctionnalités principales :

  • Live player audio/vidéo
  • Agenda booking, review des évènements passés
  • Bibliothèque multimédia
  • Photo stories participatives
  • Moments « coup de coeur » à partager sous forme de vidéo premium

Sia

Équipe : Jean-Philippe CHEVIN – Aurélie DUNIER – Romuald TISSERAND

Formation : Certification UX Design (MC11) 2017

Durée : 3 mois

Dossier de conception : UX2017_Thot_dossier

Prototype : Sia

Commanditaire : THoT, école diplômante de Français pour les réfugiés et demandeurs d’asile.

Pitch de départ : Lors de la présentation du projet, la demande de Judith Aquien, directrice de  THoT, était :

“Permettre aux personnes en exil de trouver leurs marques dans Paris et  d’apprendre au passage les bases qui leur donneront une autonomie en français.”

La Problématique : La première souffrance des réfugiés étant l’isolement, peut-on imaginer un dispositif qui les aiderait à rompre cet isolement et aller au contact de Français ?

Notre Proposition :

Pour les réfugiés, Sia est une application mobile qui donne accès à un  catalogue d’activités de loisirs (sports, sorties culturelles, arts, etc) proposées par les associations aidantes.

Par ailleurs, afin d’aider les réfugiés à se familiariser avec la langue française, Sia offre des facilités linguistiques :

  • Une traduction momentanée des informations affichées par Sia peut être activée à la demande de l’utilisateur, et dans la langue qu’il a choisie comme préférence. L’utilisateur est ainsi encouragé à lire le Français, mais peut bénéficier d’une aide quand il en a besoin.

Pour les associations Sia est un site web qui propose un point de contact fédérateur  pour publier les informations sur les activités, gérer les participants et discuter avec les réfugiés autour des activités proposées.

Nous avons aussi travaillé avec quelques uns des acteurs associatifs pour définir l’écosystème global du projet et envisager une trajectoire pour que le projet voit concrètement le jour.

Médias :

Irus

Équipe : 

Hélène Starck (designer), Axelle Pasquier (designer), Ludovic Bouvinet (développeur) et Brice Culas (développeur)

Formation :

Bachelor « Designer & Développeur Interactif  » 2017

Technologies :

Swift  React nativeOpenEars – HeartBeatRecorder

Durée du projet : 6 mois

Dossier de conception : Irus

Lien : Irusapp.io

Pitch :

Irus est une application communautaire vous permettant d’écouter et de partager vos moments de bonheur. Il est votre confident, votre guide dans la quête du bonheur.

 

 

 

 

Joconde

EQUIPE :

Benjamin Dobat : directeur technique
Julien Ferreira : chef de projet
Delphine Joube : UX Designer
Emmanuel Poupa : directeur artistique
Thierry Roussillon : intégrateur

Durée du projet :
3 mois

Technologies utilisées :
HTML – CSS – javascript – PHP

Pitch :
Une majorité de personnes sont réticentes à l’idée de publier leur photo sur un site de rencontre : par timidité, par peur d’être reconnu (par un voisin, un ami, un collègue…), ou parce qu’elles ne se sentent pas à l’aise avec leur physique.
A contrario, les profils non illustrés suscitent soit la méfiance, soit l’indifférence et de ce fait, ils ont très peu de chances d’être contactés.
C’est en partant de ce postulat et en souhaitant trouver une solution à ce dilemme, qu’est née l’idée du site Joconde.fr, qui propose de remplacer les photos des utilisateurs par des portraits virtuels, réalisés grâce à un générateur d’avatars ludiques et décalés.

Grâce au générateur, l’utilisateur peut aussi croquer le portrait de la personne recherchée. Chacun des éléments constituant les portraits numériques des utilisateurs sont indexés dans une base de donnée. Un algorithme est utilisé pour classer par ordre de ressemblance décroissante les différents portraits lors de l’affichage des résultats.

Cette recherche est complétée par un certain nombre d’autres critères (âge, localisation, taille, poids, goûts…) afin d’affiner le profil de la personne recherchée en filtrant les fiches incompatibles. Pour communiquer entre eux, les utilisateurs doivent d’abord envoyer un « sourire » qui, s’il est accepté, autorise l’envoi d’un premier messages et permet d’initier un dialogue.

Enfin, une galerie privée permet également de dévoiler ses photos, au cas par cas, lorsque les utilisateurs se sentent suffisamment à l’aise l’un avec l’autre, pour accepter de se montrer tels qu’ils sont.