Étude de casCase StudyCaso de EstudioPlateforme SaaS B2BB2B SaaS PlatformPlataforma SaaS B2B

Global Maritime Leader — B2B Sales Platform

Concevoir une plateforme SaaS scalable pour les opérations commerciales mondiales. Designing a scalable SaaS platform for global sales operations. Diseñando una plataforma SaaS escalable para operaciones comerciales globales.

FeaturedFeaturedFeaturedSaaSSaaSSaaSB2B PlatformDesign SystemDesign SystemDesign SystemRGAA / WCAGRGAA / WCAGRGAA / WCAGEnterprise UX
ClientClientClienteLeader maritime mondialGlobal maritime leaderLíder marítimo global
ProduitProductProductoPlateforme SaaS commerciale B2BB2B commercial SaaS platformPlataforma SaaS comercial B2B
UtilisateursUsersUsuariosÉquipes commerciales & agentsSales teams & agentsEquipos de ventas y agentes
RôleRoleRolSenior Product DesignerSenior Product DesignerSenior Product Designer
PérimètreScopeAlcanceUX design, architecture d'interface, Design SystemUX design, interface architecture, Design SystemUX design, arquitectura de interfaz, Design System
SecteurIndustrySectorTransport maritime & LogistiqueMaritime & LogisticsTransporte marítimo & Logística
2→1
Systèmes legacy remplacés par une plateforme unifiéeLegacy systems replaced by a unified platformSistemas legacy reemplazados por una plataforma unificada
AA
Conformité WCAG / RGAA atteinteWCAG / RGAA compliance achievedConformidad WCAG / RGAA alcanzada
1 DS
Design System partagé entre squadsShared Design System across squadsDesign System compartido entre squads
40+
Pays couverts par les opérations commercialesCountries covered by sales operationsPaíses cubiertos por operaciones comerciales

IntroductionIntroductionIntroducción

Remplacer deux systèmes legacy par une plateforme unifiéeReplacing two legacy systems with a unified platformReemplazar dos sistemas legacy por una plataforma unificada

Un leader mondial du transport maritime s'appuyait sur deux systèmes internes devenus obsolètes pour gérer les devis, les règles de tarification et les relations clients. Ces outils étaient fragmentés, difficiles à utiliser et peu alignés avec les standards modernes d'accessibilité.

A global maritime transport leader relied on two legacy internal systems to manage quotes, pricing rules and customer relationships. These tools were fragmented, difficult to use and poorly aligned with modern accessibility standards.

Un líder mundial del transporte marítimo dependía de dos sistemas internos heredados para gestionar presupuestos, reglas de precios y relaciones con clientes. Estas herramientas eran fragmentadas, difíciles de usar y poco alineadas con los estándares modernos de accesibilidad.

Les équipes commerciales devaient jongler entre deux interfaces pour compléter des opérations quotidiennes. L'objectif était de les remplacer par une plateforme SaaS unifiée capable de soutenir des opérations internationales complexes tout en restant accessible, scalable et alignée avec le Design System existant.

Sales teams had to juggle between two interfaces to complete daily operations. The objective was to replace them with a unified SaaS platform capable of supporting complex international operations while remaining accessible, scalable and aligned with the existing Design System.

Los equipos de ventas tenían que alternar entre dos interfaces para completar operaciones diarias. El objetivo era reemplazarlos con una plataforma SaaS unificada capaz de soportar operaciones internacionales complejas mientras permanecía accesible, escalable y alineada con el Design System existente.

L'enjeu n'était pas de redesigner une interface — c'était de repenser comment la plateforme pouvait soutenir des opérations commerciales complexes dans plus de 40 pays.

The challenge was not to redesign an interface — it was to rethink how the platform could support complex sales operations across 40+ countries.

El desafío no era rediseñar una interfaz — era repensar cómo la plataforma podía soportar operaciones comerciales complejas en más de 40 países.

Global Maritime Leader — B2B SaaS platform multi-screen views
Plateforme SaaS — vues multi-écrans : gestion des devis, tableaux de bord commerciaux et moteur de tarificationB2B SaaS platform — multi-screen views: quote management, sales dashboards and pricing enginePlataforma SaaS — vistas multipantalla: gestión de presupuestos, dashboards de ventas y motor de precios

ContexteContextContexto

Un écosystème commercial à l'échelle mondialeA commercial ecosystem at global scaleUn ecosistema comercial a escala global

Un leader mondial du transport maritime gère des opérations d'expédition internationales utilisées par des équipes commerciales et des clients à travers le monde. L'écosystème digital comprend plusieurs plateformes pour gérer les opérations commerciales, les relations clients et les structures tarifaires dans plus de 40 pays.

