Serious about play — the thinking behind the Lab’s site.

The client & the brief

Next Builders Lab™ is the education arm of Orvantis Intelligence — a real initiative, not a portfolio fiction. Where Orvantis installs AI operations for businesses, the Lab grows the people: kids on Saturday mornings, professionals on weekday evenings, founders in four-week sprints, whole company teams in build weeks. One roof in East Legon, Accra; one method (learn by shipping); wildly different audiences.

The brief asked for a flagship site that could speak to a nine-year-old’s parent and a COO in the same scroll, publish real 2026 cohort dates and real cedi tuition, take applications, and carry a signature interaction worth remembering. Energetic, optimistic, human — and never childish-neon.

The problem

AI education marketing has two dominant failure modes, and the Lab needed to dodge both. The first is corporate solemnity: navy gradients, robot heads, “future-proof your career” — which reads as fear, and fear is a terrible teacher. The second is crypto-course hype: countdown timers, income screenshots, urgency fonts — which reads as a scam because it usually is. The design problem, precisely stated: communicate serious craft through the visual language of play, so that joy signals competence instead of undermining it.

There was a structural problem too: four audiences with four price points and four calendars, on one page, without building four websites. The answer became the track system — one colour per audience (sunshine, ultramarine, coral, mint), carried consistently from the track cards through the calendar pills to the tuition bands, so each visitor can follow their own colour through the page.

The direction we chose

Workshop collage. A disciplined grid wearing sticker sheets: cards rotated under two degrees, tape corners, die-cut badges, marquee ribbons between sections, thick ink outlines and offset hard shadows everywhere. Bricolage Grotesque gives the headlines their toothy, characterful weight (with mixed weights inside a single line — “don’t just learn AI — build with it”); Schibsted Grotesk keeps body copy grown-up and legible. The palette stays joyous but anchored: cream paper, one authoritative ultramarine, and near-black ink holding every element in place.

And the hero is a toy that tells the truth. Five blocks spelling B-U-I-L-D fall, collide, stack and can be thrown around — physics we wrote by hand, not a library. A visitor’s first act on the site is literally playing with blocks; the guide page then shows the verlet math underneath. Play on the surface, engineering underneath: the whole pedagogy in one interaction.

Directions we rejected

Key decisions & trade-offs

• Grabbable hero vs. scroll performance. A live simulation in the hero risks jank. We spent the budget carefully: fixed 120 Hz timestep with an accumulator, positional (not impulse) collision response, DPR capped at 2, and the loop sleeps whenever the hero is off-screen or the tab is hidden. The toy costs nothing once you scroll past it.
• Rotation discipline. Every sticker, card and ribbon sits within ±2°. At 3° the page read as messy in screenshots; at 0° it read as a template. The two-degree ceiling is the entire difference between “hand-placed” and “careless”.
• Touch: blocks vs. scroll. On phones the canvas fills the hero, so grabbing must not hijack scrolling. Touches are only captured when they actually land on a block (touch-action: pan-y plus a hit test); empty-canvas swipes scroll the page normally. Losing “idle doodling” on mobile was the acceptable price.
• Reduced motion as a first-class composition. The pre-settled block row was designed as its own art-directed layout, not a degraded state — same word, same palette, zero movement. If the still version isn’t beautiful, the motion version is decoration, not design.
• One page, four audiences. We rejected per-track subpages to keep momentum in a single persuasive scroll; the colour-coding system does the wayfinding instead. Trade-off: the page is long — mitigated with content-visibility: auto and ribbons acting as chapter breaks.
• A form endpoint over a custom backend. An application form is the site’s only transaction; a small hosted endpoint handles it with a honeypot and an inline success state. No server to secure, nothing to maintain — correct engineering for the actual requirement.

Intended impact

Framed as design goals, because a school’s site can’t promise outcomes — only earn trust:

• A parent should feel my kid would be safe and delighted here within one screen; a professional should find her track, date and price within three.
• The scholarship note should make someone who can’t pay apply anyway — it is deliberately placed inside the tuition section, not hidden on a policies page.
• The hero should get shared. A toy that strangers send each other is the cheapest, warmest marketing a learning lab can own.
• And as demonstrated capability: this site is itself the Lab’s syllabus in miniature — hand-built, explained in the open (the guide), and shipped. The pedagogy, practised in public.