Studio Three options for a product, worked example

Tableau municipal: three options for the mayor's home

An agent was asked to go to the studio, pick three references and propose three looks for Tableau municipal. Each option below restyles the same real screen, the mayor's home, with its real French content. Built 04-10-2026 from the live app at social-contract.ch.

The product, read live

Every reference was judged against this card, written from the live app before any hunting.

1Who
The mayor of Chamonix-Mont-Blanc and his office, at a first meeting.
2Device
Computer first, shown in a meeting; must read on a phone.
3Job
See at a glance where six municipal subjects stand and what to prepare.
4Holds
Six subjects, one figure or status each (three marked SIMULATION), progress bars, the state of each data source, a question box (typed or spoken), priorities to prepare.
5Tone
Public service, serious, honest about what is real and what is an example.
6Language
French.
The mayor's home today: a dark blue sidebar, six white cards in a three by two grid, a priorities band.
Today: social-contract.ch/tableau-municipal/maire, captured 04-10-2026.

Three options

Three different ideas, not three variants: a quiet sheet of numbers, a public-service page, a question-first dark screen. Left picture: the reference. Right picture: the mayor's home in its way.

Tremor dashboard templateReference
Option A restyled screenRestyled
A
The number sheet, after Tremor
Answers card line 4: figures and progress bars, read like a balance sheet, no card borders.
See option A full size
UKHSA data dashboardReference
Option B restyled screenRestyled
B Recommended
The public data service, after the UKHSA dashboard
Answers card line 5: a public-service register where the state of each figure is the loudest thing on the card.
See option B full size
MeteoSwiss home on a phoneReference
Option C restyled screenRestyled
C
Ask first, after MeteoSwiss
Answers card lines 2 and 3: the question box leads, subjects become pills with their value, made for the phone.
See option C full size

A. The number sheet, after Tremor

Tremor dashboard template: usage figures with thin progress bars, no card borders.
Reference: dashboard.tremor.so/overview, captured 04-10-2026.
Card line it answers
4, what the screen holds: figures with their parts (engagé, mandaté, payé; jalons, incidents) read as bars.
Copied
  • No card borders: three columns of figures separated by white space only.
  • Label, small bordered badge, then the figure with its unit in plain words ("des jalons atteints").
  • Thin bars with the value on the right ("54/100"), and the quiet white sidebar with a workspace box at the top.
Refused
The green and red change badges and the date-range picker: the app has no comparison period and no time series, so the badge slot carries SIMULATION or the data state instead.
Risk for this audience
Keeps today's sidebar skeleton, so it may read to the mayor as the same screen, tidier.
Option A · Tableau de bord du maire

Vue d’ensemble

Six rubriques pour préparer le suivi municipal · prototype du 03-10-2026

Les valeurs marquées SIMULATION sont des exemples fictifs, sans lien avec les données municipales. Les autres éléments indiquent une source à vérifier ou une donnée à obtenir.

Finances & fiscalité SIMULATION
70 %engagé
Engagé70/100
Mandaté54/100
Payé41/100
Exemple fictif. Les trois étapes se suivent séparément.
Projets & services SIMULATION
60 %des jalons atteints
Jalons acceptés3/5
Incidents de voirie clos9/12
Retard de 18 jours · échéance 31-10-2026 · cause : validation en attente.
Tourisme & fréquentation SIMULATION
62 %taux d’occupation
Occupation62/100
Exemple fictif. Source, périmètre et fréquence de collecte à définir.

État des sources

Population & logement Données à obtenir
Export à confirmer
Vérifier la date, le périmètre et les données municipales.
Territoire & environnement Instantané daté
Flux bus collecté
Instantané public du 03-10-2026 à 18:49:14, pas de flux en direct. Ponctualité à calculer après jointure aux horaires. Air et vigilance à connecter.
Citoyens & consultations
VoxPopuli
Préparer une consultation, examiner les réponses et publier une synthèse après validation. Préparer une consultation →

Priorités à préparer

Les alertes et décisions relèvent de toutes les rubriques. Leur liste et leurs échéances restent à confirmer.

Échéances des projets et suivi des services → Autres décisions à préparer →

B. The public data service, after the UKHSA dashboard Recommended

UKHSA data dashboard: blue service band with search, large bold title, contents with a thick left rule, bordered topic cards.
Reference: ukhsa-dashboard.data.gov.uk, captured 04-10-2026.
Card line it answers
5, the tone: a public service that says plainly what is real and what is an example.
Copied
  • The blue service band holding the service name and the search box, here the mayor's question box.
  • A large bold title, a plain lead, a contents list with a thick left rule and a related-links column under a blue rule.
  • Square bordered cards with a blue link heading, and solid colour tags for status ("No alert" becomes SIMULATION, Données à obtenir, Instantané daté).
Refused
The GOV.UK crown, name and Transport typeface (a government brand, never borrowed; Public Sans stands in), and the Beta banner, replaced by the app's own SIMULATION notice.
Risk for this audience
Plain to the point of austere; a mayor who expects a "product" may find it administrative.
Why recommended
At a first meeting the credibility of the figures is the whole question, and this is the only option where SIMULATION and Données à obtenir cannot be missed. It is also the furthest from today's sidebar screen while staying in a register a commune already knows.
Option B · Tableau de bord du maire
Chamonix · Tableau de bord du maire
Vue d’ensembleRubriquesSourcesInterface citoyenne
PrototypeLes valeurs marquées SIMULATION sont des exemples fictifs, sans lien avec les données municipales.

