Dev&Go

Projet en entreprise

Création d'une application portefeuille de protection de données personnelles.

Rôle

Ux /Ui designer

Missions

Webdesign
Aspect visuel
Prototypage
Test utilisateur

Outils

logo  Adobe xd
Adobe XD
logo adobe illustrator
Illustrator

_1 Contexte | Problématique

illustration bonhomme coeur
myCO est une start-up dans laquelle j'ai effectué un stage de 6 mois suivi par une année de contrat professionnelle et enfin d'un CDI. Une expérience forte qui m'a permis de découvrir le monde du travail à travers des réalisations concrètes, des rencontres riches et des collaborations fructueuses.
Je ne présenterais ici qu'un seul des différents projets réalisés au long de ces deux années.

Le projet que je vais présenter ci-dessous est né du contexte de prise de conscience générale sur les abus multiples concernant l'exploitation des données personnelles par les grandes et petites entreprises sur internet. Malgré les récentes lois de protections des données personnelles, la transparence fait toujours défaut à la majorité des utilisateurs lorsque vient le moment de données des informations à un site, plateforme ou application numérique.
Problématique
Comment sécuriser les données personnelles de l'ensemble des utilisateurs?
myCO Dev&Go est la première coopérative de données personnelles en France. Basée à Rilleux La Pape, cette jeune entreprise conçoit des solutions afin de redonner à l'individu l'usage de ses données personnelles numériques. En tant que coopérative, myCo ne peut être propriétaire des données personnelles de ses utilisateurs. La vente non pas de données mais de solutions de revalorisations légales et maîtrisées de celle-ci est la base de l'ensemble des projets de l'entreprise.
Voir le projet finalisé

_2 Solution

Comment sécuriser les données personnelles de tout les utilisateurs ?
Création d'un espace tiers de stockage de données

- Des solutions viables

D'après les recherches effectuées en amont du projet, nous avons constaté la nécessité de considérer non seulement l'internaute, mais également l'entreprise qui a besoin de la data pour transmettre un service, une information et qui souvent ne sait pas gérer cette information de façon sécurisée.

Nous avons imaginé pour résoudre ce problème un ensemble de 3 solutions qui permettent de transformer le vol et l'exploitation de données (volontairement ou non) en échanges consentis et légaux.
schéma solution
schéma solution

Le portefeuille

Le module

Le dashboard

Il permet à l'utilisateur de gérer ses données dans un seul et même endroit sécurisé dans lequel il peut ouvrir et fermer les accès à ses informations quand il le souhaite.
Il s'agit d'un module installé dans les applications des entreprises qui permettent d'accueillir le portefeuille et de gérer la donnée en toute légalité.
[ Projet futur ]
‍Les données récupérées sont triées, organisées et surtout sont disponible ou indisponibles en fonction du consentement de l'utilisateurs.

Le portefeuille

Le module

Le dashboard

Pour l'utilisateur :
Pour l'utilisateur et l'entreprise :
Pour l'entreprise :
Il permet à l'utilisateur de gérer ses données dans un seul et même endroit sécurisé dans lequel il peut ouvrir et fermer les accès à ses informations quand il le souhaite.
Il s'agit d'un module installé dans les applications des entreprises qui permettent d'accueillir le portefeuille et de gérer la donnée en toute légalité.
[ Projet futur ]
‍Les données récupérées sont triées, organisées et surtout sont disponible ou indisponibles en fonction du consentement de l'utilisateurs.

Authentique

Fafa des bois travaille la matière brute, des objets de qualité avec soin et passion. Il est primordial que son site et sa communication reflète cette sincérité de création.
Ne pas négliger les détails de provenance, matériaux, chaque objet doit être totalement transparent, sincère.
Application :
exemple dans l'application

Humain

Il y a un humain derrière ces objets, des mains ont travaillé ce bois et poncé ce meuble ! Ces produits ne sortent pas de l'usine mais d'un atelier.
Application :
S'approprier les mots, les noms des objets, créer un petit monde où on peut sentir la créativité jusque dans les textes.
exemple dans l'application

Unique

