Une étude de cas en UX

 

Défi

Trouver une solution pour la création et modification des spécifications techniques.

Mon role: designer UI et développeur front-end

On voulait créer une solution maison pour standardiser la manière que l’information était organisée pour les documents et minimiser les possibilités pour faire des erreurs.

image of the final form

Recherche:

Nous avons demander à l’équipe de production de préciser les problèmes qu’ils voulait adresser.

Plannification

Nous avons commencé par identifier l’information exacte qui était incluse dans les spécifications techniques.

Design et Testing

Testing images
Nous avons commencé à concevoir le formulaire en ligne avec les données que nous avons reçues dans les étapes de planification. Notre premier test consistait à proposer un bouton de soumission qui pourrait envoyer par e-mail une page HTML qui s’afficherait dans la fenêtre d’e-mail et pourrait être exportée en PDF, mais les résultats étaient incohérents et variés selon l’agent de messagerie.

Notre développeur back-end a suggéré une excellente solution où, une fois le formulaire soumis, il serait ensuite stocké dans une base de données en ligne sous la forme d’un fichier XML qui pourrait facilement être importé dans un modèle InDesign.

InDesign a utilisé des styles pour maintenir un visuel cohérent et a été facilement exporté dans un format PDF. C’était la solution parfaite car elle nous permettait de contrôler l’information pour s’assurer que toutes les données étaient incluses et que nous pouvions garder la mise en page cohérente pour chaque spécification.

L’exemple sur la droite montre les wireframes de notre première idée de la formulaire, nous séparerions plus tard les spectres numériques et statiques et affinerions quelques autres champs.

Résultat final

Final product images

Après avoir créé les prototypes initiaux, nous avons décidé de pré-remplir le texte dans le formulaire pour faciliter la tache même plus. Nous avons également créé une liste consultable pour indexer et accéder à l’ensemble des specs techniques (à terme, il y aura plus de 700 spécifications techniques)

image of the final form
image of the final form


image of the final form
Ce projet a été publié en version bêta avec continue. La prochaine version avec quelques modifications pour réduire encore plus le nombre de champs et pour reconnaître le choix anglais du coté français et vice-versa.