Designing a ticketing flow that stays out of the way
Written byZaki Hattaon
Notes from building the Seven Star Production ticketing frontend with Next.js, TypeScript and Tailwind CSS.
Nobody visits a ticketing site to admire the ticketing site. They come for a show, and every extra screen between them and their ticket is a chance to give up. That was the brief I set myself for the Seven Star Production ticketing frontend.
Fewer decisions per screen
Each step asks for one thing: pick the event, pick the ticket, confirm the details, pay. Secondary information stays available, but out of the main path.
Phones first
Most buyers arrive from a link on social media, on their phone. I designed the layouts for small screens first and let them expand, rather than squeezing a desktop page down.
Typed from end to end
TypeScript kept event, ticket and order data consistent across every component, and Tailwind CSS made it quick to keep spacing and type uniform as the screens multiplied.
A good ticketing flow is one you forget you used.
