IRON PULSE

Matching the Energy

Iron Pulse isn't a commercial gym — it's a dark room with heavy music, chalk on the floor, and coaches who know your name. The website had to capture that intensity without looking like every other generic fitness template. I visited a couple of sessions before starting the design work, and the thing that struck me was the contrast — the space is raw and industrial, but the coaching is precise and technical. The website needed both of those qualities.

The design uses a `#0a0a0a` black background with `#FF4D4D` red accents — mirroring the studio's atmosphere of dark floors, exposed ductwork, and dramatic red lighting. For typography, I chose Oswald for headings — bold, uppercase, aggressive, with tight tracking that makes everything feel like it's shouting at you in the best possible way. Barlow handles body text with clean readability that doesn't compete with the headings.

Every interactive element reinforces the energy. Hover states are snappy, not gentle. The hero text animates word by word — 'TRAIN. HARDER. TOGETHER.' — each word landing with weight. The scroll indicator pulses like a heartbeat. These details are subtle individually, but together they create a site that feels alive rather than static.

The Class Schedule

The timetable was the most requested feature. Members were constantly asking on Instagram when classes were running, and the owner was manually replying to the same DM dozens of times a week. The schedule needed to be the centrepiece of the site — impossible to miss and effortless to scan.

I built it as a clean table view with colour-coded intensity badges. Green for medium intensity, yellow for high, orange for medium-high, and red for very high. Each row shows the class name, time, duration, coach, intensity level, and which days it runs. On desktop the table is straightforward; on mobile, I ditched the table entirely and stacked each class as a card with all the details visible at a glance. Trying to make a responsive table work at 375px wide is a losing battle — cards are always better.

The schedule data lives in a structured array that's easy to update. When a new class is added or a time changes, it's a single edit to the data file — no layout changes needed. I also added an intensity legend at the top of the section so new visitors understand the colour system immediately.

Coaches Front and Centre

People join boutique gyms for the coaches, not the equipment. I've seen fitness websites that treat the 'Team' section as an afterthought — tiny headshots in a grid with a name and title. At Iron Pulse, the coaches ARE the product. They needed to be presented with the same prominence as the classes themselves.

The trainer section features large portrait photos — roughly 3:4 aspect ratio — with a gradient overlay that fades to black at the bottom where the name, role, and specialisation sit. On hover, the bio text expands from a two-line clamp to the full description, and the image subtly scales up. Each coach has their certifications listed and an Instagram handle, because in the fitness world, a coach's social presence is part of their credibility.

This was a deliberate choice over a generic grid. Featuring the coaches prominently builds connection before the first visit and makes the free trial feel less intimidating — you already know who'll be coaching your first session. The owner told me several new members mentioned seeing the coach profiles as what pushed them to actually book.

Membership & Pricing UX

Pricing is where most fitness websites lose people. Either the prices are hidden ('contact us for rates'), which feels evasive, or they're presented in a confusing matrix of options. Iron Pulse wanted transparent pricing with no hidden fees — three plans, clearly differentiated.

I designed three pricing cards: Drop In (£15 per class), Unlimited (£89/month), and 10 Pack (£120). The Unlimited plan sits in the centre with a 'Most Popular' badge and a highlighted border. Each card lists what's included with checkmarks and X marks so you can compare at a glance — priority booking, guest passes, nutrition guidance. The visual hierarchy makes the value proposition obvious without needing to read every line.

Below the pricing cards, I added a single line: 'No contracts. No hidden fees. No joining fee. Cancel anytime.' This addresses the three biggest objections people have about gym memberships. Removing friction at the point of decision is where most of the conversion gains come from — not flashy animations or clever copy, but simply answering the questions people are already asking in their heads.

The Free Trial Flow

The entire site funnels towards one action: claiming a free trial class. CTAs appear in the hero, after the class schedule, below the pricing section, and as a floating button on mobile that appears after scrolling past the hero. I used consistent language everywhere — 'Start Free Trial' — so there's never confusion about what happens when you click.

The trial form itself asks for minimal information: first name, last name, email, phone, and which class interests them. That last field is a dropdown populated from the class schedule data, so it stays current automatically. I deliberately didn't ask for address, age, fitness level, or any of the other fields I've seen on gym signup forms. Every additional field reduces completion rates — you can collect that information after they walk through the door.

After submission, the user sees a confirmation with motivational copy and a note that someone will be in touch within 24 hours. No payment required, no commitment language — just a friendly confirmation that removes any remaining doubt about whether signing up was the right call.

Community & Social Proof

Boutique fitness is as much about community as it is about the workouts. I added a testimonials section with quotes from three existing members — each with a photo, their member-since date, and what they love about training at Iron Pulse. These aren't generic 'great gym!' reviews; they're specific stories about personal results and the community atmosphere.

I also built an Instagram-style photo grid near the bottom of the page — six images showing workouts, community events, and behind-the-scenes moments. Each image has a hover overlay with a subtle Instagram icon. The grid serves as social proof (look how many people train here) and bridges the gap between the website and the studio's active Instagram presence.

Finally, I added a FAQ section with six questions addressing the most common concerns: 'Do I need to be fit to start?', 'What should I bring?', 'What if I need to cancel a class?'. Each answer is in an accordion that expands on click. This section exists purely to reduce the anxiety that stops people from booking their first session — anticipating objections and answering them before the visitor has to ask.

Mobile-First, Always

Over 80% of Iron Pulse's Instagram audience browses on mobile. The site was designed mobile-first from the very first wireframe. Every component was built at 375px width first, then expanded for larger screens — not the other way around.

The fixed navigation uses a `backdrop-filter: blur()` header that's compact enough not to eat into content but always accessible. The floating 'Free Trial' button appears on mobile after scrolling past the hero — positioned in the thumb zone at the bottom-right of the screen. The class schedule uses cards instead of a table. The pricing section stacks vertically with the most popular plan on top. Every decision prioritises the experience of someone scrolling on their phone during a lunch break, deciding whether to try a new gym.