Conception UX/UI d’une application mobile & desktop – Agence Wess Soft

Pour l’agence Wess Soft et le client Tramatex, j’ai réalisé l’UX/UI d’une application mobile visant à dématérialiser la création d’un dossier de sinistre pour les entreprises du secteur maritime.

Quand un sinistre sur un porte conteneur a lieu, beaucoup de démarches administratives sont à entreprendre. Entre autres, celles de constater les dégâts par la prise de photos et l’alimentation du dossier en pièces administratives.

L’objet de l’application est de dématérialiser les dossiers de sinistre et permettre une consultation & accessibilité de son contenu par toutes les parties prenantes du sinistre.

Étude & analyse de l’existant

Le client utilisait un dossier papier contenant plusieurs dizaines de pages qu’il imprimait à chaque fois pour réaliser une déclaration de sinistre.
À ce dossier papier, il devait rajouter toutes les pièces administratives : justificatifs, preuves, photos, etc.
J’ai étudié le dossier papier, son arborescence, son architecture d’information & la manière dont il est habituellement rempli par l’assureur.
J’ai analysé la manière dont les pièces administratives étaient attachées au dossier, et leur accessibilité.
J’ai ensuite mis à plat toute l’arborescence pour avoir une vue globale de la contenance & des imbrications entre les différentes parties du dossier.

Wireframing

Le client avait émis une demande importante : que la dématérialisation de son dossier papier puisse être réalisable & consultable n’importe où. Les wireframes ont donc été réalisés en format mobile en premier lieu, et ensuite ont été déclinés en format desktop.
Cette étape de wireframing a permis de matérialiser les parcours utilisateurs de l’assureur, principal utilisateur de l’application, mais aussi des autres parties prenantes du sinistre, comme les collaborateurs de l’entreprise.
L’objectif principal de l’utilisateur « Assureur » est de remplir & créer son dossier de A à Z via l’application et de pouvoir naviguer dans un dossier facilement et retrouver toutes les pièces ajoutées rapidement.
L’objectif principal de l’utilisateur « Collaborateur » est de suivre l’avancée de la création d’un dossier et de pointer facilement les pièces manquantes ou les étapes à produire pour sa finalisation.
Le wireframing version mobile & desktop a été testé par les différents utilisateurs et a permis de mettre en évidence des optimisations, des simplifications ou à contrario des ajouts de fonctionnalités permettant d’honorer la promesse de base.

Design & prototypage

La dernière phase du projet a consisté à définir un design system en accord avec la charte graphique de l’entreprise du client et qui permette de définir différents composants selon les usages & interactions réalisés.
J’ai créé le design system contenant entre autre : boutons, champs de saisie, vignettes, formulaires, frames, typographies, couleurs, comportements des composants, etc.
Après que le Design system a été réalisé, j’ai réalisé l’UI des maquettes mobile & desktop et j’ai animé les prototypes pour refaire des tests utilisateurs en simulation réelle.
Les tests utilisateurs réalisés après la réalisation de l’UI ont permis de réaliser des ajustements fonctionnels et graphiques mineurs.