1. DESIGN SYSTEM
B&B l
Vers une nouvelle
ère de vos expériences

2. 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. 3
https://bit.ly/2DlNMfy

4. 4
Le design et son “système”
fondamentaux et enjeux
:aujourd’hui
Mathilde
Maître,
Head of Design
FABERNOVEL

6. Aux origines du design

7. 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

8. 1859
Chaise N° 14, Thonet
Penser en grande série

9. Le design Braun,
Dieter Rams
Simplicité, ordre et harmonie
Chercher la cohérence d’une gamme

10. 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

11.
Roger Tallon

12. A l’ère du numérique

13. Une perte de contrôle sur l’expérience globale...
App SNCF App Ouigo App SNCF pro App SNCF
En Gare
13

14. ...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.

15. La conception “one-shot” n’est pas durable !

16. Fini le système D,
place au Design System !

17. 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.

18. 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

19. Le langage unique de Google Material DesignEtudedecas

20. Le langage unique de 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 du numériqueC
Plus qu’une histoire
de design, un asset
stratégique

23. C
John Maeda
Designer & Technologist
Automattic

24. 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

25. Cas 1
Gov.uk
Le Design System comme
aboutissement d’une transformation
par le design débutée en 2010

26. 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

27. … 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/

28. Le Design System comme
fil conducteur d’une expérience
continue et unifiée : de la voiture
aux produits numériques
Cas 2
Audi

29. 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)

30. 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

31. Cas 3
AirBnB
Le Design System comme
catalyseur d’un passage
à l’échelle rapide et efficace

32. 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é.

33. 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

34. 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.

35. Les bénéfices de l’utilisation
du Design System pour AirBnB
Karri Saarinen,
principal designer AirBnB

36. et, le rôle du
designer ?

37. L’ère de l’automatisation de 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érateur de 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. Et maintenant,
comment se lancer ?

42. Le Design System est à considérer comme un
produit à part entière.
agilité.

43. Il n’est pas hors sol.
Il doit s’inscrire dans le réel

44. Construire son business case auprès du top management :
Design
234K€ / an
Development
487,5K€ / an
Il doit être sponsorisé :
*Étude InVision

45. Il doit être piloté par une équipe pluridisciplinaire :
Designers Développeurs
Product Owner
Stakeholders

46. 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)

47. Il doit vous permettre 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… il doit ê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
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