Skip to main content
Woop Technology
All references
Project preview | Health & women's fitness

Six offerings. Three paths. One clear platform.

For Cintia Németh, we are building a bilingual platform that brings her training, consulting and product offerings together in one place. Prospective clients can compare services, see prices and find the right path to booking or purchase.

Ciklusfit home page on a laptop
Ciklusfit on a smartphone
Project facts
Client
Cintia Németh
Industry
Health & fitness
Languages
Hungarian, English
Status
In progress
Project volume
CHF 5,000–10,000
Website
ciklusfit.hu
Our role
  • Strategy and information architecture
  • UX/UI design and a dedicated design system
  • Custom web development
  • Multilingual implementation
  • Consent management and integrations
  • Hosting, deployment and technical support

The professional content, prices and image material come from the client.

Project location on the map
Dot-grid map of Europe: Hungary highlighted, with the client's location Budapest inside it
Location

Budapest, Hungary

Managed from Alt St. Johann (CH‑SG), project location: Budapest.

Starting point

A grown offering needed a central digital structure

Cintia Németh is a personal trainer, nutrition and lifestyle consultant, and an instructor in cycle balance. Until now, her services were presented mainly on Instagram and Facebook. For the six different offerings, however, there was no central, permanently findable overview.

Prospective clients often had to ask directly about prices, scope and booking options. This caused recurring manual effort and made it harder to compare the offerings.

Requirements for the new platform
  1. 01Present six offerings clearly
  2. 02Make services, prices and conditions comparable
  3. 03Provide the right booking or purchase path for each offering
  4. 04Offer two separate language versions
  5. 05Integrate personal content and expert information
  6. 06Integrate external services with data protection in mind
  7. 07Add new offerings without a fundamental rebuild
Challenge

Different services need different booking paths

The six offerings differ in scope, duration, price structure and booking process. The challenge was to combine a shared information structure with individual booking paths.

Different formats
In-person and online training, consulting, cycle programmes and digital products require different information. While packages and appointments are central for training offerings, consulting often starts with an initial conversation.
Three booking and purchase paths
Depending on the offering, the platform leads to choosing a package, an initial conversation or a direct purchase. Each path is tailored to the respective service.
Multilingualism and external services
Hungarian and English get their own indexable URLs. Appointment and statistics services requiring consent are only loaded after the required consent.

One system for different offerings and processes

6offerings
3offering groups
2languages
3Booking and purchase paths
1Shared information structure

The platform is still in progress. Data on findability, enquiries and bookings can only be collected after going live.

Strategy & design

One shared structure for six different offerings

All six offerings follow the same information structure: find the offering, compare services and prices, choose the next step. Content and booking paths remain individual.

Booking paths
  • GroupMovement and trainingOfferings: In-person and online training
    Next stepPackage choice
  • GroupConsulting and cycle supportOfferings: Nutrition and lifestyle coaching, cycle programme
    Next stepInitial conversation
  • GroupDigital productsOfferings: E-book, training video
    Next stepDirect purchase

User journey

Prospective clients reach the right offering via the homepage, search engines or social media.

  1. Interest

    Entry via different channels.

  2. Compare offerings

    View services, prices and conditions.

  3. Choose the next step

    Initial conversation or package choice.

  4. Booking or checkout

    Complete the appropriate process.

  5. Confirmation

    Receive a booking confirmation or a response.

Central structural decisions

Three instead of six equal entry points
Grouping makes orientation and comparing the individual offerings easier.
Individual booking paths
Depending on the service, the next step leads to choosing a package, an initial conversation or a direct purchase.
Independent language URLs
Hungarian and English get their own indexable URLs. Canonical and hreflang connect the language versions.
Consent before external appointment booking
A local component informs about the integration. The external service is only loaded after the required consent. The rest of the website remains usable regardless.

From wireframe to design system

The wireframe defines classification, image, features, prices and next step for each offering. The implementation takes over the same building blocks with imagery, colour and one clear path per package.

Wireframe of the services page with placeholders for image, text and package row
Before – the wireframe fixes the order and building blocks of each service, without colour or imagery.
Implemented services page showing the first service and three packages
After – the same building blocks in the build: category, features, prices and one route per package.
Offering detail with features and price tiers
Conditions, concrete features and the price tiers sit right next to the respective offering.

Warm base surfaces, sage and forest green create a calm design. Colours, spacings, radii and states are kept as reusable design values so that new pages stay consistent and easy to extend.

Colour values
HexUsage
  • #FDFBF8
    Base surfaceSilk White
  • #F3F7F3
    Tinted surfaceVery Light Lichen
  • #71877A
    Brand colourMain Brand Sage
  • #55685D
    Hero surfaceHero Sage
  • #2D3932
    HeadingsDark Forest Sage
  • #26211D
    Body textDeep Charcoal
  • #544D46
    Secondary textWarm Grey
  • #E8E4DB
    DividersSilk Border
Typography

Healthy body, healthy mind

Playfair Display · Headings

AaBbCc 0123456789 ÁÉÍÓŐÚŰ áéíóőúű

Inter · Body text and labels

From design to interface
Primary button999px
Secondary button14px
Badge (duration)999px
Input field14px

