Hat szolgáltatás. Három út. Egy világos platform.
Németh Cintia számára kétnyelvű platformot fejlesztünk, amely egy helyen fogja össze edzés-, tanácsadási és termékajánlatait. Az érdeklődők összehasonlíthatják a szolgáltatásokat, megnézhetik az árakat, és megtalálhatják a számukra megfelelő utat a foglalásig vagy a vásárlásig.
- Megbízó
- Németh Cintia
- Ágazat
- Egészség és fitnesz
- Nyelvek
- Magyar, Angol
- Státusz
- Megvalósítás alatt
- Projektméret
- 5 000–10 000 CHF
- Weboldal
- ciklusfit.hu
- Stratégia és információs architektúra
- UX/UI design és saját designrendszer
- Egyedi webfejlesztés
- Többnyelvű megvalósítás
- Hozzájárulás-kezelés és integrációk
- Hosting, deployment és technikai támogatás
A szakmai tartalmak, az árak és a képanyag a megbízótól származnak.
Budapest, Magyarország
A projektet Alt St. Johann (CH‑SG) településen található székhelyünkről támogatjuk. A projekt helyszíne: Budapest.
Egy kinőtt kínálatnak központi digitális szerkezetre volt szüksége
Németh Cintia személyi edző, táplálkozási és életmód-tanácsadó, valamint ciklusharmónia-oktató. Szolgáltatásait eddig főként az Instagramon és a Facebookon mutatta be. A hat különböző szolgáltatáshoz azonban hiányzott egy központi, tartósan megtalálható áttekintés.
Az árakról, a szolgáltatások tartalmáról és a foglalási lehetőségekről az érdeklődőknek gyakran közvetlenül kellett érdeklődniük. Ez ismétlődő kézi munkát okozott, és megnehezítette a szolgáltatások összehasonlítását.
- 01Hat szolgáltatás áttekinthető bemutatása
- 02Szolgáltatások, árak és feltételek összehasonlíthatóvá tétele
- 03Minden szolgáltatáshoz a megfelelő foglalási vagy vásárlási út
- 04Két önálló nyelvi változat
- 05Személyes tartalmak és szakmai információk integrálása
- 06Külső szolgáltatások adatvédelmi szempontból tudatos beépítése
- 07Új szolgáltatások hozzáadása alapvető átépítés nélkül
A különböző szolgáltatásokhoz különböző foglalási utak kellenek
A hat szolgáltatás tartalomban, időtartamban, árstruktúrában és foglalási folyamatban különbözik. A kihívás egy közös információs struktúra és az egyedi foglalási utak összekapcsolása volt.
- Különböző formátumok
- A személyes és online edzés, a tanácsadás, a ciklusprogramok és a digitális termékek eltérő információkat igényelnek. Míg az edzéseknél a csomagok és az időpontok állnak előtérben, a tanácsadás gyakran egy első beszélgetéssel kezdődik.
- Három foglalási és vásárlási út
- A szolgáltatástól függően a platform csomagválasztáshoz, első beszélgetéshez vagy közvetlen vásárláshoz vezet. Minden út az adott szolgáltatáshoz igazodik.
- Kétnyelvűség és külső szolgáltatások
- A magyar és az angol változat saját, indexelhető URL‑t kap. A hozzájárulásköteles időpont- és statisztikai szolgáltatások csak a szükséges hozzájárulás után töltődnek be.
Egy rendszer különböző szolgáltatásokhoz és folyamatokhoz
A platform még megvalósítás alatt áll. A megtalálhatóságra, a megkeresésekre és a foglalásokra vonatkozó adatok csak az élesítés után gyűjthetők.
Közös struktúra hat különböző szolgáltatáshoz
Mind a hat szolgáltatás ugyanazt az információs struktúrát követi: szolgáltatás megtalálása, szolgáltatások és árak összehasonlítása, a következő lépés kiválasztása. A tartalmak és a foglalási utak egyediek maradnak.
- CsoportMozgás és edzésSzolgáltatások: Személyes és online edzésKövetkező lépésCsomagválasztás
- CsoportTanácsadás és ciklustámogatásSzolgáltatások: Táplálkozási és életmód-tanácsadás, ciklusprogramKövetkező lépésElső beszélgetés
- CsoportDigitális termékekSzolgáltatások: E-book, edzővideóKövetkező lépésKözvetlen vásárlás
Felhasználói út
Az érdeklődők a kezdőoldalon, keresőkön vagy a közösségi médián keresztül jutnak el a megfelelő szolgáltatáshoz.
Érdeklődés
Belépés különböző csatornákon.
Szolgáltatások összehasonlítása
Szolgáltatások, árak és feltételek áttekintése.
Következő lépés kiválasztása
Első beszélgetés vagy csomagválasztás.
Foglalás vagy checkout
A megfelelő folyamat lezárása.
Visszaigazolás
Foglalási visszaigazolás vagy visszajelzés érkezik.
Központi szerkezeti döntések
- Három belépés hat egyenrangú helyett
- A csoportosítás megkönnyíti a tájékozódást és az egyes szolgáltatások összehasonlítását.
- Egyedi foglalási utak
- A szolgáltatástól függően a következő lépés csomagválasztáshoz, első beszélgetéshez vagy közvetlen vásárláshoz vezet.
- Önálló nyelvi URL‑ek
- A magyar és az angol változat saját, indexelhető URL‑t kap. A canonical és a hreflang köti össze a nyelvi változatokat.
- Hozzájárulás a külső időpontfoglalás előtt
- Egy helyi komponens tájékoztat az integrációról. A külső szolgáltatás csak a szükséges hozzájárulás után töltődik be. A weboldal többi része ettől függetlenül használható.
A wireframe-től a designrendszerig
A wireframe szolgáltatásonként meghatározza a besorolást, a képet, a jellemzőket, az árakat és a következő lépést. A megvalósítás ugyanazokat az építőelemeket veszi át képanyaggal, színnel és csomagonként egy világos úttal.
A meleg alapfelületek, a zsálya- és az erdőzöld nyugodt megjelenést adnak. A színek, távolságok, lekerekítések és állapotok újrafelhasználható designértékként vannak vezetve, hogy az új oldalak következetesek és könnyen bővíthetők maradjanak.
- #FDFBF8#FDFBF8AlapfelületSilk White
- #F3F7F3#F3F7F3Tónusos felületVery Light Lichen
- #71877A#71877AMárkaszínMain Brand Sage
- #55685D#55685DHero-felületHero Sage
- #2D3932#2D3932CímsorokDark Forest Sage
- #26211D#26211DFolyószövegDeep Charcoal
- #544D46#544D46Másodlagos szövegWarm Grey
- #E8E4DB#E8E4DBElválasztó vonalakSilk Border
Ép Testben Ép Lélek
Playfair Display · Címsorok
AaBbCc 0123456789 ÁÉÍÓŐÚŰ áéíóőúű
Inter · Folyószöveg és feliratok
Minden szövegszínt megmértünk a háttere előtt: a hero-árnyalaton a fehér szöveg 5,96:1 értéket ér el, így a folyó szövegre vonatkozó 4,5:1-es WCAG AA küszöb fölött van.
A designrendszer részletesen
- 2.5rem
- 2rem
- 1.5rem
- Alapfelület
- Tónusos felület
Fókuszgyűrű: 2px Main Brand Sage
Fehér szöveg a hero tónuson
5,96:1Fehér szöveg a márkaszínen
3,85:1A hero tónus fehér szöveggel 5,96:1 értéket ér el, és ezzel meghaladja a WCAG AA folyószövegre vonatkozó 4,5:1 követelményét. A világosabb márkatónus 3,85:1 értéket ér el, ezért csak nagy betűméretnél, felületeknél, kereteknél és ikonoknál használjuk.
Szolgáltatások, személyes tartalmak és foglalás egy platformon
A platform hat szolgáltatást kapcsol össze szakmai és személyes tartalmakkal. Minden szolgáltatás ugyanazt az információs struktúrát követi, de megtartja saját árait, feltételeit és foglalási útjait. Új szolgáltatások alapvető átépítés nélkül adhatók hozzá.
A Rólam oldal, a vendégvélemények és az eredménygaléria betekintést nyújt a szolgáltatás mögött álló személybe.
Az árak és a csomagok közvetlenül a szolgáltatásnál szerepelnek. A szolgáltatástól függően ezt csomagválasztás, első beszélgetés, időpontfoglalás vagy később a közvetlen vásárlás követi.
Mobileszközökön az elrendezés, a képkivágások és a kezelés alkalmazkodik. Az információs struktúra megmarad.
A pénztár a tervezett foglalási utakhoz és a magyar piachoz igazodik.
Technikai alap, amely együtt nő a kínálattal
Az egyedi megvalósítás alapja a Next.js, a React, a TypeScript és a Tailwind. A szolgáltatások, a tartalmak és az integrációk úgy vannak felépítve, hogy új szolgáltatások új oldalkoncepció nélkül bővíthetők legyenek. A fő tartalmak a kiszolgált HTML‑ben vannak; interaktivitás csak ott egészíti ki őket, ahol szükséges. A lényeges információk így további kliensoldali végrehajtás nélkül is elérhetők, a keresőmotorok számára olvashatók, és a külső integrációktól függetlenül hozzáférhetők.
- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (magyar / angol)
- Calendly — időpontfoglalás
- Google Analytics — statisztika
- Consent-modul — hozzájárulások
- Messaging-modul — űrlapküldés
- Fizetési szolgáltató — előkészítve
- Docker-image (standalone)
- Privát registry
- GitHub Actions (CI/CD)
- Secrets management
Műszaki részletek
Központi szolgáltatáskonfiguráció
A kép, a szolgáltatás típusa, a jellemzők, az árszerkezet, a foglalási logika és további technikai tulajdonságok központilag vannak meghatározva.
Egy új szolgáltatáshoz lényegében egy konfigurációs bejegyzés és a hozzá tartozó tartalom kell mindkét nyelven; a meglévő oldalszerkezetek változatlanok maradnak.
Foglalás, pénztár és hozzájárulás
A hozzájárulás-kezelés a Woop Technology újrafelhasználható modulját használja. A kategóriák, a szolgáltatások és a deklarált tárolt értékek központilag vannak meghatározva; a hozzájárulási infrastruktúrán keresztül kezelt tárolt értékeket regisztrálni kell a registryben.
A hozzájáruláshoz kötött időpont- és statisztikai szolgáltatások csak a hozzájárulás után töltődnek be. A hozzájárulási funkcióhoz nem kell külső CMP‑szolgáltató. A pénztár elő van készítve egy cserélhető fizetési szolgáltató későbbi bekötésére, a szolgáltatás- és foglalási szerkezet újjáépítése nélkül. Adatszerkezete elkülöníti a kapcsolattartási és a számlázási adatokat, és figyelembe veszi a helyi számlázási követelményeket, valamint a magyar forintban megadott összegeket.
Hosting, deployment és támogatás
Az alkalmazás önálló konténerként kerül kiszállításra, és nem kötődik sem weboldalépítőhöz, sem meghatározott tárhelyszolgáltatóhoz. A beállítás konténeralapú kiszállítást, privát csomagkezelést a közös modulokhoz, automatikus típusellenőrzést és buildeket, verziózott kiadásokat, valamint ellenőrzött deploymentokat foglal magában.
A közzétett verziók reprodukálhatók, és szükség esetén korábbi állapotra állíthatók vissza.
Technikai megtalálhatóság
- egyedi oldalcímek és leírások szolgáltatásonként és nyelvenként
- stabil, olvasható URL-ek nyelvi előtaggal
- önhivatkozó canonical URL-ek és hreflang-összekötések
- sitemap, navigáció és canonicalok közös útvonalforrásból
- kiszolgálóoldalon elérhető fő tartalmak
- optimalizált képkiszolgálás
- strukturált belső hivatkozás a csoportok, szolgáltatások és lezárások között
Központi alap a szolgáltatásokhoz, a tájékozódáshoz és a foglaláshoz
A platform hat szolgáltatást fog össze egy helyen, és megfelelő foglalási és vásárlási utakkal köti össze őket. A tényleges használat és a megtalálhatóság csak az élesítés után értékelhető.
- Hat szolgáltatás három áttekinthető csoportban.
- Átlátható árak és összehasonlítható csomagok közvetlenül a szolgáltatásnál.
- Három megfelelő út: csomagválasztás, első beszélgetés vagy közvetlen vásárlás.
- Két nyelvi változat: magyar és angol.
- Adatvédelmi szempontból tudatos integráció: a hozzájárulásköteles szolgáltatások csak hozzájárulás után töltődnek be.
- Bővíthető struktúra: új szolgáltatások és foglalási utak alapvető átépítés nélkül.
Gyönyörű, áttekinthető és elegáns weboldalt készítettek nekem. Teljes mértékben elégedett vagyok a munkájukkal. Az egész folyamat során türelmesek és kedvesek voltak. Nagyon hálás vagyok.
Angolból fordítva — Eredeti megjelenítése
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.
- Webdesign és weboldal-megújításSzolgáltatásstruktúra, Felhasználói út, Mobil elrendezés
- Arculat- és UX/UI-tervezésWireframe, Designrendszer, Kontrasztigazolás
- Webfejlesztés, platformok és integrációkSzolgáltatáskonfiguráció, Foglalási utak, Pénztár
- SEO, GEO és webes teljesítményNyelvi URL-ek, hreflang, Sitemap
- Tárhelyszolgáltatás, karbantartás és infrastruktúraKonténer, Verziózott kiadások, Technikai támogatás
- Adatvédelem és hozzájárulás-kezelésConsent, Analytics, Foglalás hozzájárulás után
Van olyan kínálata, amely nem préselhető bele egy sablonba?
Az első egyeztetésen tisztázzuk, miből áll a kínálata, és hogyan lehet belőle olyan szerkezet, amely együtt nő Önnel.