Les 6 outils indispensables de nos UX et UI designers

#UX/UI #Clients

En ce mois de janvier 2021, nous avons sondé nos équipes design pour savoir quels étaient leurs outils phares pour travailler sur la conception des sites et applications que nous développons pour nos clients. Qui plus est, dans le cadre de la crise sanitaire, les designers ont dû s’adapter au travail à distance, tout en préservant l’aspect collaboratif des ateliers qu’ils avaient l’habitude d’animer en présentiel.

Voici les 6 outils indispensables de nos designers.

 

1. Miro pour animer nos ateliers fonctionnels, créatif et business à distance

Miro est un outil de travail collaboratif permettant de mettre en place n’importe quel atelier/workshop à distance. Il est possible de partir d’un tableau blanc ou d’un template pour créer un atelier et ainsi l’utiliser afin de mettre en commun les différentes idées d’un projet. Miro permet d’organiser ses idées en phase de réflexion dans la conception d’un produit ou d’une fonctionnalité : Mind Map, User Story Map, Kanban, Flowchart, etc.

 

Chez Beapp, il est utilisé par tous les corps de métiers de l’agence ou presque (direction, communication, business, projet, conception,…) car il offre un panel de fonctionnalités puissantes pour travailler en équipe avec de nombreuses possibilités d’animations.

 

La plateforme dispose d’une variété d’outils tels que le stylo, des autocollants de différentes formes, des cadres, un tchat, le timer, les votes, etc. qui permet aux utilisateurs de créer des tableaux, des notes ainsi que d’ajouter des liens, puis de les exporter au format de leur choix.

 

Ce que l’on aime particulièrement :

Le gros plus de cet outil c’est le fait de pouvoir donner la possibilité aux participants d’interagir avec le support de présentation en direct.

 

 

Une bibliothèque de templates est disponible avec la possibilité de créer et personnaliser ses propres supports.

Chez Beapp nous avons créé nos propres templates pour animer nos ateliers habituellement en présentiel.

 

Exemple de l’interface du tableau blanc

 

2. Figma, l’interface de prototypage collaborative

 

Habitués de Sketch, nos designers se sont essayés à Figma pendant cette année un peu particulière. Cet outil permet de travailler à distance, de manière collaborative et en ligne : UX designers et UI designers partagent un outil commun qui permet à chacun de continuer à travailler sur ses propres problématiques. 

La collaboration en équipe sur le même projet est très fluide et on peut voir les curseurs en live des autres utilisateurs. On retrouve aussi aussi un système de versionning qui nous permet d’avoir un historique du fichier et de pouvoir revenir en arrière si besoin.

 

Ce que l’on aime particulièrement :

Le fait que ce logiciel soit disponible en ligne via un navigateur web et qu’il soit collaboratif. Ses applications iOS et Android dédiées qui permettent de tester ses wireframes et maquettes en direct.

 

 

3. Invision : notre outil favori pour présenter et itérer

 

Invision permet de visualiser en ligne un ensemble de vues que vous pouvez séquencer comme vous l’entendez depuis Sketch ou Figma (grâce à un plugin) ou directement depuis Invision. 

Cet outil collaboratif permet aux équipes ou aux clients d’ajouter des commentaires afin de faire évoluer l’interface et propose du versionning afin de pouvoir consulter les évolutions et revenir en arrière au besoin.

 

Ce que l’on aime particulièrement chez Invision :

L’aspect collaboratif  et la fonction Freehand pour présenter les maquettes et / ou wireframes en annotant les retours en live.

 

 

4. Zeplin : pour faciliter la communication entre nos équipes design et technique

 

Nous l’utilisons pour optimiser le temps de travail entre l’équipe design, projet et technique. L’équipe design dépose sur le Zeplin les maquettes des futures apps ou sites. Zeplin permet ensuite aux équipes techniques de retrouver facilement les couleurs, typographies, marges, photos, etc, que doivent contenir les interfaces à développer. 

 

Ce que l’on aime particulièrement chez Zeplin : 

Le gain de temps ! Zeplin permet aux développeurs de pouvoir décortiquer minutieusement le contenu de chaque maquette sans avoir à tout re-demander aux designers. 

 

5. Marvel : pour réaliser un prototype animé en quelques clics

 

Nos équipes et clients adorent les maquettes animées sous Marvel. Le but étant de mettre en situation le fonctionnement et la navigation d’une future interface. 

Marvel dispose d’une application mobile sur Android et iOS qui permet de télécharger la maquette animée et de se projeter dans l’interface maquettée. 

Parfait pour présenter au client afin qu’il se projette.

 

C’est aussi un outil très pertinent pour mettre en place des tests utilisateurs.

 

Ce que l’on aime particulièrement 

Des fois cela ne s’explique pas, bon nombre d’outils permettent de faire la même chose que Marvel, mais c’est notre petit chouchou pour le prototypage animé depuis des années !

 

 

6. Maze : pour réaliser des tests utilisateurs à distance

 

Avec le télétravail, nous avons dû nous mettre davantage aux tests à distance, nous utilisons Maze pour réaliser des questionnaires et tests utilisateurs à distance sur la base de nos maquettes animées, puis de générer un rapport détaillé.

Le principe de l’outil est de nous aider à créer le script de test en donnant aux utilisateurs des missions à effectuer.

Côté utilisateur, une simple URL permet de participer au test, et aucune installation n’est requise pour les testeurs.

A l’issue du test, un rapport analytics complet permet de préparer un compte rendu très précis au client sur les résultats de son test.

 

Ce que l’on aime particulièrement

  • La compatibilité avec Figma, Sketch, Invision, Marvel via une simple URL.
  • L’interface ludique et ergonomique

 

 

 

Nous espérons que ces quelques outils pourront également vous aider dans la conception de vos applications mobiles ou sites web. La multitudes de fonctionnalités que proposent ces applications nous a fortement soulagé ces derniers mois dans la gestion à distance du travail, mais aussi des ateliers que nous menons avec nos clients et les utilisateurs. 

Vous souhaitez vous former à nos méthodes de travail ? Contactez-nous! 

 

Photo by Sigmund on Unsplash

 

 

Ces articles peuvent vous intéresser

Quel est l’intérêt du design sprint pour vos projets digitaux ?

5 octobre 2020

Vous avez déjà entendu parler du design sprint ? Bien plus qu’un mot à la mode, c’est devenu...

Lire l'article

8 astuces à connaître pour une page de connexion / inscription parfaite sur mon application

20 janvier 2020

Une bonne expérience sur mobile dépend de nombreux paramètres, mais, comme pour tout, la première...

Lire l'article