Aller au contenu
DISPONIBLE • Q3/Q4 2026
Case study // Smart City & Data

Webapp de flux touristiques personnalisés : désengorger les sites saturés grâce à la data transactionnelle et géographique.

Client
Ville de Paris • Mastercard • NUMA • Office du Tourisme (OTCP) • APUR
Rôle
UX Designer confirmé (MFG Labs × ekino)
Squad
UX Designer confirmé (Josselin) en binôme avec 1 Designer Junior • 1 Data Scientist • 1 Data Engineer • 2 Devs Front-End • 1 PM
Durée
4 mois • février → juin 2019 (Demoday 12 juin 2019)
Stack
Mapbox GL • Open Data Paris • Algorithmes de clustering • Tests In-Situ 2h
  • Silver Award IIID 2020 (Data & Design)
  • Présenté à l'Hôtel de Ville de Paris
  • Version Beta sur parisinfo.com
⚡ Scanner la synthèse 90s
paris-for-you.mapbox
Interface de l'application Paris For You : sélection du profil et itinéraire de découverte sur carte Mapbox.
Partenaire : DataCity NUMA
↳ Paris For You : la complexité algorithmique masquée derrière une interface épurée à 3 paramètres simples.
SCAN EXÉCUTIF // 90 SECONDES

Synthèse de la mission & impact

01 // Les challenges
  • Exploitation de données massives. Traduire des millions de données transactionnelles (Mastercard) et géographiques (APUR, Ville de Paris) sans submerger l'utilisateur sous des graphiques indigestes.
  • Saturation des flux urbains. Rediriger une partie des flux touristiques (80% concentrés sur seulement 5 sites majeurs) vers des quartiers alternatifs et le commerce de proximité.
  • Faisabilité technique & délais. Concilier un algorithme de clustering complexe avec les quotas d'appels et la latence d'affichage de Mapbox, sous une contrainte stricte de 4 mois.
02 // L'approche
  • Recherche & persona. Immersion de 5 jours d'entretiens auprès de concierges d'hôtels et de touristes américains pour modéliser le persona de synthèse Jeff.
  • Scoping & dialogue data science. Co-conception au sein d'une squad hybride (Design × Data Science chez MFG Labs) pour limiter l'interface à 3 filtres intuitifs (départ, temps, envies).
  • Prototypage & test in-situ. Conception d'un UI Kit Mapbox épuré et déploiement d'un protocole de test en conditions réelles (marche autonome de 2h dans Paris).
03 // Le résultat
  • Reconnaissance Internationale. Récompensé par un Silver Award de l'International Institute for Information Design (IIID) en 2020 pour l'alliance data science & design d'information.
  • Validation institutionnelle. Démonstration en direct lors du Demoday officiel à l'Hôtel de Ville de Paris (12 juin 2019) devant les élus de la Ville et la direction de Mastercard.
  • Mise en ligne concrète. Release de la version Beta hébergée directement sur le portail officiel de l'Office de Tourisme (parisinfo.com).
  • 4 mois du cadrage amont au Demoday officiel à l'Hôtel de Ville
  • 2 h de marche in-situ dans les rues de Paris par chaque testeur
  • 9 frictions réelles cartographiées pour piloter le backlog PM
  • Silver IIID Award 2020 distinguant l'alliance data & information design

Vous avez l'essentiel. Deux chemins :

on en discute ? Découvrir le cadrage & les 4 étapes
01 // CADRAGE STRATÉGIQUE

Mise en situation : Le défi d'innovation ouverte DataCity

Transformer des données transactionnelles et urbaines hétérogènes en un service public de désengorgement touristique.

Dans le cadre du programme d'innovation urbaine DataCity (NUMA × Ville de Paris), Mastercard et la Ville de Paris souhaitaient réconcilier afflux touristique et qualité de vie des riverains. 80% des 30 millions de visiteurs annuels se concentrent sur seulement 5 sites historiques. Le challenge : concevoir un service prédictif personnalisé incitant les visiteurs à explorer des quartiers moins fréquentés tout en soutenant le commerce de proximité.

Les 3 mandats de la mission design :

  1. 01
    Rendre la donnée actionnable. Traduire des millions de transactions bancaires et des polygones Open Data en recommandations de balades immédiates et désirables.
  2. 02
    Masquer la tuyauterie algorithmique. Refuser les tableaux de bord à 48 coefficients : proposer une interface légère tenant sous la seconde d'affichage Mapbox.
  3. 03
    Éprouver sur le pavé parisien. Sortir des laboratoires climatisés : tester le service en marche autonome de 2 heures dans les rues avec de vrais touristes.
