SlideShare une entreprise Scribd logo
Design.
De l’idée au produit.
Donner forme.
HETIC #4 - Mars 2014
Concevoir :
utiliser une
démarche.
Chercher
Comprendre
Imaginer
Réaliser
Implémenter
Optimiser
une démarche
organique…
utilisateurs/
usagers
CONCEPT/CREATIVITE
environnement
marque
entreprise
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST AMELIORATION/OPTIMISATION
accompagnement
événementévolution
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
utilisateurs/
usagers
CONCEPT/CREATIVITE
environnement
marque
entreprise
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST AMELIORATION/OPTIMISATION
accompagnement
événementévolution
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
Ecosystème
utilisateur
CONCEPT/CREATIVITE
Ecosystème
marché
Ecosystème
client
Contenu
Interaction
Interface
Identité
Visuelle
PROTOTYPE/TEST
#1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER
Les principes Design
Concept/créativité
Positionnement
produit/service
Valide
Spécifie
Ajuste
Contenu
Interaction
Interface
Identité
Visuelle
PROTOTYPE/TEST
Accompagnement
CommunicationEvolution
#2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER
esign
vité
ent
ce
Valider le produit
Spécifier le produit
Ajuster le produit
#2
Imaginer
Réaliser
contenu
interaction
interface
aspects
visuels
PROTOTYPE/TEST
Taxonomie / Catégoriser
http://www.headict.com/
Structuration du contenu
(zoning)
Architecture de l’information
ÉNONCER CATÉGORISER STRUCTURER
contenu
Vous travaillez sur un site de contenu
spécialisé à destination du public et des
collectivités locales.
Comment structurez-vous cette
information ?
playground !
S’INFORMER ÉCHANGER TROUVER UN EMPLOI
L'actualité Droit des collectivités
Emploi Carrière
Accueil Emploi
Réseaux professionnels
Espace candidat
Forums
L'essentiel des 7 derniers jours
Europe
Régions
France
Dossiers d'actu
Documents utiles
Opinions
Visualisation de donnéesConcours
Rémunération
Statut
Dossiers emploi
Guide des avantages sociaux
Veille juridique
Textes officiels
Jurisprudence
Réponses ministérielles
Dossiers juridiques
Fiches de droit pratique
Actu juridique
Espace candidat
Inscription
Inscription
Mon CV
Mes alertes e-mail & RSS
Mes candidatures
Mes offres mémorisées
Les derniers messages
Concours
Statut
Entraide
Rechercher une offre
Toutes les offres
Accès candidat
Accès recruteur
Les recruteurs
Ressources humaines
Finances
Technique
Informatique
Informatique
Prévention-sécurité
S’INFORMER
L'actualité
L'essentiel des 7 derniers jours
France
Régions
Europe
Dossiers d'actu
Documents utiles
Opinions
Visualisation de données
Droit des collectivités
Veille juridique
Textes officiels
Jurisprudence
Réponses ministérielles
Dossiers juridiques
Fiches de droit pratique
Actu juridique
Emploi Carrière
Concours
Rémunération
Statut
Dossiers emploi
Guide des avantages sociaux
ÉCHANGER
Forums
Les derniers messages
Concours
Statut
Entraide
Réseaux professionnels
Ressources humaines
Finances
Technique
Informatique
Prévention-sécurité
TROUVER UN EMPLOI
Accueil Emploi
Rechercher une offre
Toutes les offres
Accès candidat
Accès recruteur
Les recruteurs
Espace candidat
Inscription
Mon CV
Mes alertes e-mail & RSS
Mes candidatures
Mes offres mémorisées
Contenu fonctionnel
interaction
interface
Prototype papier
Workflow/site map
Flow Chart
Tests
3 phases de test peuvent être définie pendant la phase de conception.
#1 - un prototype “basse définition”
(à l’état de croquis ou gabarits fonctionnels, pour illustrer les
enchaînement d’écran)
!
#2 - un prototype “haute définition”
(avec des contenus réaliste, visuels, textuels...)
!
#3 - une version Beta avant le lancement officiel
(futur produit, qui permet de crééer une communauté autour du
lancement)
aspects
visuels
« La qualité esthétique
signifie parler de nuances,
quelquefois de fractions d’à
peine un millimètre,
de graduations très subtiles,
ou de l’harmonie et de
l’équilibre de plusieurs
éléments visuels
fonctionnant ensembles. »
!
Dieter Rams
La théorie du Gestalt
La psychologie de la forme ou gestaltisme (de
l'allemand, Gestaltpsychologie) est une théorie
psychologique, philosophique et biologique, selon
laquelle les processus de la perception et de la
représentation mentale traitent spontanément les
phénomènes comme des ensembles structurés (les
formes) et non comme une simple addition ou
juxtaposition d'éléments.
La théorie du Gestalt
Loi de la proximité
Regrouper les objets les plus proches
des uns des autres
La théorie du Gestalt
Loi de similitude
Quand la distance ne peux regrouper les objets
il faut les distinguer par leur forme
La théorie du Gestalt
Loi de la cloture
Notre perception remplit les vides des formes
qui ne sont pas fermés
La théorie du Gestalt
Loi de la symétrie
Notre esprit perçoit les objets comme étant symétriques et se
construisant autour d’un point central. C’est à la fois plus facile et plus
rassurant de pouvoir séparer visuellement plusieurs objets en un nombre
égal d’éléments symétriques.
Lorsque nous voyons deux éléments symétriques qui n’ont pas de lien
entre eux, nous allons naturellement les associer pour composer une
forme cohérente.
Le nombre d’or
a b
a+b / a = a/b = 1,618…= Phi
Le restangle d’or
593 px 367 px
La règle du 1/3, 2/3
Harmonie des couleurs
Les grids systems
16 colonnes
identité visuelle
P A L I C O
QUADRICHROMY CMYK .50 .0 .0 .90
EXADECIMAL #16303A
QUADRICHROMY CMYK .79 .40 .34 .18
EXADECIMAL #347083
QUADRICHROMY CMYK .39 .8 .13 .0
EXADECIMAL #A7CDDB
QUADRICHROMY CMYK .0 .36 .94 .0
EXADECIMAL #F8AF0D
QUADRICHROMY CMYK .31 .20 .20 .2
EXADECIMAL #192D38
QUADRICHROMY CMYK .11 .6 .7 .0
EXADECIMAL #E8EAEB
DIN Round Regular
ABC
DEFGH
IJKLMNO
PQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
DIN Round Medium
ABC
DEFGH
IJKLMNO
PQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
QUADRICHROMY CMYK .50 .0 .0 .90
EXADECIMAL #16303A
QUADRICHROMY CMYK .79 .40 .34 .18
EXADECIMAL #347083
QUADRICHROMY CMYK .39 .8 .13 .0
EXADECIMAL #A7CDDB
DI
A
D
IJ
PQ
ab
no
0 1
typographie
TITRA ROSA ROSÆ
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem
Ipsum has been the industry's standard
dummy text ever since the 1500s, when an
unknown printer took a galley of type and
scrambled it to make a type specimen book.
!
TITRA ROSA ROSÆ
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem
Ipsum has been the industry's standard
dummy text ever since the 1500s, when an
unknown printer took a galley of type and
scrambled it to make a type specimen book.
!
!
!
TITRA ROSA ROSÆ
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since
the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type
specimen book.
!
TITRAROSAROSÆ
Lorem Ipsum is simply dummy
text of the printing and
typesetting industry.
!
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
!
!
La typographie a ses
propres règles d’usages.
Le petit manuel de composition typographique
iconographie
http://www.responsiveicons.co.uk/
maquettes
graphiques
mise en scène de contenu
Implémenter / Optimiser
accompagnement
événements
évolution
évolution technologique rajouter plein de devices
Official Vancouver 2010 Olympic
par Get Elastic (Elastic Path)
• Trop de bannières qui crée un désordre
pour la lisibilité
!
• La navigation n’est pas visible en
dessous du fold et ne ressort pas assez
!
• La taille des photos produit est trop
petite et ne
donne aucune indication sur les coloris
optimisation
Test A Test B
!
• Réduire le nombre de zones commerciales
pour accroître leur lisibilité
!
• Présenter de façon plus visible et claire la
navigation de second niveau
!
• Donner des indications sur les alternatives
de couleurs des produits
!
• Augmenter la taille des photos dans la zone
“Nouveautés”, “Les plus populaires”
Sur 2053 transactions réalisées pendant 21 jours le test n’est pas significatif mais
nous pouvons en sortir les points suivants qui permettent de dire que la version A est
la meilleure :
!
!
• La version A convertit à 3,14% de plus que la version originale
!
• Réduction de 12,24% du taux de rebond
!
• Une augmentation du taux de transformation global de 0,59%
!
• La valeur moyenne des commandes est de 5,16% plus importante.
Une méthodologie
design,
c’est un coût...
Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL
STEP 1 : Immersion & expérience shopping Objectifs ? Où ?
Kick Off
_Exprimer le pitch et les objectifs du projet
_Rencontrer l’ensemble des personnes impliquées et
préciser les rôles de chacun
_ Apporter de la visibilité sur le déroulement du projet
Edition atlas 0,5 0,5 0,5 0,5 0 €
Interview des personnes impliqués dans le projet (produit,
marketing, e-commerce…)
_ Découvrir l’entreprise et comprendre ses spécificités
_ Collection l'information stratégique (stratégie,
positionnement, offre, organisation...)
_ Collecter des informations métiers (ex produits, logistique,
IT relation client, acquisition...)
Edition atlas 1 3 1 2 0 €
Benchmark Web / Mobile _commandes tests
_pige web & mobile
0,5 4 1 0 €
Définition de l'expérience shopping
_définition de l’expérience shopping et des leviers de
différenciation
_Design principes
_User research
Edition atlas 4 10 2 3 0 €
Architecture de l'information & merchandising
_Définition précise du référentielle et des spécificités produits
_Organisation des produits / contenus / fonctionnalités /
services
_Concept e-merchandising
_Parcours de navigation
Edition atlas 3 3 7 3 0 €
Scope
_Cadrer la v1 du projet
_Apporter de la visibilité sur l’évolution du site et assurer son
évolutivité
_Anticiper les besoins de contenu et de développements
techniques
Edition atlas 0,5 2 2 0 €
TOTAL Cadrage 0,00 €
Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL
1 100 € 750 € 750 € 650 € 700 € 750 € 750 €
STEP 2 : Design / Intégration / Spec Quoi ? Où ?
Identité
_Workshop Plateforme de marque
_Vocabulaire de forme illustrant les valeurs de marque
_ Logo (3 propositions / 2 A/R) & Nom
_ Charte identitaire / Brand book
_ Papeterie non incluse
Edition
Atlas /
Altima
4 15 10 2 0 €
Descente produit & principe de navigation
_ HomePage
_ Page catégorie
_ Fiche produit
Edition
Atlas /
Altima
0,5 2,75 3,75 4,75 4,65 0 €
Quizz & inscription
_Quizz
_Process d'inscription
Edition
Atlas /
Altima
1 5,5 3,5 5,5 3,1 0 €
Check Out
_ Panier
_ Process de commande (livraison / paiement)
Edition
Atlas /
Altima
0,5 5,5 3,5 5,5 3 0 €
Compte Client
_ Mon compte
_ Mes commandes
_ Mes adresses
_ Ma personnalisation
Edition
Atlas /
Altima
0 4 3 4 2,2 0 €
Formulaire de contat _Page Contact
Edition
Atlas /
Altima
0 0,75 0,25 0,75 0,35 0 €
Template style _templace reco style
Edition
Atlas /
Altima
0,5 2 1,5 2 1,2 0 €
Template Mail
_Template mail confirmation de commande
_Template Welcome pack (inscription à la newsletter /
création de compte)
_ Template mail Newsletter nouveau set
Edition
Atlas /
Altima
0 2,25 0,75 2,25 1,05 0 €
Le concept _ Template présentation du concept
Edition
Atlas /
Altima
0,5 2,75 1,75 2,75 1,55 0 €
Press _ Template vu dans la presse
Edition
Atlas /
Altima
0 1 0,75 1 0,55 0 €
Egérie _ Présentation des égéries
Edition
Atlas /
Altima
0 1 0,75 1 0,55 0 €
Testimoniaux _Testimoniaux clients
Edition
Atlas /
Altima
0 1 0,75 1 0,55 0 €
Templates pages institutionnelles
_ FAQ
_Mentions légales
_Job
_CGV
_Services
_A propos
Edition
Atlas /
Altima
0 4,5 1,5 4,5 2,1 0 €
Page Facebook _Custom e la page facebook
Edition
Atlas /
Altima
0 1,75 1 1,75 0,9 0 €
Charte graphique on-line _ Charte graphique Web Intéractive
Edition
Atlas /
Altima
2 8 4 2 0 €
TOTAL Cadrage 0,00 €
TOTAL REFONTE 0,00 €
Budget hors taxe & hors achats d'artsBudget hors taxe & hors achats d'arts
Le rôle du chef de projet coordination globale
Participation, suivi et encadrement des différentes phases
Rédaction des spécifications fonctionnelles
Recettage des livrables html
contenu
Réinventer Le Temps.
Au travers d’un nouvel usage simple, d’une
nouvelle lecture du temps, ou simplement une
idée qui permet de gagner du temps, illustrer
un concept de manière structurée et
argumentée.
playground !
Application Par Ici la sortie
Séquençage du film Matrix, chaque image est associé à une couleur du film pour au final en créer un barcode -
moviebarcode.tumblr.com
merci.

