DESIGN SYSTEM
B&B l
Vers une nouvelle
ère de vos expériences
2
Romain Petit,
Head of Design
ENGIE Digital
Le design system, accélérateur
de la transformation par le design
chez ENGIE Digital
Simon Gaurand,
Coach Agile Senior
FABERNOVEL
Technologies et expériences
à l’échelle : comment se lancer ?
3 temps forts
Mathilde Maître,
Head of Design
FABERNOVEL
Le design et son “système”
fondamentaux et enjeux aujourd’hui
3
https://bit.ly/2DlNMfy
4
Le design et son “système”
fondamentaux et enjeux
:aujourd’hui
Mathilde
Maître,
Head of Design
FABERNOVEL
Aux origines du design
1851
Crystal Palace,
1ère
Exposition universelle,
Londres
Construit en un temps record
de 8 mois à partir d’unités
modulaires standardisées.
Le design est industriel par essence
1859
Chaise N° 14, Thonet
Penser en grande série
Le design Braun,
Dieter Rams
Simplicité, ordre et harmonie
Chercher la cohérence d’une gamme
Insuffler une vision globale
Roger Tallon,
le père du design de la SNCF
Du train corail au TGV Duplex, l’eurostar,
un même souci du détail confortable
 
Roger Tallon
A l’ère du numérique
Une perte de contrôle sur l’expérience globale...
App SNCF App Ouigo App SNCF pro App SNCF
En Gare
13
...alors que nous créons de plus en plus de points
de contact (et ce n’est pas prêt de s’arrêter !)
Un accroissement du nombre de devices
et de points de contacts...
… qui transforment le travail des équipes
de conception de produits :
De nouvelles contraintes et de nouveaux
challenges :
● Concevoir pour des tailles de devices
et d’écrans divers
● Etendre le périmètre des produits conçus
et s’ouvrir à des nouveaux business
● Accroître la taille des équipes
et les parties prenantes
● Produire toujours plus et plus vite
● Etc.
La conception “one-shot” n’est pas durable !
Fini le système D,
place au Design System !
Qu’est ce qu’un design system ?
La boîte à outils à destination
des nouveaux artisans,
les “makers” de produits
numériques qui leur permet :
● de gérer ce chaos en
adoptant une approche
de conception plus
raisonnée
● de créer de meilleurs
produits en utilisant un
langage commun défini
en amont
Un Design System offre une bibliothèque
de styles visuels et de composants documentés
et publiés sous forme de code réutilisable
pour les développeurs et d'outil(s) pour les designers.
Il peut également intégrer des conseils sur
l'accessibilité, ainsi que des outils rédactionnels.
Il est utilisé lors des étapes :
● de prototypage rapide
● de conception et développement de
nouveaux produits.
Le langage unique de Google Material DesignEtudedecas
Un portefeuille de services
cohérent grâce au Design
System :
● facilite la conception
de tous les produits
numériques
● accessible en ligne,
bien documenté
● vivant : il est sans cesse
complété et mis à jour
Le langage unique de Google Material DesignEtudedecas
Le langage unique de Google Material DesignEtudedecas
Cette boîte à outil pour les concepteurs
permet d’orchestrer la multitude
et variété de points de contacts
Ce langage unique permet de gagner
en lisibilité pour les utilisateurs finaux et
contribue à la montée en gamme des
expériences.
Le Design System remet de l’ordre et permet
d’industrialiser la conception
A l’ère du numériqueC
Plus qu’une histoire
de design, un asset
stratégique
C
John Maeda
Designer & Technologist
Automattic
Un asset stratégique au service
de la transformation en cours
Ces 3 entreprises utilise et ont conçu un Design System,
au bon moment et en support de leur vision design :
GOV.UK
l’aboutissement
de la transformation
par le design débuté
en 2010
Audi
le fil conducteur
d’une expérience
continue et unifié
de la voiture
au produits
numériques
AirBnB
le catalyseur d’un
passage à l’échelle
rapide et efficace
Cas 1
Gov.uk
Le Design System comme
aboutissement d’une transformation
par le design débutée en 2010
Un Design System qui s’inscrit dans une vision
plus globale de transformation
2013 - 2015 2017-2018Depuis 2010
Création d’un site GOV.UK qui a agrégé 2000
sites du gouvernement en 1 unique point de
contact
Elaboration et implémentation d’une stratégie
de transformation par le design
Lancement du Design System pour aligner
tous les assets numériques
… et l’impact est visible :
£62 9
1.03 300+
Sources : https://www.gov.uk/performance
http://www.internetactu.net/2015/02/17/gov-uk-limportant-nest-pas-dinnover-mais-de-faire-que-les-choses-marchent/
Le Design System comme
fil conducteur d’une expérience
continue et unifiée : de la voiture
aux produits numériques
Cas 2
Audi
Les 3 principes de design d’Audi, incarnation de
l’expérience de bout en bout
Les principes du Design
System s’appliquent dans
l’expérience actuelle
(plateformes et interfaces
dans l’habitacle) mais sont
aussi pensées pour
l’expérience future
(véhicules autonomes)
Des briques du Design System à l’image des voitures…
et vice et versa.
Les règles d’animation inscrites dans le Design System
représentent la dynamique sportive des voitures Audi :
accélération intense et décélération rapide
Cas 3
AirBnB
Le Design System comme
catalyseur d’un passage
à l’échelle rapide et efficace
Une vision design très claire
“Belong Anywhere.”
Sur desktop, sur mobile ou entre des murs.
Pour l’utilisateur final ou pour le collaborateur.
L’expérience est simple, intuitive et incarne
la confiance et l’hospitalité.
Multitude de collaborateurs
créant les assets digitaux
Longue durée de vie des assets
digitaux
Karri Saarinen,
principal designer AirBnB
Design de produits numériques :
moins de contraintes physiques
Multitude de supports
Un environnement risqué qui génère
de l’hétérogénéité dans les expériences
Créer un design system pour garder le cap
Au cours de ces étapes, l’équipe Design Ops a posé les bases
du design system et a sans cesse réitéré en fonction
de leurs observations et des retours collaborateurs.
Les bénéfices de l’utilisation
du Design System pour AirBnB
Karri Saarinen,
principal designer AirBnB
et, le rôle du
designer ?
L’ère de l’automatisation de la créativité ?
...ou plutôt : nouvel outil = nouveaux rôles
Alex Schleifer
VP Design, Airbnb
DesignerOps
Ces profils de designers sont fascinés par la façon
dont le design fonctionne
Ils ont envie de s’investir pour faire en sorte que le
design passe à l’échelle dans une organisation.
Designer Lead
Ces designers sont les garants de la vision Design
mais aussi des visionnaires qui permettent à chacun
de se sentir en capacité de concevoir de nouveaux
produits, services ou business.
39
Le design system,
accélérateur de la transformation
:par le design chez ENGIE Digital
Romain Petit,
Head of Design
ENGIE Digital
40
Technologies et expériences
à l’échelle : comment se lancer ?
Simon Gaurand,
Coach Agile Senior
FABERNOVEL
Et maintenant,
comment se lancer ?
Le Design System est à considérer comme un
produit à part entière.
agilité.
Il n’est pas hors sol.
Il doit s’inscrire dans le réel
Construire son business case auprès du top management :
Design
234K€ / an
Development
487,5K€ / an
Il doit être sponsorisé :
*Étude InVision
Il doit être piloté par une équipe pluridisciplinaire :
Designers Développeurs
Product Owner
Stakeholders
Il doit embarquer ses utilisateurs
sur le long-terme
jamais fini.
> créer une communauté
d’ambassadeurs (futurs
utilisateurs du design system)
à embarquer dès le début
> feedback loop
> rendre votre design system
contribuable (ex : Bootstrap)
Il doit vous permettre de vous différencier
Envoyer des signaux forts à votre marché afin de :
leader et référence
les talents
Minimum
Viable
Product
Et enfin… il doit être pensé MVP
3 mois ?
En conclusion,
● Une étape obligatoire
dans votre transformation
vers l’homogénéisation
de vos points de contacts
● Un passage de l’exploration
à l’industrialisation
● Une libération de la valeur
du designer vers l’empathie
Marina Dislich
Communication Manager
marina.dislich@fabernovel.com
Mathilde Maître
Head of Design
mathilde.maitre@fabernovel.com
Simon Gaurand
Coach Agile
simon.gaurand@fabernovel.com
Contacts
Contributeurs :
Clémentine Sonnic, Analyst
Mathieu Micheneau, Lead UX Designer
Benoît Talabot, Directeur de création
Marine Chatras, Directrice artistique

