Étude de casCase StudyCaso de Estudio Application MobileMobile AppApp Móvil

Global Maritime Leader — Mobile App

Concevoir un produit mobile mission-critique pour la logistique internationale.Designing a mission-critical mobile product for international logistics.Diseñar un producto móvil de misión crítica para la logística internacional.

FeaturedFeaturedFeatured Mobile iOS / AndroidMobile iOS / AndroidMobile iOS / Android Design SystemDesign SystemDesign System RGAA / WCAGRGAA / WCAGRGAA / WCAG B2B SaaSB2B SaaSB2B SaaS
ClientClientCliente Leader maritime mondialGlobal maritime leaderLíder marítimo mundial
ProduitProductProducto App mobile logistique B2BB2B logistics mobile appApp móvil logística B2B
RôleRoleRol Senior Product DesignerSenior Product DesignerSenior Product Designer
PérimètreScopeAlcance UX Mobile, Design System, AccessibilitéUX Mobile, Design System, AccessibilityUX Mobile, Design System, Accesibilidad
SecteurIndustrySector Transport maritime & LogistiqueMaritime Transport & LogisticsTransporte marítimo y Logística
Global Maritime Leader mobile app
99%99%99%
Score de conformité RGAA atteintRGAA compliance score achievedPuntuación RGAA alcanzada
+50%
Utilisateurs sur l'application mobileUsers on the mobile appUsuarios en la aplicación móvil
1 DS
Design System entièrement pensé pour mobile et accessibleDesign System fully built for mobile and accessibilityDesign System completamente pensado para móvil y accesible
100%
De l'app redesignée & harmonisée — Design System 100% accessibleOf the app redesigned & unified — 100% accessible Design SystemDe la app rediseñada y unificada — Design System 100% accesible

IntroductionIntroductionIntroducción

Un produit mobile pour la logistique mondialeglobal logisticsla logística mundial

L'application mobile d'un leader mondial du transport maritime est utilisée au quotidien par des agents portuaires, des gestionnaires de supply chain et des responsables clients pour suivre des conteneurs, déclencher des opérations et accéder aux services logistiques depuis le terrain.The mobile app of a global maritime transport leader is used daily by port agents, supply chain managers and client managers to track containers, trigger operations and access logistics services from the field.La aplicación móvil de un líder mundial del transporte marítimo es utilizada a diario por agentes portuarios, gestores de supply chain y responsables de clientes para rastrear contenedores, iniciar operaciones y acceder a servicios logísticos desde el campo.

Le produit souffrait de lacunes structurelles : absence de parité fonctionnelle avec la plateforme web, composants non conformes RGAA, interfaces inadaptées au terrain — contraignant les utilisateurs à basculer sur desktop pour finaliser des opérations critiques.The product suffered from structural gaps: no functional parity with the web platform, RGAA non-compliant components, interfaces unfit for field use — forcing users to switch to desktop to complete critical operations.El producto tenía deficiencias estructurales: falta de paridad funcional con la plataforma web, componentes no conformes con RGAA, interfaces inadaptadas al trabajo de campo — obligando a los usuarios a cambiar al escritorio para completar operaciones críticas.

L'objectif n'était pas de moderniser l'interface — c'était de faire du mobile un outil opérationnel à part entière.The goal was not to modernise the interface — it was to make mobile a fully operational channel in its own right.El objetivo no era modernizar la interfaz — era convertir el móvil en una herramienta operacional completa.

Direction produit · Global Maritime LeaderProduct leadership · Global Maritime LeaderDirección de producto · Global Maritime Leader
Wireframes du flux Booking — sélection équipement, type de conteneur, quantité et validation
Flux Booking — restructuration du parcours de saisie en 3 étapes : type d'équipement → conteneur → quantitéBooking flow — 3-step input journey: equipment type → container → quantityFlujo de Booking — recorrido de 3 pasos: tipo de equipo → contenedor → cantidad

ContexteContextContexto

Un écosystème digital à l'échelle mondialeat global scalea escala mundial

La 3ème compagnie maritime mondiale gère des milliers de rotations de conteneurs par jour à travers des ports, des terminaux et des hubs logistiques répartis sur tous les continents.The world's 3rd largest shipping company manages thousands of container rotations daily across ports, terminals and logistics hubs on every continent.La 3ª compañía marítima mundial gestiona miles de rotaciones de contenedores al día a través de puertos, terminales y hubs logísticos distribuidos en todos los continentes.

