Lucille Mercier
UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦
← Retour au portfolio

Le contexte

Le projet ?

Opencellsoft est une startup dans le milieu de la facturation, créée en 2015. Elle propose une plateforme agile de monétisation qui permet aux entreprises à revenus récurrents de lancer rapidement de nouveaux services, de monétiser de nouvelles sources de revenus et d'offrir une expérience client améliorée.

Maquettage des écrans inclus dans le parcours cible

Le contexte ?

Dans le cadre de la revue de l'expérience utilisateur sur un parcours défini, j'ai été amenée à travailler avec les équipes produit et IT sur la création de maquettes. Avant mon arrivée, l'équipe produit avait déjà travaillé à la refonte de plusieurs parcours actuels afin de faciliter l'expérience utilisateur.

Mon rôle ?

Je me suis basée sur ces user flows existants afin de réaliser les premiers écrans. Au fur et à mesure des réalisations, j'ai pu apporter, en plus de mes compétences d'UI designer, des conseils d'UX designer afin d'améliorer ces parcours.

Fiche offre Opencell — mode consultation, brouillon

Fiche offre — mode consultation.

Fiche offre Opencell — mode édition

Fiche offre — mode édition.

Page client Opencell — informations client, souscriptions et transactions

Page client — informations générales, souscriptions et transactions.

Operations cockpit Opencell — IT flow, billing process, cash collection, account operation

Operations cockpit — suivi des flux IT, facturation, encaissements et opérations comptables.

Création d'un design system

Mon rôle ?

Accompagnant les écrans désignés, j'ai créé en parallèle un design system afin d'homogénéiser le design, mais aussi le comportement des composants dans toute la plateforme. Ce design system a été réalisé avec la méthode de l'atomic design et créé en collaboration avec les développeurs front. Les librairies utilisées sont MUI v6, AG Grid et Chart.JS.

Composant AG Grid Opencell — organisme, tableau avec tri, statut, chip et progress bar

Organisme — AG Grid, le tableau de données principal d'Opencell.

Composant Button / IconButton Opencell — variantes primary, secondary, text, tous états

Atom — Button / IconButton.

Composant Chip Opencell — variantes success, warning, error, info

Atom — Chip.

Composant Text field Opencell — default, with icon, with adornments, tous états

Atom — Text field.

Formation Figma auprès des équipes

Le contexte ?

Figma n'étant pas mis en place au sein d'Opencellsoft, j'ai pu conduire des séances de formation auprès des équipes produits.

Mon rôle ?

Le but étant que l'équipe produit puisse, par la suite, utiliser facilement Figma pour modifier ou créer rapidement des écrans grâce au design system. Quant à l'équipe IT, cela leur permet d'avoir facilement accès au design system pour la création du storybook, en cours.

Slide de formation — L'auto-layout, kesako ? et démonstration dans Figma

Support de formation — l'auto-layout, kesako ?

Slide de formation — Figma first steps, les fenêtres annotées

Support de formation — Figma first steps, les fenêtres.

Fichier Figma des exercices de formation — auto-layout, documentation et pratique

Fichier Figma des exercices pratiques réalisés par les équipes.

Continuer la visite

Retour au portfolio →