SCOOP - Refonte produit

Mobile-first Accessibilité Design System

Refonte déclenchée par deux besoins simultanés : harmonisation visuelle avec m-Ticket suite à son intégration dans SCOOP, et refonte technique complète du stack par l'équipe dev. Projet mené seule designer, en collaboration directe avec PM, Head of Product et devs mobiles et back.

SCOOP - Accueil et filtres
SCOOP - Recherche et historique
SCOOP - Horaires
SCOOP - Infos trafic
SCOOP - Itinéraires

Problématiques & Solutions

Architecture de navigation

Problématique 1: Quand m-Ticket est intégré à SCOOP, deux tab bars coexistaient dans la même application : celle de SCOOP sur l'accueil, celle de m-Ticket sur la partie billettique. Une navigation qui change selon la section désoriente l'utilisateur.

Solution : remplacer la tab bar SCOOP par un menu burger permanent, avec ajout d'un pictogramme m-Ticket pour basculer en un clic vers la billetterie. Sur la partie m-Ticket, le burger menu SCOOP reste accessible pour conserver l'accès à l'information voyageurs.

Priorisation en contexte d'urgence

Problématique 2: Après plusieurs mois de pause faute de ressources, le projet est remonté en priorité absolue avec deux semaines pour finaliser la conception et lancer les devs. Impossible d'organiser des tests utilisateurs formels dans ce délai.

Solution : présenter un prototype interactif aux clients clés pour valider les parcours avant développement. Leur validation a permis de lancer en confiance et de livrer sans retour majeur post-lancement.

Simplification de la page d'accueil

Problématique 3: L'accueil concentrait trois niveaux de navigation superposés : une tab bar de raccourcis, une pop-up de filtres pliable, et un bouton acheter des titres, le tout sur un fond en aplat couleur réseau. L'accumulation rendait l'écran trop chargé et rendait la lisibilité difficile, surtout sur les réseaux aux teintes saturées.

Solution : allègement de la hiérarchie visuelle, remplacement des filtres par un pictogramme à côté de la barre de recherche pour affiner la recherche, et neutralisation du fond pour laisser respirer l'interface.

Système de couleur réseau

Problématique 4: Chaque réseau client impose sa propre identité graphique. Sur certains réseaux aux teintes très saturées, les aplats de couleur en background et dans les menus créaient une surcharge visuelle sévère.

Solution : les couleurs réseau deviennent des couleurs d'accent uniquement, appliquées aux boutons, headers et pictogrammes sur fond neutre blanc ou gris. Chaque réseau conserve son identité sans agresser l'utilisateur.

Retour au portfolio