Tables Stick

A times tables site for UK primary schools, rebuilt from scratch on Wix, with a video paywall that runs on school access codes.

The brief

The founders had a basic information site on Wix. I redesigned it and built the new version from scratch, using none of the old site's elements, so it looks completely different.

I wrote code with Velo, Wix's JavaScript layer, for what Wix does not do itself.

The home page: the heading Transform Times Tables Teaching with Tables Stick beside its hero photo of a lesson, covered here — The home pageScreenshot2026

The home page with measurements laid over it: type sizes, spacing, the photo's radius and colour swatches — The home pageScreenshot2026

The video paywall

Schools subscribe to watch the videos. Each school gets its own access code, issued and checked automatically.

PaywallWithout access, the videos sit behind a paywall.
Access codeA teacher redeems the code their school was given.
Video libraryA valid code opens the school's videos.

From paywall to videosDiagram, built in code2026

Screens

The paywall in place of the videos: Purchase a Subscription, and Have a school access code? with a Redeem Code button — The paywallScreenshot2026

The Redeem School Code form, asking for the account email and the access code from the school — Redeeming a school codeScreenshot2026

The video library, Our Videos, with a row of CPD video cards. The people in the card photos are covered. — The video libraryScreenshot2026

The CPD page: an introduction to in-person and online training for schools, then Our Videos beside a photo, covered here — CPDScreenshot2026

The CPD page with measurements laid over it: type sizes, spacing, the photo's radius and colour swatches — CPDScreenshot2026

Account Settings with the account menu open. The name and phone fields are covered. — Account settingsScreenshot2026

The shop

A product store sits beside the subscriptions, with a CPD booking system and a performance pass.

The shop with measurements laid over it: type sizes, the gaps between products and an image size — Five productsScreenshot2026

On a phone

The home page on a phone, with its measurements in the margins: type sizes, spacing, radius and colour swatches — The home pageScreenshot2026

The CPD page on a phone: the heading and the introduction — CPDScreenshot2026

Part of the approach on a phone: a close photo of the cards on the board, then Representations, Making structure visible — The approachScreenshot2026

Where it stands

The site is live. I built it between April and June 2026, for a Sheffield Hallam research project.

Tokens

Read from the CSS of the site I built.

heading blue: #3D9BE9, oklch(0.67 0.145 247.3)
link blue: #008AFC, oklch(0.634 0.196 253.1)
orange: #FF8903, oklch(0.746 0.18 56.8)
text: #696969, oklch(0.521 0 0)
ink: #2F2E2E, oklch(0.302 0.001 17.2)
surface: #E8E6E6, oklch(0.926 0.002 17.2)
white: #FFFFFF, oklch(1 0 0)
8: 8px (0.5rem)
12: 12px (0.75rem)
24: 24px (1.5rem)
40: 40px (2.5rem)
64: 64px (4rem)
radius 20: 20px (1.25rem)
radius 5: 5px (0.3125rem)
radius 10: 10px (0.625rem)
headings: Quicksand
body: Varela Round

ShowcaseSpecs