Chaque pièce est unique et limitée. Elles sont travaillées avec soin et acquièrent une réelle personnalité. Il y a des séries mais pas d'objets manufacturés.
Application :
intégrer si possible une petite histoire à chaque objet, ou à certains.
exemple dans l'application
Enfin, les données de l'utilisateur sont rémunérées grâce à une monnaie virtuelle qui permet le développement d'une économie circulaire et d'une fidélité intéressante pour les entreprises qui respectent le RGPD.
schéma protection
La création d'un portefeuille de données personnelles permet aux utilisateurs de posséder la pleine maitrise de l'ensemble de leurs données dans un espace fermé. L'idée est de créer une protection grâce à l'isolement des données utilisateurs dans un seul et même endroit : le portefeuille de donnée.
schéma blockchain
Chaque utilisateur possède une certain nombre de données personnelles qu'il est obligé de céder en l'échange d'un certain nombre de services, ou juste en navigant sur internet, sans possibilité de maîtrise de ce flux de données.
schéma lien
La solution du portefeuille permet de concentrer les données personnelles dans un seul et même espace numérique protégé par plusieurs clés de blockchains procédées seulement par le propriétaire de ces données. il a la possibilité d'ouvrir l'accès aux informations qu'il veut aux entreprise de sont choix et de couper cet accès quand il le veut.

Mes missions :

_3 Procédé

process
rond rouge
rond rouge
rond rouge
rond rouge

Idéation

Chiffres
Personae

Identité de marque

Elements de charte

Prototype

Arborescence
sketchs
Wireframes
‍Maquettes BD

Final

Maquettes HD
Sites institutionnels

_4 Idéation

- Comprendre l'utilisateur

Nous avons fait des recherches sur les problèmes rencontrés par les utilisateurs d'internet vis-à-vis de la donnée numérique. Afin d'apporter une réponse pertinente il était crucial de délimiter un champ d'action plus précis.
graphique 10%graphique 100%
Des utilisateurs
lisent les politiques de confidentialité
[CNIL]
Des utilisateurs
accepteraient de vendre leurs données personnelles
[livre blanc Microsoft]
Des utilisateurs
lisent les politiques de confidentialité
[CNIL]
Des utilisateurs
accepteraient de vendre leurs données personnelles
[livre blanc Microsoft]
graphique 81%graphique 30%
Des français
craignent le détournement de leurs données personnelles
[BVA]
Des français
pensent leurs données en sécurité sur Internet
[BVA]
Des français
craignent le détournement de leurs données personnelles
[BVA]
Des français
pensent leurs données en sécurité sur Internet
[BVA]
graphique 10%
Des utilisateurs
lisent les politiques de confidentialité
[CNIL]
graphique 100%
Des utilisateurs
accepteraient de vendre leurs données personnelles
[livre blanc Microsoft]
graphique 81%
Des français
craignent le détournement de leurs données personnelles
[BVA]
graphique 30%
Des français
pensent leurs données en sécurité sur Internet
[BVA]
49 % des entreprises augmenteront leur budget de sécurité du cloud au cours des 12 prochains mois (Cybersecurity Insiders)
103 jours est en moyenne le temps qu'il faut au secteur médical pour remédier à un piratage (IBM)
69 jours est en moyenne le temps qu'il faut pour contrôler une fuite de données dans tous les secteurs confondus (IBM)
56% des internautes acceptent les conditions d’utilisation des sites sans les lire. (Axios)
Qu’il s’agisse de leurs coordonnées personnelles (78%) ou de leurs documents privés (photos, vidéos…) (67%), la majorité des Français se montrent inquiets quant à la protection de leur vie privée sur Internet.(bva)
Si les Français semblent moins soucieux de la confidentialité de leurs données bancaires (34%), ils sont fortement préoccupés par le risque de piratage de ces données (71%).(bva)

On retient :

- Personae

photo personaephoto personae

Claire Martin

photo du persona
_ Femme, 40 ans
_ CSP+
_ Paris
_ Mariée, 1 enfant
_ Responsable des équipes commerciales

Bio

Bourguignonne, Claire a grandi à la campagne mais travaille maintenant au centre de la capitale. Amatrice de beaux meubles, elle aime tout particulièrement ce qui lui rappelle son enfance à la campagne. Entre chic parisien et brut de campagne, elle aime passer du temps à chercher LA pièce qui manque à son loft lumineux!

Réseaux

