He asked for one page.
I shipped him a business.

01

The brief

“CMS, to be able to update website autonomously in the future. For now we want only 1 website.”

He had a logo he did not like, no copy, no brand and no site. New clients reached him through Instagram direct messages, which meant every enquiry started with him explaining what he offered and what it cost, one message at a time.

What he asked for was one page and a way to edit it himself. The straightforward job was to build exactly that. I did the research first anyway, because a page is only worth building once you know what it has to beat.

02

Why one page would have lost

I studied the personal training market around Haarlem and Amsterdam before drawing anything. Three competitors set the standard his prospects were unconsciously measuring him against.

• Sells on data

  Ultimate Performance

  Amsterdam

  Personalised plans built from over 150 tracked data points, documented transformations and formal accountability systems.

• Sells on environment

  Omnia Personal Training

  Amsterdam

  A luxury training studio, holistic programmes covering both physical and mental wellbeing, and a premium price to match.

• Sells on community

  Gym Haarlem

  Haarlem

  A strong local presence on his doorstep, tailored group classes and the familiarity of a gym people already belong to.

Jessy charges premium rates and earns them. Against those three, though, a single page with a contact form does not read as the cheaper option, it reads as the less serious one. The gap was never design taste. It was credibility, and credibility is cumulative: it comes from being able to answer the questions a careful buyer asks before they will spend a four figure sum on a stranger.

So I told him the brief was wrong, and why. He agreed to the larger scope on the understanding that I would show the reasoning at every step rather than disappear and come back with opinions.

03

Who we were selling to

Four personas, drawn from his actual client base rather than invented. Each carries demographics, goals, obstacles, engagement preferences and how they map onto his coaching pillars.

These were not decoration for a slide deck. Daniel and Fiona are time poor and buy expertise, so pricing had to be legible without a phone call. Mark needs structure, which is why the twelve week programmes are sold as programmes rather than as sessions. Wendy does not identify as an athlete, so the copy never assumes she does. The personas decided the page structure and the tone before a single screen was designed.

04

The brand

He arrived with a logo he did not like. He left with an identity, and with a document that lets the next person he hires apply it without asking me first.

The old mark was a hairline script. At a glance it reads as a signature rather than as a strength coach, and the strokes are thin enough that it closes up in a favicon and disappears entirely once anyone tries to print it. A logo for this business has to survive being embroidered on a hoodie in a badly lit gym. That was the argument, and it is easier to see than to make.

Twelve lockups in total: icon, wordmark and tagline versions, each in gold and silver, each tuned for the two background blacks. The two finishes are not decoration, the site can shift between them.

Palette

• Eerie Black#222222Primary
• Night Black#111111Secondary
• Anti-Flash White#F1F1F1Secondary
• Flax#FAF19FGold
• Golden Brown#8F5E25Gold
• Platinum#ECECECSilver
• Battleship Gray#8C8C8CSilver

Typography

Tone of voice

• CalmEvery interaction should leave a client feeling supported rather than sold to.
• KindWarmth and respect first, because the audience is often starting from insecurity.
• ConfidentAssurance without bravado, so the expertise reads as trustworthy.

Lead Your Transformation

The tagline had to work as a promise to the client and as an instruction to Jessy himself. It ships on the hero and in the logo lockups, and he had it printed on shirts that he wears around the gym and hands to clients. That is the honest test of an identity: the client starts spending his own money extending it.

Off the screen

The guide did not stop at the website, because the brand was never only going to live there. It specifies the identity on print, on apparel and on packaging, so Jessy can order any of it without coming back to ask what the gold is.

Mockups from the guide rather than photographs. The apparel is the part that left the page: he had the shirts made and they are in the gym.

Written down, in both languages

All of it is a versioned editorial document rather than a folder of exported files, because Jessy will hire other people. A photographer, a printer, someone running his ads, whoever builds the next thing. Fifty two pages, in English and in Dutch, opening with what the brand is for before it gets anywhere near a rule, then the lockups, the clear space, the approved pairings and the file types. He can hand it over and get work back that still looks like him.

Shown without the two closing spreads, which carry his contact details.

A guide that only shows a brand at its best is decoration. The half that does the work is the half telling the next person what not to do, which is the half that survives being read by someone in a hurry.

