Update : Aujourd'hui nos équipes utilisent et conseillent l'outil Figma. Des maquettes au design system, c'est l'outil le plus complet que nous avons testé jusqu'ici. Si vous voulez en savoir plus sur notre utilisation de Figma, notamment pour la création d'un design system, nous vous conseillons cet article : Créer un design system adapté à chaque client quand on est une agence.

‍

Depuis Octobre, notre équipe UX a fait le choix d'utiliser Sketch pour la créations des maquettes. L'avant Sketch nous paraît désormais obscure et compliqué pas seulement en terme de création graphique mais aussi en terme d'impact sur les développements. Ceci en grande partie grâce à un logiciel de collaboration nommé Zeplin.

‍

Prologue

Pour vous expliquer la raison de notre utilisation de Zeplin, il me semble important de vous expliquer le fonctionnement de BAM dans notre process UX...L'histoire commence sur un projet lambda, appelons-le Léopard, comme sur tous nos autres projets, le parcours utilisateur de Xion sera défini durant les ateliers UX où toute l'équipe est présente. En effet, une des particularités de notre méthodologie à BAM est que nos équipes travaillent en étroite collaboration. A partir des wireframes produits durant ces ateliers, l'UX élaborera des maquettes en utilisant le fameux logiciel de création Sketch. Pourtant, malgré les nombreux avantages d'utiliser Sketch, nous avons rapidement rencontré un problème. Bien que la collaboration durant la phase de conception UX soit facilitée par les ateliers UX, elle n'était pas aisée durant la phase d'intégration des maquettes : perte de temps à l'intégration, utilisation des mauvaises versions des maquettes, manque de communication entre les membres de l'équipe, perte de temps à l'export, etc.

Puis nous avons découvert Zeplin. Et ça nous a simplifié la vie.

ZEPLIN kézako ?

Zeplin est un logiciel qui facilite énormément la collaboration entre designers et développeurs. Comment ?

• Rapidité de l'export :

Le logiciel permet aux UX designers un upload rapide de leurs maquettes d'écrans directement depuis Sketch (ou Photoshop) sur Zeplin.

• Diminue le temps d'intégration :

Les développeurs ont accès, dans un endroit unique, à l'ensemble des écrans. Avec Zeplin, plus besoin d'estimer la taille de chaque élément de l'écran : l'intégration se fait plus rapidement grâce aux outils permettant de définir les marges, les tailles, les couleurs et la police de tous les éléments des pages. A titre d'exemple, nos développeurs ont gagné approximativement 1/2h par écran, ce n'est pas rien !

• Pixel-perfect :

Un deuxième avantage d'avoir facilement et rapidement accès aux différentes tailles et espacements est, bien entendu, que les maquettes sont respectées et que l'intégration peut se faire au pixel près.

• Compréhension entre les différents partis :

En cas de doutes ou de questions sur certains éléments designs, n'importe quel membre de l'équipe peut poster un commentaire directement sur l'élément concerné de la maquette.

Pourquoi tout le monde devrait utiliser Zeplin ?

Les tools & tips pour UX :

EXPORT

• Un plugin directement implémenté sur Sketch permettant une exportation rapide dans le logiciel
• Une mise à jour instantanée de chaque écran mais avec tout de même un historique des versions pour retrouver ce qui a été fait
• Une exportation des écrans Zeplin en PNG
• Une exportation directe des icônes en PNG, SVG ou PDF

GRAPHISME

• La possibilité de définir une charte graphique à partir des couleurs et polices présentes dans les maquettes afin de vérifier la cohérence des couleurs et polices utilisées
• La possibilité d'ajouter des annotations sur les écrans pour le reste de l'équipe afin de décrire plus précisément certaines fonctionnalités ou parcours sans avoir besoin de faire un prototype cliquable.

PROJETS

• Une navigation facile entre les différents projets Zeplin grâce à un dashboard regroupant les différents projets
• Des notifications lorsque l'on est owner du projet dès que quelqu'un upload des écrans ou fait des commentaires pour suivre l'avancée des projets.

Les tools & tips pour dév :

"Avant j'utilisais un PNG et je me demandais : Comment je vais faire pour traiter cet écran ? Avec Zeplin j'ai les vraies informations pour travailler dans de bonnes conditions. C'est génial." Nicolas, développeur chez BAM

INTEGRATION

• Une intégration précise grâce aux outils marge, espacements, couleurs et taille de police
• La possibilité de récupérer le CSS des éléments enregistrés dans la stylesheet
• La possibilité de nommer les couleurs / polices de la stylesheet comme sur le code

ASTUCE ! La possibilité d'ouvrir en écran dans une fenêtre à part et d'en réduire la transparence pour vérifier l'intégration sur un simulateur

ORGANISATION

• Être sûr d'avoir la dernière version d'un écran car les écrans portant le même nom sont automatiquement mis à jour
• Trouver facilement l'écran recherché grâce à un système de tag qui permet de trier les écrans par fonctionnalités

Les tools & tips pour l'équipe :

"Je trouve ça cool. C'est une super solution car c'est un endroit unique où je peux chercher les designs rapidement, à l'inverse de Drive, Trello, etc." Xavier, développeur chez BAM

COLLABORATION

• Possibilité de commenter des parties d'un design et d'ouvrir une discussion afin que tous les membres de l'équipe puisse donner leur avis (dév, UX et client)
• Une exportation facile de chaque écran au format PNG pour les clients qui voudraient montrer les derniers écrans à leurs stakeholders
• Des notifications lorsque l'on a été taggé sur un écran afin que l'on puisse facilement suivre les conversations
• Un lien propre à chaque écran pour partager et retrouver l'écran facilement

ASTUCE ! Partager le lien Zeplin sur Trello permet d'avoir toujours automatiquement la dernière version de l'écran - à l'inverse d'un PNG qu'il faut uploadé très fréquemment.

ASTUCE 2 ! Vous pouvez organiser les écrans par dernier ajoutés ou bien par nom pour les retrouver plus facilement.

• L'invitation facile de membre dans la team via leur adresse mail (ils devront quand même se créer un compte Zeplin)

EN CADEAU

• Des émoticônes rigolotes comme des chats ou des ballons à poster dans les commentaires
• Un outils très intuitif avec de nouvelles fonctionnalités presque chaque semaine qui répondent exactement à vos besoins :)

Nous aimons vraiment Zeplin. Si vous aussi vous avez des expériences à partager, n'hésitez pas à nous laisser des commentaires :)

Pour en savoir plus : zeplin.io

La vidéo explicative : https://www.youtube.com/watch?v=tbKZAGthUgQ