logo facebook
Facebook
logo pinterest
Facebook
logo instagram
Facebook

Tendances

Technophile
niveau
Sportive
niveau
Confiance en soi
niveau
Elégante
niveau
heart

Tendances

Confiance : Peu enclin à acheter à un particulier car doute sur la qualité.
heart break

Freins

• Etre bien chez soi
• Arriver à retrouver le réconfort de la campagne en respectant son appartement chic!

Bio

Amateur de nouvelles technologies, Clément est conscient de l'empreinte qu'il laisse depuis toujours sur Internet. Citadin, il a fait ses études à Paris pour revenir à Montpellier où il travaille en tant que designer produit dans une jeune Start-up spécialisée dans l'IOT (objets connectés). Il aimerait mieux contrôler ses datas mais n'a pas le temps de se former sur la question et n'a pas envie de réduire son activité Internet.

Réseaux

logo facebook
Facebook
logo tweeter
Tweeter
logo linkedin
Linkedin

Clément Bouvier

photo persona
_ Homme, 32 ans
_ Montpellier
_ En couple
_ Designer produit

Tendances

Technophile
niveay
Sportif
niveau
Confiance en soi
niveau
Angoissé
niveau
heart

Tendances

• Très connecté
• Arriver sans changer ses habitudes à reprendre le contrôle de ses données personnelles
heart break

Freins

Le changement d'habitude numérique

Bio

Plutôt familière avec l'univers numérique, Aline a pourtant beaucoup de mal à appliquer les nouvelles règles de la RGPD dans son entreprise. Le domaine de l'édition travaille beaucoup avec la donnée, pour gérer des évènements, abonnements et newletters. Aline n'a ni le temps ni la formation pour s'occuper de ces changements qui sont assez peu accessibles pour une personne non formée à ces problématiques.

Réseaux

logo facebook
Facebook
logo instagram
Intagram
logo tweeter
Tweeter

Aline Albert

photo persona
_ Femme, 44 ans
_ Lyon
_ En couple, 2 enfants
_ Editrice pour les éditions Glénat

Tendances

Technophile
niveau
Sportive
niveau
Confiance en soi
niveau
Angoissée
niveau
heart

Tendances

• Très occupée
• Aimerait respecter le RGPD sans devoir embaucher un professionnel
heart break

Freins

La confiance en un nouvel outils numérique.

On retient :

_5 Identité de marque

- La charte

Palette
Couleurs primaires
Couleurs secondaires
#4E5E81
#FFFFFF
#EDEEF2
#FCC00F
#FDD96F
#959FB4
Police
image typographie aileron semibold
image typographie aileron semibold italic
image typographie aileron light
Aileron
_semibold
Aileron
_semibold italic
Aileron
_light
Illustrations
illustration instituion
hands illustration
illustration lock
illustration personnes
illustration ballon
illustration planete
illustration main
illustration clé
Icones
icone closeicone voiricone openicone  compte
icone marquesicone servicesicone tockensicone menuicone coffreicone filtreicone saerch
Palette
#4E5E81
#FFFFFF
#EDEEF2
#FCC00F
#FDD96F
#959FB4
Polices
image typographie aileron semibold
Aileron
_semibold
image typographie aileron semibold italic
Aileron
_semibold italic
image typographie aileron light
Aileron
_light
Illustrations
illustrations
Icones
icon menuicon servicesicon tokensicon entreprisesicon personneicon cadenas ferméicon cadenas ouverticon coffreicon voiricon demandeicon filtreicon  recherches

_6 Prototypes

- Des solutions viables

Après ces recherches nous avons constaté la nécessité de considérer non seulement l'internaute, mais également l'entreprise qui a besoin de la data pour transmettre un service, une information et qui souvent sait pas gérer cette information de façon sécurisée.

Nous avons imaginé pour résoudre ce problème un ensemble de 3 solutions qui permettent de transformer le vol et l'exploitation de données (volontairement ou non) en échanges consentis et légaux.
schéma solution

Le portefeuille

Le module

Le dashboard