Contenu connexe

Tendances

Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
Stratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOMStratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOM
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
IANTERNAUTE
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
Sylvie Daumal
 
Le guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en designLe guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en design
Geoffrey Dorne
 
« Dans quelle mesure la relation entre client et designer graphique peut-elle...
« Dans quelle mesure la relation entre client et designer graphique peut-elle...« Dans quelle mesure la relation entre client et designer graphique peut-elle...
« Dans quelle mesure la relation entre client et designer graphique peut-elle...
Geoffrey Dorne
 
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
Flupa
 
L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016
Christophe Clouzeau
 
6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception
Laurent Barbat
 
Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016
Nicolas Samir
 
Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »
Thomas Le Mouellic
 
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
Flupa
 
4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > Synthèse4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > Synthèse
Laurent Barbat
 
Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...
Geoffrey Dorne
 
Design Thinking & user expérience
Design Thinking  & user expérienceDesign Thinking  & user expérience
Design Thinking & user expérience
Mustapha BOUBEKRI, MBA, PMP, PMI-ACP
 
Design Thinking & UX/UI
Design Thinking & UX/UIDesign Thinking & UX/UI
Design Thinking & UX/UI
Évolt
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
Microsoft Technet France
 
Création de logos professionnels (design de logo partie 9)
Création de logos professionnels (design de logo partie 9)Création de logos professionnels (design de logo partie 9)
Création de logos professionnels (design de logo partie 9)
Oolong Media
 
