Melvin Debot

Available for selected collaborations

Paris

Madame Pee — Because every woman’s needs count

02Product platform

Madame Pee

Because every woman’s needs count

ClientMadame Pee
Year2021
RoleFrontend · UI design · Performance
Visit site

The challenge

Madame Pee makes female urinals for festivals and public spaces. They needed a platform that could list every unit in France, stay useful at three in the morning on a festival field with one bar of signal, and still look like the brand people had met on site.

The response

A location-first platform where the map is the product and the editorial layer wraps around it. Everything above the fold is text and coordinates; imagery streams in behind it. The brand shows up in the type and the motion rather than in heavy hero art.

A row of red madamePee units at a festival
Lollapalooza. The platform has to hold up here, at 3am, on one bar of signal.

01Approach

Design for the worst signal, not the best screenshot.

The real usage context is outdoors, at night, in a crowd. So the first paint carries the whole answer — nearest location, distance, opening state — as text. Imagery, maps and transitions arrive afterwards and enhance rather than gate.

  • Text-first first paint, media strictly progressive
  • Touch targets sized for cold hands
  • Every state legible at 30% brightness
  • A single madamePee unit, white with a red bowl
    The product itself — waterless, contactless, and the reason the map exists.

    02Design system

    A brand that survives being useful.

    The identity is loud and pink; a utility can’t be. I kept the accent for a single job — indicating availability — and let a warm neutral carry the rest. That one rule is what stops the site reading as a campaign page.

  • Accent reserved for availability state only
  • Warm neutral scale for structure and body copy
  • Type ramp tuned for outdoor legibility
  • Close-up of the patented female urinal bowl
    The patented bowl: the one detail the brand never lets you forget.
    madamePee units installed on a festival field
    A festival field. Every unit here is a pin on the national map.

    03Development

    React, a live API, and a strict image budget.

    Locations come from a live API through a context layer with optimistic caching, so panning the map never blanks the list. Every photograph is served responsive, lazy and format-negotiated — the median page weight landed under a third of the original build.

  • React frontend, context-based data layer with cache
  • Responsive, lazily loaded, format-negotiated imagery
  • Fully responsive from 320px up
  • 04Outcome

    A directory people actually open in the field.

    The platform became the reference listing for the network, and the image budget kept it usable on a saturated festival network — the condition the whole thing was designed around.

    −68%Median page weight
    320pxLowest supported width
    FRNational coverage

    Stack

    • React
    • REST API
    • Context API
    • Responsive imagery

    Services

    • Frontend development
    • UI / UX design
    • Image optimisation
    • Responsive

    Images

    • Product and event photography — madamePee

    Next project — 03

    Bolk

    A self-service ordering terminal designed around a ninety-second lunch queue.

    Start something

    Let’s make the web feel alive.