Pour l'utilisateur :
Pour l'utilisateur et l'entreprise :
Pour l'entreprise :
Il permet à l'utilisateur de gérer ses données dans un seul et même endroit sécurisé dans lequel il peut ouvrir et fermer les accès à ses informations quand il le souhaite.
Il s'agit d'un module installé dans les application des entreprises qui permettent d'accueillir le portefeuille et de gérer la donnée en toute légalité.
[ Projet futur ]
‍Les données récupérées sont triées, organisées et surtout sont disponible ou indisponibles en fonction du consentement de l'utilisateurs.

Authentique

Fafa des bois travaille la matière brute, des objets de qualité avec soin et passion. Il est primordial que son site et sa communication reflète cette sincérité de création.
Ne pas négliger les détails de provenance, matériaux, chaque objet doit être totalement transparent, sincère.
Application :
exemple dans l'application

Humain

Il y a un humain derrière ces objets, des mains ont travaillé ce bois et poncé ce meuble ! Ces produits ne sortent pas de l'usine mais d'un atelier.
Application :
S'approprier les mots, les noms des objets, créer un petit monde où on peut sentir la créativité jusque dans les textes.
exemple dans l'application

Unique

Chaque pièce est unique et limitée. Elles sont travaillées avec soin et acquièrent une réelle personnalité. Il y a des séries mais pas d'objets manufacturés.
Application :
intégrer si possible une petite histoire à chaque objet, ou à certains.
exemple dans l'application
Enfin, les données de l'utilisateurs sont rémunérées grâce à une monnaie virtuelle qui permet le développement d'une économie circulaire et d'une fidélité intéressante pour les entreprise qui respectent le RGPD.

-  Le portefeuille de données

schéma application mobile

|  Arborescence

Nous avons créé un plan de l'application en triant les informations et les fonctionnalités. Cela donne une image claire de la structure de navigation.
arborescence application

|  sketchs

Le portefeuille de données est le premier concept imaginé par Olivier Nerot (CTO). Conçu avec un espace de gestion des autorisations, coté data et coté entreprise, un compte avec une clé blockchain permet à l'utilisateur de garder le contrôle sur l'activité de ses données personnelles.
tabeauprototype cto
Avec comme base le prototype du CTO, nous avons élaboré plusieurs structures d'applications au crayon afin d'éviter la perte de temps. Plusieurs réunions ont finalement mis un point final à la recherche papier avec l'interface ci-dessous.
sketch application

|  userflow

Nous avons élaboré plusieurs schémas afin de mieux visualiser le système de navigation de l'application. Ci-dessous l'un des schémas qui montre le cheminement d'un utilisateur qui veut bloquer l'accès à une donnée à partir de l'écran d'accueil de l'application s'il n'est pas connecté. L'ensemble de ses possibilités d'action sont prises en compte.
userfow application

|  Wireframes

Une fois toutes les possibilités abordées, nous avons commencé à créer les wireframes. Afin de mieux visualiser la navigation, l'architecture de l'information et la position de chaque élément du portefeuille. Cette étape a été longue car tous les écrans ont été créés et leurs navigation, hiérarchie revue en réunion plusieurs fois. Ci-dessous un aperçu des écrans réalisés.
application wireframesapplication wireframes

-  Le module

schéma module

|  sketchs

Afin de gagner du temps sur les wireframe nous avons élaboré des croquis afin de positionner les différents éléments.
sketchs module

|  Wireframes

Nous avons créé des wireframes afin de visualiser plus précisément les zones de navigation.
module wireframesmodule wireframes

|  userflow / démonstrateur

Des schémas de navigation utilisateur ont également été élaborés en grand nombre pour la conception du module. Nous avons également conçu des prototypes de démonstration en se basant sur les schémas ci-dessous.
userflow module 1
J'ai créé avec l'application d'Adobe Xd une maquette testable (non finalisée) pour enrichir la présentation du projet de mon entreprise.
Le format a été conçu pour convenir à un iphone 7. La présentation a pu se faire directement sur le portable grâce au partage de la maquette. L'application a pu être montrée et testée dans une ligne de code, de donc avec un gain de temps très important.
userflow module 2
Ce second parcours permet d'ouvrir au client une vision plus large en y incorporant ses partenaires qui ont également l'occasion d'acquérir des informations afin de proposer des services adaptés.

On retient :

_7 Final

- Le portefeuille de données