Comprendre Le processus du dessin d’un logo d'entreprise
Comprendre Le processus du dessin d’un logo d'entrepriseComprendre Le processus du dessin d’un logo d'entreprise
Comprendre Le processus du dessin d’un logo d'entreprise
Oolong Media
 
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
Flupa
 
Identité d'entreprise ou de marque : le nom, la signature et le logo
Identité d'entreprise ou de marque : le nom, la signature et le logoIdentité d'entreprise ou de marque : le nom, la signature et le logo
Identité d'entreprise ou de marque : le nom, la signature et le logo
Vincent Pereira
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 

Tendances (20)

Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
Stratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOMStratégie Créative I le F***ing Brief  I ian gilbert  I  ISCOM
Stratégie Créative I le F***ing Brief I ian gilbert I ISCOM
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
 
Le guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en designLe guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en design
 
« Dans quelle mesure la relation entre client et designer graphique peut-elle...
« Dans quelle mesure la relation entre client et designer graphique peut-elle...« Dans quelle mesure la relation entre client et designer graphique peut-elle...
« Dans quelle mesure la relation entre client et designer graphique peut-elle...
 
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
 
L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016
 
6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception
 
Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016
 
Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »
 
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
FLUPA UX-Days 2016 - "Pitch l'UX Design à ta grand-mère... et sois convaincan...
 
