UX
D e s i g n
2 0 1 8 P O R T F O L I O
7
17
Présentation
11
Tisséo
Mac Donald’s
21
TRACKBOX
27
Follow Me
Sommaire
23
MetĂŠo App
UX / UI Designer
FORMATION MASTER EXPERT EN STRATEGIE DIGITALE UX / UI Designer 2018-2020
Digital Campus Toulouse
LICENCE ARTS APPLIQUÉS
Design prospective et société 2015 / 2018
Université Toulouse 2 Jean Jaurès
LICENCE 1 ARTS PLASTIQUES Arts plastiques 2014 / 2015
Université Robert Schuman ALLSH / Aix- en- provence
BAC PROFESSIONNEL
Technicien économie de la construction 2008 / 2009 Lycée professionnel Urbain Vitry / Toulouse
BEP
Techniques de l’architecture et de l’habitat 2008 / 2009 Lycée professionnel Urbain Vitry / Toulouse
6
Au fil des années, ma curiosité et mon ouverture d’esprit m’ont attiré vers le design. Aujourd’hui je m’intéresse et j’investies une grande partie de mon temps à la veille du monde digital et son impact sur notre société. Ainsi, j’ai choisi d’exercer le métier d’UX designer pour mettre en pratique ma passion, mes expériences, mes difficultés et mes efforts. En effet, je souhaite comprendre et saisir les enjeux du comportement humain afin de proposer une expérience digitale aussi créative que réfléchie qui vont élargir ma vision de la communication et du marketing de demain. Aujourd’hui, nous vivons dans un monde où la technologie est omniprésente et évolue rapidement au même titre que le digital. Nous sommes de plus en plus en interaction avec les machines et les intelligences artificielles qui nous accompagnent quotidiennement dans le processus de consommation, de divertissement ou d’achat. Dans les années à venir les grandes multinationales vont modifier notre écosystème ainsi que nos habitudes de consommation et c’est dans cette optique que j’aimerai participer à cette révolution numérique et technologique et ainsi devenir un des nombreux acteurs qui vont créer pour le bien être et le confort de la société de demain. De ce fait, l’innovation étant un des moteurs de ma motivation, je souhaiterai être au coeur de changement de demain en participant à la conduite de projets digitaux.
7
Ité ra t i o n
Dévelo ppe m e n t
Rech erch e
User Expérience
Te s t s / R e to u rs
Ana lys e
Con ception
8
UX
/
UI
Pro ce ssu s
UX
Un bon design est basé sur un solide processus de développement et de recherches qui va débuter avec une empathie et une impartialité lors de l’exploration et la découverte d’un problème. Chercher et découvrir les racines du problème vont faire naitre l’innovation.
Pl an i f i er
R e ch erh es d é t a illées
Chaque projet commence avec un planning afin de pouvoir fixer des objectifs réalistes tout en respectant les délais
Résultats de recherches détaillés Interviews Comparaisons Analyses utilisateurs Statistiques utilisateurs Cartographies sites / apps
Rech erch e s U ti l i s ateu r
Te s t s /I téra t ion / R é pét it ion
Comprendre l’utilisateur Interviews utilisateurs Création adaptée Scénarios utilisateurs Etablir une structure utilisateur
Tester le produit afin de prendre en compte le retour utilisateur et modifier le produit
9
Design / Con cept ion
Transférer les idées et croquis en expérience digitale de haute qualité
WIREFRAMES (Adobe XD,Sketch) PROTOTYPES(InVision)
Livra ison
T i s s é o A p p l i c a t i o n
Tisséo est la marque commerciale du réseau de transports en commun de Toulouse et sa région qui l’an dernier à titre d’exemple à validé pas moins de 183 millions de tickets, chiffre en constante évolution. Le design ici présenté se veut jeune et dynamique à l’image d’un groupe en quête de modernité et d’efficacité. En dehors de moderniser l’application déjà existante et disponible sur l’App Store, Android et Microsoft Store, l’idée ici est de proposer des améliorations afin de proposer une expérience d’utilisation basée sur facilité d’accès aux informations, une prise en main intuitive de l’application mais aussi l’accompagnement en temps réel aux voyageurs. Une des nouveautés proposée ici est d’offrir un confort supplémentaire aux personnes en situation d’handicap avec le système Wake Up permettant à ces derniers de se situer sur la ligne empruntée mais aussi de se préparer en toute sécurité à la descente des différents moyens de transports mis à leurs dispositions (Métro, Trams, Bus).
Statut / Projet
Concept Mise à jour application / Nouvelles fonctionnalités
Travail 10
Design visuel UX
11
W i r e f r a m e
Accueil Accés aux comptes clients
Guidage / temps réel Situation du voyageur Temps et distance restante
Guidage / temps réel Situation du voyageur Personnalisation éléments guidage
12
Compte client Infos personnelles Trajets favoris Trafic temps réel (Cartographie)
Accueil
A r c h i t e c t u r e
Pass
Destinations
Informations Carte pastel
Informations Ticket
Destination ponctuelle
Destination régulière/Favoris
Validité
Validité
Choix destination
Définitions Destinations régulières
Renouvellement
Informations trajet
Trafic
Carte
Choix ligne
Géolocalisation
Domicile Travail Centres d’interêts
Quotidien Destination
Horaires difficultés Prochains passages
Correspondance Sortie la plus proche
Relai
Velib’
UBER/Taxis
Informations
Réservations
Disponibilté dêpot
Location Informations
Ouverture application
13
Actualités
Réservations
Disponibilté dêpot
Journaux Nouveautés
I n t e r f a c e
g r a p h i q u e
u t i l i s a t e u r
Une attention particulière aux détails à été portée dans ce projet afin de donner rapidement toutes les informations les plus souvent usités par les voyageurs.
Identification du transport Départ et terminus de la ligne/ Sens de circulation
Arrêt de destination utilisateur/ Temps estimé d’arrivée L’utilisateur rentre son adresse ou place un repére sur la carte et l’application va lui indiquer l’arrêt le plus proche où il devra descendre
Heures de présence
Le temps estimé avant arrivée s’adapte en fonction de l’état de circulation Tracé de la ligne
Prochain arrêt
Indication des arrêts effectués
Retour au menu principal
14
WAKE UP Le système Wake Up se veut prévoyant en prévenant les utilisateurs en situation d’handicap à l’approche de la destination demandée. Ainsi trois arrêts avant la destination finale un système de vibrations successives vont prévenir les voyageurs de la proximité de leur arrêt final. Cette anticipation va permettre aux usagers de se préparer à la descente en toute sécurité, et ce peut importe la situation du transport emprunté: bruits, gênes visuelle ou tout autres facteurs pouvant générer une situation de stress ou difficile.
1 vibration / 1 sonnerie =Arrêt de descente
2 vibrations / 2 sonneries =1 Arrêt avant descente
15
3 vibrations / 3 sonneries =2 Arrêts avant descente
16
M c D o n a l d ’ s D E L I V E R Y A p p l i c a t i o n /
I n t e r f a c e
Dans l’optique du lancement d’un service de livraison à domicile en partenariat avec les spécialistes de la livraison comme UBER EATS entre autres, Mac Donald’s DELIVERY est une plateforme de prise de commande rapide et intuitive disponible aussi bien sur ordinateurs que sur terminaux mobiles. Le design à été pensé afin de gagner du temps sur la prise de commande, notamment avec un système de Cover flow qui va permettre sur la même page de composer un menu intégralement mais aussi de proposer des produits complémentaires. L’idée ici est de proposer une carte interactive et intuitive pour guider au mieux les clients dans leurs choix tout en gagnant du temps lors de la prise de commande afin de proposer une expérience d’utilisation basée sur une facilité d’accès aux informations et de prise en main intuitive de l’application mais aussi la localisation en temps réel de leurs commandes afin de se préparer à accueillir le prestataire de livraison.
02
Statut / Projet
Concept
Création application
Travail Design visuel UX
17
W i r e f r a m e
Connexion Accès aux comptes clients
Prise de commande Visualisation sur 3 volets accélérant la prise de commande
Validation/Finalisation Récapitulatif des produits séléctionnés/Montant à règler
18
Livraison en cours Situation de la commande en temps réel/Communication avec livreur
I n t e r f a c e
g r a p h i q u e
u t i l i s a t e u r
1/ Connexion
2/ Commande
3/ Paiement
4/ Livraison
19
0 20
03 Statut / Projet
T R A C K B O X A p p l i c a t i o n
Concept
Application de suivi
Travail
Design visuel UX
Qui n’est jamais resté impatient à attendre un colis en guettant le facteur par la fenêtre? TrackBox est une application permettant de savoir où se trouve en temps réel un colis et lettres envoyée où en attente de réception en permanence.
21
M E T E O A p p l i c a t i o n
A P P
Connaître la météo en un coup d’oeil au fil de la journée ou plus est désormais possible avec cette application car cette dernière se veut claire en ne donnant que les informations utiles sans tomber dans l’excès. Efficace sa grande force réside dans son fonctionnement de roulette qui va faire défiler les événements et changements météorologiques sur une durée choisie en modifiant bien entendu les informations de manière dynamique (changements de pictogrammes et diagrammes). L’idée est de donner les informations «basiques» à travers une interface unique à la fois moderne et épurée de tout élément superflu.
Statut / Projet
Concept Application météorologique
Travail 22
Design visuel UX
23
I n t e r f a c e
g r a p h i q u e
u t i l i s a t e u r
Localisation utilisateur
Options / Profil utilisateur Point d’accroche temporel utilisateur
Cercle journalier Aperçu pictural de la situation météo actuelle
Températures minimale et maximale
Température actuelle Situation météorologique actuelle
Evénements météo graphiques Repère horaire
Informations complémentaires
24
25
FA p O L L O W p l i c a t i o n
m e Qui ne s’est jamais retrouvé perdu dans le labyrinthe qu’est un aéroport? Follow Me est une application qui permets aux voyageurs passant d’un aéroport à l’autre d’être pris en charge et guidé à travers les différentes étapes du processus aéroportuaire que nous connaissons tous qui vont de l’arrivée à l’aéroport au décollage de l’appareil en passant par l’enregistrement des bagages. Utilisant les bornes Wifi des aéroports partenaires cette application est capable de diriger les voyageurs avec une marge d’erreur de l’ordre de quelques mètres, cette précision permet de mettre en place une cartographie 3D du site sur la quelle va s’appuyer l’application pour permettre l’accompagnement efficace du client en s’appuyant sur l’Augmented Reality.
Statut / Projet
Concept Application guidage voyageurs
Travail 26
Design visuel UX
27
I n t e r f a c e
Etape 1: Arrivée
Guidage Géolocalisé+AR vers l’étape suivante
g r a p h i q u e
Etape 2: Enregistrement
Guidage Géolocalisé+AR vers l’étape suivante
u t i l i s a t e u r
Etape 3: Contrôles de sécurité Guidage Géolocalisé+AR vers l’étape suivante
28
Etape 4: Embarquement
Guidage Géolocalisé+AR vers l’étape suivante
Etape 5: Décollage
Profil client
Logo compagnie aérienne du vol Identification du vol Etape picturale Etape textuelle
Accés carte d’embarquement Informations sur le vol: Destination et horaires Pourcentage des étapes effectuées
29
I n t e r f a c e
g r a p h i q u e
u t i l i s a t e u r
Retour
Informations sur le vol/ Alerte
Logotype du commerce
Illustration du commerce/ repère visuel
Avis clients
Avis clients
Annonce commerciale et produits vendus
Accéssibilité à la carte d’embarquement
30
A S S I S T A N T L’application à une fonction d’assistance afin de subvenir aux multiples besoins de voyageurs, des plus courants aux plus spécifiques. L’utilisation d’icônes de type pictogramme permets une plus grande rapidité de lecture des services proposés et permet également une animation visuelle qui va venir faire vivre l’interface, le rendre utilisable par tous.
31
Localisation de l’aéroport/informations
Accès à l’espace client
Plan dynamique et manipulable par l’utilisateur
Estimation du trajet le plus court
Passage à l’option «Augmented reality»
Accéssibilité à la carte d’embarquement
Informations sur le vol/ Alerte
32
33
W i r e f r a m e
Accueil
Connexion/Infos sur le vol Accès aux comptes clients et ddemande d’informations de vol (Scan ou manuel)
34
Aperçu du trajet Visualisation de l’itinéraire total
Etape 1: Arrivée Récapitulatif des produits séléctionnés/Montant à règler
Etape 2: Enregistrement
Etape 3: Contrôles de sécurité
Guidage Géolocalisé+AR Guidage Géolocalisé+AR vers vers l’étape suivante l’étape suivante
Etape 4: Embarquement
Etape 5: Décollage
Guidage Géolocalisé+AR vers l’étape suivante
35
Augmented Reality Guidage en temps réel du voyageur du point A au point B
Merci
CONTACT