Skip to content
EE
All work

TestPortal Virtual Academy

A UK STEM tuition academy, from paper flyer to live site

TestPortal Virtual Academy — A UK STEM tuition academy, from paper flyer to live site
Client
TestPortal Virtual Academy, Bradford
Role
Sole engineer — design, build, deployment
Year
2026
Status
Live

The problem

A UK-based online STEM tuition provider teaching Year 7 through GCSE and A-Level had a marketing flyer and no website. Ten static routes, an eleven-tutor team page, and a working enquiry pipeline, delivered in seven days under a signed ₦150,000 contract.

The academy was selling a considered, credential-heavy service — five curricula, exam-board-specific coverage, tutors with real subject specialisms — through a single JPEG flyer shared on WhatsApp. Parents researching tuition for their child had no way to check who would actually be teaching, what exam boards were covered, or how to book a trial. Everything that should have built confidence was invisible.

TestPortal Virtual Academy homepage with hero, trust statistics and learning pathway
The homepage walks the KS3 → GCSE → A-Level pathway as a timeline, because that progression is the thing a parent is actually buying.
Courses page broken down by subject, level and exam board
The courses page is the SEO spine: every subject broken down by level and exam board, which is how parents search.
Meet the Director page with a portrait and welcome address
A dedicated director page. For a tuition business, who is teaching your child is the entire purchase decision.
Contact page with enquiry form, contact panel and FAQ accordion
The enquiry form — the site's only interactive element, and the one that quietly dropped multi-subject selections until the field was renamed.

How I built it

01

Built to the crest, not the flyer

The flyer suggested one brand; the academy's actual crest is navy, burgundy and gold with no green in it, and the name carries no hyphen. The site was built to the crest. Its Yoruba motto — *púpọ̀ nípa díẹ̀, kì í ṣe díẹ̀ nípa púpọ̀*, 'much about a little, not a little about much' — became a real structural idea, shaping the 'depth over coverage' value on the About page rather than sitting in the footer as decoration.

02

A crest that vanished on its own brand colour

The crest's wordmark and motto are drawn in dark navy for a light surface, so on the site's navy sections they disappeared entirely — the client spotted it the day after launch. Fixed by mounting the crest on a cream surface everywhere it sits on dark: a cream plaque with a gold ring in the hero and on the 404, a cream circular chip in the footer. A logo that only works on one background is a constraint to design around, not a bug to argue with.

03

The enquiry form that silently dropped half its data

The enquiry form has six subject checkboxes sharing the name `subjects`. EmailJS does not reliably collect repeated field names — one value would arrive, or none — so every multi-subject enquiry would have reached the client incomplete, with nothing in the UI to indicate it. Renaming the collected field to `subjects_list` fixed it. The kind of failure that never throws an error and only shows up as quiet lost business.

04

Keeping the contact page in the served HTML

The form needed to read `?enquiry=trial` so a 'book a trial' button could preselect the right intent. The obvious tool, `useSearchParams`, would have forced the whole form to render client-side only, dropping the page out of the served HTML and out of search results. It reads the parameter from a ref on mount instead, so the page stays static. Every route was then verified against its actual served HTML rather than the browser view.

05

Two mirrored selfies

Both photographs the director supplied were mirrored front-camera selfies — the classroom posters behind him and the year planner on the wall both read backwards. Flipped horizontally before use. A small thing, but a website is often the most formal artefact a business owns, and backwards text in the background undoes that in a glance.

Built with

  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Framer Motion
  • EmailJS
  • Playfair Display + Inter
  • Vercel

Outcome

  • Ten static routes shipped in seven days; build and lint clean, every route verified against its served HTML
  • Eleven tutors published with photographs, subjects and levels, replacing a single flyer
  • Enquiry pipeline live via EmailJS, with UK GDPR-driven privacy and terms pages — the academy handles children's data
  • Canonical URLs, sitemap and JSON-LD written against the final domain so the switchover needs no code change