Anis Slimani

Brief to ShipBuild chapter

The route the app never offers me

“À ma façon” (my way) is a concept for an opt-in mode in Citymapper. I compose my route line by line. The app keeps the rest: live times, arrive-by, tracking.

Where it starts

A trip I know by heart

I often go from Massy - Palaiseau to Louis Blanc to see a close friend. I plan with “arrive by”. The app always gives me the same answer: RER B to Châtelet, then line 7.

I do it differently. The B to Châtelet. The RER A for a single stop, to Auber. Then line 7 at Opéra, in the same station complex.

At Châtelet, the transfer to line 7 is long and stressful. Crowds, endless corridors, travelators and escalators that are often broken. I feel less safe there. At Opéra it is clean, direct, and security is more visible.

My route exists. The app never offers it.

In three numbers

1trip I make all the time

0times the app has offered it

9 minto transfer at Châtelet, against 4 min at Opéra

Illustrative figures, from my own experience of the trip.

On the wall

Why my route disappears

The algorithm optimises. I have preferences.

Compose your route, keep the intelligence

The prototype is real. It runs on a small data set and you can use it. The four moments below move it to the right place, but you can also explore it freely. Its interface is in French, like the app in Paris.

  1. Nothing changes if you want the app to decide. “À ma façon” is one more tab in the mode bar.

  2. At each station I only see the lines that serve it and bring me closer to my destination. Each option shows its transfer. Long ones turn to the warning colour.

  3. Once I reach Louis Blanc, the trip is summed up on one card: legs, transfers, total time. The departure time is computed from the arrival time.

  4. My route moves to the top of the suggestions, with its tag and live status. It behaves like a route the app suggested.

Interactive prototype

Preview below. Full screen is more comfortable to use.

You're inside the prototypeExplore “À ma façon”.

Independent concept, not affiliated with Citymapper. Illustrative data.

Contributing to an existing system

I did not redesign Citymapper. I added the minimum, inside its visual language. Everything is built in Figma, on tokens and auto layout. The line badges are the existing ones, reused as they are.

  • A mode tab, in the bottom bar.
  • A picker row with a radio button, to choose the next line.
  • A transfer row, between two legs.
  • A tag, “Ton trajet · épinglé” (your route, pinned).

Why it doesn't exist (yet)

Most people want the app to decide. That is its promise, and it keeps it well.

A route the app did not choose raises two questions. Is it accurate? And if it goes wrong, who owns that?

Hence an opt-in mode, not a replacement. You enter it on purpose. You know the route is yours.

To test: show transfer cost as a visible criterion, not just total time.

Where the machine led, where I took over

Claude Code and the Figma connector built fast: tokens, screens, code.

Claude first rebuilt the line badges from scratch. I made it reuse the ones I had extracted.

It used absolute positioning. I required auto layout everywhere.

It oversized the header. I fixed it by hand, and it used my fix as the model from then on.

Timings are illustrative. They stay that way until they are replaced with Île-de-France Mobilités data.