DataCity · Smart City & Data

Case study // Smart City & Data

Paris For You, 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: Senior Product Designer (MFG Labs × ekino)
Squad: Senior Product Designer (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 le 12 juin 2019)
Stack: Mapbox GL • Open Data Paris • Algorithmes de clustering • Tests in situ 2 h

Silver Award IIID 2020 (Data & Design)
Présenté à l’Hôtel de Ville de Paris
Version Beta sur parisinfo.com

⚡ Scanner la synthèse 90 s

Interface de l’application Paris For You : sélection du profil et itinéraire de découverte sur carte Mapbox. — ↳ Paris For You : la complexité algorithmique masquée derrière une interface épurée à 3 paramètres simples.

Partenaire : DataCity NUMA — ↳ Paris For You : la complexité algorithmique masquée derrière une interface épurée à 3 paramètres simples.

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 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. UI Kit Mapbox épuré et protocole de test en conditions réelles : marche autonome de 2 h dans Paris.

03 // Le résultat

Reconnaissance internationale. 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 au Demoday de l’Hôtel de Ville de Paris (12 juin 2019), devant les élus et la direction de Mastercard.
Mise en ligne concrète. Version Beta hébergée sur le portail officiel de l’Office de Tourisme (parisinfo.com).

4 moisdu cadrage amont au Demoday officiel à l’Hôtel de Ville
2 hde marche in situ dans les rues de Paris par chaque testeur
9frictions réelles cartographiées pour piloter le backlog PM
SilverIIID Award 2020 distinguant l’alliance data & design d’information

Vous avez l’essentiel. Deux chemins :

on en discute ?Découvrir le cadrage & les 4 étapes

Dans le cadre du programme d’innovation urbaine DataCity (NUMA × Ville de Paris), Mastercard et la Ville de Paris voulaient 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 :

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.
Masquer la tuyauterie algorithmique. Refuser les tableaux de bord à 48 coefficients : proposer une interface légère tenant sous la seconde d’affichage Mapbox.
É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.

Présentation officielle de Paris For You lors du Demoday à l’Hôtel de Ville de Paris le 12 juin 2019. — **Restitution officielle DataCity**, Hôtel de Ville de Paris

UX design & mentoring

Josselin Hillion (Senior Product Designer) en binôme avec 1 Designer Junior (ekino × MFG Labs) : immersion terrain, persona Jeff, UI Kit Mapbox, protocole in situ en 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 et 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 2019Phase 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. — ↳ Arbitrage pragmatique : simplifier les fonctionnalités pour garantir un affichage sous la seconde.

Acte 02 // Mars 2019Phase 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.

3 filtres : départ, temps, envies
UI Kit Mapbox
Wireframes & maquettes cibles

Planche comparative : wireframes fonctionnels et maquettes UI cibles de Paris For You. — ↳ De la structure filaire à l’interface épurée Mapbox connectée aux clusters de POIs.

Acte 03 // Avril – mai 2019Phase 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 de labo, 2 h de visite réelle et 20 min de 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 aussi ce test qui a inspiré la fonctionnalité refuge : un carnet de route PDF léger, téléchargeable 100 % hors ligne, pour parer aux forfaits roaming 4G coûteux.

Protocole in situ en 3 étapes
Panel de 10 résidents américains
Matrice des 9 frictions

Schéma du protocole de test in situ en 3 étapes : manipulation, balade réelle de 2 h et débrief téléphonique. — ↳ Le protocole de test in situ ayant alimenté la matrice des 9 frictions réelles.

Acte 04 // Juin 2019 & 2020Phase 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. — ↳ 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)

❖ Data & UXDialogue Design × Data ScienceArbitrage 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 : temps de réponse de l’API Mapbox plafonnés sous la seconde pour éviter les abandons en mobilité.

❖ Scoping LeanScoping 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 : efforts concentrés sur la recommandation de grappes de quartiers et de fiches de points d’intérêt authentiques.
Délivrer à l’heure : démonstrateur 100 % stable et fonctionnel le jour J devant le COMEX et les élus.

❖ Reality CheckVé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 : carnet de route PDF léger pour répondre aux coupures 4G immédiates des visiteurs étrangers.

❖ Recul critiqueCe que je ferais autrementStructurer 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.

🎯 The so what? // Ce que ce cas démontre pour vos produits

01 // Haute densité de données

Traduire des flux massifs en décisions simples

Capacité éprouvée à collaborer avec des ingénieurs data et backend pour transformer des volumes massifs d’événements et de statistiques en une interface claire, réactive et sans latence perceptible.

02 // Pragmatisme de delivery & MVP

Tailler pour tester plutôt que s’enfermer

Savoir élaguer la vision cible pour livrer un MVP opérationnel dans des délais très courts (4 mois), permettant de tester sur le pavé avant d’engager des développements lourds.

03 // L’explicabilité du système

Rendre compréhensible l’intelligence invisible

La performance brute d’un algorithme ne suffit pas : pour qu’un utilisateur agisse, le système doit rendre ses critères lisibles et lui donner les preuves nécessaires pour décider en toute confiance.

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

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

Synthèse de la mission & impact

Mise en situation : le défi d’innovation ouverte DataCity