Amélioration et refresh d'une web app (ui revamp)

Information

Contexte

Dans le cadre d'un processus de recrutement je me suis prêté au jeu d'un rafraichissement de l'interface de 2 écrans et l'amélioration ergonomique d'un logiciel de notes de frais. J'ai donc travaillé, selon l'énoncé, sur un écran avec toutes les notes de frais et un autre pour une note de frais donnée.
Pour des raisons de confidentialité j'ai modifié l’identité (couleur/logo)

Objectifs

Donner une image professionnelle, rigoureuse et précise tout en proposant des améliorations ux.

Méthodologie

UI

Pour la proposition je me suis appuyé sur une grille de 8 (size et spacing) afin de garantir une hiérarchie visuelle consistante et harmonieuse avec l'idée de faciliter les évolutions futures. J'ai aussi travaillé sur des « patterns » notamment de navigation ou de contrôle de navigation (boutons d’action spécifiques par exemple). Ainsi chaque « bloc fonctionnel/sémantique » (qui a un sens particulier dans sa fonction) ou organisme (atomic design) à une apparence et des actions qui lui sont propres. On retrouve ainsi une partie informationnelle/contextuelle avec des actions spécifiques, une partie de filtrage et enfin une partie avec l'ensemble des données (sous forme de tableau).

Variables

J'ai créé des variables conditionnelles pour la partie checkbox du tableau afin d'afficher le nombres d’éléments sélectionnés et d'activer un bouton d'action si l'une des lignes est sélectionnée (cf. vidéo ci-après).