L'application mobile est le point de contact terrain de cet écosystème. Les utilisateurs ne sont pas en bureau — ils sont sur des quais, dans des entrepôts, en déplacement entre deux terminaux.The mobile app is the field touchpoint of this ecosystem. Users are not at a desk — they are on docks, in warehouses, moving between terminals.La aplicación móvil es el punto de contacto en campo de este ecosistema. Los usuarios no están en una oficina — están en muelles, almacenes, desplazándose entre terminales.

Contexte terrainField contextContexto de campo
Décisions logistiques prises en mobilité, dans des conditions où une erreur ou un retard a des conséquences opérationnelles directes.Logistics decisions made on the move, in conditions where an error or delay has direct operational consequences.Decisiones logísticas tomadas en movilidad, en condiciones donde un error o retraso tiene consecuencias operacionales directas.
Écosystème produitProduct ecosystemEcosistema de producto
Web, SaaS commercial, mobile — plusieurs plateformes pour des équipes internes et des clients B2B à travers le monde.Web, commercial SaaS, mobile — multiple platforms for internal teams and B2B clients worldwide.Web, SaaS comercial, móvil — múltiples plataformas para equipos internos y clientes B2B en todo el mundo.

ProblèmeProblemProblema

Le vrai problèmeproblemproblema

L'application existante n'était pas simplement dépassée — elle limitait activement la capacité des clients à travailler efficacement. Trois problèmes structurels identifiés.The existing app was not simply outdated — it was actively limiting clients' ability to work efficiently. Three structural problems identified.La aplicación existente no estaba simplemente obsoleta — limitaba activamente la capacidad de los clientes para trabajar con eficacia. Tres problemas estructurales identificados.

01
Absence de parité fonctionnelleFunctional parity gapFalta de paridad funcional
Les utilisateurs devaient alterner entre mobile et desktop pour finaliser des opérations clés, fragmentant les workflows logistiques et créant des interruptions en conditions terrain.Users had to switch between mobile and desktop to complete key operations, fragmenting logistics workflows and creating interruptions in field conditions.Los usuarios tenían que alternar entre móvil y escritorio para completar operaciones clave, fragmentando los flujos logísticos e interrumpiendo el trabajo en campo.
02
Non-conformité RGAARGAA non-complianceNo conformidad RGAA
Typographie, contrastes, navigation et interactions excluaient certains utilisateurs et créaient des risques de conformité réglementaire non négligeables.Typography, contrast, navigation and interactions excluded some users and created significant regulatory compliance risks.Tipografía, contrastes, navegación e interacciones excluían a algunos usuarios y creaban riesgos de cumplimiento normativo no desdeñables.
03
Interface inadaptée au contexte terrainInterface unfit for field contextInterfaz inadaptada al contexto de campo
Ports, entrepôts, déplacements — des environnements où rapidité, clarté et résilience aux interruptions priment sur la sophistication visuelle.Ports, warehouses, transit — environments where speed, clarity and resilience to interruptions take priority over visual sophistication.Puertos, almacenes, desplazamientos — entornos donde la velocidad, la claridad y la resiliencia ante interrupciones prevalecen sobre la sofisticación visual.

Mon rôleMy roleMi rol

Senior Product DesignerSenior Product DesignerSenior Product Designer

J'ai intégré l'équipe produit mobile avec un périmètre large : stratégie UX, refonte des workflows clés, conformité accessibilité et contribution au Design System — en rythme Agile avec plusieurs squads iOS et Android.I joined the mobile product team with a broad scope: UX strategy, redesign of key workflows, accessibility compliance and Design System contribution — in an Agile rhythm across multiple iOS and Android squads.Me incorporé al equipo de producto móvil con un alcance amplio: estrategia UX, rediseño de flujos clave, conformidad de accesibilidad y contribución al Design System — en ritmo Agile con varios squads iOS y Android.