A global maritime transport leader manages international shipping operations used by sales teams and customers worldwide. The digital ecosystem includes multiple platforms to manage commercial operations, customer relationships and pricing structures across 40+ countries.

Un líder mundial del transporte marítimo gestiona operaciones de envío internacional utilizadas por equipos comerciales y clientes en todo el mundo. El ecosistema digital incluye múltiples plataformas para gestionar operaciones comerciales, relaciones con clientes y estructuras de precios en más de 40 países.

Le produit est utilisé par des agents commerciaux dans des environnements à forte densité d'information — des équipes qui gèrent simultanément des devis, des règles tarifaires et des processus d'approbation à plusieurs niveaux.

The product is used by sales agents in information-dense environments — teams managing quotes, pricing rules and multi-level approval processes simultaneously.

El producto es utilizado por agentes comerciales en entornos de alta densidad de información — equipos que gestionan simultáneamente presupuestos, reglas de precios y procesos de aprobación multinivel.

Contexte utilisateurs
User context
Contexto de usuarios
Des agents commerciaux qui doivent créer des devis en quelques minutes tout en naviguant dans des logiques tarifaires multi-pays hautement complexes.
Sales agents who need to create quotes in minutes while navigating highly complex multi-country pricing logic.
Agentes de ventas que necesitan crear presupuestos en minutos mientras navegan por lógicas de precios multipaís altamente complejas.
Plateforme SaaS
SaaS platform
Plataforma SaaS
Remplacement de deux outils legacy fragmentés par une plateforme SaaS unifiée couvrant devis, tarification et gestion clients.
Replacement of two fragmented legacy tools by a unified SaaS platform covering quotes, pricing and customer management.
Reemplazo de dos herramientas legacy fragmentadas por una plataforma SaaS unificada que cubre presupuestos, precios y gestión de clientes.

Mon rôleMy roleMi rol

Senior Product DesignerSenior Product DesignerSenior Product Designer

J'ai travaillé en tant que Senior Product Designer sur ce projet SaaS, en collaborant étroitement avec les équipes produit, ingénierie et métier pour concevoir la plateforme. Mon rôle consistait à simplifier des workflows complexes tout en assurant la conformité aux standards d'accessibilité et la cohérence avec le Design System existant.

I worked as Senior Product Designer on this SaaS project, collaborating closely with product, engineering and business teams. My role involved simplifying complex workflows while ensuring accessibility compliance and consistency with the existing Design System.

Trabajé como Senior Product Designer en este proyecto SaaS, colaborando estrechamente con los equipos de producto, ingeniería y negocio. Mi rol implicaba simplificar workflows complejos garantizando conformidad de accesibilidad y coherencia con el Design System existente.

B2B SaaS platform — Quotation Cockpit interface
Quotation Cockpit — interface de création et suivi des devis commerciauxQuotation Cockpit — quote creation and tracking interface for sales teamsQuotation Cockpit — interfaz de creación y seguimiento de presupuestos
📊
Flows UX devis & tarificationQuote & pricing UX flowsFlujos UX cotización y precios
Création, validation et suivi des devis complexes multi-niveaux d'approbation.Creation, validation and tracking of complex multi-level approval quotes.Creación, validación y seguimiento de presupuestos complejos multinivel.
🖥
Dashboards commerciaux complexesComplex sales dashboardsDashboards comerciales complejos
Architecture d'information dense, tableaux filtrables, vues multi-colonnes pour agents commerciaux.Dense information architecture, filterable tables, multi-column views for sales agents.Arquitectura densa, tablas filtrables, vistas multicolumna para agentes de ventas.
🧩
Contribution au Design SystemDesign System contributionContribución al Design System
Nouveaux composants enterprise documentés, tokens, guidelines pour cas d'usage non couverts.New documented enterprise components, tokens, guidelines for uncovered use cases.Nuevos componentes enterprise documentados, tokens, guías para casos no cubiertos.
Accessibilité WCAG AAWCAG AA accessibilityAccesibilidad WCAG AA
Conformité sur les composants clés, annotations accessibilité dans les specs de livraison.Compliance on key components, accessibility annotations in delivery specs.Conformidad en componentes clave, anotaciones de accesibilité en especificaciones.

Défis clésKey challengesDesafíos clave

Les contraintes du produitThe product constraintsLas restricciones del producto

Concevoir cette plateforme impliquait d'adresser simultanément des contraintes techniques, métier et réglementaires qui ne pouvaient pas être traitées séparément.