4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > Synthèse4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > Synthèse
 
Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...
 
Design Thinking & user expérience
Design Thinking  & user expérienceDesign Thinking  & user expérience
Design Thinking & user expérience
 
Design Thinking & UX/UI
Design Thinking & UX/UIDesign Thinking & UX/UI
Design Thinking & UX/UI
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
 
Création de logos professionnels (design de logo partie 9)
Création de logos professionnels (design de logo partie 9)Création de logos professionnels (design de logo partie 9)
Création de logos professionnels (design de logo partie 9)
 
Comprendre Le processus du dessin d’un logo d'entreprise
Comprendre Le processus du dessin d’un logo d'entrepriseComprendre Le processus du dessin d’un logo d'entreprise
Comprendre Le processus du dessin d’un logo d'entreprise
 
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
Flupa UX - Days 2017 : "Idéation et créativité en mode design sprint" par S.D...
 
Identité d'entreprise ou de marque : le nom, la signature et le logo
Identité d'entreprise ou de marque : le nom, la signature et le logoIdentité d'entreprise ou de marque : le nom, la signature et le logo
Identité d'entreprise ou de marque : le nom, la signature et le logo
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 

En vedette

SXSW 13: Why Designers Should Care About Measuring Success
SXSW 13: Why Designers Should Care About Measuring SuccessSXSW 13: Why Designers Should Care About Measuring Success
SXSW 13: Why Designers Should Care About Measuring Success
Alfred Lui
 
Perspective et enjeux du design.
Perspective et enjeux du design.Perspective et enjeux du design.
Perspective et enjeux du design.
ツ Thomas Nicot
 
Building a Story World
Building a Story WorldBuilding a Story World
Building a Story World
power to the pixel
 
Baromètre de l'Experience Marchande Connectée 2014
Baromètre de l'Experience Marchande Connectée 2014Baromètre de l'Experience Marchande Connectée 2014
Baromètre de l'Experience Marchande Connectée 2014DigitasLBi Paris
 
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...Marie_Estager
 
Les 10 vertus_du_sourire
Les 10 vertus_du_sourireLes 10 vertus_du_sourire
Les 10 vertus_du_souriremalvar85
 
