Au sein de l'entreprise Ubstream, le sujet à été confié à l'équipe qui s'occupe des fonctionnalités des documents pdf.
La méthode du Design Thinking et Agile sont appliquées dans cette équipe composé d'un product owner, d'un UX/UI Designer (moi-même) et de développeurs.
Au sein de l'entreprise Ubstream, le sujet à été confié à l'équipe qui s'occupe des fonctionnalités des documents pdf.
La méthode du Design Thinking et Agile sont appliquées dans cette équipe composé d'un product owner, d'un UX/UI Designer (moi-même) et de développeurs.
Ubstream (digital product publishing, SaaS)
Fonctionnalité
Permettre aux utilisateurs de pouvoir signer et demander des signatures sur un document stocké sur leur espace collaboratif.
• Etude du marché de la signature électronique et benchmarks.
• Conception de wireframes.
• Réalisations des parcours utilisateurs.
• Création des prototypages.
• Ecritures des spécificités techniques (guidelines, wording…).
• Création d’icônes et ajout via Gitlab.
Le produit à la volonté de garanti un espace de travail le plus complet aux usages des utilisateurs.
Les utilisateurs du produit utilisent de manière régulière des services externes pour signer des documents stockés initialement dans le produit.
L’intégration de la signature électronique dans le produit est la solution qui permet de tout gérer au même endroit. Les utilisateurs gagnent en praticité et rapidité d’exécution.
Le service de signature électronique est aussi inclus dans le forfait d’abonnement. Les utilisateurs n’ont plus besoin de souscrire à un service supplémentaire.
Chaque réunions nous à permis de bien définir l’objectif, les problématiques à résoudre, les limites techniques.
La priorité pour cette première version était :
• De proposer la fonctionnalité sur les écrans de bureau uniquement afin d’optimiser au mieux l’utilisation et garanti une bonne accessibilité.
• De donner la possibilité de signer soi-même, envoyer une demande de signatures aux utilisateurs du produit et de pouvoir signer une demande de signatures.
• Les champs disponibles pour signer sont la signature, le paraphe et le tampon.
• Des autres champs seront prévus dans les prochaines itérations.
Les phase de brainstorming, benchmarks, audits des utilisateurs sont les étapes importantes pour comprendre et réunir le maximum d’informations sur le sujet.
En utilisant l’outil Figjam, on peut rapidement faire des diagrammes pour élaborer le premier parcours utilisateur.
Cette façon permet de lier toutes les interactions souhaités en prenant compte du périmètre.
Et en utilisant Figma, les wireframes montrent les emplacements des blocs et les interactions possibles.
Les prototypages des wireframes sont testés au sein de l’équipe mais également par les autres products owners et UX-UI des autres équipes.
Cette étape nous permet de :
• définir l’ensemble des éléments présents dans chaque étapes des parcours.
• vérifier que les parcours sont intuitifs et fluide.
• s’assurer que la hiérarchie des informations et les axes principaux soit bonnes.
• définir les animations et interactions attendu.
• permettre des ajustements rapides.
Chaque parcours est composées de multiples écrans et interactions. Des écrans détaillés et prototypés permettent d’être le plus fidèle possible à la fonctionnalité finale attendu par l’équipe.
Ainsi, les membres de l’équipe peuvent facilement exprimer leur point de vue à travers les prototypes afin d’améliorer les parcours.
Quand l’ensemble des parcours est conforme aux attentes établis par l’équipe, il faut agrémenter les parcours d’indications techniques pour les développeurs BACK et FRONT.
Sur Figma, des spécifications techniques sont ajoutées.
Avec l’outil Notion, toutes les informations sont indiqués pour permettre une bonne intégration et développement. De même pour les traductions français/anglais.
Dans cette phase, chaque parcours sont testées avant la mise en production.
Les tests permettent de vérifier la fidélité du design par rapport aux écrans livrés, de tester les animations et intégrations avec les autres fonctionnalités du produit. De reporter d’éventuelles bugs.
En parallèle de l’attente de l’implémentation, les prochaines itérations ont commencé à être réfléchi.
Cette itération permet de gagner du temps dans l’ajout de champs identiques sur des documents avec beaucoup de pages.
Exemple, on souhaite mettre sa signature sur la page 1,2,3,4 et 5.
Les étapes sont :
• Glisser/Déposer le champ signature sur la page 1.
• Cliquer sur l’icône « Dupliquer » afin d’accéder à la fonctionnalité.
• Choisir de placer sur des pages personnalisées.
• Saisir les pages « 2,3,4,5 ».
Les utilisateurs pourront ajouter des champs « saisie de texte » pour indiquer aux signataires la saisie d’un texte précis.
Exemple : On souhaite que les signataires écrivent « Lu et approuvé » sur le document.
Les retours utilisateurs sont importants pour améliorer le produit et s’adapter au mieux aux habitudes d’usages.
Dans le cas de la signature électronique, des tests en interne ont été mis en place avec des utilisateurs novice avec le produit.
En complément de cette fonctionnalité, une vue récapitulative de toutes les signatures faites sur les documents est envisagé pour gagner en praticité dans la navigation et en efficacité de gestion.