Centre Point Global

Centre Point Global is a real, family-run school-travel agency in Madrid, organizing trips, language-immersion programs, and end-of-year excursions for roughly 40 schools. Their entire online presence was one static WordPress page: no indexable pages for Google, no management panel for the team, and no way for a family to pay online. Every lead ended the same way, a downloaded PDF or an email exchange with no path to close.

I joined as Product & UX Lead alongside co-founder Jorge J. Rolo (business & engineering) to turn that page into a platform. Phase 1 scopes three new capabilities: a dynamic, SEO-optimized trip catalog with its own page per trip and category; a self-serve CMS so the ops team can publish, price, and photograph trips without touching code; and Stripe Payment Links so a family can pay a deposit or the full amount in two clicks, live from day one. Everything outside that, split/institutional payment, role-based portals for families and schools, nationwide SEO, an editorial CMS, is explicitly scoped to Phase 2 so Phase 1 ships focused.

School travel is a B2B2C model with three decision-makers in a chain, not one user: the coordinating teacher initiates and compares agencies, the school's leadership authorizes the trip, and the paying family settles the bill while the child is the one who travels. A PTA often pools and staggers the family payments. Rather than sketching personas first, I mapped the full stakeholder set, internal and external, direct and indirect, and scored each on power × interest (Mendelow) before deriving any user archetype from it, matching NN/g's guidance that a persona without a real stakeholder behind it is decoration.

Eleven direct competitors serving Madrid and Spain were reviewed URL by URL and scored against Nielsen's usability heuristics, plus a review of verified Google ratings and forum complaints to separate real pain points from assumptions.

Before any component got built, I compiled the applicable evidence from Nielsen Norman Group and Baymard Institute, plus CXL, Fogg, Rogers and Cialdini, for every recurring pattern the catalog and checkout would need. This became the review checklist for the design system, not a mood board.

The client's three brand colors, coral #E0645A, magenta #E5478F, and indigo #43508F, were audited for WCAG 2.1 AA contrast before a single token shipped to globals.css. Coral and magenta both fail as normal text on white or the page background (3.42:1 and 3.73:1, against a 4.5:1 minimum); only indigo passes outright, at 7.55:1. Coral or magenta directly over indigo fails even harder, at roughly 2:1, unreadable.

The fix: two text-safe variants, coral-700 #B23A30 and magenta-700 #B81E63, both AA-verified, an AA-checked tint/shade scale for the rest of the palette, and a 60-30-10 rule, 60% neutral surfaces, 30% indigo as the structural and trust color, 10% coral as the primary CTA, magenta capped under 5% as a pure accent. This was flagged as a P0, ship-blocking item, not a style suggestion.

A simulated round of persona testing on the palette (explicitly labeled as simulated, not real users, and later scheduled for replacement with moderated sessions) surfaced a real tension worth designing for rather than resolving by picking a side: parents and the school coordinator read a coral/magenta-dominant page as "a fun camp," not "an institution I'd sign a contract with," while a 17-year-old reader loved the warmth and found indigo "boring." The resolution channels coral and magenta to emotional, family-facing moments and promotes indigo to the structural, trust-facing ones, rather than diluting either audience.

The Phase 1 sitemap was designed as 11 page templates, not 11 one-off pages, each with its own purpose, minimum on-page content, schema.org type, and accessibility requirement, from the trip-detail page (Product/TouristTrip + breadcrumb) to the four local Madrid landing pages that anchor Phase 1's SEO. A scoring formula (volume × commercial value × Phase-1 fit ÷ keyword difficulty) ranked every target keyword so effort followed opportunity, not guesswork.

Screenshots below are from the live Phase 1 build, not mockups. The homepage splits into two entry points from the first screen, "I'm a school" and "I'm a family," acknowledging the B2B2C split from the stakeholder research directly in the hero.

The stack is Next.js 16 (App Router) with React 19 for SSR/SSG, shadcn/ui and Tailwind CSS v4 on Montserrat, Supabase (Postgres, Auth, and row-level security on every table) for the catalog and CMS, and Stripe Payment Links for checkout, deliberately kept in test mode until the full flow is validated end to end. Hosting is Vercel.

The build itself runs on an orchestrator-plus-specialist-agents pattern in Claude Code: one ephemeral sub-agent per concern, SEO architecture, frontend/design system, CRO & copywriting, accessibility, CMS/data modeling, content & imagery, and QA, each returning a deliverable, a short summary, and any unverified facts flagged rather than guessed. The orchestrating session reviews every delivery, including re-checking contrast ratios and business figures, before accepting it. No price, phone number, or business claim ships without confirmation.

I own the research, IA/SEO strategy, and accessibility for Centre Point Global, and I direct the agentic Claude Code build as the orchestrating designer: writing the brief for each specialist agent, reviewing every deliverable against the research before it ships, and keeping the brand's WCAG compliance non-negotiable. Co-founder Jorge J. Rolo owns the business side, the client relationship, and engineering decisions outside the design system. Together we scoped Phase 1 down to three capabilities on purpose, catalog, CMS, payment link, so the MVP could ship focused instead of chasing the full Phase 2 vision on day one.

Research, strategy, and the design system all feed the same living codebase, no handoff gap between the two.

Centre Point Global is not shipped. This is an honest snapshot of a real, ongoing build, not a finished case study dressed up as one.