Designing this platform required addressing technical, business and regulatory constraints simultaneously — they could not be treated separately.

Diseñar esta plataforma requería abordar simultáneamente restricciones técnicas, de negocio y regulatorias que no podían tratarse por separado.

🌍
Logique tarifaire multi-paysMulti-country pricing logicLógica de precios multipaís
Chaque marché opère avec ses propres structures de prix, exceptions tarifaires et plafonds d'approbation — une complexité métier que l'interface doit absorber sans la transférer à l'utilisateur.Each market operates with its own pricing structures, tariff exceptions and approval thresholds — business complexity the interface must absorb without transferring to the user.Cada mercado opera con sus propias estructuras de precios y límites de aprobación — complejidad que la interfaz debe absorber sin transferirla al usuario.
Workflows de validation complexesComplex approval workflowsWorkflows de validación complejos
La création d'un devis implique plusieurs étapes d'approbation, des validations inter-équipes et des contraintes de délai — à rendre compréhensibles et actionnables en quelques minutes.Creating a quote involves multiple approval steps, cross-team validations and time constraints — to be made understandable and actionable in minutes.Crear un presupuesto implica múltiples pasos de aprobación y restricciones de tiempo — comprensibles y accionables en minutos.
📊
Dashboards haute densitéHigh-density dashboardsDashboards de alta densidad
Agréger données CRM, moteur de prix, historique client et statuts d'approbation dans des interfaces lisibles — sans sacrifier ni la densité, ni la clarté.Aggregating CRM data, pricing engine, customer history and approval statuses in readable interfaces — without sacrificing density or clarity.Agregar datos CRM, motor de precios, historial y estados de aprobación — sin sacrificar densidad ni claridad.
WCAG AA sur UI denseWCAG AA on dense UIWCAG AA en interfaz densa
Accessibilité sur composants enterprise haute densité — tableaux, filtres, états d'approbation — sans dégrader l'efficacité opérationnelle des agents.Accessibility on high-density enterprise components — tables, filters, approval states — without degrading agents' operational efficiency.Accesibilidad en componentes de alta densidad sin degradar la eficiencia operativa de los agentes.

Approche designDesign approachEnfoque de diseño

Concevoir pour la complexité métierDesigning for business complexityDiseñar para la complejidad del negocio

1
Structuration autour des tâches
Task-centred structure
Estructura centrada en tareas
Les interfaces ont été organisées autour de flows de tâches clairs — les agents se concentrent sur la finalisation des contrats, pas sur la navigation dans le système.
Interfaces were organised around clear task flows — agents focus on closing deals, not navigating the system.
Las interfaces se organizaron en torno a flujos de tareas claros — los agentes se centran en cerrar acuerdos, no en navegar por el sistema.
2
Hiérarchie et lisibilité des dashboards
Dashboard hierarchy and readability
Jerarquía y legibilidad de dashboards
Les interfaces denses ont été redesignées pour améliorer la hiérarchie visuelle et la prise de décision — sans réduire la quantité d'information disponible.
Dense interfaces were redesigned to improve visual hierarchy and decision-making — without reducing the amount of available information.
Las interfaces densas fueron rediseñadas para mejorar la jerarquía visual y la toma de decisiones — sin reducir la cantidad de información disponible.
3
Composants réutilisables via le Design System
Reusable components via Design System
Componentes reutilizables vía Design System
Chaque composant enterprise conçu pour cette plateforme a été documenté et intégré au Design System partagé — pour garantir cohérence et vélocité entre les squads.
Every enterprise component designed for this platform was documented and integrated into the shared Design System — ensuring consistency and velocity across squads.
Cada componente enterprise diseñado para esta plataforma fue documentado e integrado en el Design System compartido — garantizando coherencia y velocidad entre squads.
4
Accessibilité intégrée dès la conception
Accessibility integrated from design
Accesibilidad integrada desde el diseño
Les exigences WCAG AA ont été traitées comme contrainte de conception, pas comme correctif post-livraison — annotations accessibilité dans toutes les specs.
WCAG AA requirements were treated as a design constraint, not a post-delivery fix — accessibility annotations in all specs.
Los requisitos WCAG AA se trataron como restricción de diseño, no como corrección post-entrega — anotaciones de accesibilidad en todas las especificaciones.

Décisions clésKey decisionsDecisiones clave