2 pendant la plainte
2 pendant la plainte2 pendant la plainte
2 pendant la plainte
Nathalie Simard
 
Les jeunes et l'argent
Les jeunes et l'argentLes jeunes et l'argent
Les jeunes et l'argent
Kantar
 
1 avant la plainte
1 avant la plainte1 avant la plainte
1 avant la plainte
Nathalie Simard
 
3 apres la plainte
3 apres la plainte3 apres la plainte
3 apres la plainte
Nathalie Simard
 
Information entropy
Information entropyInformation entropy
Information entropy
Oliver Reichenstein
 
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseilleFiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
Ricardo Castillo
 
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTA
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTATOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTA
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTACoralie OT Sélestat
 
Visite immobilière : check liste
Visite immobilière : check listeVisite immobilière : check liste
Visite immobilière : check liste
Xavier Pestel - Priximmo
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX Professional
Patrick Neeman
 
Client mystere
Client mystereClient mystere
Client mystere
Yassine Hafid
 
Comment commercialiser son hotel grace aux outils marketing.
Comment commercialiser son hotel  grace aux outils marketing.Comment commercialiser son hotel  grace aux outils marketing.
Comment commercialiser son hotel grace aux outils marketing.Fethi Ferhane
 
Questionnaire De Satisfaction
Questionnaire De SatisfactionQuestionnaire De Satisfaction
Questionnaire De Satisfaction
Philippart Sophie
 
Future Proof Design and the Platform Design Canvas
Future Proof Design and the Platform Design CanvasFuture Proof Design and the Platform Design Canvas
Future Proof Design and the Platform Design Canvas
Simone Cicero
 

En vedette (20)

SXSW 13: Why Designers Should Care About Measuring Success
SXSW 13: Why Designers Should Care About Measuring SuccessSXSW 13: Why Designers Should Care About Measuring Success
SXSW 13: Why Designers Should Care About Measuring Success
 
Perspective et enjeux du design.
Perspective et enjeux du design.Perspective et enjeux du design.
Perspective et enjeux du design.
 
Building a Story World
Building a Story WorldBuilding a Story World
Building a Story World
 
Baromètre de l'Experience Marchande Connectée 2014
Baromètre de l'Experience Marchande Connectée 2014Baromètre de l'Experience Marchande Connectée 2014
Baromètre de l'Experience Marchande Connectée 2014
 
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...
Comment les marques innovent-elles pour répondre à leurs clients - 4ème Sympo...
 
Les 10 vertus_du_sourire
Les 10 vertus_du_sourireLes 10 vertus_du_sourire
Les 10 vertus_du_sourire
 
2 pendant la plainte
2 pendant la plainte2 pendant la plainte
2 pendant la plainte
 
Les jeunes et l'argent
Les jeunes et l'argentLes jeunes et l'argent
Les jeunes et l'argent
 
1 avant la plainte
1 avant la plainte1 avant la plainte
1 avant la plainte
 
3 apres la plainte
3 apres la plainte3 apres la plainte
3 apres la plainte
 
La communication orale
La communication oraleLa communication orale
La communication orale
 
Information entropy
Information entropyInformation entropy
Information entropy
 
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseilleFiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
Fiche technique vente villa maison t5 197 m2 piscine allauch 13190 marseille
 
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTA
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTATOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTA
TOUS ACCUEILLANTS - Comment améliorer mon accueil par Frédéric BERETTA
 
Visite immobilière : check liste
Visite immobilière : check listeVisite immobilière : check liste
Visite immobilière : check liste
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX Professional
 
Client mystere
Client mystereClient mystere
Client mystere
 
Comment commercialiser son hotel grace aux outils marketing.
Comment commercialiser son hotel  grace aux outils marketing.Comment commercialiser son hotel  grace aux outils marketing.
Comment commercialiser son hotel grace aux outils marketing.
 
Questionnaire De Satisfaction
Questionnaire De SatisfactionQuestionnaire De Satisfaction
Questionnaire De Satisfaction
 
Future Proof Design and the Platform Design Canvas
Future Proof Design and the Platform Design CanvasFuture Proof Design and the Platform Design Canvas
Future Proof Design and the Platform Design Canvas
 

Similaire à Donner forme : fabriquer un produit.

Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
Adetem
 
Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015
Libéo
 
Business plan pour traducteurs - interprètes
Business plan pour traducteurs - interprètesBusiness plan pour traducteurs - interprètes
Business plan pour traducteurs - interprètes
Jean-Marie Le Ray
 
Le design UX
Le design UXLe design UX
Le design UX
Rizomer
 
What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ? What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ?
DigitasLBi Paris
 