ORGANISATION & GOUVERNANCE

La Squad Hybride MFG Labs : Data Science × Design d'Interaction

UX DESIGN & MENTORING

Josselin Hillion (UX Designer confirmé) en binôme avec 1 Designer Junior (ekino × MFG Labs) : immersion terrain, persona Jeff, UI Kit Mapbox, protocole in-situ 3 étapes et transmission méthodologique.

DATA SCIENCE & ENGINEERING

1 Data Scientist et 1 Data Engineer chez MFG Labs : Agrégation des données Mastercard, APUR, métriques de distance et modèle de clustering des POIs.

FRONT-END & DELIVERY

2 Développeurs Front-End et 1 Product Manager : Intégration Mapbox GL, optimisation des requêtes API, scoping Lean MVP et release Beta sur parisinfo.com.

ACTE 01 // FÉVRIER 2019 PHASE 1/4

Immersion terrain & Storyboard « Jeff came to Paris »

Identifier les freins réels à la mobilité touristique auprès de concierges d'hôtels et de visiteurs internationaux.

Face à des partenaires disposant de millions de données transactionnelles anonymisées, la tentation initiale était de concevoir un produit technique axé sur la statistique pure. Notre priorité de design a été d'aller immédiatement sur le terrain : 5 jours d'immersion et d'entretiens qualitatifs auprès de concierges d'hôtels et de touristes américains.

Cette recherche a révélé un paradoxe : les visiteurs ont une envie sincère de sortir des sentiers battus, mais craignent de perdre leur temps ou de se retrouver dans des zones sans charme. Nous avons modélisé le persona de synthèse Jeff et formalisé le storyboard narratif complet « Jeff came to Paris », alignant partenaires institutionnels et équipe technique.

  • 5 jours d'immersion terrain
  • Persona Jeff
  • Storyboard Jeff came to Paris
  • Cartographie des freins
Planche de scoping MVP : arbitrage entre fonctionnalités souhaitées et faisabilité dans le sprint de 4 mois.
Scoping Lean MVP // Arbitrage Délais & Latence Élagage des panneaux lourds pour focaliser sur l'itinéraire clé.
zoom ↗
Arbitrage pragmatique : simplifier les fonctionnalités pour garantir un affichage sous la seconde.
ACTE 02 // MARS 2019 PHASE 2/4

Conception UX/UI & Dialogue avec la Data Science

Réduire la complexité algorithmique à 3 filtres simples et construire un UI Kit cartographique Mapbox ultra-réactif.

En collaboration étroite avec les Data Scientists de MFG Labs, nous avons défini les règles de traduction visuelle de la donnée transactionnelle. Alors que les ingénieurs envisageaient d'exposer de multiples curseurs et coefficients, j'ai posé un arbitrage ergonomique radical : limiter la configuration utilisateur à 3 filtres simples : le point de départ, le temps disponible et les centres d'intérêt.

En parallèle, nous avons conçu un UI Kit sur-mesure intégré au moteur cartographique Mapbox : styles de cartes épurés, micro-interactions fluides et fiches de points d'intérêt légères pour garantir un affichage instantané sous le seuil critique d'une seconde.

Planche comparative : Wireframes fonctionnels vs Maquettes UI Cibles de Paris For You.
Wireframes vs UI Cible // Mapbox & Cards Conception de l'architecture d'information et des composants d'itinéraire.
zoom ↗
De la structure filaire à l'interface épurée Mapbox connectée aux clusters de POIs.
ACTE 03 // AVRIL–MAI 2019 PHASE 3/4

Reality Check in-situ : 2 heures de marche dans Paris

Éprouver l'algorithme sur le pavé parisien via un protocole en 3 temps (40 min labo + 2h visite réelle + 20 min débrief).

Nous avons conçu et déployé un protocole de test in-situ inédit auprès d'un panel de 10 résidents américains : prise en main initiale de 40 minutes, suivie de deux heures de marche réelle et autonome dans Paris guidée par la webapp, puis débriefing téléphonique à chaud de 20 minutes.