L'application générale est très importante pour la gestion de l'ensemble des données de l'utilisateur. Néanmoins, son installation et utilisation ne sont pas obligatoires. Elle est complémentaire du module et à destination d'utilisateurs qui désirent une maîtrise facilitée sur l'ensemble de leurs données. En revanche le compte se créer automatiquement avec l'inscription dans l'un des modules.
screen application onboarding
Onboarding
L'utilisateur, s'il n'est pas connecté, est accueilli dans l'application par un petit slider de présentation du concept du portefeuille de donnée.s
screen application inscription
Connexion
Pour se connecter il doit taper son nom et sa clé personnelle, qu'il obtient lors de sa connexion. L'option de détection faciale est possible mais limitée en fonction de la technologie du support.
screen application dashboard
Dashboard
Le dashboard, ou tableau de bord, donne une vision globale du rythme de l'utilisation de la donnée en fonction des autorisations accordées. Cet écran permet à l'utilisateur de vérifier en un coup d'œil si tout va bien mais également les possibilités qui s'offrent à lui.
screen application services
Services
La page service est le catalogue des offres accessibles grâce à la monnaie virtuelle de l'application. L'utilisateur peut profiter des offres des entreprises s'il consent à partager certaines données avec celles-ci. Les offres sont alors ciblées, pertinentes et l'utilisateur comme l'entreprise sont gagnants.
screen application entreprises
Portefeuille > entreprises
Le portefeuille de données est le cœur de l'application: c'est ici que l'utilisateur a la liberté de couper les accès à ses données aux entreprises avec lesquelles il ne veut plus avoir de lien. Cette action de désactivation demande une confirmation car elle est immédiate et peut bloquer les comptes en cours dans ces entreprises. L'utilisateur peut également ouvrir le lien de l'entreprise ou voir le détail.
screen application filtre
Portefeuille > entreprise > filtre
L'utilisateur peut rapidement avoir un grand nombre de données partagées - ou non - et d'entreprises. Afin de faciliter la recherche d'un ou plusieurs de ces éléments, il a accès à un filtre.
screen application entreprise détail
Portefeuille > entreprise > détail entreprise
Lors du clic sur une entreprise, l'utilisateur arrive dans le détail de celle-ci. Il peut alors voir les offres de l'entreprise, les données dont elle a besoin ainsi que les données qu'il a autorisé.
screen application données
Portefeuille > données
La seconde partie du portefeuille est plus globale et concerne les données. L'utilisateur peut quand il le souhaite désactiver l'une de ces données s'il en ressent le besoin, mais elle sera désactivée dans l'ensemble des entreprises avec lesquelles il a un lien. Cette manipulation étant délicate, il sera à nous veau confronté à un écran de vérification afin d'éviter toute erreur de manipulation.
screen application donnée détails
Portefeuille > données > détail donnée
De la même manière que le détail des entreprises, les utilisateurs peuvent visualiser le détail des données et désactiver de façon plus précise l'accès de celle-ci dans les entreprises de son choix. Il peut également modifier sa donnée qui sera automatiquement modifiée pour toutes les entreprises y ayant accès.
screen application demandes
Demandes
Les entreprises peuvent émettre des demandes de données si elles en ont besoin. L'utilisateur peut les accepter ou non, et gagne de la monnaie virtuelle qu'il pourra dépenser avec les offres de "services".
screen application compte
Compte
La partie compte permet la gestion des informations personnelles mais également de donner son contact grâce à un QR code. Les personnes possédant le QR code pourront envoyer des demandes de données à l'utilisateur.
screen home
screen produits
screen fiche produit
Accueil
Suite à l'animation du logo qui marque l'entrée dans l'application, l'utilisateur est invité à découvrir l'univers de Fafa des bois, ou à parcourir les créations au hasard du scroll.
Page produits
Les pages produits présentent ceux-ci avec une touche personnelle et donnent un aperçu de la qualité des produits en spécifiant les matériaux.
Fiche produit
Elle est totalement transparente sur la provenance mais va plus loin en dévoilant les histoires des objets ainsi que leur description détaillée.
screen favoris
screen compte
screen panier
Favoris
Peu d'actions sont proposées dans les favoris, l'idée est de faire passer les articles de favoris à panier le plus facilement possible.
Compte
Le compte permet de gérer rapidement son historique, données et mot de passe le plus efficacement possible.
Panier
Les articles étant souvent uniques, le panier permet de demander une réservation pour les coups de cœur. Le bouton de panier est exceptionnellement imposant et coloré afin d'attirer le regard. Sa position, au plus près du doigt permet une action rapide.