Tableau de bord du maire

Six rubriques pour préparer le suivi municipal. Chaque rubrique ouvre un inventaire daté, avec sources et données à obtenir.

SommaireRubriquesPriorités à préparer
Voir aussiVoir l’interface citoyenneComment ça fonctionne ?SourcesCalendrier

Rubriques

Population & logement

Prototype du 03-10-2026

Données à obtenir
Export à confirmer

Vérifier la date, le périmètre et les données municipales.

Finances & fiscalité

Exécution du budget

SIMULATION
70 % engagé

Exemple fictif : mandaté 54 %, payé 41 %. Les trois étapes se suivent séparément.

Projets & services

Jalons et voirie

SIMULATION
60 % des jalons

3 jalons sur 5, retard de 18 jours, échéance 31-10-2026, cause : validation en attente. Voirie : 9 incidents clos sur 12, 3 ouverts.

Territoire & environnement

Transports, air, vigilance

Instantané daté
Flux bus collecté

Instantané public collecté le 03-10-2026 à 18:49:14, pas de flux en direct. Ponctualité à calculer après jointure aux horaires. Air et vigilance à connecter.

Tourisme & fréquentation

Hébergement

SIMULATION
62 % d’occupation

Exemple fictif. Source, périmètre et fréquence de collecte à définir.

Citoyens & consultations

VoxPopuli

Consulter les habitants

Préparer une consultation, examiner les réponses et publier une synthèse après validation.

Préparer une consultation
Priorités à préparer

Les alertes et décisions relèvent de toutes les rubriques. Leur liste et leurs échéances restent à confirmer.

Échéances des projets et suivi des servicesAutres décisions à préparer
Prototype local. Les exemples marqués SIMULATION sont fictifs.

C. Ask first, after MeteoSwiss

MeteoSwiss on a phone: a search field first on a dark slate field, then saved places as blue pills with boxed temperatures.
Reference: meteoswiss.admin.ch, phone width, captured 04-10-2026.
Card line it answers
2 and 3, device and job: on a phone, ask a question or glance at six values, nothing else first.
Copied
  • A dark slate field under a white header, with one flat search field as the first thing on it.
  • "My places" becomes "Mes rubriques": blue pills holding the name and boxed value chips, a round mark overlapping each pill's left end (here the state of the figure instead of the weather).
  • A heavy white heading for the second part, collapsible rows under it, and on the phone a bottom bar with the current view in red.
Refused
The Swiss shield and federal header (a state brand), and the map card: there is no map data in the app, so the space below holds the priorities instead.
Risk for this audience
Dark first may feel like an app, less like the commune; a light version is one click away.
Option C · Tableau de bord du maire
Chamonix · Tableau de bord du maire

Votre question sur la commune

Prototype du 03-10-2026. Les valeurs marquées SIMULATION sont des exemples fictifs, sans lien avec les données municipales.

Mes rubriques

SIM
Finances70 %54 %41 %
SIM
Projets3/5 jalons9/12 voirie
SIM
Tourisme62 %
À
OBTENIR
Population & logementexport à confirmer
03-10
18:49
Territoireflux bus collecté
VOX
Citoyenspréparer une consultation
SIM : SIMULATION, exemple fictifSource à vérifier ou donnée à obtenirFinances : engagé, mandaté, payé
Priorités à préparer
Échéances des projets et suivi des services

Projet en retard de 18 jours, échéance 31-10-2026, cause : validation en attente (exemple fictif). Voirie : 3 incidents ouverts.

Autres décisions à préparer

Les alertes et décisions relèvent de toutes les rubriques. Leur liste et leurs échéances restent à confirmer.

Territoire : ce qui reste à connecter

Ponctualité des bus à calculer après jointure aux horaires. Air et vigilance à connecter.

The candidates considered

Fourteen real app screens captured for this case, now the studio's app bank. Fit to the product card came first: maps, transit forms and news fronts hold a different kind of content.

TremorFigures and bars, option A. UKHSA dashboardPublic data, option B. MeteoSwissSearch first, option C. PlausibleSame idea as Tremor, but built round one chart the app does not have. MercuryIts hero is a balance over time; no time series here. shadcn/uiStat cards close to today's screen. Grafana, WikimediaOperations density, too much for a mayor. Our World in DataOne indicator per page; fits a rubric page, not the home. WindyA map app; no map data here. GOV.UKSame family as option B, a front door not a dashboard. Decidim BarcelonaFor the citizen side (VoxPopuli), not the mayor. CitymapperA journey form; loud brand field. SBBA journey form under a red band. Paris.frA news front led by a photograph.

The earlier example

The earlier three-proposals page: option Dossiers, a dark blue side rail and a white content area.
social-contract.ch/tableau-municipal/propositions-mobile, made in a Codex session on 03-10-2026.

The Codex session of 03-10-2026 proposed three ways to present the project (Parcours guidé, Dossiers, Feuillets). They differ in navigation and reading order and share one blue look. This board takes the other axis: the same screen, three looks taken from named outside references. The two can combine: a navigation from that page, a look from this one.

❓1 Which option for the mayor's home? (Pick one: B, the public data service, recommended · A, the number sheet · C, ask first · none, bring three more)