Ce Reality Check a révélé des enseignements capitaux : la confiance des utilisateurs ne dépendait pas de la crainte de surveillance (aucun rejet de données personnelles), mais d'un besoin d'explicabilité (« Pourquoi ce lieu m'est proposé à moi ? ») et surtout d'informations qualitatives fiables (horaires réels, prix, photos, transports). C'est également ce test qui a inspiré la création de la fonctionnalité refuge : le carnet de route PDF léger téléchargeable 100% hors-ligne pour parer aux forfaits roaming 4G coûteux.

Schéma du protocole de test in-situ en 3 étapes : manipulation, balade réelle de 2h et débrief téléphonique.
Protocole de Test In-Situ // 3 Étapes 40 min test prototype → 2h visite réelle dans Paris → 20 min débrief téléphonique.
zoom ↗
Le protocole de test in-situ ayant alimenté la matrice des 9 frictions réelles.
ACTE 04 // JUIN 2019 & 2020 PHASE 4/4

Restitution Hôtel de Ville & Consécration IIID Award

Valider l'impact auprès des partenaires institutionnels et faire reconnaître l'alliance entre Data Science et Design de l'information.

Le projet s'est conclu par la démonstration en direct du service fonctionnel lors du Demoday officiel à l'Hôtel de Ville de Paris le 12 juin 2019, devant les élus de la Ville, la direction de Mastercard et l'écosystème NUMA. La clarté des recommandations et la sobriété de l'interface ont emporté l'adhésion immédiate.

La webapp a ensuite été mise en ligne en version Beta sur le portail officiel de l'Office de Tourisme (parisinfo.com). En juin 2020, le projet a reçu une consécration internationale : le Silver Award de l'International Institute for Information Design (IIID), récompensant une articulation exemplaire entre recherche utilisateur, données massives et design d'interaction.

  • Démonstration live au Demoday
  • Matrice de priorisation PM
  • Mise en ligne Beta parisinfo.com
  • Silver Award IIID 2020
Présentation officielle de Paris For You sous les lustres dorés de l'Hôtel de Ville de Paris.
Demoday Hôtel de Ville // 12 Juin 2019 Restitution publique et validation institutionnelle du service.
zoom ↗
Présentation officielle de Paris For You sous les ors de l'Hôtel de Ville de Paris.

Voir les preuves de plus près :

Ouvrir la maquette Mapbox en pleine résolution Demander le deck complet DataCity (PDF)
Niveau 4 // Maîtrise senior

Les 4 tiroirs

❖ Data & UX Dialogue Design × Data Science Arbitrage 3 filtres, co-définition des métriques de distance et seuils de latence Mapbox
  • Simplification radicale. Arbitrage d'UX : ne laisser visibles que 3 filtres au lieu des dizaines de coefficients mathématiques que les data scientists souhaitaient exposer.
  • Co-définition des métriques. Travail main dans la main avec l'équipe data pour fixer des seuils de distance cohérents avec un rythme piéton de flânerie urbaine.
  • Gestion de la latence. Plafonnement des temps de réponse de l'API Mapbox sous la barre d'une seconde pour éviter les abandons en situation de mobilité.
❖ Scoping Lean Scoping MVP & Dette Technique Élagage du calcul piéton pas-à-pas pour tenir la date butoir du Demoday
  • Élagage pragmatique. Pour tenir la date butoir du 12 juin à l'Hôtel de Ville, abandon temporaire du calcul piéton rue par rue trop gourmand en requêtes API.
  • Priorité à la valeur centrale. Concentration des efforts sur la recommandation de grappes de quartiers et de fiches de points d'intérêt authentiques.
  • Délivrer à l'heure. Présentation d'un démonstrateur 100% stable et fonctionnel le jour J devant le COMEX et les élus.
❖ Reality Check Vérité terrain & Explicabilité 9 frictions cartographiées : l'enjeu n'est pas la privacy mais l'explicabilité et la réassurance
  • L'explicabilité avant tout. L'épreuve de la rue a prouvé que le premier frein n'est pas la surveillance mais l'incompréhension : « Pourquoi ce lieu m'est proposé à moi ? ».
  • Réassurance qualitative bloquante. Sans horaires d'ouverture fiables, photos, tarifs et affluence, la recommandation algorithmique reste lettre morte (friction majeure).
  • Fonctionnalité refuge hors-ligne. Création d'un carnet de route PDF léger pour répondre aux coupures 4G immédiates des visiteurs étrangers.
❖ Recul critique Ce que je ferais autrement Structurer plus tôt les contrats d'interface Data Science × Devs Front-End

Dans un projet d'innovation associant data scientists et développeurs front, la transmission des schémas de données a parfois généré des frictions de format. Avec le recul, j'aurais instauré dès le sprint 1 des contrats d'interface OpenAPI stricts et des revues de synchronisation bi-hebdomadaires pour fluidifier l'intégration des clusters dans Mapbox.

Prêt à clarifier vos architectures de données ou applications cartographiques ?

Planifier un call découverte (15 min) Explorer le cas suivant : Royal Canin Phygital