Music & touring · Mobile-first · Self-initiated concept

Tul8te

An Egyptian artist with nine shows across four continents was routing every one of them through a plain list — and sending two cities' worth of demand to a blank page. I rebuilt the tour as the road it was describing.

Role
Diagnosis + design + frontend build
Category
Music · Tour & ticketing
Platform
Hand-written HTML · CSS · Vanilla JS
Overview

A tour page is a checkout funnel wearing a poster.

Tul8te is a masked Egyptian artist on MDLBEAST Records. The commerce side of his world is competent — a Shopify store, a merch drop, Arabic and English, multi-currency. The tour lives somewhere else entirely: one page, a vertical list of dates, each row handing off to a different ticketing partner.

Nine upcoming shows, fifteen already played, four continents — all flattened into rows that look identical whether the artist is playing Le Bataclan or a desert amphitheatre in Sakhir.

Nobody briefed me and nobody paid me. It is an unsolicited rebuild, built because the page had a measurable hole in it and a working page argues better than an audit.

Diagnosis

The most expensive thing on the page was the part that didn't work

Two of the nine stops have no date or venue yet: Cairo, and Kuwait on October 8th. Both rows carry the single highest-intent button on the whole site — and both of them lead nowhere.

01

Two buttons, two empty pages

“Alert me when tickets drop” resolves to real URLs. Both return 200 OK and render a header, a footer, and nothing else. No heading, no form, no field, no confirmation. Checked in the browser, not assumed.

02

It is a leak, not a design flaw

A fan in Cairo volunteering their email for a show in their own city — before it is even announced — converts at exactly zero percent by construction. Nobody finds out, because there is no form to fail to submit.

03

The seam belongs to nobody

The store is owned. The tour list is owned. The seam between the artist's world and its commerce mechanics is owned by nobody — and that seam is the entire brief.

The build

Build the road, not the table

The tour art is a road, so the page became the thing it was describing. Each city is a card you drive past; tapping a ticket stamps a passport for that city before handing off to the same official seller it always did.

01

Measured, not approximated

The car originally rode a sine wave and hoped it lined up. I loaded the road tile into a canvas, walked it row by row and tracked the pink band's centre into a 96-point centreline — agreeing with raw pixel sampling to under one pixel.

02

Then I deleted it

The road weaves with a ~290px wavelength, so a faithful car crosses the screen three times per viewport. Correct, and unwatchable. “The car follows the road” was never the goal — “the tour visits your city” was. It now arrives, parks, leaves.

03

It has to survive a story link

Opened on a phone, on cellular, from Instagram. Every heavy image was re-encoded to WebP — the road tile alone dropped 88% with no visible loss. Images went 13.6 MB → 1.8 MB; the whole deploy is 12 files and 4.14 MB.

Tul8te world tour page — the illustrated poster hero with the next-stop ticket stub over it
Tul8te — the tour poster turned into a road the fan drives, ending at the official seller
Where it goes next

The rebuild stops at the interface. Checkout stays where it belongs — on the ticketing partners and the official store — and the page's only job is to get a fan there still wanting something specific.

The first things I would instrument: outbound click-through per stop split by ticketing partner, since the partners have wildly different checkout quality; alert capture for Cairo and Kuwait, where the current baseline is definitionally zero; and Largest Contentful Paint on throttled 4G, because the whole thing is delivered through a story link.

Demo

Drive the tour yourself.