Workflow et outils : ce que nous avons laissé derrière nous en 2015
L’année précédente a apporté de sacrés changements dans le fonctionnement de notre studio web.
En quelques mois, notre organisation s’est profondément transformée. Workflow, outils, process’, méthodo, bonnes pratiques… Tous les sujets sont passés à la moulinette. À tel point qu’aujourd’hui, nous avons l’impression d’être face à une toute nouvelle agence.
À l’origine de ce grand ménage : un sentiment diffus de “ras-le-bol” face à certaines problématiques récurrentes que rencontrent probablement la plupart de nos confrères.
> “Tu peux me renvoyer le document que tu m’avais skypé au début du projet ?”
> “Mince, quelqu’un a le mot de passe du compte FTP du site de pré-prod’ ?”
> “Non, on ne peut pas commencer les maquettes : le client est encore en train de plancher sur les contenus. Il va falloir qu’on décale à nouveau les plannings.”
> “On a bien reçu les feedbacks client sur les maquettes, mais ils nous les ont envoyés au compte-goutte. Une quinzaine de mails au total. Je synthétise le tout et je t’envoie ça.”
Bref, des sujets qui vont du simple inconfort occasionnel (quelques secondes de perdues pour retrouver une info) jusqu’au problème de fond qui nous empêche de fonctionner à plein potentiel (par exemple un problème de communication avec le client qui peut mettre le projet en péril).
L’amélioration continue, vaste chantier
La solution, ou plutôt faudrait-il dire “Les solutions”, nous les avons trouvées dans l’amélioration continue. À force de nous heurter aux mêmes problèmes (généralement sous des déguisements divers), nous avons pris le réflexe de chercher au quotidien et chacun de notre côté des solutions pratiques.
Repérer les problèmes récurrents, rechercher, échanger sur les solutions potentielles, les expérimenter, les tester et les analyser suffisamment pour s’assurer qu’elles sont pérennes.
À titre d’exemples, voici quelques-uns des changements que nous avons implantés ces derniers mois.
La gestion des mots de passe
Prenez un projet standard de création de site web. Au minimum, vous allez vous retrouver à jongler entre des codes d’accès pour le serveur FTP, la base de données, les identifiants .htaccess, l’accès à l’espace d’administration…
Doublez ces mots de passe (considérez au minimum un site de production et un site de test). Multipliez le résultat par le nombre de projets. Ajoutez les mots de passe spécifiques pour les cas particuliers (kits de paiement, compte de test sur le front-office, etc.). Enfin, ajoutez à tout cela les accès à des applications et services-tiers que nous utilisons nous-mêmes au quotidien.
Résultat : une masse qui dépasse allègrement pour notre agence les 500 mots de passe.
Au-delà de l’aspect pratique (nous utilisons des mots de passe à longueur de journée, et il faut bien les stocker quelque part puis les retrouver facilement), il y a bien entendu la question de la sécurité. Partager des mots de passe par mail ou les stocker en clair sur un document ne sont vraiment pas des options viables.
C’est pourquoi, jusque là, nous utilisions un coffre fort de mots de passe, hébergé sur notre propre serveur : SimpleSafe. Après plusieurs années d’utilisation, et un casse-tête quotidien dans la gestion des autorisations, nous avons finalement opté pour une solution plus complète : LastPass. Et le résultat est infiniment satisfaisant.
Last Pass, en résumé
- Une webapp et une extension pour le navigateur
- Un mot de passe maître permet de se connecter à son coffre-fort
- En arrivant sur un espace d’identification, il suffit d’un seul clic pour que LastPass nous connecte au compte choisi
- Chaque membre de l’équipe dispose de son propre compte et les admins peuvent facilement décider qui a accès à quoi
- Les mots de passe pro et perso sont séparés
- Les infos sont synchronisées en temps réel et accessibles quel que soit l’environnement de travail
- Une alerte est générée automatiquement en cas de mot de passe faible, répété ou présentant une faille, sur un service en ligne
Bye-bye Skype, hello Slack
Croyez-le ou non, l’un des outils les plus utiles en interne pour une agence web (du moins, pour la nôtre), c’est le tchat.
Un outil de messagerie instantanée ne permet pas que de s’envoyer des messages : il est aussi rudement pratique pour s’échanger des fichiers, des informations clés, des liens (et que sais-je encore), sans pour autant se bombarder de mails à tout bout de champ.
Autre intérêt du tchat, il facilite les échanges asynchrones (“Je reçois la demande, je ne suis pas obligé d’y répondre immédiatement”), ce qui évite l’un des travers de l’open-space : la culture de l’interruption.
Jusque là, nous utilisions Skype, un outil certes utile, mais plus vraiment adapté à nos besoins. Nous sommes passés à Slack le temps d’un test et le résultat dépasse nos espérances.
Slack, en résumé
- Un hyper tchat (dispo sur desktop, en mobile ou en webapp) incroyablement simple à mettre en place et à utiliser
- Une fois uploadé, un document reste disponible indéfiniment (dans la limite des 10 000 messages historisés que permet le plan “Free”)
- Des discussions “publiques” sur chaque projet, ce qui évite de devoir briefer chacun en 1–1
- Très pratique pour la veille et le partage d’articles intéressants, d’études de cas ou de nouveaux outils
- Des fonctions de recherche aussi bluffantes qu’efficaces
- Une liste impressionnante de logiciels tiers compatibles
Invision : petite révolution du workflow webdesign
L’un des moments clés (et à risque) de tout projet web, c’est celui où le client découvre les premières maquettes.
L’expérience nous a appris que, à moins de vouloir foncer droit dans le mur, il vaut mieux prendre le temps de bien présenter les maquettes au client.
Lui rappeler les objectifs. Expliquer nos choix. L’aider à comprendre comment les pages interagissent entre elles. Faciliter les feedback aussi (à chaud et à froid)… et montrer comment faire un retour sans tomber dans le “J’aime / J’aime pas”, l’a priori ou les préférences personnelles.
Cette phase cruciale peut avoir des conséquences lourdes sur le projet. C’est ce qui nous a poussé à essayer Invision, et à l’adopter inconditionnellement.
Invision, en résumé
- Un webservice qui permet de partager facilement des prototypes, des wireframes, des maquettes
- Le designer peut créer des hotspots, des zones cliquables qui permettent de mailler chacune des pages entre elles pour simuler une navigation
- Le client peut circuler entre les pages et lancer un fil de discussion sur un emplacement précis
- Le designer peut facilement paramétrer un header, prévoir des effets de hover, etc.
- Un historique de chaque page uploadée
- Un outil de moodboard souple, élégant et pratique
- Un outil de whiteboard collaboratif
- Un service qui bénéficie d’évolutions régulières et monte en puissance quotidiennement
Externalisation de la gestion de l’hébergement
Notre coeur de métier, c’est de concevoir et de réaliser des sites web. Généralement, lorsqu’un client passe les portes de l’agence, il attend de nous que nous proposions des solutions pour l’hébergement de son futur site.
Lorsque nous avons créé l’agence, il nous paraissait évident de gérer nous-mêmes cette prestation : nous avions donc opté pour la location d’un serveur dédié chez OVH, et décidé d’en assurer la gestion.
Quelques années plus tard, nous réalisons à quel point les ressources que cela nous coûte dépassent la valeur ajoutée pour nos clients.
En 2015, nous avons finalement franchi le pas et, après de longues recherches, trouvé le partenaire idéal pour assurer cette mission : Odiso.
L’hébergement externalisé, en résumé
- Un prestataire expert qui assure l’infogérance 24h/24, 7j/7
- Des garanties de performance et de sécurité
- Des interlocuteurs réactifs et compétents
Migrer l’ensemble de nos sites a été un sacré challenge qui a consommé énormément de ressources, mais le résultat est là : stabilité, sécurité, tranquillité d’esprit et rassurance pour nos clients.
Une nouvelle approche de l’avant-vente
Nous sommes avant tout des designers et des développeurs. Il n’y a pas de commerciaux dans l’équipe et nous vendre n’est pas vraiment dans notre ADN.
Mais l’avant-vente reste une phase incontournable, et nous avons appris que quelques améliorations bien choisies en phase commerciale peuvent régler bien des problèmes plus tard pendant le projet. Parmi les changements que nous avons mis en place en 2015, citons par exemple :
⇒ Animer un pipeline commercial sous Trello pour permettre à toute l’équipe de mieux suivre les nouveaux projets entrants
⇒ Formaliser un questionnaire simple de “premier contact” (une liste de questions pratiques qui nous permettent dès les premiers échanges de savoir précisément à quel stade en est le projet, quels sont les risques et si le partenariat entre ce client potentiel et notre agence est une bonne ou une mauvaise idée).
⇒ Afficher publiquement nos valeurs, que ce soit dans nos dossiers de remise commerciale ou sur notre blog (“Pourquoi nous ne livrons pas de maquettes au moment du devis”). Non seulement les retours de nos confrères et clients ont été très positifs, mais nous avons de plus senti une nette amélioration dans le niveau de sensibilisation des prospects.
⇒ À chaque nouveau projet entrant, nous avons pris le temps de peaufiner un peu plus nos dossiers de remise commerciale. Aujourd’hui, nous avons atteint un niveau de qualité sur ces supports qui fait probablement partie des raisons pour lesquelles nos nouveaux clients nous font confiance et choisissent de travailler avec nous.
Réunion de kick-off
L’un des pièges les plus courants, dans le déroulement d’un projet web standard, c’est que le client sous-estime son implication dans le projet et les efforts qu’il aura à fournir : qu’il s’agisse de piloter la direction que prend le projet, d’en valider l’avancement ou encore… de produire les contenus.
Si nous recommandons toujours à nos clients de passer par nos services pour la rédaction des textes de leur site, ce n’est pas pour vendre une prestation de plus. Il en va de la qualité du résultat (rédiger est un métier qui ne s’improvise pas) et de la tenue du planning.
D’expérience, nous savons que, lorsque le client décide de rédiger lui-même les textes de son site, la situation a tendance à se corser.
L’arborescence est modifiée pendant le projet. Le client sous-estime le temps nécessaire pour produire les contenus. Les textes sont livrés avec plusieurs semaines de retard sur le planning prévu.
À force de piges sur les bonnes pratiques des agences web US et d’échanges avec des confrères, nous avons mis au point un nouveau process pour ce genre de cas.
La création de contenu, en résumé
- Nous commençons chaque projet par un atelier de kick-off, de visu, avec tous les décideurs du projet
- Le client est informé à l’avance des éléments qu’il doit amener à cet atelier
- L’arborescence et les grandes lignes du contenu de chaque page sont abordés précisément pendant la rencontre
- Un planning est mis en place avec des deadlines précises pour la livraison des contenus clés (ceux dont nous avons impérativement besoin pour les maquettes)
Git et GitHub
Le versioning du code et le contrôle des sources sont des questions cruciales pour une agence web.
Disposer d’un endroit sûr pour stocker le travail des développeurs, conserver une trace de tous les changements apportés au code, pouvoir en un clic revenir à une version précédente du site, permettre à plusieurs développeurs de travailler simultanément sur le même code, partager facilement de la documentation sur le projet…
Autant de besoins qui rendent indispensables l’utilisation d’un CVS (Control Version System) dans une équipe web.
Pendant longtemps, nous avons utilisé SVN. En 2015 (il était temps), nous avons passé l’ensemble de nos projets sur GitHub.
Git et GitHub, en résumé
- Le number 1 du CVS, open source, constamment amélioré et upgradé par une communauté massive
- Un système décentralisé, simple à mettre en place, qui permet de partager facilement avec les autres un code source à jour
- Chacun peut travailler à son rythme, sans dépendre directement des autres
- Git conserve une chronologie de toute les modifications opérées sur chaque fichier, ce qui permet de suivre les évolutions du code plutôt que les versions successives d’un fichier
- Il est facile d’ajouter des développeurs externes à un projet
- Sans oublier la dimension communautaire et sociale de l’outil
Plannings, gestion des tâches et du quotidien
Peut-être l’un des sujets qui a connu le plus de tests et de changements chez nous en 2015.
Actuellement, nous utilisons :
- Un calendrier papier qui nous donne de la visibilité à plusieurs semaines pour chaque membre de l’équipe, à ½ journée près.
- Un tableau online en mode “Kanban”, sous Trello, qui nous permet de répartir l’ensemble des tâches de chacun sur le sprint à venir (1 sprint = 1 semaine)
- Une rétrospective à chaque fin de sprint pour collecter les retours de chacun et identifier ce qu’il faut éviter, maintenir et obtenir
- Une mêlée quotidienne qui permet à chacun de résumer en moins d’une minute ce qu’il a fait la veille, ce qu’il compte faire aujourd’hui, et les points de blocage éventuels.
Ces 4 habitudes permettent à chacun de bénéficier d’une bonne visibilité sur l’avancement des projets en cours et nous évitent de subir des effets de goulot dans les plannings ou de la déperdition d’information.
Le Wiki Interne
C’est la lecture d’un article publié chez Crew qui nous a motivé à concrétiser cette idée qui nous trottait dans la tête depuis plusieurs mois : comment éviter que certaines informations-clés ne soient connues que d’un seul membre de l’équipe ?
Comment éviter la catastrophe si cette personne est indisponible ou s’il arrive un accident ?
La solution a pris la forme d’un wiki (sous Trello en réalité), qui regroupe des informations-clés, des process, des bonnes pratiques, des templates, etc.
Le wiki, en résumé
- Spécificités techniques de certains projets (kits de paiements, versions particulières, etc.)
- Templates de mail et messages types pour les envois réguliers
- Rappel des process pour les tâches récurrentes (de la création d’un site de test à la prise de contact d’un client potentiel)
- Conventions CSS
- Cheatlist Markdown, Git, Ruby on Rails, etc.
Le Remote Working
Le Remote Working, que nous rechignons un peu à appeler “télétravail” (il y a un fossé entre ce que recouvre ce mot en France et aux États-Unis), est une approche qui nous attire depuis longtemps.
La manière dont l’appliquent et le décrivent des sociétés comme 37signals, Buffer, Crew, Zapier ou encore GrooveHQ n’en finit pas de nous fasciner.
En 2015, nous avons donc commencé à l’expérimenter, à raison d’une journée par semaine. Journée pendant laquelle toute l’équipe travaille de chez soi, à distance.
Le moins que l’on puisse dire après ces quelques mois de test, c’est que l’expérience est concluante.
Au-delà des avantages “évidents” qu’offre le Remote (éviter les déplacements pour se rendre au bureau, travailler dans une tenue décontractée et des conditions particulièrement confortables), nous avons observé des bénéfices concrets sur notre travail.
⇒ Une augmentation de la productivité : moins d’interruption et de bruits ambiants, un confort de travail qui se répercute directement sur notre efficacité, un cadre plus propice à la concentration ou la créativité, et une nouvelle manière de se fixer des objectifs qui dépasse le “être présent au bureau de 9 à 18”.
⇒ Une meilleure collaboration entre nous : le remote nous a appris à mieux faire circuler l’information, à nous assurer que chacun est à jour sur l’avancement des projets en cours, à communiquer plus clairement sur nos attentes, nos besoins et nos difficultés.
Bien entendu, le remote n’est pas une solution miracle : il y a plusieurs questions clés à régler et des précautions à prendre : assurer une séparation claire du travail et de la vie perso, être certain que chacun puisse travailler confortablement de chez soi, faire du remote une possibilité plutôt qu’une obligation, maintenir la culture de l’agence… Autant d’aspects à ne pas négliger.
Les résultats sont en tout cas prometteurs. Depuis peu, Vincent, développeur Ruby chez Impala qui a posé ses valises à Reims en début d’année, est passé en “full remote”. Un changement important dans notre organisation, qui nous amène à développer davantage cet aspect au sein de l’agence.
Une autre manière d’aborder le quotidien
L’année 2015 n’a pas manqué de coups durs, parmi lesquels de multiples cambriolages de notre agence, des projets annulés en cours de réalisation, des retournements décevants sur des projets que nous pensions prometteurs.
L’une des leçons que nous en retirons : apprendre à célébrer.
Ne pas se focaliser sur les mauvaises nouvelles. Prendre le temps de fêter les réussites, les mises en ligne, les bons résultats, les occasions joyeuses et les évènements marquants.
Multiplier les temps en équipe, qu’il s’agisse d’organiser un Workcamp, des repas d’équipes (avec de la raclette, si possible…), des sorties de groupe ou encore partager entre nous des photos wtf sur notre Tumblr (privé, bien sûr :-)).
Ne pas perdre de vue ce qu’il reste à apprendre ou à améliorer, d’accord, mais aussi se rendre compte du chemin parcouru.
Et cet article est un pas dans ce sens.
Et vous ?
Quels sont vos process, vos méthodos, vos outils favoris ou simplement vos bonnes résolutions pour 2016 ?
Edit 13/04 : si vous avez aimé cet article, découvrez stack.impala-webstudio.fr : la liste de nos outils, technos et ressources favorites compilés en un endroit.
