Web designDevelopmentInfrastructure
Woop Art
A digital art space that presents artworks impressively and guides visitors effortlessly through the gallery.
All references
Project preview · Health & women's fitness
Six offerings.Three booking paths.One clear platform.
For Cintia Németh, a fitness coach and consultant for women's health, we are building a platform that orders her services understandably and channels social media enquiries into matching booking and purchase processes.
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 scope at a glance
One system for different offerings and processes
6
offerings
3
offering groups
2
languages
3
booking and purchase processes
1
shared information structure
The platform is under development. Data on findability, enquiries and bookings will be collected after going live.
01Starting 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. Her services were presented mainly via Instagram and Facebook. For six different formats, however, there was no permanently findable and comparable overview.
Prices, differences and booking options often had to be requested by direct message. This created recurring manual effort, while important information remained only partly findable in social media feeds.
Before
- Instagram DMs
- Direct enquiry
- In person
After
- Central website
- Clear offerings
- Booking system
- Checkout prepared
- Bilingual
Requirements for the new platform
- structure six formats understandably
- present prices and conditions transparently
- make differences visible and offerings comparable
- provide two equally complete language versions
- cover booking, initial conversation and direct purchase
- integrate external services with data protection in mind
- add new offerings without a fundamental rebuild
02Challenge
Different services need different decision paths
The offerings differ in content, place, duration, price structure and the sensible next step. A standard presentation would have blurred those differences.
Different formats
In-person and online training, nutrition and lifestyle consulting, a multi-part cycle programme and digital content. Some services can be chosen directly, others sensibly begin with a personal conversation.
Three processes
Training leads to multi-passes, consulting to an initial conversation, and digital products straight to purchase. The website has to orient everyone alike and still lead to the fitting conclusion.
Multilingualism and external services
Hungarian is the default language, English is offered as an equal. Both versions need their own indexable URLs. Appointment and statistics services may only load after the required consent.
03Strategy & design
One shared information logic for six different offerings
Instead of an identical template, a shared order was developed: find the offering group, understand the scope, compare conditions and prices, choose the next step. Content, prices, conditions and booking paths stay individual per offering.
Three offering groups and their conclusions
The grouping reduces the choice at the first level without levelling out individual services.
Booking paths
- GroupMovement and trainingOfferings: In-person training in the private women's studio, live training by video callNext step: Offering page and package choiceGoalMulti-pass
- GroupConsulting and cycle supportOfferings: Nutrition and lifestyle consulting, multi-part cycle programmeNext step: Appointment bookingGoalInitial conversation
- GroupDigital productsOfferings: E-book, training videoNext step: CheckoutGoalDirect purchase
User journey
Anyone who knows the right offering enters directly; anyone still looking for orientation can choose a personal conversation first.
Interest
Entry via the home page, a search engine or social media.
Compare offerings
Three groups give orientation; scope, conditions and prices are presented transparently.
Initial conversation or package choice
Depending on the service, the offering detail leads to a personal conversation or straight to the package.
Booking or checkout
Appointment-based services move into booking, directly purchasable ones into the checkout.
Confirmation
After completion the client receives the corresponding confirmation or reply.
Central structural decisions
Three instead of six equal entry points
The groups first answer whether training, consulting or a digital product is being sought, and then make the concrete choice easier.
Several instead of one conversion path
Existing training clients can pick a package directly; for extensive consulting, an initial conversation clarifies the need first.
Independent language URLs
Paths such as /hu/szolgaltatasok and /en/services can be opened, shared, linked and indexed separately. Canonical and hreflang connect the versions; multilingualism is thus part of the information architecture, not just a change of text.
Consent before external appointment booking
A local component first explains the integration. Only after the required decision is the external service loaded; the rest of the website stays 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.
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. Framing details, features and price tiers stand directly with the respective offering.
Colour values
HexUsage
- #FDFBF8#FDFBF8Base surfaceSilk White
- #F3F7F3#F3F7F3Tinted surfaceVery Light Lichen
- #71877A#71877ABrand colourMain Brand Sage
- #55685D#55685DHero surfaceHero Sage
- #2D3932#2D3932HeadingsDark Forest Sage
- #26211D#26211DBody textDeep Charcoal
- #544D46#544D46Secondary textWarm Grey
- #E8E4DB#E8E4DBDividersSilk Border
Typography
Ép Testben Ép Lélek
Playfair Display · Headings
AaBbCc 0123456789 · ÁÉÍÓŐÚŰ áéíóőúű
Inter · Body text and labels
Building blocks
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
Primary button999px
Secondary button14px
Badge (duration)999px
Input field14px
Default
Hover
Focus
Disabled
Focus ring: 2px Main Brand Sage
Radii and surface
- 2.5rem
- 2rem
- 1.5rem
- Base surfaceSilk White
- Tinted surfaceVery Light Lichen
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.
04The solution
Offering structure, trust and booking in one system
The platform combines six structured offerings with professional and personal content and matching next steps. Each offering follows the same information logic while keeping its own content, prices, conditions and booking logic. New services can therefore be added without developing an entirely new page structure.
A detailed about-me page, personal content, testimonials and a results and development gallery complement the services. Separating the offering structure from the personal level allows both factual comparison and insight into the person behind the offering.
Prices, package sizes and central conditions stand directly with the offering. Depending on the service, what follows is a package choice, an initial conversation, an appointment booking or, later, the direct purchase of a digital product.
Mobile and desktop use the same information architecture, but not necessarily the same arrangement. For narrow displays, order, image crops and horizontal spacing are adjusted and interactions optimised for touch.
The checkout is aligned with the intended booking paths and the Hungarian market.
05Technology & operations
Built so that extensions do not require new page logic every time
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.
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.
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.
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
06Result
A central foundation for findability, orientation and booking
Measurable after go-liveThe platform is under development. The points below describe the expected state after going live.
- Six offerings in three logical groups – movement and training, consulting and cycle support, digital products – without overwhelming anyone.
- Transparent prices and comparable packages lower the threshold for a first booking.
- Three booking paths depending on readiness to decide: package choice, initial conversation or direct purchase.
- Full bilingualism (Hungarian / English) with no translation effort in day-to-day operation.
- Services requiring consent load only after it has been given, not on the first page view.
- The structure allows later additions of offerings and booking paths without a new page concept.
Portfolio
More projects
- Service of our ownPrivacyArchitectureTechnical module
Consent management
Our own consent engine. It manages consent, unlocks consent-dependent services and cleans up cookies on withdrawal – while data, languages and design stay freely configurable per project.
InterfaceBanner and settings in the project's own designConsent engineState, versioning, registry, gatingData sourceJSON, API or CMS – interchangeable
Your project
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.