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 full-size slide

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

    View full-size 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 full-size slide

  4. Et c’est ainsi que vos projets

    se passent mal.

    View full-size slide

  5. Et c’est ainsi que vos projets

    se passent mal.
    Très mal…

    View full-size 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 full-size slide

  7. Le constat
    est amer
    T_T

    View full-size slide

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

    View full-size slide

  9.  
    Organisations
    compartimentées

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

    View full-size slide

  10.  
    Organisations
    compartimentées

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  14. ✓ Utilisables
    ✓ Navigables
    ✓ Respectueuses

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

    View full-size slide

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

    View full-size slide

  16. Car nous avons

    le pouvoir
    et le devoir 

    de changer les
    choses
    !

    View full-size slide

  17. C’est parti !
    \o/

    View full-size slide

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

    View full-size slide

  19. « Le Client est Roi. »

    View full-size slide

  20. Le besoin du client est roi.

    View full-size slide

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

    View full-size slide

  22. !
    !
    !
    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 full-size slide

  23. 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 full-size slide

  24. !
    !
    !
    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 full-size 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 !
    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 full-size slide

  26. 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 full-size slide

  27. Quelques conseils
    pour y arriver
    \o/

    View full-size slide

  28. Remettons-nous en
    question
    1

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. Réchauffons
    nos méthodes
    2

    View full-size slide

  34. É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 full-size slide

  35. 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 full-size slide

  36. Travaillons
    ensemble
    3

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

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

    View full-size slide

  43. Osons travailler
    autrement
    4

    View full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. Notre réalité

    View full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

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

    View full-size slide

  53. 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 full-size slide

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

    View full-size slide

  55. Travaillez
    ensemble

    View full-size slide

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

    View full-size slide

  57. <3
    Rapprochez-
    vous !

    View full-size slide

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

    View full-size slide