Abhishek’s Portfolio Open to work

Case study 05 · Website rebuild · Freelance

The BoxxFitness studio website

A coached-training studio’s website, rebuilt and relaunched in about 19 hours, AI-assisted.

19 hours

from the first build file to the relaunched site

Apr 2026

27 plans

set up in FitGymSoftware with the vendor

Apr 2026

Live site · theboxx.inFull project showcase on GitHubRequest the case study (PDF)
Status
Live at theboxx.in since the April 2026 relaunch
Client
A coached-training studio, South Extension, New Delhi
My role
Designed and delivered the rebuild, AI-assisted: I gathered the requirements, made the product and design decisions, directed AI coding tools, tested every change and ran the relaunch. I also chose the studio’s membership software, FitGymSoftware, and set it up with the vendor.
Built with
HTML · CSS design tokens · vanilla JavaScript, no framework
The Boxx home page on desktop: a dark hero, “Where effort finally has a plan.”, with Train now and How we train buttons
FIG. 01Home, desktop (live): theboxx.in; member photos blurred for privacy.
The Boxx home page on a phone: the same hero, stacked, with Train now and How we train buttons
FIG. 02Home on a phone (live); member photos blurred for privacy.

01 · In short: Make the studio feel as serious online as it is on the floor.

The site also had to get visitors to book a free first session. The brief had three parts:

  1. Explain the training: what CrossFit, HYROX and strength sessions involve, and how to start each one.
  2. Make joining easy: “Train now” on every page opens the enquiry form for a free first session; plans live in the members app.
  3. Built for the phone: mobile-first static pages, no framework, a little vanilla JavaScript.

02 · What it does: Six pieces, one job: get people training.

  • Programme pages

    CrossFit-style group classes, HYROX, strength and one-to-one: what each involves, and a next step for each.

  • HYROX gets its own page

    Running, stations, pacing and race prep, for people training for a HYROX race.

  • Memberships

    Six starting plans on their own page, a plans summary on the home page, and a pointer to all 27 in the members app.

  • Timetable

    The weekly class grid on its own page, filtered by class type in one tap.

  • Members-app hand-off

    I chose FitGymSoftware for the studio and set it up with the vendor, with all 27 membership plans.

  • Mobile-first, no framework

    Static HTML and CSS, no page builder; dark, editorial, a little vanilla JS.

03 · What makes it different

  1. Every hour has a shape. Collective, HYROX and the kids’ bootcamp each break a session into four steps, so visitors see what their hour will look like before anyone books.
  2. One next step everywhere. “Train now” in every page header and the phone menu opens the enquiry form for a free first session.
  3. The site sells the first session; the app runs the rest. Plans, bookings and renewals live in the members app (FitGymSoftware, 27 plans), so the website stays static, with no booking engine or payments to maintain.
  4. Most changes skip the website. Plans beyond the six change in the app; specialty blocks, the timetable, the Instagram feed and the enquiry form change without touching the site (next section).
  5. One stylesheet, one script. Static HTML pages, one stylesheet with design tokens and one vanilla JS file; motion switches off when the phone asks for reduced motion.

04 · What the business can configure: Changes without a website edit.

Plans
All 27 live in FitGymSoftware with their sessions, validity and pricing; plans beyond the six on the site change in the app.
Specialty blocks
They rotate, and the members app announces which is on, so the site needs no edit.
Timetable
Shows class types, not coach names, so a rota change needs no edit.
Instagram feed
The feed (Behold) shows new posts by itself.
Enquiry form
Its questions are edited in Google Forms.

05 · Key screens

Screens marked live are from theboxx.in; member and hero photos are blurred for privacy.

01Home

Home page on desktop: four numbered reasons to train at the studio under “Small crew. Serious training.”
FIG. 03Four numbered cards in one row answer “why here?” before any price or schedule. Live.

02Formats & coaching

Format cards for Boxx Collective group classes, HYROX and Boxx Precision one-to-one, each with its own link
FIG. 04Group classes, HYROX and one-to-one Precision as cards, each with its own next step. Live; photos blurred for privacy.
“What an hour here looks like”: the four parts of a Collective class
FIG. 05Collective class: four parts, and the coach explains the intent before you touch a barbell. Live.
Kids and Teens page on a phone: an hour in the summer bootcamp, in four steps
FIG. 06Kids & Teens on a phone: the summer bootcamp hour, written for parents: warm-up, strength, conditioning, cool-down. Live.

03HYROX

HYROX page hero on desktop: “Run. Station. Repeat.” with a Train now button
FIG. 07HYROX gets its own page, which ends with when the HYROX Engine class runs on the timetable. Live; hero photo blurred for privacy.

04Memberships & timetable

Memberships page: six starting plan cards marked Call for pricing, and a pointer to all plans in the members app
FIG. 08Memberships: six starting plans, one action each. Since 16 Oct 2026 the studio’s site shows “Call for pricing”.
Weekly timetable on desktop with the HYROX filter on and HYROX slots highlighted
FIG. 09The HYROX filter on: HYROX Engine slots light up, everything else dims, and the whole week stays in view.
Phone view of “Plans to match how you train” with counts for four plan types
FIG. 10Home on a phone: counts for four plan types at a glance, then a pointer to all 27 in the app.
Top of the weekly timetable on a phone: title, filter chips and the first rows
FIG. 11On a phone, filter chips wrap to two thumb-size rows; the grid scrolls sideways, not smaller.

05Built for the phone

Phone menu drawer open, with large page links and a Train now button at the bottom
FIG. 12Menu: a full-screen drawer with big links and “Train now” at thumb height.

06 · Results, dated

Relaunched in about 19 hours.

  • ~19 hours

    from the first build file to the relaunched site, AI-assisted

    Apr 2026

  • 27

    membership plans in FitGymSoftware, chosen for the studio and set up with the vendor

    Apr 2026 · in the members app

  • Live

    at theboxx.in since the April 2026 relaunch

    Apr 2026

Not claimed

No traffic or sales figures are claimed for this site. Prices aren’t on it either: since 16 Oct 2026 the studio’s site shows “Call for pricing”.

07 · How it was built

  1. RequirementsFormats, plans, timetable, voice
  2. Design directionDark, editorial, studio yellow
  3. BuildPages built with AI coding tools
  4. TestEvery change checked on desktop and phone
  5. RelaunchLive at theboxx.in

StackHTML5 · CSS3 design tokens · vanilla JavaScript · IntersectionObserver · Archivo Black + Inter · FitGymSoftware · AI coding tools