Introduction
The goal of this project was to redesign and rebuild the TNT Sports Box Office webpage into a unified hub that serves both evergreen content and real-time event coverage. The new page needed to support:
Multiple concurrent events
Flexible content updates via CMS
SEO optimizations
Analytics integration
We aimed to build a responsive, modular landing page with hero imagery, event details, watch cards, featured content, FAQs, and a sticky footer—completely editable via a headless CMS.
This project ran under very aggressive timelines, kicking off in late November 2024 with a hard launch date of February 14, 2025 (Valentine’s Day, naturally). Due to roadblocks and shifting scopes, I ended up rebuilding the page ~4 times.
The Problem
The previous page setup had a number of issues:
Poor customizability
Inefficient UX/UI that hindered conversions
Limited support for multiple events
Dependency on 3rd party tooling (Instapages) with recurring costs
This wasn’t just a refresh—it was a ground-up rethink, built with performance, scalability, and flexibility in mind.
Design Process
Figma Collaboration
Using these designs, I derived a type scale and style variables directly from Figma’s shared libraries, translating them into clean CSS to maintain design consistency across breakpoints.
MVP Component Architecture
I started with a componentized MVP that included:
Hero Banner
Event Info Bar
Watch Cards with CTA buttons
Featured Content Tiles
FAQ Accordion
This setup allowed us to rapidly prototype, test, and iterate across scenarios and breakpoints: no events, single event, and multiple events.
CMS Integration & Dynamic Content
This was my first time working with GraphQL—and it turned out to be a game changer.
We collaborated with Eurosport’s Paris-based dev team to fetch structured content from a headless CMS. I implemented GraphQL queries to pull in blocks like:
PPVEventBlock(event sections)PPVFeatureContentsBlock(editorial highlights).PPVFAQBlock(support content)
These blocks were modular and dynamic, making the page highly adaptable for different event states.
Handling Multiple Events
Originally out of scope, multi-event support became a stretch goal. I implemented a flexible system to loop through and sort event blocks based on type and display priority:
Event Info
Featured Content
FAQs
This enabled the business to promote multiple PPV events simultaneously—a big step forward for marketing agility.
SEO & Analytics Support
To meet SEO requirements, I implemented:
Metadata injection (title, description, canonical URL)
Hierarchical H1/H2/H3 tags
Structured content for search engine indexing
Server Side Rendering for improved search engine indexing
For web analytics, I worked with the analytics team to embed Adobe Analytics tags for each environment (Dev, Staging, Production). I set up dynamic environment variables to ensure correct tagging across deployments.
Hosting & DevOps
We used AWS Amplify for hosting and deployment with full SSR support. The CI/CD pipeline was configured to push builds across branches with zero-downtime deploys—super smooth for previewing changes and testing edge cases.
Outcome
✅ New page design completed
✅ CMS-powered and SEO-ready
✅ Analytics integration live
✅ Support for multiple events
✅ Cost savings achieved
Despite hitting all the key deliverables, the final deployment decision shifted. Ultimately, the business opted to use an internal Eurosport CMS-based solution to fast-track launch for the upcoming event. While it was disappointing to see my build sidelined, I understood the urgency and supported the pivot.
The takeaway? Sometimes the best solution isn’t the one that goes live—but it’s the one that sets a new internal standard.
Big shout out to the team that pushed through tight deadlines, cross-border collaboration, and technical unknowns to ship something we were genuinely proud of.