Client website · In progress

The Ikaika MethodFind your direction.
Take the next step.

A recovery clinic website that helps visitors understand the services, recognise their needs and choose a next step.

Explore the working screens
My role
Client discovery, UX & UI direction, AI-assisted build
Platform
Responsive clinic website
Built with
React & TypeScript
Status
Client review · Launch approval pending

01 / The opportunity

A clear choice before a booking.

The clinic’s replacement website needs to explain its services to people arriving with different goals. Some are ready to book; others need help finding the right starting point.

My first UXJ Studio client project brings those paths together while keeping appointment booking in Zanda. The central design question was how to make each next step distinct.

Working homepage · Captured 8 September 2026; client review version.
01

Understand

Explain the service and who it is for.

02

Choose

Support visitors who need a starting point.

03

Continue

Make the appointment handoff clear.

02 / Design decisions

One screen. A deliberate reading order.

The homepage places a direct promise over a full-width training photograph. These three annotations trace the same working layout: the setting, the headline and the two next actions.

Layout review · Three details of the same captured screen.
  1. 01 · Establish context. The photograph fills the hero; navigation and content sit over it.
  2. 02 · Give the message priority. The service label leads into a large two-line headline, with supporting copy below.
  3. 03 · Offer a clear choice. Book an appointment is the primary action; Help me choose sits beside it.

03 / Low to high fidelity

The same structure, at two fidelities.

Each wireframe follows the actual screen beside it. The homepage keeps its full-bleed image, overlaid headline and paired actions. Athletes & Community keeps its image-led introduction and the image-left, content-right section below.

01 / Homepage

Low fidelity · Reconstructed from the capture alongside.
High fidelity · The same screen in the client-review build.

02 / Athletes & Community

Low fidelity · Reconstructed from the capture alongside.
High fidelity · The same screen in the client-review build.

Screen-matched reconstructions of the captured build, created for this case study.

The booking boundary: these pages lead visitors to Zanda. An appointment calendar is not part of the website interface shown here.

04 / The homepage

Real context. One recognisable voice.

The opening pairs training photography with direct, condensed typography and a lime appointment action. A shorter supporting paragraph explains the offer, while “Help me choose” gives uncertain visitors another route.

High-fidelity presentation · Real website screens placed into the approved studio artwork.

The visual decision: let the photography establish the setting, then use spacing and contrast to make the actions legible.

05 / Service pathways

Move from a broad offer to a specific context.

The Athletes & Community page brings the conversation closer to a visitor’s training environment. A specific headline, supporting explanation and training imagery introduce the route before the next action.

Homepage · A direct appointment route and a quieter Help me choose route.
Athletes & community · A specific training context before the next action.

Homepage · A direct appointment route and a quieter Help me choose route.

Interactive screen walkthrough · Actual client-review captures. Select a page or press Play.

I am refining these pages against client feedback, including the choice and placement of client-owned imagery. The private preview remains part of the review process.

06 / The mobile view

Keep the route clear as the screen narrows.

The mobile version keeps the booking entry point close to the navigation and turns the service story into a single reading flow. The audience, service and image stay in the same order.

Actual mobile capture · Athletes & Community.

Context carries across.

The smaller layout gives the headline enough room and lets the photography follow naturally. The next review should check long text, touch targets and the booking handoff on real devices.

07 / The booking handoff

Discovery here. Appointments in Zanda.

Exploring a service, sending a general enquiry and booking an appointment are different tasks. Clear wording needs to prepare people for the transition between the website and the booking system.

01

Explore a service

Understand the offer within the website.

02

Ask a general question

Use an enquiry route when the next step is unclear.

03

Book an appointment

Continue to Zanda for the appointment workflow.

The trade-off: a separate booking system introduces a context change. The handoff should tell visitors where they are going and what they can do there.

08 / Review outcome

A working website, ready for further review.

The current result is a responsive build with service journeys available for client review. I own the design direction and revisions, using coding agents to support implementation.

UX

Service discovery

Distinct entry points for different visitor needs.

UI

Responsive context

Desktop and mobile versions of the service story.

↗

Booking boundary

A deliberate handoff to the appointment system.

Delivery status and evidence limits

Final content and asset approvals, complete booking handoff checks and launch approval remain open. The case study shows a working review build. Increased bookings, conversion gains and clinical outcomes have not been measured.

09 / Next phase

Turn a review build into a confident release.

The next phase combines client approval with checks of the real visitor journey. Each step should answer a concrete question before launch.

Proposed next phase · Content, handoff and access checks still to complete.
  1. 01

    Confirm content and imagery

    Approve service wording, contact details and image choices with the client.

  2. 02

    Check the handoff end to end

    Follow every booking entry point, verify its destination and confirm how visitors return to the website.

  3. 03

    Observe service selection

    Ask visitors to find a relevant service and explain the difference between enquiry and booking; review keyboard and mobile access.

Clarity starts with the content.
Trust continues through the handoff.

← Back to selected workNext projectFruloom Ice Candy ↗