Vers une nouvelle ère de vos expériences

  • 1.
    DESIGN SYSTEM B&B l Versune nouvelle ère de vos expériences
  • 2.
    2 Romain Petit, Head ofDesign ENGIE Digital Le design system, accélérateur de la transformation par le design chez ENGIE Digital Simon Gaurand, Coach Agile Senior FABERNOVEL Technologies et expériences à l’échelle : comment se lancer ? 3 temps forts Mathilde Maître, Head of Design FABERNOVEL Le design et son “système” fondamentaux et enjeux aujourd’hui
  • 3.
  • 4.
    4 Le design etson “système” fondamentaux et enjeux :aujourd’hui Mathilde Maître, Head of Design FABERNOVEL
  • 6.
  • 7.
    1851 Crystal Palace, 1ère Exposition universelle, Londres Construiten un temps record de 8 mois à partir d’unités modulaires standardisées. Le design est industriel par essence
  • 8.
    1859 Chaise N° 14,Thonet Penser en grande série
  • 9.
    Le design Braun, DieterRams Simplicité, ordre et harmonie Chercher la cohérence d’une gamme
  • 10.
    Insuffler une visionglobale Roger Tallon, le père du design de la SNCF Du train corail au TGV Duplex, l’eurostar, un même souci du détail confortable
  • 11.
  • 12.
    A l’ère dunumérique
  • 13.
    Une perte decontrôle sur l’expérience globale... App SNCF App Ouigo App SNCF pro App SNCF En Gare 13
  • 14.
    ...alors que nouscréons de plus en plus de points de contact (et ce n’est pas prêt de s’arrêter !) Un accroissement du nombre de devices et de points de contacts... … qui transforment le travail des équipes de conception de produits : De nouvelles contraintes et de nouveaux challenges : ● Concevoir pour des tailles de devices et d’écrans divers ● Etendre le périmètre des produits conçus et s’ouvrir à des nouveaux business ● Accroître la taille des équipes et les parties prenantes ● Produire toujours plus et plus vite ● Etc.
  • 15.
    La conception “one-shot”n’est pas durable !
  • 16.
    Fini le systèmeD, place au Design System !
  • 17.
    Qu’est ce qu’undesign system ? La boîte à outils à destination des nouveaux artisans, les “makers” de produits numériques qui leur permet : ● de gérer ce chaos en adoptant une approche de conception plus raisonnée ● de créer de meilleurs produits en utilisant un langage commun défini en amont Un Design System offre une bibliothèque de styles visuels et de composants documentés et publiés sous forme de code réutilisable pour les développeurs et d'outil(s) pour les designers. Il peut également intégrer des conseils sur l'accessibilité, ainsi que des outils rédactionnels. Il est utilisé lors des étapes : ● de prototypage rapide ● de conception et développement de nouveaux produits.
  • 18.
    Le langage uniquede Google Material DesignEtudedecas Un portefeuille de services cohérent grâce au Design System : ● facilite la conception de tous les produits numériques ● accessible en ligne, bien documenté ● vivant : il est sans cesse complété et mis à jour
  • 19.
    Le langage uniquede Google Material DesignEtudedecas
  • 20.
    Le langage uniquede Google Material DesignEtudedecas
  • 21.
    Cette boîte àoutil pour les concepteurs permet d’orchestrer la multitude et variété de points de contacts Ce langage unique permet de gagner en lisibilité pour les utilisateurs finaux et contribue à la montée en gamme des expériences. Le Design System remet de l’ordre et permet d’industrialiser la conception
  • 22.
    A l’ère dunumériqueC Plus qu’une histoire de design, un asset stratégique
  • 23.
    C John Maeda Designer &Technologist Automattic
  • 24.
    Un asset stratégiqueau service de la transformation en cours Ces 3 entreprises utilise et ont conçu un Design System, au bon moment et en support de leur vision design : GOV.UK l’aboutissement de la transformation par le design débuté en 2010 Audi le fil conducteur d’une expérience continue et unifié de la voiture au produits numériques AirBnB le catalyseur d’un passage à l’échelle rapide et efficace
  • 25.
    Cas 1 Gov.uk Le DesignSystem comme aboutissement d’une transformation par le design débutée en 2010
  • 26.
    Un Design Systemqui s’inscrit dans une vision plus globale de transformation 2013 - 2015 2017-2018Depuis 2010 Création d’un site GOV.UK qui a agrégé 2000 sites du gouvernement en 1 unique point de contact Elaboration et implémentation d’une stratégie de transformation par le design Lancement du Design System pour aligner tous les assets numériques
  • 27.
    … et l’impactest visible : £62 9 1.03 300+ Sources : https://www.gov.uk/performance http://www.internetactu.net/2015/02/17/gov-uk-limportant-nest-pas-dinnover-mais-de-faire-que-les-choses-marchent/
  • 28.
    Le Design Systemcomme fil conducteur d’une expérience continue et unifiée : de la voiture aux produits numériques Cas 2 Audi
  • 29.
    Les 3 principesde design d’Audi, incarnation de l’expérience de bout en bout Les principes du Design System s’appliquent dans l’expérience actuelle (plateformes et interfaces dans l’habitacle) mais sont aussi pensées pour l’expérience future (véhicules autonomes)
  • 30.
    Des briques duDesign System à l’image des voitures… et vice et versa. Les règles d’animation inscrites dans le Design System représentent la dynamique sportive des voitures Audi : accélération intense et décélération rapide
  • 31.
    Cas 3 AirBnB Le DesignSystem comme catalyseur d’un passage à l’échelle rapide et efficace
  • 32.
    Une vision designtrès claire “Belong Anywhere.” Sur desktop, sur mobile ou entre des murs. Pour l’utilisateur final ou pour le collaborateur. L’expérience est simple, intuitive et incarne la confiance et l’hospitalité.
  • 33.
    Multitude de collaborateurs créantles assets digitaux Longue durée de vie des assets digitaux Karri Saarinen, principal designer AirBnB Design de produits numériques : moins de contraintes physiques Multitude de supports Un environnement risqué qui génère de l’hétérogénéité dans les expériences
  • 34.
    Créer un designsystem pour garder le cap Au cours de ces étapes, l’équipe Design Ops a posé les bases du design system et a sans cesse réitéré en fonction de leurs observations et des retours collaborateurs.
  • 35.
    Les bénéfices del’utilisation du Design System pour AirBnB Karri Saarinen, principal designer AirBnB
  • 36.
    et, le rôledu designer ?
  • 37.
    L’ère de l’automatisationde la créativité ?
  • 38.
    ...ou plutôt :nouvel outil = nouveaux rôles Alex Schleifer VP Design, Airbnb DesignerOps Ces profils de designers sont fascinés par la façon dont le design fonctionne Ils ont envie de s’investir pour faire en sorte que le design passe à l’échelle dans une organisation. Designer Lead Ces designers sont les garants de la vision Design mais aussi des visionnaires qui permettent à chacun de se sentir en capacité de concevoir de nouveaux produits, services ou business.
  • 39.
    39 Le design system, accélérateurde la transformation :par le design chez ENGIE Digital Romain Petit, Head of Design ENGIE Digital
  • 40.
    40 Technologies et expériences àl’échelle : comment se lancer ? Simon Gaurand, Coach Agile Senior FABERNOVEL
  • 41.
  • 42.
    Le Design Systemest à considérer comme un produit à part entière. agilité.
  • 43.
    Il n’est pashors sol. Il doit s’inscrire dans le réel
  • 44.
    Construire son businesscase auprès du top management : Design 234K€ / an Development 487,5K€ / an Il doit être sponsorisé : *Étude InVision
  • 45.
    Il doit êtrepiloté par une équipe pluridisciplinaire : Designers Développeurs Product Owner Stakeholders
  • 46.
    Il doit embarquerses utilisateurs sur le long-terme jamais fini. > créer une communauté d’ambassadeurs (futurs utilisateurs du design system) à embarquer dès le début > feedback loop > rendre votre design system contribuable (ex : Bootstrap)
  • 47.
    Il doit vouspermettre de vous différencier Envoyer des signaux forts à votre marché afin de : leader et référence les talents
  • 48.
    Minimum Viable Product Et enfin… ildoit être pensé MVP 3 mois ?
  • 49.
    En conclusion, ● Uneétape obligatoire dans votre transformation vers l’homogénéisation de vos points de contacts ● Un passage de l’exploration à l’industrialisation ● Une libération de la valeur du designer vers l’empathie
  • 51.
    Marina Dislich Communication Manager marina.dislich@fabernovel.com MathildeMaître Head of Design mathilde.maitre@fabernovel.com Simon Gaurand Coach Agile simon.gaurand@fabernovel.com Contacts Contributeurs : Clémentine Sonnic, Analyst Mathieu Micheneau, Lead UX Designer Benoît Talabot, Directeur de création Marine Chatras, Directrice artistique