CASE STUDY · CUSTOM WEBSITE · ONE-PAGER · LEGAL SERVICES
Jamie Champkin
“Books and gets paid without you.”
A one-page site for a specialist motorsport lawyer: credentials on the page, fixed prices, a live booking calendar, and payment handled without a separate step.
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS v4
- Lora via next/font
- Lucide icons
- Calendly inline embed
- Shopify (external, for payment)
- Vercel
The brief
Jamie Champkin is a specialist motorsport lawyer with no website. He needed a clear, trustworthy home on the web that explained what he does, showed who he is and what it costs, and sent visitors straight into booking a call. Legal services usually feel slow, vague on price, and hard to start. The brief was the opposite: prices on the page, an obvious booking flow, and copy that proves the credentials in seconds.
What we did
- One-page site with a clear section flow: hero, practice areas, why Champkin with key stats, two service cards with fixed prices, what a contract covers, credential timeline, how it works in four steps, then booking
- Two fixed-price service cards with full inclusions: a £250 consultation and a £3,000 contract review, both clearly scoped
- Inline Calendly booking with a tab switcher so visitors can see availability for either service in the same panel
- Confirmed Calendly slots redirect the customer straight to the matching Shopify product to pay, no separate buy step on the site
- OpenGraph and Twitter metadata with a branded 1200 by 630 share image, so the link previews correctly in WhatsApp, iMessage, and Slack
- Custom brand tokens (deep forest green and cream), editorial typography in Lora throughout, mobile-first layout with the hero image reordered on phones for impact
- Deployed to the live domain with canonical URL, descriptive title and meta, semantic headings
The numbers
1 day
Designed, built, and live on the real domain in one session
Books itself
Calendly takes the slot, Shopify takes the money, automatically
Shareable
Previews correctly on WhatsApp, iMessage, and LinkedIn
Gallery
/work/jamie-champkin/01.jpg
Jamie Champkin gallery 1/work/jamie-champkin/02.jpg
Jamie Champkin gallery 2What we said no to
- Multiple pages. For one specialist with two products, more pages means more places to drop off and more to keep current.
- Payment code on the site. Calendly handles the slot and the user is redirected to an existing Shopify store for payment. Fewer moving parts, less to break.
- A generic component library. The design is hand-built from Figma so the type, spacing, and shapes match exactly.
- A testimonials section at launch. There were no real testimonials yet and placeholder quotes would damage trust on a legal site.
Stack
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS v4
- Lora via next/font
- Lucide icons
- Calendly inline embed
- Shopify (external, for payment)
- Vercel
Want something like this?
30 minutes, no pitch deck.