Clearly separated in-person training options
Case 02 · Health & Movement
Strength, made easier to begin.
A strategic website for Osteogym that turns specialist personal training for adults over 50 into a calm, clear and credible digital experience.
Designed around the questions people ask before they feel ready to start, the website brings together positioning, service structure, transparent fees, educational content and a direct route to enquiry.
Osteogym · Project film
Strategy, experience and movement in one sequence.
The outcome
Clear today. Ready to evolve.
Osteogym began with an ambitious brief spanning personal training, future osteopathy, multiple ways of working and a substantial amount of professional expertise.
We refined that ambition into a focused public offer: specialist one-to-one personal training for adults over 50, delivered through two clearly defined in-person options — a Chelsea studio and local home visits.
The resulting website explains who the service is for, how the process works, where sessions take place, what they cost and what happens after an enquiry. It establishes Laura’s experience without overwhelming the visitor and creates a responsible foundation for adding osteopathy only when the necessary qualifications, registration and service arrangements are complete.
Published educational resources
Focused route from uncertainty to enquiry
01 / The challenge
Give an evolving practice one clear position.
Professional without becoming institutional.
Supportive without becoming vague.
Osteogym combines more than ten years of personal-training experience with Laura Marchesini’s education in sport science, rehabilitation and ongoing osteopathy studies.
That breadth was valuable, but it also created a communication challenge. The website needed to establish specialist expertise without making the offer appear complicated or suggesting that osteopathy was already available.
Its primary audience introduced another important consideration. Many prospective clients would be over 50, unfamiliar with resistance training, returning after a prolonged break or uncomfortable in a conventional gym. Some might be managing health considerations or changes in confidence and physical capacity.
The experience therefore needed to feel professional without becoming institutional, supportive without becoming vague, and knowledgeable without relying on technical language.
As Osteogym was not built around social-media-led acquisition, the website also needed to operate as the principal place where a prospective client could understand the service and decide whether to make contact.
02 / The strategy
Start with the life someone wants to keep living.
A focused offer.
A relevant human outcome.
Rather than presenting exercise through performance language, transformation promises or generic fitness imagery, we positioned strength as a practical investment in everyday life.
The central message — “Strength for the life you want to keep living” — connects training with the activities, routines and independence that matter to the individual.
Qualifications remain visible as evidence of credibility, but they do not lead the story. The visitor first encounters a relevant human outcome, followed by the experience and education supporting it.
We also narrowed the public service model. Online training was removed, leaving two specific in-person routes:
Personal training at the Chelsea studio
Home visits within the defined local area
This made location, availability and pricing easier to understand while giving the business a more distinctive and credible position.
Osteopathy was treated as a planned future development rather than a current service. The website acknowledges Laura’s ongoing education transparently while clearly stating that osteopathy is not currently offered through Osteogym.
03 / The user journey
Answer questions in the order they naturally arise.
The information architecture was shaped around a prospective client’s decision process:
- Is this intended for someone like me?
- What could the training help me work towards?
- Where would the sessions take place?
- What happens during the first session?
- How much does it cost?
- How do I contact Laura?
The homepage establishes the audience, proposition and two training locations immediately. It then moves from personal priorities into a simple three-stage process:
Talk
Begin with an introductory conversation.
Understand
Discuss goals, experience, current activity and relevant considerations.
Progress
Develop an individual programme through supervised sessions and regular review.
This sequence reduces the uncertainty surrounding the first appointment. It presents the process as a conversation and gradual progression rather than an assessment the visitor must pass.
04 / UX decisions
Reduce uncertainty before asking for commitment.
A focused offer
Only services currently available through Osteogym are presented as bookable. This prevents the brand name and Laura’s ongoing osteopathy education from creating an inaccurate impression of the present service.
Two clear locations
Chelsea studio sessions and home visits are introduced as equal, clearly defined options. Each route connects directly with the relevant fees and enquiry choice.
Life-led priorities
The content begins with meaningful outcomes such as maintaining everyday strength, moving with greater confidence, returning gradually and creating a sustainable routine.
A visible first-session structure
The Personal Training page explains the first appointment through conversation, observation and introduction. This gives new or apprehensive clients a clearer mental model of what to expect.
Transparent pricing
Studio and home-visit fees are separated instead of being combined in a single package table. Visitors can compare individual sessions and blocks without first submitting an enquiry.
A low-pressure conversion
Calls to action consistently invite a conversation rather than demanding an immediate booking. The contact page explains what happens next before presenting the form.
Privacy-aware enquiries
The form asks for general information and explicitly tells visitors not to submit detailed or confidential medical information. It collects only what is needed to begin an appropriate conversation.
05 / The design system
Professional, natural and quietly confident.
The visual direction developed the client’s existing colour preferences into a more complete digital system.
Warm mineral neutrals create a softer foundation than clinical white. Muted botanical green provides recognition and warmth, while deep evergreen gives navigation, typography and calls to action sufficient authority.
An editorial serif typeface introduces personality and maturity. A restrained sans-serif supports navigation, longer text, service information and functional interface elements.
Generous spacing, fine dividing lines and softly rounded cards create order without making the website feel rigid. The layouts are composed rather than crowded, allowing the visitor to process one decision at a time.
Photography focuses on genuine one-to-one coaching, controlled movement and older adults actively participating in strength training. This avoids both hospital imagery and the visual language of high-intensity commercial fitness.
The result feels informed by health and movement while remaining human, calm and approachable.
Deep greenMovementSpaceEnergy
06 / Motion and interaction
Movement with a purpose.
Progression without distraction.
Static alternatives where appropriate.
Motion was used to express progression and reinforce the identity without distracting from the content.
The opening logo animation draws the Osteogym mark before resolving into the permanent header identity. It is skippable, protected by a fail-safe and not repeatedly imposed during the same browsing session.
Subtle image movement gives the photographic hero greater depth, while restrained content reveals help establish rhythm as the visitor moves through the page.
The Osteogym approach is represented by a three-stage journey connecting Talk, Understand and Progress. On larger screens, the route develops alongside the content. On smaller screens, the decorative path is removed and the same information remains available as a straightforward sequence.
Interactive priority cards allow visitors to explore different reasons for beginning training without turning the homepage into a long list. The interactions remain secondary to the written information and receive static reduced-motion alternatives where appropriate.
07 / Content and trust
Turn expertise into useful guidance.
The brief showed that prospective clients frequently ask why strength training matters, how often they should exercise and how they can begin safely.
Instead of placing every explanation on the service page, we created a dedicated resource system.
The initial library contains six focused guides covering:
What to expect at a first personal-training session
Why strength training matters after 50
Starting when the gym feels intimidating
Understanding progressive overload
Balance and everyday confidence
Returning after a prolonged break
The editorial format combines plain-language summaries, structured sections, reading time, scope statements and references where the article is evidence-informed.
This gives visitors space to learn before making contact, demonstrates Laura’s educational approach and creates a reusable publishing structure for future content.
Professional credibility is also presented carefully. Laura’s verified CIMSPA status, qualifications and experience are visible, while her ongoing osteopathy degree is accurately described as current study rather than a completed clinical qualification.
08 / Responsive experience
The same clarity on every screen.
The website was designed as a responsive system rather than a desktop composition reduced to fit a phone.
Typography, spacing and image proportions adapt fluidly. Multi-column sections reorganise into clear reading sequences, pricing remains easy to compare, and horizontal content rails provide touch-friendly exploration without narrowing cards until their content becomes difficult to read.
The desktop pathway simplifies on mobile instead of forcing a complex illustration into limited space. Navigation remains prominent, the primary enquiry action stays easy to reach, and the contact form preserves comfortable controls and readable guidance.
Responsive image sources deliver appropriately sized WebP files with JPEG fallbacks, helping the visual experience remain sharp without sending the largest image to every device.
09 / Development
Lightweight by design.
Static HTML · CSS · JavaScript
Cloudflare Pages
Osteogym was developed as a custom static website using semantic HTML, a central CSS design system and focused JavaScript enhancements.
The architecture avoids a database, page builder and unnecessary front-end framework. This keeps the public website portable, reduces maintenance dependencies and makes it suitable for direct delivery through Cloudflare Pages.
Shared contact details and prices are held in a central configuration file so important business information can be updated without searching through every page.
The JavaScript progressively enhances:
- Adaptive header behaviour
- Accessible mobile navigation
- The opening identity sequence
- Responsive content rails
- The Talk–Understand–Progress pathway
- Image movement and content reveals
- Article reading progress and section navigation
- FAQ interactions
- Form validation and submission states
The enquiry form connects directly with Web3Forms and includes client-side validation, a honeypot field, request timeout handling, clear error states and a dedicated confirmation page.
The deployment layer applies routing, security headers and cache rules. Versioned asset references support long-lived caching while allowing changed files to be refreshed reliably.
Reduced-motion behaviour, visible keyboard focus, skip navigation, meaningful image descriptions and non-JavaScript content fallbacks were integrated into the system rather than added as separate visual treatments.
10 / The result
A platform for the business Laura runs now — and the practice it can become.
The completed website gives Osteogym a clear public position: specialist, individual personal training for adults over 50, available at a Chelsea studio and through carefully defined local home visits.
It turns a broad initial brief into a coherent journey grounded in real client concerns. Visitors can recognise themselves in the service, understand Laura’s approach, compare transparent fees, learn what the first session involves and make a general enquiry without being pressured into an immediate booking.
At the same time, the architecture leaves room for responsible growth. A reviewed osteopathy service can be introduced after qualification and registration, and an Italian-language structure can be added when its content is ready.
The website does not attempt to say everything at once. It gives each piece of information the right moment — building understanding first, confidence second and action naturally after both.
What was delivered
One clear system. Fourteen connected parts.
01Positioning and offer definition
02Information architecture and user journeys
03Content strategy and website copy
04Responsive UI/UX design
05Digital design system
06Custom static front-end development
07Animated brand and interaction system
08Responsive photography integration
09Educational resource framework
10Enquiry form and confirmation journey
11Technical SEO foundations
12Cloudflare Pages deployment architecture
13Legal and service-scope foundations
14Future osteopathy and multilingual expansion plan
Explore the result
A more confident first step into strength.
Visit Osteogym to experience the complete website, or speak to Depth Digital about turning a complex professional service into something people can understand, trust and act on.
Next project · 03 / 05
Morrow & Field
