The Result
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. Here's a demo of the final product below.
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, which are 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).
The Impact
This project contributed directly to eliminating a $750,000 annual dependency on a third-party SaaS platform (Instapages), replacing it with a CMS-powered, in-house solution built for long-term scalability. My work validated the technical and design feasibility of moving off the platform, and the business made the switch.
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
The Problem
The existing TNT Sports Box Office page was built on Instapages, a third-party tool that had become a bottleneck for the business:
Poor customizability, content teams couldn't adapt the page for different event types without developer intervention
Conversion friction, the UX/UI wasn't optimized for PPV purchase decisions
Single-event limitation, no support for promoting multiple PPV events simultaneously
Recurring SaaS costs, the Instapages dependency represented a significant and unnecessary annual overhead
⭐️
This wasn’t just a refresh. it was a ground-up rethink, built with performance, scalability, and flexibility in mind.
Design Process
Figma Designs
Component library (left) and full-page MVP variations across single and double event states, designed to handle 3–5 streaming service cards each
Working from TNT Sports' existing brand guidelines, I designed a modular component system that could flex across every event state the business needed from a quiet off-season to simultaneous multi-fight PPV weeks.
The component library covered the full page:
Hero Banner
Event Info Bar
Watch Cards with CTA buttons
Featured Content Tiles
FAQ Accordion
I designed every state the page could be in: no upcoming event, single event, and multiple concurrent events, each with variations for 3, 4, and 5 streaming service cards. This gave the development team a clear, exhaustive reference and eliminated ambiguity during the build.
The Build
With the designs signed off, I built the page as a componentized Next.js application. Structured to match the modular design system exactly.
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:
These blocks were modular and dynamic, making the page highly adaptable for different event states.
Multi-Events Support
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, and 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, and super smooth for previewing changes and testing edge cases.
Reflection
The page was built, CMS-connected, and ready. What I didn't know until late in the project was that the engineering team had been developing a parallel internal solution on a separate track. When an event deadline became immovable, the PM made the call to launch the existing internal build rather than absorb the migration cost, which a reasonable decision under the circumstances.
✅ New page design completed
✅ CMS-powered and SEO-ready
✅ Analytics integration live
✅ Support for multiple events
✅ Cost savings achieved
The $750K savings happened either way. What I'd do differently is push for a cross-functional alignment checkpoint earlier in discovery, surface parallel workstreams before they become a late-stage decision point.
Big thanks to the team that navigated tight deadlines, cross-border collaboration, and more than a few technical unknowns to build something genuinely worth being proud of.