Comparer l’évolution du trafic pour optimiser ses temps de trajet

Comparer l’évolution du trafic pour optimiser ses temps de trajet 

Brief client

Magneto est un outil open data agrégeant les données du trafic de circulation autour de la Métropole de Bordeaux. Il permet d'observer les états du trafic en temps réel ou sur une période donnée afin d'identifier les pics de circulation.
Bordeaux Métropole souhaite refondre l’outil pour répondre aux attentes des agents de la Métropole mais aussi celles du grand public.
Un accompagnement nécessitant une analyse de l'existant avant d'aller à la rencontre des utilisateurs et des agents de la Métropole pour identifier leurs besoins.

Année

2020

Expertise
    Disciplines
    • Direction artistique
    • UI design
    • UX design
    • UX research
    Outils
    • Créativité
    • Entretiens utilisateurs
    • Grille d'observation
    • Sprint graphique

    01

    Analyse de l’outil existant

    Audit expert basé sur des critères ergonomiques

    Nous réalisons un audit ergonomique en reprenant l’interface existante pour identifier les points bloquants.

    Nous rédigeons ensuite un document regroupant tous les axes d’amélioration en priorisant chaque recommandation.

    Exemple des recommandations
    Extrait de notre audit expert
    02

    Guerilla testing

    Suite à l’audit ergonomique, nous allons à la rencontre des usagers afin d’obtenir leurs retours

    Dans un second temps, nous allons à la rencontre d’usagers dans les rues de Bordeaux pour connaitre leurs ressentis sur le service. L’étude a été menée sur différents utilisateurs en situation urbaine (Starbucks de la promenade Sainte-Catherine).

    Un questionnaire a été construit en amont pour récolter les retours sur 2 sujets principaux :

    • observer la compréhension de l’interface actuelle de l’outil Magneto
    • analyser les profils des conducteurs, les outils utilisés et leurs besoins

    18 utilisateurs
    interrogés

    UX Designer avec un usager
    Échanges avec un usager
    Table de l'atelier
    Préparation du guerilla testing
    Échanges avec un usager
    Préparation du guerilla testing
    03

    Observations in situ

    Collecter les retours des personnes travaillant au sein de la Métropole

    Magneto étant un outil à destination du grand public, mais aussi du métier, nous observons 4 personnes travaillant au sein de la Métropole dans leur compréhension et leur manipulation de l’interface.

    Nous leur donnons différentes tâches à réaliser ainsi que des objectifs à atteindre, afin d’observer leur utilisation de l’outil.

    Nous identifions par la suite les problèmes rencontrés lors de la manipulation.

    Poste de travail Métropole
    Écrans de surveillance de la Métropole
    Atelier d'observations in situ
    Observations in situ des agents
    Écrans de surveillance de la Métropole
    Observations in situ des agents
    04

    Design d’interaction

    Après une re-structuration de l’architecture de l’information, nous lançons la conception des wireframes

    En nous basant sur l’audit expert et les retours usagers, nous proposons une nouvelle arborescence ainsi que de nouvelles fonctionnalités.

    Avant de décliner l’entièreté des interfaces et des processus, nous mettons en place un design system qui s’enrichit tout au long du sprint UX et du sprint UI de nouveaux composants.

    Architecture de l'information
    Atelier « architecture de l’information » sur Miro
    Écrans en niveau de gris
    Wireframes de l’outil
    Atelier « architecture de l’information » sur Miro
    Wireframes de l’outil
    05

    Direction artistique et Design UI de l’interface

    L’outil Magneto est décliné en dark mode et light mode pour répondre au confort d’utilisation du plus grand nombre d’utilisateurs

    Le design de l’outil en ligne s’inspire de l’univers des logiciels et des applications, son style épuré et monochrome permet une bonne identification des différents tracés du trafic et des couches affichées sur la carte .

    Exemple de la charte
    Charte graphique de l’interface Magneto

    Basés sur les retours usagers et métiers, nous avons opté pour un dark et un light mode, avec un switch permettant de basculer très rapidement de l’un à l’autre.

    Il a fallu être particulièrement attentif à la cohésion entre les différents composants des deux modes.

    Mock up de nos écrans
    Design UI des écrans en dark mode et light mode
    Outil Magneto en dark mode
    Écrans UI
    Affichage de la carte en plein écran
    Écran agenda ouvert
    Filtre agenda
    Affichage de la carte en plein écran
    Filtre agenda

    260 composants
    créés dans le Design system

     

    Voir un autre projet