Application Marseille

Concevoir l'application mobile de la 2ème plus grande ville de France

Étude de cas 2018
UX design / UI design

Photographie de la statut du david à Marseille

Un service grand public pour les habitants ?

Quels services seraient suffisamment intéressants pour que les utilisateurs ouvrent l’application Ville de Marseille au moins une fois par semaine ?
« Une application mobile pour une ville qui n’est ouverte qu’une fois dans l’année est un échec ! ».
La première partie de notre mission consiste par conséquent à trouver ou proposer des services clés que les utilisateurs recherchent ou qui vont faciliter leur vie quotidienne.

Photo prise lors d'un atelier de travail
Photo prise lors d'un atelier de travail, des post-its sont disposés sur une table, avec les idées emmergentes

Une réflexion sur les parcours utilisateurs via un atelier et la mise en place d’un story mapping nous a permis d’identifier ces services clés :

  • Des actualités municipales clés ;
  • Un agenda des sorties culturelles et sportives ;
  • Un accès à l’ensemble des équipements et leurs infos pratiques ;
  • Des services temps réels : trafic, qualité de l’air, qualité de l’eau… ;
  • La géolocalisation des équipements ;
  • Un système de notifications personnalisables.

Les utilisateurs et leurs besoins

Dans une démarche itérative de co-conception nous avons pu formaliser les personas et le User Story Mapping en vue de déterminer une liste priorisée des fonctionnalités clés de l’inteface (Minimum Viable Product ou MVP).

Présentation d'un persona détaillé, en vu de définir les parcours utilisateurs
liste de plusieurs profils non détaillé

Architecture de l’application

Une carte de l’application et des services est nécessaire pour avoir une vue d’ensemble, une vue architecturale.

Arborescence de l'application

Parcours utilisateurs

Maquettage de l’ergonomie de l’ensemble des pages des services pour s’assurer des parcours utilisateurs et de la faisabilité technique.

Présentation de la tabbar, avec une vision rapide d'un parcours utilisateur

Univers graphique

Mise en place d’un système de pictogrammes permettant de couvrir l’ensemble de l’univers des services et équipements de la ville de Marseille.

Liste de pictogrammes de l'application, lorsqu'ils sont inactifs, ils sont filaires
Liste de pictogrammes de l'application, lorsqu'ils sont actif, ils sont pleins

Ecrans clés de l’interface

Le design traduit de façon colorielle les bascules entre les grandes fonctions de l’application.

Présentation de la page "sortir" avec la liste de tous les événements, et des filtres par catégories
Page "Services temps réel", il y a une liste de tous les services disponible. exemple: menu des cantines, météo, risque pollinique...
Page d'accueil de l'application, avec la liste sous forme d'onglet de tous les équipements de la ville

Tests utilisateurs et amélioration continue

Nous avons mis en place un protocole de test utilisateur où 4 utilisateurs ont été interrogés sur leurs attentes et leurs parcours, suite à la première release de l’application. Nous en avons tiré des enseignements majeurs qui nous on permis d’améliorer l’application.

Comment nos utilisateurs comprennent et utilisent l’application Ville de Marseille ?

  • La proposition de valeur de l’application est clairement comprise et attendue par la plupart des utilisateurs mais challengée par la cible « jeune ».
  • Le design contribue de manière importante à la bonne perception de l’application et participe à l’envie de découvrir les contenus proposés.
  • Le design est clair, il permet une expérience utilisateur simple et rapide.
  • Les contenus Temps Réels sont attendus en notification PUSH plus qu’en consultation de l’application.
Photographie prise lors de tests utilisateurs, deux personnes sont en train de tester l'application sur leur mobile
Photographie prise lors de tests utilisateurs, deux personnes sont en train de tester l'application sur leur mobile

Télécharger l’application :

Sur App Store

Sur Google Play

Témoignage

« J’ai eu l’occasion de travailler de nombreuses fois avec les équipes de Perméable. Nous avons toujours été extrêmement satisfait de leur travail. Ce sont de réels experts du graphisme et de l’ergonomie. Ils ont un sens du détail extrêmement poussé qui m’a toujours impressionné et qui fait que tout est pensé au millimètre autant pour les utilisateurs que pour le client. Toujours disponible, de bon conseils et dans les délais c’est un vrai plaisir de travailler avec eux ! »

Alix Normandin
Mairie de Marseille, Direction de l’Information Digitale et Éditoriale

Projet suivant

MoCo : Centre d’Art Montpellier Contemporain

Une identité pour la réunion des 3 pôles dédiés à l’Art sur le territoire Montpellier Métropole