Devis en quelques minutes
Quotes in minutes
Presupuestos en minutos
Flux de création raccourci — logique tarifaire complexe masquée derrière une UI guidée, étape par étape.
Shortened creation flow — complex pricing logic hidden behind a guided, step-by-step UI.
Flujo de creación acortado — lógica de precios compleja oculta detrás de una UI guiada paso a paso.
🌍
Règles locales, UX universelle
Local rules, universal UX
Reglas locales, UX universal
Chaque marché a ses contraintes — l'interface absorbe la complexité locale sans la rendre visible à l'agent.
Each market has its constraints — the interface absorbs local complexity without exposing it to the agent.
Cada mercado tiene sus restricciones — la interfaz absorbe la complejidad local sin exponerla al agente.
📋
Validation multi-niveaux lisible
Readable multi-level validation
Validación multinivel legible
Statuts d'approbation surfacés clairement — qui doit valider, dans quel délai, quel niveau d'urgence.
Approval statuses clearly surfaced — who needs to validate, by when, at what urgency level.
Estados de aprobación claramente visibles — quién necesita validar, para cuándo, con qué nivel de urgencia.
🧩
DS comme fondation scalable
DS as scalable foundation
DS como base escalable
Composants documentés, gouvernance partagée — chaque décision capitalisée pour les futures évolutions produit.
Documented components, shared governance — every decision capitalised for future product evolution.
Componentes documentados, gobernanza compartida — cada decisión capitalizada para evoluciones futuras del producto.
Design System component library — B2B SaaS platform
Librairie de composants — Design System enterprise documenté, gouvernance partagée entre squadsSaaS component library — documented enterprise Design System, shared governance across squadsLibrería de componentes SaaS — Design System enterprise documentado, gobernanza compartida entre squads

AccessibilitéAccessibilityAccesibilidad

Accessibilité & scalabilitéAccessibility & scalabilityAccesibilidad & escalabilidad

L'accessibilité a été intégrée directement dans le processus de conception de la plateforme, pas appliquée en post-traitement. La typographie, les ratios de contraste et les patterns d'interaction ont été revus pour assurer la conformité aux standards WCAG AA.

Accessibility was integrated directly into the platform design process, not applied as an afterthought. Typography, contrast ratios and interaction patterns were reviewed to ensure WCAG AA compliance.

La accesibilidad se integró directamente en el proceso de diseño de la plataforma. La tipografía, las ratios de contraste y los patrones de interacción fueron revisados para garantizar conformidad WCAG AA.

Approche accessibilité
Accessibility approach
Enfoque de accesibilidad
En intégrant l'accessibilité dans le Design System, la plateforme assure une scalabilité et une cohérence à long terme à travers les différents modules produit.
By integrating accessibility into the Design System, the platform ensures long-term scalability and consistency across different product modules.
Al integrar la accesibilidad en el Design System, la plataforma garantiza escalabilidad y coherencia a largo plazo en los diferentes módulos del producto.
Accessible components — WCAG AA annotations and interactive states
Composants accessibles — annotations WCAG AA, états focus, navigation clavier intégrés aux specs de livraisonAccessible components — WCAG AA annotations, focus states, keyboard navigation integrated into delivery specsComponentes accesibles — anotaciones WCAG AA, estados de focus, navegación de teclado en especificaciones de entrega

RésultatsResultsResultados

Ce que ce projet a produitWhat this project producedLo que este proyecto produjo

2→1
Plateforme unifiée
Unified platform
Plataforma unificada
Deux systèmes legacy fragmentés remplacés par une expérience produit cohérente.
Two fragmented legacy systems replaced by a single coherent product experience.
Dos sistemas legacy fragmentados reemplazados por una experiencia de producto coherente.
AA
Conformité WCAG
WCAG compliance
Conformidad WCAG
Accessibilité intégrée dès la conception — composants documentés dans le Design System.
Accessibility integrated from design — components documented in the Design System.
Accesibilidad integrada desde el diseño — componentes documentados en el Design System.
UX ↑
Workflows clarifiés
Clearer workflows
Workflows clarificados
Devis, tarification et validation accessibles depuis une interface unifiée — sans jongler entre systèmes.
Quotes, pricing and approval accessible from a single unified interface — no more switching between systems.
Presupuestos, precios y aprobación accesibles desde una interfaz unificada — sin cambiar entre sistemas.

Une plateforme enterprise qui rend la complexité des opérations commerciales mondiales compréhensible et actionnable pour les équipes terrain.

An enterprise platform that makes the complexity of global sales operations understandable and actionable for field teams.

Una plataforma enterprise que hace comprensible y accionable la complejidad de las operaciones de ventas globales para los equipos de campo.

Projet suivantNext projectProyecto siguiente

Norauto — e-Catalogue Experience

Voir l'étude de casView case studyVer el caso de estudio