Every text colour is measured against its background: white text on the hero tone reaches 5.96:1 and is therefore above the WCAG AA threshold of 4.5:1 for body text.

Design system in detail
Radii and surface
  • 2.5rem
  • 2rem
  • 1.5rem
  • Base surface
  • Tinted surface
Components and their states
Primary button999px
Default
Hover
Focus
Disabled
Secondary button14px
Default
Hover
Focus
Disabled
Badge (duration)999px
Default
Hover
Focus
Disabled
Input field14px
Default
Hover
Focus
Disabled

Focus ring: 2px Main Brand Sage

Contrast check

White text on the hero tone

5.96:1
#FFFFFF | #55685DWCAG AA | body text

White text on the brand colour

3.85:1
#FFFFFF | #71877ALarge text only

With white text the hero tone reaches 5.96:1 and thereby exceeds the WCAG AA requirement of 4.5:1 for body text. The lighter brand tone reaches 3.85:1 and is therefore used only for large type, surfaces, borders and icons.

The solution

Offerings, personal content and booking on one platform

The platform connects six offerings with expert and personal content. All offerings follow the same information structure but keep their own prices, conditions and booking paths. New services can be added without a fundamental rebuild.

An about-me page, testimonials and a results gallery offer insights into the person behind the offering.

Prices and packages are shown right at each offering. Depending on the service, this is followed by choosing a package, an initial conversation, booking an appointment or, later, a direct purchase.

On mobile devices, layout, image crops and interaction are adapted. The information structure stays the same.

The checkout is aligned with the intended booking paths and the Hungarian market.

Prepared checkout with contact and invoice details
The planned checkout clearly shows the selected products, prices and the required contact and invoice details.
Appointment booking before consent
Before consent the external service does not load; a local component explains the integration.
The same page in Hungarian and English
Two languages, two independent addresses – connected via canonical and hreflang.
The same structure in its own arrangement – not the desktop layout squeezed.
Technology & operations

A technical foundation that grows with the offering

The custom implementation is based on Next.js, React, TypeScript and Tailwind. Offerings, content and integrations are structured so that new services can be added without a new page concept. Main content sits in the delivered HTML; interactivity is added only where it is needed. Essential information therefore stays available without additional client execution, readable for search engines and accessible independently of external integrations.

InterfaceVisible
The visible website in two languages
  • Next.js 16 (App Router)
  • React Server Components
  • Tailwind CSS v4
  • next-intl (Hungarian / English)
Response upwardsCall downwards
ServicesThird-party
Project-specific functions and integrations
  • Calendly — appointment booking
  • Google Analytics — statistics
  • Consent module — consents
  • Messaging module — form delivery
  • Payment provider — prepared
Provision upwardsUse downwards
OperationsInfrastructure
Technical foundation
  • Docker image (standalone)
  • Private registry
  • GitHub Actions (CI/CD)
  • Secrets management
The visible website stays separate from consent-dependent services: if external appointment booking is not enabled, for example, the remaining content is still available.

Evidence

Central offering configuration

Image, offering type, features, price structure, booking logic and further technical properties are defined centrally.

A new offering essentially needs one configuration entry and the matching content in both languages; existing page structures stay unchanged.

Booking, checkout and consent

Consent management uses the reusable module by Woop Technology. Categories, services and declared storage values are defined centrally; storage values managed through the consent infrastructure must be registered in the registry.

Appointment and statistics services requiring consent load only after it has been given. The consent function needs no external CMP provider. The checkout is prepared for connecting an exchangeable payment provider later, without rebuilding the offering and booking structure. Its data structure separates contact and invoice data and takes local invoicing requirements and amounts in Hungarian forint into account.

Hosting, deployment and support

The application is delivered as a standalone container and is tied neither to a website builder nor to a particular hosting provider. The setup covers container-based delivery, private package management for shared modules, automatic type checks and builds, versioned releases and controlled deployments.

Published versions are reproducible and can be rolled back to an earlier state when needed.

Technical findability
  • individual page titles and descriptions per service and language
  • stable, readable URLs with a language prefix
  • self-referencing canonical URLs and hreflang links
  • sitemap, navigation and canonicals from one shared path source
  • main content available server-side
  • optimised image delivery
  • structured internal linking between groups, offerings and conclusions
Explore the consent architecture
Result

A central foundation for offerings, orientation and booking

In progress | Measurable after go-live

The platform brings six offerings together in one place and connects them with suitable booking and purchase paths. Actual use and findability can only be assessed after going live.

  • Six offerings in three clear groups.
  • Transparent prices and comparable packages right at each offering.
  • Three suitable paths: package choice, initial conversation or direct purchase.
  • Two language versions: Hungarian and English.
  • Privacy-conscious integration: services requiring consent only load after consent.
  • Extensible structure: new offerings and booking paths without a fundamental rebuild.
Client testimonial
5 out of 5 stars

They created a beautiful, clean, and elegant website for me. I’m completely satisfied with their work. They were patient and kind throughout the entire process. I’m truly grateful.

Cintia NémethPersonal trainer and cycle balance instructor
View the profile on Google
Services delivered

Do you have an offering that does not fit into a standard template?

In the initial consultation, we clarify what your offering consists of and how it can become a structure that grows with you.

Book a consultation
Send an enquiry