*3 projets, 3 mini case studies : convertir des enjeux métier en UX/UI concrète.* > [!note] > Projets présentés sans visuels ou informations sensibles (NDA) # Refondre la hiérarchie de l'information et l'accès aux actions pour un tableau de bord de gestion des commandes `web app` `back-office métier` ==🔵`Team : PO + 2 Dev`== Ma mission consistait à proposer une UI plus lisible et plus cohérente pour un back-office de gestion des commandes dans le secteur de la grande distribution. Cette proposition devait ouvrir la voie à une refonte auprès d’un client existant, tout en respectant son schéma de données. L’enjeu n’était donc pas de lancer un chantier technique majeur, mais d’améliorer l’UX/UI, la lisibilité et l’accès aux actions. **Enjeux design principaux** Comprendre les différents états d’une commande, les informations qui leur sont associées et les actions réellement disponibles pour un opérateur à chaque étape. Il fallait distinguer clairement ce qui relevait des traitements automatiques et ce qui nécessitait une intervention humaine. ![[../_site-assets/UX-UI chez Onepoint (2024) V2/tag.png]] *2 processus coexistent : un magasin et un livreur. Chacun ayant ses propres états et donc labels.* > [!note] > **Audit de l’existant** (écrans et dans la mesure du possible procédures) > > *Une Action ⇒ un bloc. > Une Info ⇒ un onglet. > Un filtre sur une liste ⇒ un onglet.* > > L’existant semblait s’être construit par empilement. Chaque ajout semblait introduire son propre espace ou son propre bloc, au détriment de la hiérarchie globale. Résultat : une information éclatée, des actions dispersées et une navigation qui multipliait les ruptures de contexte. > > **Exemples types :** > > - les visuels compensaient l’absence de structure (carte + titre + description + primary button pour une simple action) ; > - la navigation était peu relationnelle, avec peu de passerelles directes entre les entités utiles au traitement d’une commande (pas possible d’accéder rapidement au magasin par exemple). > [!note] > **Axes d’améliorations pour le module de commande :** > > - simplifier l’organisation des onglets et des blocs ; > - clarifier les libellés et la mise en contexte des actions ; > - rendre les informations clés plus lisibles et plus comparables ; > - recentrer les interactions complexes dans des patterns plus cohérents. ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Commande_detailsconex.png]] *La page de commande est réorganisée en cinq modules (au lieu de 6 onglets) et la hiérarchie de l'information est remise à plat.* ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Screenshot_2026-04-14_at_19.01.33.jpeg]] *Les actions sont regroupées et rendues rapidement accessible, en plus de rester accessibles dans leurs modules respectifs. L’ensemble des actions peut être réalisé directement depuis la liste de commande si nécessaire.* ![[../_site-assets/UX-UI chez Onepoint (2024) V2/modale.png]] *Les comportements proches de modales ont été recentrés dans de vraies modales, pour un système plus clair et plus modulaire.* *J’ai suivi l’intégration d’une partie des écrans, mais mon stage s’est terminé avant que je puisse avoir une visibilité complète sur la suite donnée au projet.* # **Concevoir un MVP de dataviz pour la préparation stratégique d’une équipe esport** `webapp` `dataviz` ==🔵`Team : 1 Dev`== Ce projet explorait la faisabilité d’un outil de datavisualisation destiné à accompagner la préparation stratégique d’une équipe esport interne. En s’appuyant sur les données disponibles via l’API Riot, l’objectif du MVP était de vérifier qu’il était possible de transformer un volume important d’informations en une interface utile à la lecture rapide et à la prise de décision, plus utile que les solutions publiques existantes (ex. [op.gg](https://op.gg/)). **Enjeux design principaux** - Comprendre rapidement les logiques de lecture et le jargon propres à *League of Legends* (je n’y ai jamais joué). - Identifier les statistiques réellement utiles à la décision, ainsi que les indicateurs pivots. - Donner au MVP une qualité visuelle suffisante pour le rendre crédible et désirable. **Méthode** Je me suis appuyé sur des échanges réguliers avec les joueurs et le coach pour valider les informations importantes, leur interprétation et leur utilité réelle. Des schémas m’ont ensuite permis de clarifier la structure des données, les relations entre entités et le périmètre faisable du MVP avant d’itérer sur l’interface. ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Smart_Draft_-_Figjam.png]] **Premier travail de cadrage sur les propriétés d’un compte, les champions associés et les informations considérées comme critiques pour la lecture d’un profil.** ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Smart_Draft_-_Figjam_2.png]] **Exploration plus fonctionnelle du modèle de saisie et du rattachement entre compte, joueur et données associées.** **Itérations et livrable** Au-delà de la lisibilité des données, le MVP devait aussi paraître crédible visuellement. J’ai donc exploré plusieurs organisations d’interface pour tester différents niveaux de densité, de hiérarchie et de mise en avant des signaux clés. Une partie de ces pistes a été poussée jusqu’au prototype interactif, d’autres sont restées à l’état d’exploration pour préserver un périmètre réaliste. ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Recording.mp4]] Loading - prototype ![[../_site-assets/UX-UI chez Onepoint (2024) V2/dropdown.gif]] *dropdown - prototype* ![[../_site-assets/UX-UI chez Onepoint (2024) V2/image.png]] *Extrait UI kit* # **Transformer un backlog métier en interface corporate cohérente** `webapp` `outil métier` ==🔵`Team : PO + UX/UI Senior (en supervision) + 2 Dev`== Il s’agissait d’un outil interne dédié au suivi de carrière et au mentorat. Sous la supervision d’une UX/UI senior, mon rôle consistait à concevoir et produire les interfaces, préparer les supports de démonstration (dont un prototype interactif), accompagner les ajustements et participer au recettage jusqu’au déploiement. Une partie du cadrage UX, de l’univers visuel et des contraintes de marque était déjà définie. L’enjeu n’était donc pas de repenser entièrement le produit, mais de proposer une interface claire, cohérente et rapidement déployable, en m’appuyant sur le backlog du PO dans un cadre corporate exigeant. **Enjeux design principaux** - Décliner un cadre visuel déjà établi, sans design system pleinement formalisé. - Produire des interfaces adaptées à plusieurs profils d’usage et niveaux d’accès. - Livrer rapidement une première version exploitable dans un calendrier serré. - Maintenir une expérience lisible malgré les contraintes métier, de marque et de backlog. **Méthode** En partant du backlog du PO, j’ai construit une arborescence des contenus, des écrans et des parcours pour clarifier la logique du produit avant la phase UI. Le diagramme partagé ici est neutralisé : il montre surtout le travail de structuration, de flux, de validation et d’alignement entre les différents profils d’usage. Cette base a servi à cadrer les itérations, les démonstrations et le recettage. ![[../_site-assets/UX-UI chez Onepoint (2024) V2/Onepoint_Journey_-_Figjam.png]]