🗺
UX Strategy & architectureUX Strategy & architectureUX Strategy y arquitectura Cadrage des problèmes, recommandations produit, définition des directions UX en amont des sprints.Problem framing, product recommendations, defining UX directions ahead of sprints.Definición de problemas, recomendaciones de producto, establecimiento de directrices UX antes de los sprints.
📱
Refonte des workflows logistiquesLogistics workflow redesignRediseño de flujos logísticos Suivi de conteneurs, gestion d'expéditions, accès aux documents — bout en bout sur mobile.Container tracking, shipment management, document access — end-to-end on mobile.Seguimiento de contenedores, gestión de envíos, acceso a documentos — de extremo a extremo en móvil.
Conformité RGAA / WCAGRGAA / WCAG complianceConformidad RGAA / WCAG Audit avec agence spécialisée, actions correctives intégrées à la roadmap, gouvernance Design System.Audit with a specialist agency, corrective actions integrated into the roadmap, Design System governance.Auditoría con agencia especializada, acciones correctivas integradas en el roadmap, gobernanza del Design System.
🧩
Design System produitProduct Design SystemDesign System del producto Tokens, documentation, gouvernance partagée entre squads mobile et web.Tokens, documentation, governance shared across mobile and web squads.Tokens, documentación, gobernanza compartida entre squads móvil y web.
Refonte du parcours Voyage & Vessel — before/after comparaison des écrans iOS
Parcours Voyage & Vessel — before / after · Restructuration du flux de recherche et de consultation des escalesVoyage & Vessel journey — before / after · Port call search and consultation flow restructuredRecorrido Voyage & Vessel — antes / después · Flujo de búsqueda y consulta de escalas reestructurado

Approche designDesign approachEnfoque de diseño

Concevoir pour les conditions réellesreal conditionslas condiciones reales

1
Audit UX & accessibilitéUX & accessibility auditAuditoría UX y accesibilidad
Audit complet de l'application existante, validé avec une agence spécialisée. 47 points de non-conformité identifiés et priorisés avec les Product Owners.Full audit of the existing app, validated with a specialist agency. 47 non-compliance issues identified and prioritised with Product Owners.Auditoría completa de la aplicación existente, validada con una agencia especializada. 47 puntos de no conformidad identificados y priorizados con los Product Owners.
2
Restructuration des workflowsWorkflow restructuringReestructuración de flujos
Reprise des parcours clés pour permettre la finalisation d'opérations complètes depuis mobile — sans retour obligatoire au desktop.Redesign of key journeys to enable completion of full operations from mobile — no mandatory return to desktop.Rediseño de los recorridos clave para completar operaciones enteras desde móvil — sin retorno obligatorio al escritorio.
3
Composants accessibles intégrés au DSAccessible components integrated in the DSComponentes accesibles integrados en el DS
Typographie, contrastes, navigation, tailles de cibles tactiles — redesignés et intégrés directement dans la fondation Design System partagée.Typography, contrast, navigation, touch target sizes — redesigned and integrated directly into the shared Design System foundation.Tipografía, contrastes, navegación, tamaños de objetivos táctiles — rediseñados e integrados directamente en la base del Design System compartido.
4
Livraison Agile multi-releasesAgile multi-release deliveryEntrega Agile multi-releases
Progression incrémentale — 25% → 85% → 99% RGAA — sans interrompre les cycles de livraison. Gouvernance partagée entre squads mobile et web.Incremental progress — 25% → 85% → 99% RGAA — without disrupting release cycles. Governance shared across mobile and web squads.Progresión incremental — 25% → 85% → 99% RGAA — sin interrumpir los ciclos de entrega. Gobernanza compartida entre squads móvil y web.

Décisions clésKey decisionsDecisiones clave

🌐
Composants pensés RTL dès le départRTL-ready components from day oneComponentes preparados para RTL desde el inicio
L'arabe impose un mirroring complet des layouts — icônes, alignements, sens de progression des flux — traité en amont, pas en patch.Arabic requires full layout mirroring — icons, alignments, flow direction — addressed upfront, not as a patch.El árabe requiere una inversión completa de los layouts — iconos, alineaciones, sentido del flujo — tratado desde el inicio, no como parche.
📏
Gestion de l'expansion des chaînesString expansion managementGestión de la expansión de cadenas
Le portugais et l'espagnol allongent les labels de 30 à 40% — chaque composant testé aux longueurs extrêmes pour éviter les troncatures.Portuguese and Spanish lengthen labels by 30–40% — every component tested at extreme lengths to avoid truncation.El portugués y el español alargan las etiquetas entre un 30 y un 40% — cada componente probado en longitudes extremas para evitar truncamientos.
Contrastes WCAG AA sur tous les étatsWCAG AA contrast on all statesContrastes WCAG AA en todos los estados
Textes, icônes, placeholders, états désactivés — chaque état de chaque composant audité et corrigé.Text, icons, placeholders, disabled states — every state of every component audited and corrected.Textos, iconos, placeholders, estados desactivados — cada estado de cada componente auditado y corregido.
🔤
Hiérarchies sémantiques restructuréesRestructured semantic hierarchiesJerarquías semánticas reestructuradas
Certains layouts ont été refaits pour que l'ordre de lecture VoiceOver et TalkBack soit logique — même quand ça contraignait la mise en page visuelle.Certain layouts were redesigned so that VoiceOver and TalkBack reading order is logical — even when it constrained the visual layout.Ciertos layouts fueron rediseñados para que el orden de lectura de VoiceOver y TalkBack sea lógico — incluso cuando eso imponía restricciones al layout visual.

