Sports Club Design System & Code Blocks Living Website

PORT ST. LUCIE SC

A website that tells the story of a club being born in real time, built as a design system and code blocks ready to change with every milestone on the road to 2027.

Context

Port St. Lucie SC is the first professional soccer club in its city. It debuts in USL League One in 2027, already runs a reserve team in the USL Academy League, has a youth academy and a stadium on the way.

The assets were real. The problem was that nobody could feel them. The masterplan, the stadium and 2027 did not come through when you landed on the site. The club's own words were blunt: you don't feel anything.

There was a second layer. Web, Instagram, TikTok and X were each telling a different story, and tickets and merch were about to start generating revenue with no narrative to sit on.

The engagement was clear from day one: strategy, design, a design system and custom code blocks, handed off to the club's developer for integration into WordPress. We would not build the platform. We would build the pieces that make it feel like something.

So we did not treat this as a redesign. We treated it as a system that tells the project and converts, week after week.


Our Solution

Discovery before pixels

We started with the person who lands on the site. Marco, 35, has lived in Port St. Lucie for over ten years, has Latin American roots and a kid who plays soccer. He arrives excited and skeptical at the same time: he wants to believe, but he has seen projects in the city that never happened. If the site convinces him, he becomes the club's best ambassador.

From there we mapped four jobs to be done, each with its breaking point: check that the project is real, find a way to join today, find a place for his kid, and have something concrete to share.

Then we benchmarked. Forty sources across six leagues, from USL League One to the Premier League, read as fanbase and revenue machines rather than teams. We tried to refute every strong number before using it. The finding was clear: the ceiling in USL League One is low and flat. Beating it was a design effort, not a budget one. That became the argument behind every architecture decision:

  • • Five narrative pillars, starting with "you're watching a club be born"
  • • Simple navigation, with the Founding Member action never more than a tap away
  • • A home page structured as a narrative arc: proof first, then emotion, always an action
  • • The official store as one of the concrete ways to join today, not a secondary section

Built as blocks, made to be felt

The site was designed as a set of independent blocks. Each section is a piece the developer can take and integrate into WordPress one at a time, and the interactive parts ship packaged and ready to drop in, with no need to understand how they work inside.

Eleven blocks on the home tell a construction in progress: a hero headline that cycles through imagined, built, backed, loved and born over footage of the works, a stats band with animated counters for founding members, deposits and days to the first match, and the live team schedule with the next match highlighted.

Four moments were built from scratch:

  • • The jersey that moves with your scroll, no dragging needed
  • • The founders wall, an airport-board style panel where every new founder appears live, plus the membership card you build from a photo and share
  • • The stadium reveal, a mask that slides away as you scroll and uncovers the render like raising a curtain
  • • The animated project timeline, because this is a construction schedule, not a pitch deck

The same system carries the Join and Partners pages without duplicating work. Join resolves the full founder signup flow, with three plans and an FAQ that anticipates Marco's real objections. Partners keeps the same visual language in a more commercial register, reading the same traction numbers a fan sees as a growth curve for sponsors and investors.

A living site, not a launch

We did not design a static page. We designed the experience of the club's current moment: the launch and the road to the 2027 season. The countdown, the founders wall and the hero all live in the present tense.

When the next milestone arrives, the site changes with it. The launch, the groundbreaking, the first whistle: each one writes a new version. That is why the site is planned in stages, not closed and forgotten the day it goes live.

The club presented the redesign to USL as a living story. Today we keep working on the next chapters, starting with the stadium microsite for the groundbreaking campaign, where every family writes the message they want to leave in the foundations.