05

From moodboard to product

The moodboard set the register before any layout existed: dark, restrained, premium, closer to a watch brand than to a gym. Sketches and low fidelity wireframes came next, then high fidelity screens in Figma, then the build.

Every page was drawn end to end at full fidelity before any of it was built, in both languages and in each interaction state. The questions that normally get answered in code, halfway through building, were settled here while they were still cheap to change.

• 8 pages
• 33 components
• 2 languages
• 294 strings each

English and Dutch across eleven namespaces, at exact parity. Nothing falls back to English silently, which matters because half his market would read a missing string as carelessness.

• React 18
• TypeScript
• Vite
• Tailwind v4
• Framer Motion
• React Router
• i18next
• Headless UI
• Sanity
• Netlify Functions
• Resend

06

Three pricing engines, not one

The single most useful thing on the site. His services do not share a pricing shape, so they do not share a calculator. Each card encodes the real commercial model he already sold by hand.

The calculators were specified in Figma down to the selected states, so the build was a matter of encoding arithmetic that had already been agreed rather than inventing a pricing model at the keyboard.

• Coaching

  €125 per session

  sessions × €125 ÷ people

  Split evenly when a session is shared, so two people booking together each see their own honest number rather than the headline rate.

• Personal training

  €75 per session

  (sessions − free) × €75 ÷ people

  His package deal is "22 sessions for the price of 20". Above ten sessions the calculator drops one from the total, above twenty-one it drops two, so the discount applies itself instead of waiting for a conversation.

• Specialised programmes

  €1,240 per 12 week block

  weekly rate × 12 ÷ people, +€400 for a second person

  Four weekly intensities from one session a week up to four, running €1,240 to €3,280, with a surcharge rather than a split when the block is shared because the coaching load genuinely doubles.

The discount logic is the part I care about. Jessy's offer of twenty two sessions for the price of twenty existed only in his head and in conversations. Encoding it means the site never quotes a number he would not honour, and a visitor meets the deal at the moment they are weighing the larger commitment rather than after they have already talked themselves down to five sessions.

07

What lands in his inbox

A calculator that forgets its own answer the moment someone clicks Contact is a toy. Whatever the visitor configured travels into the enquiry.

The enquiry modal opens over the calculator and carries the estimate with it, so nobody has to retype what they just chose. What it shows the visitor is what it sends.

The form posts to a Netlify function which sends through Resend, with the visitor's address set as the reply-to so Jessy can answer from his inbox. The email itself is hand built table markup in the brand palette, because mail clients each render modern CSS differently and a broken layout is what most contact form emails actually look like.

The effect is small and it matters: he opens a message that already tells him the plan, the number of sessions, the group size, the estimated price and which language they were reading in. His first reply can be about scheduling instead of about pricing.

08

What is in the build

Before quoting I ran a twenty one question intake covering the business, the market, and how customers actually find him. The competitor row came back as not known yet, which is the right answer from a man who spends his days coaching rather than studying the market, and it is why the research further up this page is mine and not his. He came in wanting a CMS and one page. The research came back with four audiences, two languages and three ways to buy. I wrote the spec for that, and then I built it.

Thirty three components across eight routes. The parts worth naming:

Then the half nobody notices until it is missing: scroll position reset on every route change, a real 404 rather than a blank screen, and the services typed such that adding a fourth one without its copy fails the build instead of rendering an empty panel in front of a customer.

09

Handing it over

The one thing he asked for by name was the ability to run it himself, so that is the part I refused to compromise. Content he needs to change sits in Sanity. He got written documentation covering the accounts, the logins and how to edit each type of content, written for someone who does not work in software.

I have not been the bottleneck on his own website since it launched, which is the outcome I was actually aiming for.

10

Honestly

I overdelivered here deliberately. He is a genuinely good coach in a crowded market and the brief he wrote would not have helped him, so I built the thing that would. That was my choice and I would make it again.

What I would change is the sequencing. Brand and design ran well ahead of any code, which is defensible, but it meant the first thing he could actually click arrived late. Now I would ship a small real site early and let the research keep improving it, so the client has something working in the market while the deeper work continues.

The site is live, he updates it himself, and enquiries reach him with the details already filled in.