AccessibilitéAccessibilityAccesibilidad

L'accessibilité comme contrainte produitproduct constraintrestricción de producto

L'accessibilité n'a pas été traitée comme une amélioration design, mais comme une exigence produit fondamentale intégrée dès la phase de conception.Accessibility was not treated as a design enhancement, but as a fundamental product requirement integrated from the design phase.La accesibilidad no se trató como una mejora de diseño, sino como un requisito fundamental del producto integrado desde la fase de concepción.

Redesign des composants pour la conformité RGAA — bouton primaire et navbar avant/après avec annotations accessibilité
Redesign des composants — bouton primaire (#FF0000 → #E20101), navbar Bottombar phases 2→3, annotations accessibilité intégrées au Design SystemComponent redesign — primary button (#FF0000 → #E20101), Bottombar navbar phases 2→3, accessibility annotations integrated in the Design SystemRediseño de componentes — botón primario (#FF0000 → #E20101), navbar Bottombar fases 2→3, anotaciones de accesibilidad integradas en el Design System

La première étape a été un audit UX et accessibilité de l'application existante, validé avec une agence spécialisée. Avec les POs et développeurs, nous avons défini des actions correctives intégrées à la roadmap produit.The first step was a UX and accessibility audit of the existing app, validated with a specialist agency. Working with POs and developers, we defined corrective actions integrated into the product roadmap.El primer paso fue una auditoría UX y de accesibilidad de la aplicación existente, validada con una agencia especializada. Con los POs y desarrolladores, definimos acciones correctivas integradas en el roadmap del producto.

Les améliorations ont inclus des ajustements typographiques, l'amélioration des contrastes, le raffinement de la navigation et des comportements de composants accessibles — capitalisés dans le Design System pour tenir dans la durée.Improvements included typographic adjustments, contrast enhancements, navigation refinements and accessible component behaviours — captured in the Design System for long-term consistency.Las mejoras incluyeron ajustes tipográficos, mejora de contrastes, refinamiento de la navegación y comportamientos de componentes accesibles — capitalizados en el Design System para una consistencia duradera.

RésultatsResultsResultados

Ce que ce projet a livrédeliveredentregó

99%
Conformité RGAARGAA complianceConformidad RGAA
Depuis 25%, sans interrompre les cycles de livraison — en deux releases majeures.Up from 25%, without disrupting release cycles — across two major releases.Desde el 25%, sin interrumpir los ciclos de entrega — en dos releases principales.
+50%
Adoption mobileMobile adoptionAdopción móvil
Utilisateurs sur l'application dans les 6 mois suivant la refonte des workflows.Users on the app in the 6 months following the workflow redesign.Usuarios en la aplicación en los 6 meses siguientes al rediseño de los flujos.
UX ↑
Expérience unifiéeUnified experienceExperiencia unificada
Interactions cohérentes, flux au comportement homogène — l'app mobile parle enfin d'une seule voix.Consistent interactions, uniform flow behaviour — the mobile app finally speaks with one voice.Interacciones consistentes, flujos de comportamiento uniforme — la app móvil habla por fin con una sola voz.

Un produit mobile fiable pour des professionnels qui travaillent dans des conditions où l'erreur coûte cher — c'est ce que ce projet a livré concrètement.A reliable mobile product for professionals working in conditions where errors are costly — that is what this project concretely delivered.Un producto móvil fiable para profesionales que trabajan en condiciones donde el error tiene un alto coste — eso es lo que este proyecto entregó de forma concreta.

Projet suivantNext projectSiguiente proyecto

Global Maritime Leader — B2B Sales PlatformB2B Sales PlatformB2B Sales Platform

Voir l'étude de cas →View case study →Ver el caso →