- Le module

Le module permet aux entreprises d'externaliser les données clients dans une espace tierce qu'elles ne gèrent pas, ce qui facilite grandement le respect des lois RGPD. Elles peuvent tout de même avoir accès aux données clients pour personnaliser leurs services mais seulement avec le consentement éclairé et consenti de celui-ci.
screen tunnel d'achat étape connexion
screen tunnel d'achat étape livraison
screen tunnel d'achat étape vérification
Connexion
Il est possible de commander en tant qu'invité, ce qui permet à l'utilisateur de réduire le nombre de données qu'il entre dans l'application, gain de temps et de confiance.
Livraison
En plus des classiques "à domicile" et "en point relais", l'acheteur peut également demander un rendez-vous et aller chercher le meuble sur place. Une option qui rappelle que l'on fait achat avec un artisan !
Vérification
Cette étape, très importante, permet de diminuer drastiquement le stress de l'utilisateur. Il peut supprimer un article mais le retour arrière est très facile. Des options lui permettent de faire un cadeau ou d'ajouter des articles.
screen tunnel d'achat étape paiement
screen tunnel d'achat étape confirmation
Paiement
Les logos sont très importants pour rassurer l'acheteur dans son achat en ligne. L'option Paypal permet aussi d'accentuer la confiance, et pour l'acheteur de ne pas rentrer sa carte s'il n'en a pas l'envie.
Confirmation
La confirmation de l'achat met un point final à la commande et permet de suivre son achat par mail, seul moyen pour les acheteurs invités de voir leur commande.
Screen accueil
1 - Accueil
Lors de l'envoi de documents à l'agence, l'utilisateur se retrouve devant un écran intermédiaire qui lui permet de continuer (ou d'arrêter) sa démarche de partage de données de façon transparente.
Screen inscription
2 - Inscription
L'utilisateur crée son compte et autorise le partage des données entrées.
Screen confirmation
3 - Confirmation
Après la création du compte, l'étape de confirmation l'informe que ce compte lui servira désormais dès qu'il rencontrera un module Myco.
screen module dossier
4 - Partage du dossier
L'utilisateur entre ses données dans l'espace tiers et, plutôt que d'envoyer à l'entreprise ses données, lui partage momentanément.
Screen chargement
5 - Encryptage des données
Les données sont encryptées et l'utilisateur est le seul à pouvoir autoriser l'accès grâce à sa clé créée plus tôt. Tout est géré automatiquement.
Screen chatbot
Le chatbot
Un espace est dédié aux échanges concernant le bien. L'utilisateur peut gérer la visite et les propositions de l'agence depuis ce chat.
Screen partenaires
Les formulaires partenaires
Avec l'autorisation du client, l'entreprise peut proposer les formulaires de ses partenaires qui proposent par la suite des offres personnalisées aux besoins de l'utilisateur dans la partie "services" du module.
Screen services
Les services
Ces offres se retrouvent classées en fonction de leurs catégories. Ci-dessus, des entreprises de déménagement professionnelles ont pu grâce aux données partagées du formulaire proposer des offres très précises.
Screen datas
Panier
L'utilisateur peut à tout moment désactiver le partage de ces données dans la partie "données". Il retrouve un espace semblable à l'application portefeuille mais qui ne permet de gérer que les données en rapport avec l'application de l'entreprise. Il retrouvera ces mêmes données dans son portefeuille.

- Les sites institutionnels

En guise de vitrine de nos projet, nous avons créé des sites institutionnels contenant les informations destinées aux utilisateurs. Le premier est destiné aux utilisateurs qui cherchent une solution pour protéger leurs données, le second aux utilisateurs désirant des solutions pour leurs entreprises. Ces sites ne sont plus en lignes depuis quelques mois suite à la refont de la charte graphique, ci-dessous leurs home.
site institutionnel 1 screenshot site institutionnel 2 screenshot

_8 Points clés

Ce que j'ai appris :

Mes autres projets

TOP