Website Case Study
Afternoon Workout
A bold, dark single page that makes the case for training in the afternoon, then offers six programs built around that window.
At a Glance
Built on the premise that the body peaks between 2 and 6 PM, Afternoon Workout is a fitness site we developed from the ground up. The single page explains the science, presents six structured programs, lays out an afternoon schedule, covers plans and common questions, and closes with a contact section. Each program opens a long-form detail overlay, and three forms handle trial sign-ups, messages and newsletter subscriptions.
- Project
- Website
- Sector
- Health and fitness: afternoon training programs
- Scope
- Single-page site with nine sections
- Highlights
- Six program overlays, trial modal, science section
- Live site
- AfternoonWorkout.com
The Brief
This site argues for a time of day before it offers a single workout. The design had to make the case for afternoon training quickly, then turn that conviction into a program choice and a trial sign-up.
- Explain in plain terms why afternoon training suits the body, before asking anyone to commit.
- Present six programs together, each with its focus and length, with full detail a click away.
- Give the schedule, pricing and frequently asked questions their own sections, each reachable from the navigation.
- Keep a Get Started button in reach, backed by a trial form, a contact form and a newsletter signup.
What We Designed
On a near-black ground, the page opens with the label Backed by Exercise Science above the headline TRAIN WHEN YOUR BODY PEAKS, a line about core temperature, reaction time and strength, and two actions: start a trial or explore the programs. The science, the six programs, the schedule, member stories, plans, questions and a closing call to stop training against the clock follow in turn.
Bebas Neue sets the headings in tall, condensed capitals with the punch of a gym poster, and Outfit keeps the program descriptions easy to read. Warm off-white text sits on the dark ground, with a hot orange accent the colour of late-afternoon sun. A lightning bolt beside the name gives the brand a simple mark, and the program names carry the time-of-day idea through the copy: Sunset HIIT, Golden Hour Flow, Power Hour.
Six program overlays
Power Hour, Sunset HIIT, Golden Hour Flow, PM Sprint Lab, Hypertrophy PM and Afterburn Combat each open in full detail.
The science section
A dedicated section sets out why core temperature, hormone levels and neuromuscular function favour afternoon training.
Trial sign-up modal
The Get Started button opens a trial form in a modal, so signing up never means leaving the page.
Afternoon window graphic
A graphic in the opening screen marks out the 2 to 6 PM window the whole site is built around.
How We Achieved It
The six programs sit on cards that give each one's focus and length, from the 35-minute Sunset HIIT to the 60-minute Power Hour, and every card opens a long-form overlay with the full program. That keeps the main page short enough to scan while the detail stays one click away. The navigation jumps straight to Science, Programs, Schedule, Pricing, FAQ and Contact, with Get Started at the end.
Three forms each do one job: a Get Started modal for trial sign-ups, a Contact Us section and a newsletter signup in the footer, all protected against spam with Google reCAPTCHA. Six legal overlays cover the privacy policy, terms of service, cookie policy, legal terms, terms of use and accessibility. Email addresses are assembled by JavaScript to keep them away from scrapers, and the footer's copyright year updates itself.
Keep Exploring
More Case Studies
Want a Website Like This?
Let's talk about what your business needs, or start with a custom five-page website for $49 US a month.