Aperçu
Alternance pendant un an chez Chapsvision avec pour mission principale la fusion des interfaces NP6 et l’ajout de nouvelles fonctionnalités.
Contexte
« Chapsvision est un éditeur français de logiciels qui propose des solutions pour le traitement de données massives et hétérogènes. NP6 est l’une de ses solutions, spécialisée dans le marketing automation avec des campagnes multicanales.
La solution NP6 se compose de deux applications qui doivent fusionner. Afin de rendre la solution plus homogène, il faut revoir les visuels de la solution via un audit et planifier les modifications à effectuer tout en concevant les nouvelles fonctionnalités. Il faut reprendre les design system pour n’en avoir plus qu’un commun et le plus détaillé possible. »
Quand était-ce ?
Début Janvier – fin Décembre 2023
Mon rôle
concepteur d’expérience ; UX/UI Designer ; graphiste
Les défis
- fusionner deux interfaces avec des visuels et technologies différentes en les modernisant toutes deux
- concevoir de nouvelles fonctionnalités ou améliorer des fonctionnalités existantes lors des sprints pour répondre aux attentes des clients
- changement d’outils de conception et de technologies
- gérer le design system (via atomic design), ajouter ou supprimer des éléments, proposer une nomenclature claire pour chaque utilisateur et les traduire en storybooks pour les différents services de l’entreprise
Mes solutions
- faire un audit des deux solutions pour conserver le meilleur
- brainstorming, analyses et tests multiples de fonctionnalités
- analyse des possibilités, passage d’un outil à un autre en ajustant ce qui doit l’être selon le logiciel, micro-formation
Responsabilités
- maintenir, transformer, améliorer et unifier le design system
- concevoir de nouvelles mascottes et visuels selon les besoins
- conception de wireframes, maquettes et prototypes
- responsable de l’UI de NP6
Mon approche
Audit des interfaces
Afin de mieux comprendre NP6 et ses solutions, j’ai réalisé un audit de celles-ci. J’ai pu noter toutes mes incompréhensions des outils, mes remarques visuelles (différences entre les deux applications, problèmes de placements…), les éléments facilitant la compréhension des actions, etc. J’ai ensuite partagés ces différentes remarques aux Product Owners (PO) de NP6 et autres UX/UI designers ou développeurs pouvant s’occuper des applications. Ils ont alors pu répondre à mes interrogations comme prendre en compte le point de vue « d’un œil neuf » pour les inclure aux sprints, en commençant par les éléments modifiables rapidement avant de s’attaquer à ceux demandant plus de réflexions.
Réalisations
Une fois les tâches découpées et placées dans le board Azure, nous les prenions selon leur priorité. En plus de celles qui m’étaient affectées, je prenais également plusieurs tâches qui consistaient à redesigner des éléments et maquettes associées pour gagner en homogénéité et maintenir le design system. Pour chaque tâche je veillais à contacter le ou les PO l’ayant créée afin de mieux comprendre les besoins et attentes de celle-ci. Je réalisais ensuite divers wireframes à valider ou modifier avant de réaliser les maquettes finales que je transmettais aux PO et développeurs. Pour certaines tâches plus complexes je m’appuyais sur les connaissances et retours de mes collègues UX/UI designers afin d’échanger sur les diverses solutions qui pouvaient convenir. Ainsi, nous parvenions à trouver des réponses innovantes et respectant les éléments existants de l’application.
Pour le design system (DS), j’ai, dans un premier temps repris toutes les couleurs et fonts utilisées. J’ai comparé leurs utilisations et supprimé les éléments redondants ou inutilisés. Lorsque certains éléments étaient trop proches, je les ai modifiés ou ai ajouté des éléments pour proposer plus de choix aux utilisateurs de NP6. Pour plus de compréhension et de facilité d’utilisation pour les utilisateurs du DS, j’ai également catégorisé ces différents éléments, les ai renommés selon leurs utilisations et ai proposé une alternative en rgba aux codes hexa. Lorsque nous avons dû changer de logiciel, en passant de Adobe XD à figma, j’ai repris les différents élément du DS pour les rendre utilisables plus facilement sur figma. Ainsi, par exemple, nous gagnions du temps avec les divers styles, variables, composants et auto layouts implémentés dans le figma. Puisque j’étais en charge du DS, j’ai également rajouté les nouveaux éléments conçus pour les nouvelles fonctionnalités ainsi que ceux modifiés pour la fusion des deux interfaces. Pour s’assurer que le DS soit le plus simple à utiliser pour tous, j’ai suivi les bases de l’atomic design et design tokens.
L'expérience
Ce que j'en retiens
J’ai beaucoup appris à pouvoir travailler avec d’autres designers. Chapsvision éditant de nombreux logiciels il fallait que nous gardions une cohérence de « groupe », même si les logiciels en question n’étaient pas utilisés par les mêmes personnes. Le fait de pouvoir échanger sur des composants qui pouvaient fonctionner ou non avec les utilisateurs m’a montré l’infinité de possibilités pour chaque écran ou module d’une application web. J’ai également pu repousser mes peurs de modifier l’existant, modifier le travail d’un autre en le déconstruisant, en le modernisant pour une autre utilisation, aller plus loin pour continuer à simplifier la vie de l’utilisateur.
Ce que j'espère avoir partagé
J’espère avoir pu partager mes connaissances sur certains logiciels tels que Illustrator ou Figma à mes collègues pour qui ils pouvaient être une peine. J’aime à croire qu’ils se souviendront de moi pour les raccourcis claviers improbables, les vulgarisations de contenus, les analyses et jeux de rôles, les moments d’incompréhensions résultant en de belles découvertes ou améliorations, et surtout, pour ce que j’ai pu leurs partager sur l’accessibilité web (mon éternel cheval de bataille).
