Aller au contenu principal
Porte 7
Références

Application citoyenne · Châlons Agglo, Fagnières, Saint-Martin-sur-le-Pré

Connecte
Châlons

L'application tournait déjà sur une plateforme d'Equans, écrans imposés compris. On n'a pas touché au moteur : on a refait tout ce que l'habitant voit.

  • Design UX/UI
Accueil livré de l'application Connecte Châlons : météo avec alerte de vigilance, actualités, puis une grille de tuiles Agenda, N° d'urgence, Signalements, Autour de moi, Mobilité et Mon espace citoyen, en pictogrammes au trait sur fond sombre.
L'accueil livré

Le moteur était imposé. L'interface, non.

Equans opère la plateforme pour l'agglomération. Tout redévelopper n'était ni possible ni utile : le travail consistait à rendre lisible ce qui existait.

Fixé par la plateforme

  • La grille de tuiles de l'accueil, emplacement par emplacement
  • La structure des écrans : en-tête, retour, notifications
  • Les fonctions du moteur : agenda, carte, signalements, démarches

Repris par Porte 7

  • Le nom de chaque tuile, réécrit depuis le besoin de l'habitant
  • Les pictogrammes, redessinés un par un
  • Un gabarit commun à toutes les pages de services
  • Une couleur par pilier, du pictogramme au titre
  • Un repère sur les services qui font sortir de l'app

Même grille, cinq décisions.

Basculez entre les deux versions : les repères restent sur les mêmes tuiles. Rien n'a bougé de place, tout a changé de sens.

Accueil refait : même grille sur fond sombre, pictogrammes au trait à pastilles colorées, libellés N° d'urgence et Autour de moi, dessins au trait des monuments.

Un gabarit, tous les piliers.

Une seule page type, déclinée sur chaque pilier du quotidien : ce qu'on apprend sur la mobilité sert pour la santé. Choisissez un pilier.

Page Mobilité : bandeau dessiné, pictogramme de bus à pastille lilas, titre lilas, puis six tuiles dont Parking, Taxis et Bornes de recharge.
  1. Bandeau dessinéLe logo du territoire sur un dessin au trait, propre à chaque pilier.
  2. Pictogramme et pastilleUn trait blanc, une pastille à la couleur du pilier.
  3. Titre et une phraseLe nom du pilier dans sa couleur, puis ce qu'on y trouve, en une ligne.
  4. Tuiles de servicesMême format partout. Une pastille lien signale un service externe.

Deux écrans sortent du gabarit, exprès.

Dans l'agenda, on cherche une date. Sur la carte, une adresse. Pas un service. Ces deux écrans deviennent des listes : filtres par période d'un côté, distance et horaires d'ouverture de l'autre, avec l'appel en un geste.

Agenda : filtres Tous, Ce week-end, Ce mois-ci, puis des cartes d'événements avec leurs dates en surimpression.
Agenda
Carte en liste : recherche autour de moi, puis la mairie, l'hôpital et la gare avec leur distance, leur adresse, l'horaire d'ouverture et un bouton d'appel.
Autour de moi

Les libellés aussi sont de l'interface.

Sur une tuile, on a trois mots pour dire où l'on va. On les a tous repris depuis ce que l'habitant vient faire.

AvantAprèsPourquoi
N° UtilesN° d'urgenceOn y vient dans l'urgence, le mot le dit.
Lieux utilesAutour de moiLa proximité avant la catégorie.
Mon espace citoyenMes démarchesLe titre de la page nomme la tâche, pas l'endroit.
N° Utiles (tout mélangé)N° d'urgence · N° utiles eau / gazUn SAMU et un plombier ne se cherchent pas dans le même état.

Ce qu'on a remis à Equans.

L'identité du territoire (logotype, palette, affichage) est signée par l'agence RJS, notre maison-mère. L'application s'y inscrit sans la redessiner.

Accueil
La grille existante réorganisée : libellés, pictogrammes, météo, habillage dessiné.
Gabarit pilier
Une page type déclinée sur chaque pilier, prête à en accueillir un nouveau.
Pictogrammes
Un par service, au trait, avec la pastille de son pilier.
Maquettes
Chaque écran livré à Equans pour intégration dans sa plateforme.