Portrait de startuper #39 - Speecheo - Morgan Rosemberg
Portrait de startuper #39 - Speecheo - Morgan RosembergPortrait de startuper #39 - Speecheo - Morgan Rosemberg
Portrait de startuper #39 - Speecheo - Morgan Rosemberg
Sébastien Bourguignon
 
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
David Eichholtzer
 
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask  Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
Cédric Tamboise
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Web à Québec
 
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Capian
 
Rédiger des User Stories
Rédiger des User StoriesRédiger des User Stories
Rédiger des User Stories
Yannick Quenec'hdu
 
Gestion de produit, partage d'expériences
Gestion de produit, partage d'expériencesGestion de produit, partage d'expériences
Gestion de produit, partage d'expériences
Karine Vincent
 
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
Laura Blanchard - Agence KHOSI
 
Culture Design
Culture DesignCulture Design
Culture Design
Kévin TONON
 
Atelier l'humain au coeur de tous vos projets carole laimay 20170921
Atelier l'humain au coeur de tous vos projets carole laimay 20170921Atelier l'humain au coeur de tous vos projets carole laimay 20170921
Atelier l'humain au coeur de tous vos projets carole laimay 20170921
Carole Laimay
 
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisationsProspecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Julien Dereumaux
 
De la stratégie à la gestion de projet
De la stratégie à la gestion de projetDe la stratégie à la gestion de projet
De la stratégie à la gestion de projet
Prof. Jacques Folon (Ph.D)
 
UX en formation
UX en formationUX en formation
UX en formation
François Pourrier
 
Créer du contenu de qualité pour les réseaux sociaux
Créer du contenu de qualité pour les réseaux sociauxCréer du contenu de qualité pour les réseaux sociaux
Créer du contenu de qualité pour les réseaux sociaux
Concept Image
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Marie Glandus
 

Similaire à Donner forme : fabriquer un produit. (20)

Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
Adetem Rhônes-Alpes - Atelier pratique Design Thinking - (Re)Booster votre se...
 
Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015
 
Business plan pour traducteurs - interprètes
Business plan pour traducteurs - interprètesBusiness plan pour traducteurs - interprètes
Business plan pour traducteurs - interprètes
 
Le design UX
Le design UXLe design UX
Le design UX
 
What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ? What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ?
 
Portrait de startuper #39 - Speecheo - Morgan Rosemberg
Portrait de startuper #39 - Speecheo - Morgan RosembergPortrait de startuper #39 - Speecheo - Morgan Rosemberg
Portrait de startuper #39 - Speecheo - Morgan Rosemberg
 
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
Featured Snippet, Infinite People Also Ask (PAA), quels bouleversements pour ...
 
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask  Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
Quels bouleversements pour le SEO en 2017 ? Featured Snippet - People Also Ask
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
 
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
 
Rédiger des User Stories
Rédiger des User StoriesRédiger des User Stories
Rédiger des User Stories
 
Gestion de produit, partage d'expériences
Gestion de produit, partage d'expériencesGestion de produit, partage d'expériences
Gestion de produit, partage d'expériences
 
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
Intention de recherche : véritable hype ou simple pilier ? SEO By Night 2024
 
Culture Design
Culture DesignCulture Design
Culture Design
 
Atelier l'humain au coeur de tous vos projets carole laimay 20170921
Atelier l'humain au coeur de tous vos projets carole laimay 20170921Atelier l'humain au coeur de tous vos projets carole laimay 20170921
Atelier l'humain au coeur de tous vos projets carole laimay 20170921
 
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisationsProspecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
 
De la stratégie à la gestion de projet
De la stratégie à la gestion de projetDe la stratégie à la gestion de projet
De la stratégie à la gestion de projet
 
UX en formation
UX en formationUX en formation
UX en formation
 
Créer du contenu de qualité pour les réseaux sociaux
Créer du contenu de qualité pour les réseaux sociauxCréer du contenu de qualité pour les réseaux sociaux
Créer du contenu de qualité pour les réseaux sociaux
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 

