CASE STUDY — 01
Pantera Family & Sport Club
Mokotów, Warsaw
Full redesign and infrastructure migration for a Warsaw martial arts and family sport club. From a generic WordPress theme on shared hosting to a custom Next.js + Payload CMS stack on a dedicated VPS.
dofbur.pl ↗— Overview
The Brief
My Role
Before / after — old WordPress hero next to the new looping cut.
The eight decisions this case study explains
Each item below is expanded later in its own section. This list exists at the top so the argument is visible even if you only skim — and so the rest of the page reads as evidence, not surprise.
- 1Video hero over photographyHand-edited 10-second loop of real training — kids first, then Krav Maga, then Tai Chi. Authentic proof of the training environment, not a stock substitute.
- 2Diagonal headline arrangementThe three fragments of the headline are indented progressively — each line shifted further right than the one above it. The text itself forms a diagonal that reads as motion and guides the eye toward the CTA. No graphic overlay needed.
- 3Audience segmentation below the foldThree cards route parents, adults, and Tai Chi seekers immediately. The page asks one question and routes — it does not try to be one thing.
- 4Varied section rhythmMarquee reviews, 50/50 USP, 3-col instructors. Rhythm variation signals hierarchy; uniform grids signal "nothing matters most".
- 5No "most popular" pricing badgeStandard SaaS pattern, wrong tool here. Pantera has no online checkout — every CTA leads to a human conversation.
- 6Instructor section keptIn martial arts, students choose the instructor before the club. Real names and faces close the trial booking; this also feeds Google E-E-A-T.
- 7Torn-paper divider rejectedOrganic shapes conflict with the sharp, geometric brand. Background-color shift between sections does the separation job without competing for attention.
- 8Headless stack migrationNext.js + Payload + Postgres + Coolify on a Hetzner VPS replaces WordPress on shared hosting. Performance is the visible win; control is the structural one.
— The Challenge
What needed solving
The primary design challenge was audience breadth. A single hero had to speak to a parent looking for safe children's classes, a 30-year-old wanting real self-defense, and someone older interested in low-impact movement. A secondary challenge was conversion logic: Pantera's sales process runs through a free trial class, not online purchase — every CTA had to funnel toward contact, not checkout.
Chapter
Design
The hardest part of Pantera was not the layout — it was deciding who the homepage was for. Three audiences (parents, adults, seniors) share almost nothing in common: different fears, different vocabulary, different reasons for showing up. A single hero either picks one and ignores the rest, or addresses all three and reads as generic.
The page stops pretending it can be one thing. It asks one question — which class are you here for? — and routes. Everything below assumes that choice has been made.
Hero anatomy
The hero uses a 10-second loop of training sessions as the background — a deliberate choice over photography. The cut was edited by hand into three beats in a specific order: kids having fun, adult Krav Maga, then Tai Chi. Kids open the video because the majority of Pantera's classes are for kids — the footage mirrors the actual class mix, not a generic montage.
- 1Google ratingStar rating anchors trust immediately — real reviews visible before any copy is read.
- 2Three-fragment headlineEach fragment targets a different audience concern: methodology, parent trust, local proximity.
- 3Color emphasis on "Bezpiecznie"The single word most likely to stop a parent from bouncing — color emphasis replaces a separate USP block.
- 4One CTA"Pierwszy trening za darmo" removes financial friction. No secondary link, no menu of options.
- 5Diagonal headline arrangementEach headline line is indented further than the one above it. The text itself forms a diagonal across the dark side of the hero, reading as motion and pointing the eye toward the CTA. No overlay graphic — the type is the diagonal.
- 6Curated footage order — kids firstHand-edited 10s loop runs kids → adult Krav Maga → Tai Chi. Kids open the cut because they're the largest audience segment; visitors immediately see themselves (or their child) within the first 3 seconds.
Pantera hero — 10-second loop edited into three beats: kids, adult Krav Maga, Tai Chi.
The diagonal in the hero is not a graphic overlay — it is the headline itself. Each of the three lines is indented further right than the one above, so the type forms a falling slope across the dark zone. A flush-left block of text would feel static. Letting the text become the diagonal pulls the eye down toward the CTA without adding a single decorative element.
Audience segmentation
Immediately below the fold, three cards split the offer by audience group. This is the site's most critical UX decision: instead of making every visitor read through everything, the page asks one question and routes them to their own path.
Three audiences, one homepage
Parents, adult learners, and Tai Chi students have different fears, motivations, and vocabulary. A single narrative can't address all three without feeling vague.
Segment first, sell second
Three visually distinct cards with real training photos route each visitor immediately. Copy is audience-specific from this point forward.
Reduced cognitive load
Visitors don't have to figure out if Pantera is for them — they see themselves in the card and continue. Bounce probability drops at this section.
Three audience cards — children, adults, seniors.
Rejected layouts
Two alternative directions were explored and discarded before arriving at the final design.
Social proof — reviews
Rather than a static grid of testimonials, reviews are presented as two horizontal marquee rows scrolling in opposite directions.
Counter-scroll rows
Row 1 scrolls left, row 2 scrolls right. The visual tension between them draws attention and creates a sense of depth — reviews feel like they're arriving from multiple sources simultaneously.
Implied scale
A static grid of 6 reviews communicates "here are all our reviews." An infinite marquee communicates "there are too many to count." The latter is the accurate framing for a club with 100+ Google reviews.
Pause on hover
Animation pauses on hover, allowing users who want to read a full review to do so without chasing a moving card. Accessibility baseline for motion-sensitive users.
Counter-scrolling review marquee — pauses on hover.
In martial arts schools, students choose their instructor before they choose the club. Michał, Tomasz, and Janusz are the product. Presenting them as real people with credentials and faces removes the abstraction — a parent is no longer enrolling in "Pantera," they're trusting their child to Michał Jaworski, Krav Maga instructor.
Pricing section
The pricing section presents three tiers but deliberately avoids the "most popular" badge found in the rejected layout.
Chapter
Performance
Lighthouse 95 / 92 / 100 / 100, up from 83 / 86 / 73 / 85. The headline number is useful; the meaningful one is Cumulative Layout Shift — 0.235 to 0.015. CLS is the only Core Web Vital users actually feel: the button that moves under your finger as you tap it, the image that shoves the headline down half a second after it appears.
The fixes were unglamorous — explicit image dimensions, preloaded fonts, the WordPress theme CSS gone. Not optimizations in the clever sense; the absence of choices the old theme was making by accident.
Lighthouse before & after
PageSpeed Insights — Performance 95, Accessibility 92, Best Practices 100, SEO 100. LCP 1.2s, CLS 0.015, TBT 20ms.
What actually changed
The most meaningful improvement is Cumulative Layout Shift — the metric users actually feel. The old site scored 0.235, sitting near Google's "poor" threshold of 0.25, which meant visible content jumps as the page loaded. The redesign brings it to 0.015, fully inside the "good" range.
The headline win. Layout shift was caused by images without explicit dimensions and late-loading fonts on the old site. Fixed by setting width/height attributes on every image and using font-display: swap with proper preload.
Old site had mixed content warnings, insecure third-party scripts, and deprecated APIs from old plugins. Perfect 100 reflects clean dependency management and proper HTTPS across all assets.
Correct heading hierarchy, meta descriptions, alt attributes, and structured data — all absent or broken on the old site. The new site ships with proper schema.org markup for LocalBusiness and SportsActivityLocation.
Static generation eliminates per-request PHP execution. The redesign also serves a video hero — load times remain comfortably within Google's "good" thresholds despite the heavier above-the-fold asset.
What the old site communicated
The previous pantera.waw.pl used a generic WordPress theme with no brand-specific design system. Several structural decisions actively worked against conversion.
Chapter
Stack
Replacing WordPress was not about performance — it was about control. Performance is the visible win; the structural one is that nothing about the CMS or the server requires logging into somebody else's dashboard to do the job.
Payload over Sanity (per-seat pricing turns hostile as the team grows), Strapi (mid-v5 migration churn), Contentful (priced for a different size of company). Coolify on a €5 Hetzner VPS over Vercel: the same push-to-deploy ergonomics on a flat-rate machine, without the bandwidth cliff a video-heavy site eventually walks off.
Stack migration
The Pantera project is being rebuilt from a shared-hosting WordPress install to a modern headless stack — Next.js as the frontend framework, Payload CMS as the content layer, PostgreSQL as the database, and a Hetzner VPS replacing shared hosting. This is not just a redesign: it's a full infrastructure replacement.
How it fits together
Payload admin — collections grouped by purpose, all field labels in Polish for the client.
Why this stack
Performance by default
Static generation means public pages are pre-rendered HTML — no PHP execution on request, no database query on page load. The Lighthouse gap between old and new site is partly structural, not just optimization.
Type-safe content schema
Payload collections are defined in TypeScript — instructors, classes, schedules have validated schemas. No more broken content from accidentally deleted required fields. Clean admin panel, not a duct-taped WordPress backend.
No seat-based pricing
Sanity charges per editor seat at scale. Payload is self-hosted and open source — the client owns their CMS with no recurring SaaS cost. For a single-location sports club, this is the right trade-off.
Full infrastructure control
Shared hosting can't run Node.js processes or PostgreSQL. The VPS enables the entire stack, plus Coolify handles deploys, reverse proxy, and SSL out of the box — none of which were possible on the old host.
Payload's native target
Payload 3.x uses Drizzle ORM with PostgreSQL as the primary target. Running the recommended combination avoids adapter quirks and gives access to full SQL capabilities — useful for future booking or reporting features.
Reusable agency template
The Next.js + Payload + Postgres + Hetzner stack is now a repeatable base for future sport and martial arts school clients. WordPress was client-specific; this stack is productizable.
Payload's admin UI is significantly cleaner than WordPress for non-technical users — no plugin menu, no theme customizer, no 15-year-old UX debt. The client sees only the collections they need, with field labels in Polish.
Honest trade-offs
The new stack is the right choice, but it's not free. Documenting both sides keeps the case study honest.
- Full control over server, caching, SSL
- Type-safe content with no plugin dependencies
- Performance ceiling much higher than WordPress shared
- No recurring CMS licensing cost
- Reusable stack for future clients
- SEO 85 → 100, Best Practices 73 → 100
- Higher initial build time vs WordPress theme
- VPS requires manual server maintenance
- No plugin ecosystem — custom code for edge cases
- Client onboarding to Payload takes more time than WP
- Manual updates for Next.js / Payload security patches