Sisley Roche
Middle Product Designer
@EuropcarMobilityGroup
↘
↙
Vos speakeuses du jour
Juliette Bauret
Senior Product Designer
@IndependantWoman
Slide 5
Slide 5 text
14 et 15 Novembre 2019
Millbank Tower,
Londres
https://www.designsystemslondon.com/
https://twitter.com/dslconf
Voir les conférences 2019 et 2018
Design System
London
Slide 6
Slide 6 text
Design System
London
2e édition organisée par l’agence Yld
Une journée de conférences et de
workshop dédiés aux Design
Systems.
3 workshops, 11 conférences.
Slide 7
Slide 7 text
⚠
A l’attention de notre aimable audience,
les conférences ne sont pas exclusivement basées sur
des sujets anglais ♂
Slide 8
Slide 8 text
⚠
A l’attention de notre aimable audience,
ceci n’est pas un récapitulatif total de la conférence
mais notre propre sélection
Slide 9
Slide 9 text
LET’S GOOOOO
♀♂♀♂
♀
Slide 10
Slide 10 text
Le Design System
en start-up
avec Miranda Garrido
Slide 11
Slide 11 text
Miranda
Garrido
Head of Product
chez Bank Novo
https://www.linkedin.com/in/mirandagarrido
https://twitter.com/mirandagarrido
Voir le talk
Slide 12
Slide 12 text
12
Il n'est pas trop tard pour commencer
un Design System en start-up, mais
comment ?
De quoi parle-t-elle ?
Slide 13
Slide 13 text
✋
Qui travaille
dans une start-up ?
Slide 14
Slide 14 text
✋
Qui a participé
à la création d’un design
system dans une start-up ?
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
16
Ses mises en garde
- Trop de recherches peut-être une
surcharge lorsqu'on n'a peu de
connaissance en Design System.
- La plupart des designers copient/collent
un DS existants pour le transformer en le
leur, ce qui est la moins bonne méthode.
Slide 17
Slide 17 text
Ses conseils
pour bien démarrer
❤
Connexion
Fidélité
Vitesse
Slide 18
Slide 18 text
Fidélité
Commencer par le branding
Slide 19
Slide 19 text
19
“Make the brand a crucial part
of your system, because it
can be a game changer even
before you have product.”
Slide 20
Slide 20 text
Vitesse
Tirez parti des outils open-sources
existants (bootstrap)
Slide 21
Slide 21 text
❤ Connexion
La connexion humaine est primordiale !
Parlez à tout le monde, créez un moyen de communiquer entre
vous, un langage, construisez une culture d'entreprise et de
connexion.
Slide 22
Slide 22 text
22
“It begins with you!”
Slide 23
Slide 23 text
L’importance de
la culture d’entreprise
avec Lily Dart
Slide 24
Slide 24 text
Lily
Dart
Head of Design Systems
@Lloyds Banking Group
https://www.linkedin.com/in/lilydart
https://twitter.com/lily_dart
Voir le talk
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
L’ice breaker
de Lily Dart
❄
⛏
Slide 28
Slide 28 text
L’ice breaker de Lily Dart ❄ ⛏
Vous êtes à un entretien pour recruter
quelqu’un.e dans votre équipe, quel(s)
mot(s) utiliseriez-vous pour décrire la
culture de votre entreprise ?
Slide 29
Slide 29 text
L’ice breaker de Lily Dart ❄ ⛏
Vous êtes avec des amis en train
de boire un verre, quel(s) mot(s)
utiliseriez-vous pour décrire la culture
de votre équipe ?
Slide 30
Slide 30 text
✋
Qui a approximativement
les deux mêmes réponses ?
Slide 31
Slide 31 text
Ce qu’on retient de son talk
Slide 32
Slide 32 text
Le Design System
des “utilisateurs experts”
avec Sue Andor
Slide 33
Slide 33 text
33
Utilisateur.rice interne à l’entreprise, qui
exécute des tâches opérationnelles et/ou qui a
une expertise sur un sujet précis.
Utilisent régulièrement des outils digitaux
internes.
Qu’est-ce qu’un utilisateur
expert ?
Slide 34
Slide 34 text
Consultante Lead UX
Freelance pour
Food Standards
Authority et Eurostar
https://www.linkedin.com/in/sueandor/
https://twitter.com/ux_musings
Voir le talk
Qui en parle ?
Sue Andor
Slide 35
Slide 35 text
Les interfaces destinées aux experts
peuvent-elles être construites avec le
même Design System utilisé pour les
interfaces des clients ?
Son questionnement
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
37
Effectuer une tâche similaire
ne signifie pas le même besoin
Sa réponse
Slide 38
Slide 38 text
38
- Adapter votre Design System
aux besoins utilisateurs.
- Créer un Design System en même temps que
la création du produit.
Son conseil ⚕
Slide 39
Slide 39 text
La data au service
des Design Systems
avec Anja Klüver
Slide 40
Slide 40 text
Anja
Klüver
Service Experience Director
Prospect (Fondatrice)
https://www.linkedin.com/in/anj
a-klüver-60164b/
Revoir le talk
Kathleen
McMahon
Senior Frontend Engineer
& Design System Tech Lead
@O'Reilly Media
https://www.linkedin.com/in/resource11/
https://twitter.com/resource11
Voir le talk
Slide 51
Slide 51 text
51
“React fully supports building
accessible website often by
using standard HTML and CSS
techniques.”
Slide 52
Slide 52 text
Design System est un livre de cuisine
Sa vision
React serait un ustensile
Vous seriez le cuisiner.
Slide 53
Slide 53 text
53
“Le Design System est le meilleur
endroit pour incorporer de
l'accessibilité dans les
composants.”
Slide 54
Slide 54 text
Créer un composant est comme suivre
une recette
Ingrédient majeur : Sémantique HTML
Assaisonnement : Attribut ARIA
Bien suivre la recette : Documentation
Conseils pratiques : Best practices
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
56
- Conseils sur la mise en place de
l’accessibilité côté dev
- Outils pour tester ses composants
- Contre-indications “Placeholders are not
labels”
Et ensuite ?
Slide 57
Slide 57 text
L’IA au service
du design
avec Jon Reidy
Slide 58
Slide 58 text
Jon
Reidy
Head of Digital Design
System Operations
@HSBC
https://www.linkedin.com/in/jonreidy/
Voir le talk
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Et quelques détails
sur le séjour
Slide 62
Slide 62 text
Les frais (qui font mal)
Conférence
150€
Eurostar
120€
Logement
Min 60€/nuit
1 Workshop
230 à 320€
✂
Slide 63
Slide 63 text
63
Slide 64
Slide 64 text
MERCI
Slide 65
Slide 65 text
Des questions ?
Slide 66
Slide 66 text
N’hésitez pas à venir partager
vos problématiques autour
des Design Systems sur le slack
Rejoindre le slack