Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designers & Intégrateurs : BFF !

Designers & Intégrateurs : BFF !

Les sites web, c'est mieux quand on s'y met à plusieurs ! Découvrez comment nous avons optimisé notre manière de travailler pour délivrer plus de qualité dans la joie et la bonne humeur. Talk donné le 29 octobre à Blend Web Mix 2014 à Lyon, France.

Marie-Cécile Godwin

October 29, 2014
Tweet

More Decks by Marie-Cécile Godwin

Other Decks in Design

Transcript

  1. Designers
    &
    Intégrateurs
    BFF
    Marie-Cécile Paccard
    Goulven Champenois
    *
    * best friends forever

    View Slide

  2. Souvent, le quotidien des designers
    et des intégrateurs, c’est plutôt…

    View Slide

  3. Quoi ? Tu te plains alors
    que tu l’as à peine
    respectée ?
    Mais elle sort d’où cette
    maquette ? Il manque les
    survols et la version
    mobile !
    Tes découpes étaient mal
    faites ! J’ai même pas pu
    ouvrir ton fichier, c’est
    pas du Photoshop !
    Pfff !
    C’est du Sketch, t’es
    vraiment fermé d’esprit !
    Tsss !

    View Slide

  4. Et c’est ainsi que vos projets

    se passent mal.

    View Slide

  5. Et c’est ainsi que vos projets

    se passent mal.
    Très mal…

    View Slide

  6. Nous sommes passés par là. Nous
    en avons souffert. Et nous avons
    décidé de changer nos méthodes
    pour enfin améliorer les choses !
    Y2k  Bug  designed  by  Cards  Against  Humanity  from  the  Noun  Project

    View Slide

  7. Le constat
    est amer
    T_T

    View Slide

  8.  
    Organisations
    compartimentées
    Snowman  designed  by  Luis  Prado  from  the  Noun  Project

    View Slide

  9.  
    Organisations
    compartimentées

    Professions
    conditionnées
    Snowman  designed  by  Luis  Prado  from  the  Noun  Project

    View Slide

  10.  
    Organisations
    compartimentées

    Professions
    conditionnées
    !
    Méthodes
    surgelées…
    Snowman  designed  by  Luis  Prado  from  the  Noun  Project

    View Slide

  11.  
    Ces mots rappelleront à
    certains des années

    de douleur.
    Si vous souffrez de cela
    aujourd’hui, il est
    largement temps
    de stopper
    le massacre !
    Snowman  designed  by  Luis  Prado  from  the  Noun  Project

    View Slide

  12. OBJECTIF
    Vous faire travailler autrement :
    pour plus de qualité,
    pour de bonnes conditions de travail,
    pour vous rendre plus heureux <3
    DE CETTE PRÉSENTATION

    View Slide

  13. Ce n’est pas si
    compliqué, vous
    allez voir
    :)

    View Slide

  14. ✓ Utilisables
    ✓ Navigables
    ✓ Respectueuses

    des utilisateurs
    Produire des interfaces…
    NOUS AVONS UNE MISSION
    EN TANT QU’ACTEURS DU WEB,

    View Slide

  15. Ô GRANDE DIVINITÉ DES
    INTERNETS MONDIAUX !
    DONNE-NOUS LA FORCE !

    View Slide

  16. Car nous avons

    le pouvoir
    et le devoir 

    de changer les
    choses
    !

    View Slide

  17. C’est parti !
    \o/

    View Slide

  18. Un vieil adage fait encore
    des ravages dans beaucoup
    trop de domaines…

    View Slide

  19. « Le Client est Roi. »

    View Slide

  20. Nope.
    NOPE

    View Slide

  21. Le besoin du client est roi.

    View Slide

  22. Ce besoin doit diriger nos projets :
    nous sommes des artisans dont le
    travail est régi par des
    contraintes.

    View Slide

  23. !
    !
    !
    Intégration
    >
    !
    !
    !
    Design
    graphique
    !
    !
    !
    Conception
    !
    !
    !
    Architecture
    d’information,
    chemins
    utilisateurs
    !
    !
    !
    tion du
    oin,
    erche
    ateurs
    !
    !
    !
    Mise en
    production
    !
    !
    !
    Vie ap
    lancem
    En général dans les projets, 

    on est plutôt cascade…

    View Slide

  24. t
    !
    !
    !
    Intégration
    >
    !
    !
    !
    Design
    graphique
    !
    !
    !
    Conception
    !
    !
    !
    Architecture
    d’information,
    chemins
    utilisateurs
    !
    !
    !
    tion du
    oin,
    erche
    ateurs
    !
    !
    !
    Mise en
    production
    !
    !
    !
    Vie ap
    lancem
    Cette bonne vielle cascade qui peut se
    transformer en torrent de montagne !
    Retourner en arrière ?
    NOPE NOPE NOPE !

    View Slide

  25. !
    !
    !
    Intégration
    >
    !
    !
    !
    Design
    graphique
    !
    !
    !
    Conception
    !
    !
    !
    Architecture
    d’information,
    chemins
    utilisateurs
    !
    !
    !
    Définition du
    besoin,
    Recherche
    utilisateurs
    !
    !
    !
    Mise en
    production
    !
    !
    !
    Vie après le
    lancement
    Changeons !

    View Slide

  26. !
    !
    !
    Intégration
    >
    !
    !
    !
    Design
    graphique
    !
    !
    !
    Conception
    !
    !
    !
    Architecture
    d’information,
    chemins
    utilisateurs
    !
    !
    !
    Définition du
    besoin,
    Recherche
    utilisateurs
    !
    !
    !
    Mise en
    production
    !
    !
    !
    Vie après le
    lancement
    Changeons !
    Il est possible de favoriser un
    processus en parallèle, pour que
    chaque phase puisse démarrer sans
    attendre qu’une autre soit terminée.

    View Slide

  27. Par exemple, il nous arrive de
    commencer l’intégration en même
    temps que le design graphique, pour
    peu que l’intégrateur ait participé à
    la phase de prototypage !

    View Slide

  28. Quelques conseils
    pour y arriver
    \o/

    View Slide

  29. Remettons-nous en
    question
    1

    View Slide

  30. Sortons de nos intitulés de poste
    1
    REMETTONS-NOUS EN QUESTION
    Nos professions nous conditionnent
    souvent malgré nous. Mais qui a dit qu’un
    cursus scientifique interdisait de
    concevoir, et qu’un diplôme artistique
    empêchait d’apprendre à coder ?

    View Slide

  31. Mettons-nous à jour
    1
    REMETTONS-NOUS EN QUESTION
    Depuis que nous avons terminé nos études,
    le Web a continué d’évoluer. Finis les sites
    en tableaux imbriqués ou en full-Flash :
    n’oubliez pas de maintenir vos
    connaissances en ligne avec le Web
    d’aujourd’hui.

    View Slide

  32. Apprenons de nouvelles choses
    1
    REMETTONS-NOUS EN QUESTION
    Restons curieux des nouveaux outils et
    langages qui apparaissent. Sketch
    commence à faire parler de lui ? Peut-être
    serait-ce profitable de voir ce qu’il peut
    nous apporter !

    View Slide

  33. Changeons notre attitude
    1
    REMETTONS-NOUS EN QUESTION
    Face à une ambiance tendue, retrouvons
    le sourire. Apprenons à formuler la
    critique, et surtout à la recevoir ! Au lieu
    de dire « non », mettons-nous à dire « Oui,
    et… »

    View Slide

  34. Réchauffons
    nos méthodes
    2

    View Slide

  35. Étudions nos outils respectifs
    2
    RÉCHAUFFONS NOS MÉTHODES
    Penchons-nous sur le workflow de chacun
    pour comprendre comment les livrables
    sont fabriqués : peut-être avons-nous des
    astuces à nous donner ?

    View Slide

  36. Intégrons l’intégrateur (LOL?)
    2
    RÉCHAUFFONS NOS MÉTHODES
    à la phase de conception pour une meilleure
    prise en compte des contraintes techniques,
    pour faire la version mobile et mieux gérer
    l’architecture de contenu, pour les emails/
    mailings afin de bien gérer le faisable/
    infaisable.

    View Slide

  37. Travaillons
    ensemble
    3

    View Slide

  38. BAH OUI.
    Déjà parce qu’on ne livre jamais
    le HTML d’un côté
    et le design de l’autre.

    View Slide

  39. Partageons notre veille, nos
    fiertés, nos astuces, nos galères
    3
    TRAVAILLONS ENSEMBLE
    Notre veille pour se donner de bonnes
    idées respectives, nos fiertés pour mieux
    savoir ce que font les autres, nos astuces
    et nos galères pour améliorer la
    collaboration et détecter les problèmes.

    View Slide

  40. Mettons à plat nos méthodes
    3
    TRAVAILLONS ENSEMBLE
    Ajuster les détails peut améliorer beaucoup
    de choses. Essayons de déceler ce qui peut
    être amélioré dans la chaîne de production :
    un changement ? Git ? Sketch ? Étudions les
    impacts sur le travail des autres.

    View Slide

  41. Faisons des points réguliers
    3
    TRAVAILLONS ENSEMBLE
    Chaque semaine, chaque jour, plusieurs fois
    par jour si le projet le demande ! Prenons
    goût aux « stand-up meetings » pour se
    tenir informés de ce qui a changé depuis le
    dernier point et ce qui impacte le planning.

    View Slide

  42. Rapprochons nos bureaux
    3
    TRAVAILLONS ENSEMBLE
    Une des causes de mésentente et de
    rigidité réside dans le manque de
    communication. Rapprochez-vous, bougez
    votre poste de travail le temps d’un
    projet !

    View Slide

  43. Plus de 9 mètres entre vos bureaux
    de ne jamais vous croiser.
    9
    10
    chances sur

    View Slide

  44. Osons travailler
    autrement
    4

    View Slide

  45. Montrons que c’est possible
    4
    OSONS TRAVAILLER AUTREMENT
    Si l’un de nos changements a contribué à
    faire réussir un projet, alors parlons-en à
    nos confrères et consoeurs : il deviendra
    plus réel et plus atteignable pour eux !

    View Slide

  46. Dispersons le virus chez les SysAdmins,

    directeurs/trices artistiques, commerciaux…
    4
    OSONS TRAVAILLER AUTREMENT
    Eux aussi sont concernés par des phases
    du projet : invitez-les à se tenir informés
    de l’évolution du projet, prévenez les
    SysAdmins de vos futures mises en
    production…

    View Slide

  47. Intégrons-les aux estimations
    4
    OSONS TRAVAILLER AUTREMENT
    Ces différents acteurs peuvent tous avoir
    un apport intéressant dans la phase
    d’estimation, qu’il soit technique ou
    pratique.

    View Slide

  48. Convainquons notre hiérarchie !
    4
    OSONS TRAVAILLER AUTREMENT
    Rien ne sert de se débattre si votre
    manager ou votre dirigeant ne comprend
    pas le bien-fondé de tous ces
    changements. Exposez-leur les bénéfices
    et demandez-leur de vous soutenir !

    View Slide

  49. EUH,
    ça marche vraiment, vos trucs ?

    View Slide

  50. Notre réalité

    View Slide

  51. Dans une ambiance que nous voulons agréable et
    bienveillante pour chacun, nous appliquons un
    maximum de bon sens à nos actions et nos choix.
    Nous faisons confiance à chaque membre de
    l’équipe et valorisons son apport.
    !
    Nous ne faisons plus de « devis », mais des
    « estimations » avec une fourchette tarifaire.
    Chaque acteur participe à l’estimation, et le plus
    souvent, le montant final se trouve dans la
    fourchette prévue !

    View Slide

  52. Nous tentons autant que possible de paralléliser
    les phases de travail. Très souvent, l’intégration
    commence peu après le début de la phase de
    conception. Nos designers sont à côté 

    de nos développeurs.
    !
    Résultat : nos clients nous font confiance. Nous
    nous permettons même de contacter certains
    pour prévoir avec eux les futurs projets !

    View Slide

  53. OUI MAIS…
    Ça vaut que pour les petites boites, non ?

    View Slide

  54. Petite ou grande entreprise, équipe de 3
    personnes comme de 20, il n’y a jamais plus d’une
    personne devant chaque ordinateur.
    L’essentiel est d’assurer une excellente
    communication au sein de l’équipe,

    et de s’assurer que chacun adhère 

    aux mêmes valeurs.
    NOPE.

    View Slide

  55. Dès la semaine prochaine,
    mettez en place ces trois
    petites choses :
    EN RÉSUMÉ

    View Slide

  56. Travaillez
    ensemble

    View Slide

  57. :-)
    Intégrez les
    intégrateurs

    View Slide

  58. <3
    Rapprochez-
    vous !

    View Slide

  59. Merci !
    @mcpaccard
    @goulvench
    Tweetez-nous vos changements !
    @ThinkInnovWeb
    LE 29 OCTOBRE 2014

    View Slide