Eloq Coaching
A coaching website whose headline feature is a Builder: clients compose their own personal training plan from modules, see the live total, and can even propose new modules back to Eloq.
Screenshots coming soon.
The Goal
Eloq is a trainer/coach who wanted to stand out in a crowded market. Most coaching websites are brochure sites with three fixed packages and a contact form, which puts every trainer in a pricing race.
Eloq's bet: give clients real agency over what their training looks like, and position that as the product. The job was to translate that bet into a website, specifically, into a Builder page where composing a personal plan is the main interaction, not a hidden sub-flow.
Tackled Problems
Differentiation in a commodity market
Fixed-package coaching sites all look alike. Eloq needed to look like he thinks about clients as individuals, because he does.
A complex offer that had to stay legible
The offer spans sectors, predefined packages, standalone modules, custom combinations, and open pricing questions. Presenting all of that without overwhelming the visitor is the real design problem.
Inquiry without friction
A Builder is only useful if the outcome: getting a quote, booking a call, is one clean step away, not a form maze.
Mobile
Composition UIs go sideways on small screens fast. The Builder had to work on a phone.
Approach
Put the Builder at the centre of the site and make everything else support it.
- Lead with outcomes, not audience labels.
- Separate predefined packages from custom-built plans cleanly, so neither confuses the other.
- Design the Builder around three client questions: what modules are available, what does my plan cost and take, and how do I send this to Eloq.
- Let power users go further: suggest a module that doesn't exist yet.
The Builder
The Builder is the reason this site exists. Clients browse a grid of training modules, grouped by theme and sector, add what they want, and submit a composed plan directly to Eloq.
Screenshots coming soon.
Why it works as positioning
- Demonstrates Eloq's range without three paragraphs of copy.
- “Compose your own plan” is a stronger story than “pick one of three packages.”
- The suggest a module flow turns prospects into co-authors of the offer: low-friction demand signal.
UX decisions inside the Builder
- Module cards carry everything the client needs in one glance: title, short description, duration, price, tags.
- Live total updates optimistically as modules are toggled. No “calculate” button.
- Constraints inline. If a module requires another, the dependency is shown on the card and auto-resolvable with one click.
- Invalid states prevent submit, not silently. The CTA explains what's missing instead of going grey.
- Predefined packages drop into the Builder as one-click starting points. Clients adjust from there, which is where the “aha” happens.
- Suggest a module is a short, named form: title, what it would cover, why. Posts directly to Eloq.
- Mobile collapses the summary panel into a sticky bottom bar so the running total stays visible.
Screenshots coming soon.
Key Decisions
- Make the Builder the hero of the site, not a tab hidden in the menu.
- Treat predefined packages as curated starting points that drop into the Builder.
- Show a live running total (price + hours) as modules are toggled.
- Handle invalid states inline, not on submit.
- Let clients propose new modules. Eloq's offer grows with them.
- Keep the inquiry short: the composed plan is the message.
Screenshots coming soon.
Outcome
The site turns an inherently complex offer into a single, confident interaction. Clients stop asking “which package should I pick?” and start asking “what do I actually want?”, which is a much better conversation for Eloq to receive.
This project demonstrates:
- Turning a service offer into a real product, not a brochure
- UX judgment on composition interfaces: constraints, invalid states, mobile
- Positioning through product design: the Builder is the differentiation
- Working through evolving scope without waiting for perfect specs