Donner forme : fabriquer un produit.

  • 1. Design. De l’idée au produit. Donner forme. HETIC #4 - Mars 2014
  • 7. Ecosystème utilisateur CONCEPT/CREATIVITE Ecosystème marché Ecosystème client Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER Les principes Design Concept/créativité Positionnement produit/service Valide Spécifie Ajuste
  • 8. Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST Accompagnement CommunicationEvolution #2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER esign vité ent ce Valider le produit Spécifier le produit Ajuster le produit
  • 11.
  • 12.
  • 13.
  • 16. Architecture de l’information ÉNONCER CATÉGORISER STRUCTURER
  • 17. contenu Vous travaillez sur un site de contenu spécialisé à destination du public et des collectivités locales. Comment structurez-vous cette information ? playground !
  • 18. S’INFORMER ÉCHANGER TROUVER UN EMPLOI L'actualité Droit des collectivités Emploi Carrière Accueil Emploi Réseaux professionnels Espace candidat Forums L'essentiel des 7 derniers jours Europe Régions France Dossiers d'actu Documents utiles Opinions Visualisation de donnéesConcours Rémunération Statut Dossiers emploi Guide des avantages sociaux Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Espace candidat Inscription Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées Les derniers messages Concours Statut Entraide Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Ressources humaines Finances Technique Informatique Informatique Prévention-sécurité
  • 19. S’INFORMER L'actualité L'essentiel des 7 derniers jours France Régions Europe Dossiers d'actu Documents utiles Opinions Visualisation de données Droit des collectivités Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Emploi Carrière Concours Rémunération Statut Dossiers emploi Guide des avantages sociaux
  • 20. ÉCHANGER Forums Les derniers messages Concours Statut Entraide Réseaux professionnels Ressources humaines Finances Technique Informatique Prévention-sécurité TROUVER UN EMPLOI Accueil Emploi Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Espace candidat Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées
  • 22.
  • 27. Tests 3 phases de test peuvent être définie pendant la phase de conception. #1 - un prototype “basse définition” (à l’état de croquis ou gabarits fonctionnels, pour illustrer les enchaînement d’écran) ! #2 - un prototype “haute définition” (avec des contenus réaliste, visuels, textuels...) ! #3 - une version Beta avant le lancement officiel (futur produit, qui permet de crééer une communauté autour du lancement)
  • 29. « La qualité esthétique signifie parler de nuances, quelquefois de fractions d’à peine un millimètre, de graduations très subtiles, ou de l’harmonie et de l’équilibre de plusieurs éléments visuels fonctionnant ensembles. » ! Dieter Rams
  • 30. La théorie du Gestalt La psychologie de la forme ou gestaltisme (de l'allemand, Gestaltpsychologie) est une théorie psychologique, philosophique et biologique, selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d'éléments.
  • 31.
  • 32.
  • 33.
  • 34. La théorie du Gestalt Loi de la proximité Regrouper les objets les plus proches des uns des autres
  • 35.
  • 36.
  • 37.
  • 38.
  • 39. La théorie du Gestalt Loi de similitude Quand la distance ne peux regrouper les objets il faut les distinguer par leur forme
  • 40.
  • 41. La théorie du Gestalt Loi de la cloture Notre perception remplit les vides des formes qui ne sont pas fermés
  • 42.
  • 43.
  • 44. La théorie du Gestalt Loi de la symétrie Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un point central. C’est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieurs objets en un nombre égal d’éléments symétriques. Lorsque nous voyons deux éléments symétriques qui n’ont pas de lien entre eux, nous allons naturellement les associer pour composer une forme cohérente.
  • 45.
  • 46.
  • 47.
  • 48. Le nombre d’or a b a+b / a = a/b = 1,618…= Phi
  • 51. La règle du 1/3, 2/3
  • 52.
  • 53.
  • 54.
  • 55.
  • 57.
  • 58.
  • 59.
  • 60.
  • 63.
  • 64. identité visuelle P A L I C O QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB QUADRICHROMY CMYK .0 .36 .94 .0 EXADECIMAL #F8AF0D QUADRICHROMY CMYK .31 .20 .20 .2 EXADECIMAL #192D38 QUADRICHROMY CMYK .11 .6 .7 .0 EXADECIMAL #E8EAEB DIN Round Regular ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 DIN Round Medium ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB DI A D IJ PQ ab no 0 1
  • 66. TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! ! ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRAROSAROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. ! Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! !
  • 67. La typographie a ses propres règles d’usages.
  • 68. Le petit manuel de composition typographique
  • 72. mise en scène de contenu
  • 75.
  • 76.
  • 77.
  • 79.
  • 80.
  • 83. Official Vancouver 2010 Olympic par Get Elastic (Elastic Path) • Trop de bannières qui crée un désordre pour la lisibilité ! • La navigation n’est pas visible en dessous du fold et ne ressort pas assez ! • La taille des photos produit est trop petite et ne donne aucune indication sur les coloris optimisation
  • 85. ! • Réduire le nombre de zones commerciales pour accroître leur lisibilité ! • Présenter de façon plus visible et claire la navigation de second niveau ! • Donner des indications sur les alternatives de couleurs des produits ! • Augmenter la taille des photos dans la zone “Nouveautés”, “Les plus populaires”
  • 86. Sur 2053 transactions réalisées pendant 21 jours le test n’est pas significatif mais nous pouvons en sortir les points suivants qui permettent de dire que la version A est la meilleure : ! ! • La version A convertit à 3,14% de plus que la version originale ! • Réduction de 12,24% du taux de rebond ! • Une augmentation du taux de transformation global de 0,59% ! • La valeur moyenne des commandes est de 5,16% plus importante.
  • 88. Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL STEP 1 : Immersion & expérience shopping Objectifs ? Où ? Kick Off _Exprimer le pitch et les objectifs du projet _Rencontrer l’ensemble des personnes impliquées et préciser les rôles de chacun _ Apporter de la visibilité sur le déroulement du projet Edition atlas 0,5 0,5 0,5 0,5 0 € Interview des personnes impliqués dans le projet (produit, marketing, e-commerce…) _ Découvrir l’entreprise et comprendre ses spécificités _ Collection l'information stratégique (stratégie, positionnement, offre, organisation...) _ Collecter des informations métiers (ex produits, logistique, IT relation client, acquisition...) Edition atlas 1 3 1 2 0 € Benchmark Web / Mobile _commandes tests _pige web & mobile 0,5 4 1 0 € Définition de l'expérience shopping _définition de l’expérience shopping et des leviers de différenciation _Design principes _User research Edition atlas 4 10 2 3 0 € Architecture de l'information & merchandising _Définition précise du référentielle et des spécificités produits _Organisation des produits / contenus / fonctionnalités / services _Concept e-merchandising _Parcours de navigation Edition atlas 3 3 7 3 0 € Scope _Cadrer la v1 du projet _Apporter de la visibilité sur l’évolution du site et assurer son évolutivité _Anticiper les besoins de contenu et de développements techniques Edition atlas 0,5 2 2 0 € TOTAL Cadrage 0,00 € Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL 1 100 € 750 € 750 € 650 € 700 € 750 € 750 € STEP 2 : Design / Intégration / Spec Quoi ? Où ? Identité _Workshop Plateforme de marque _Vocabulaire de forme illustrant les valeurs de marque _ Logo (3 propositions / 2 A/R) & Nom _ Charte identitaire / Brand book _ Papeterie non incluse Edition Atlas / Altima 4 15 10 2 0 € Descente produit & principe de navigation _ HomePage _ Page catégorie _ Fiche produit Edition Atlas / Altima 0,5 2,75 3,75 4,75 4,65 0 € Quizz & inscription _Quizz _Process d'inscription Edition Atlas / Altima 1 5,5 3,5 5,5 3,1 0 € Check Out _ Panier _ Process de commande (livraison / paiement) Edition Atlas / Altima 0,5 5,5 3,5 5,5 3 0 € Compte Client _ Mon compte _ Mes commandes _ Mes adresses _ Ma personnalisation Edition Atlas / Altima 0 4 3 4 2,2 0 € Formulaire de contat _Page Contact Edition Atlas / Altima 0 0,75 0,25 0,75 0,35 0 € Template style _templace reco style Edition Atlas / Altima 0,5 2 1,5 2 1,2 0 € Template Mail _Template mail confirmation de commande _Template Welcome pack (inscription à la newsletter / création de compte) _ Template mail Newsletter nouveau set Edition Atlas / Altima 0 2,25 0,75 2,25 1,05 0 € Le concept _ Template présentation du concept Edition Atlas / Altima 0,5 2,75 1,75 2,75 1,55 0 € Press _ Template vu dans la presse Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Egérie _ Présentation des égéries Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Testimoniaux _Testimoniaux clients Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Templates pages institutionnelles _ FAQ _Mentions légales _Job _CGV _Services _A propos Edition Atlas / Altima 0 4,5 1,5 4,5 2,1 0 € Page Facebook _Custom e la page facebook Edition Atlas / Altima 0 1,75 1 1,75 0,9 0 € Charte graphique on-line _ Charte graphique Web Intéractive Edition Atlas / Altima 2 8 4 2 0 € TOTAL Cadrage 0,00 € TOTAL REFONTE 0,00 € Budget hors taxe & hors achats d'artsBudget hors taxe & hors achats d'arts Le rôle du chef de projet coordination globale Participation, suivi et encadrement des différentes phases Rédaction des spécifications fonctionnelles Recettage des livrables html
  • 89. contenu Réinventer Le Temps. Au travers d’un nouvel usage simple, d’une nouvelle lecture du temps, ou simplement une idée qui permet de gagner du temps, illustrer un concept de manière structurée et argumentée. playground !
  • 90.
  • 91.
  • 92. Application Par Ici la sortie
  • 93. Séquençage du film Matrix, chaque image est associé à une couleur du film pour au final en créer un barcode - moviebarcode.tumblr.com