Meter is the design office of MJ Jackson

Meter is the design office
of MJ Jackson

Rouleur

A home for cycling enthusiasts of all kinds.

Client

Rouleur

Role

Creative direction, digital strategy, UX and UI design, design system, product design

Team

Lead designer, with build by Paul Gorbach (AI-assisted)

Year

2026

Studio

Conductor

Rouleur’s print magazine and its live show set the standard in cycling, known for photography, writing and production. The website hadn’t kept up. It was somewhere people visited when an issue came out, not somewhere they came back to, and years of separate digital products didn’t add up to one experience. The job was to give Rouleur a digital home worthy of the brand, one that earns daily attention and turns readers into members. I led the platform from strategy to shipped product, and the MVP went live for the 2026 Tour de France after just 12 weeks of design and build.

The “Spotify of cycling”: somewhere fans open every day of the season, not only when an issue lands. Cycling has a natural daily rhythm, especially during the racing seasons: stages every day for three weeks, during a long summer bookended with one-day races. So we built around the race calendar, with live race hubs, results and a personalised homepage tuned to what each reader follows. The magazine’s depth and archive sit behind it, so the daily habit leads into the long reads, podcast listens and interview videos.

Most cycling sites compete on volume. Rouleur competes on quality. We brought the magazine online without making it nostalgic: generous space, photography given room, typography doing the work, and restraint around commerce. Two registers run through it: an immersive mode for discovery, and a direct editorial mode, synopsis then image, for everyday reading.

Note

One published component library behind every page: a white base, a mint accent, black actions and hairline rules. It’s themeable, so the site changes with the season without a redesign, with Tour yellow, Giro pink, Vuelta red and a Rouleur Live mode updated each year.

Start lists, stage profiles, previews and live coverage in one hub, themed to the race. Live results run from the homepage through to stage, rider and team pages.

The paywall invites people in rather than shutting them out. Readers see the article before they’re asked to join, and plans are clear at a glance. Once in, one account holds membership, tickets, saved stories and the riders you follow, across desktop, mobile and the Live app.

Note

144 issues of the magazine, browsable as a grid or a timeline, with issue pages and a directory of contributors.

Rouleur Live is the sport’s flagship consumer show, and the app is its companion: a personal schedule, a venue map, guests and exhibitors, with membership built into every visit. It shares a foundation with the website, so every improvement reaches both.

Note

Rouleur’s films and Live talks in one library, with searchable transcripts that jump straight to the moment.

There’s no static brand book. The documentation lives in the system: tokens for colour, type and spacing, documented components, and theme modes for races and Live. Each module was designed in Figma and handed over with its own brief covering behaviour, states and edge cases, then built by Paul’s AI agent while design moved on to the next.

Discover ties it together: one panel for what’s on right now, what you follow and everything there is to browse. Twelve weeks from first design to a live platform, in time for the Tour de France. 62 tokens, 6 theme modes, 39 modules and more than 200 screens. More than 10,000 members moved across with churn held at a fraction of a percent, and Rouleur Live ticket sales are running ahead of last year. This is the first stage, not the finish.