Ugrás a fő tartalomhoz
Woop Technology
Európa pontrácsos térképe: Magyarország kiemelve, benne az ügyfél székhelyével, BudapesttelBudapest
Összes referencia
Projektelőzetes · Egészség és női fitnesz

Hat szolgáltatás.Három foglalási út.Egy világos platform.

Németh Cintia fitneszedző és női egészség tanácsadó számára olyan platform készül, amely érthetően rendszerezi a szolgáltatásokat, és a közösségi médián érkező érdeklődéseket megfelelő foglalási és vásárlási folyamatokba tereli.

Projektadatok
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
A mi szerepünk
  • 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.

A Ciklusfit kezdőoldala laptopon
A Ciklusfit okostelefonon
A projekt terjedelme egy pillantásra

Egy rendszer különböző szolgáltatásokhoz és folyamatokhoz

6

szolgáltatás

3

szolgáltatáscsoport

2

nyelv

3

foglalási és vásárlási folyamat

1

közös információs szerkezet

A platform megvalósítás alatt áll. A megtalálhatóságra, az érdeklődésekre és a foglalásokra vonatkozó adatokat az élesítés után gyűjtjük.

01Kiindulási helyzet

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 főként az Instagramon és a Facebookon mutatta be. Hat különböző formátumhoz azonban hiányzott a tartósan megtalálható és összehasonlítható áttekintés.

Az árakra, a különbségekre és a foglalási lehetőségekre az érdeklődőknek gyakran privát üzenetben kellett rákérdezniük. Ez ismétlődő kézi munkát okozott, miközben a fontos információk a közösségimédia-folyamokban csak korlátozottan maradtak megtalálhatók.

Előtte
  • Instagram DM
  • WhatsApp
  • E-mail
  • Közvetlen megkeresés
  • Szóban
Utána
  • Központi weboldal
  • Világos szolgáltatások
  • Foglalási rendszer
  • Pénztár előkészítve
  • Kétnyelvű

Elvárások az új platformmal szemben

  • hat formátum érthető tagolása
  • az árak és a feltételek átlátható bemutatása
  • a különbségek láthatóvá és a szolgáltatások összehasonlíthatóvá tétele
  • két egyenrangú nyelvi változat biztosítása
  • foglalás, első beszélgetés és közvetlen vásárlás lefedése
  • külső szolgáltatások adatvédelemtudatos integrálása
  • új szolgáltatások bővítése alapvető átalakítás nélkül
02Kihívás

A különböző szolgáltatásokhoz különböző döntési utak kellenek

A szolgáltatások eltérnek tartalomban, helyszínben, időtartamban, árszerkezetben és a soron következő értelmes lépésben. Egy egységes megjelenítés elmosta volna ezeket a különbségeket.

Különböző formátumok

Személyes és online edzés, táplálkozási és életmód-tanácsadás, többrészes ciklusprogram, valamint digitális tartalmak. Egyes szolgáltatások közvetlenül választhatók, mások észszerűen személyes beszélgetéssel kezdődnek.

Három folyamat

Az edzések bérlethez, a tanácsadások első beszélgetéshez, a digitális termékek pedig közvetlenül a vásárláshoz vezetnek. A weboldalnak közösen kell tájékoztatnia, és mégis a megfelelő lezáráshoz kell vezetnie.

Kétnyelvűség és külső szolgáltatások

A magyar az alapnyelv, az angol egyenrangúan elérhető. Mindkét változatnak saját, indexelhető URL-re van szüksége. Az időpont- és statisztikai szolgáltatások csak a szükséges hozzájárulás után tölthetők be.

03Stratégia és design

Közös információs logika hat különböző szolgáltatáshoz

Azonos sablon helyett közös sorrend készült: szolgáltatáscsoport megtalálása, a szolgáltatás terjedelmének megértése, a feltételek és árak összehasonlítása, a következő lépés kiválasztása. A tartalmak, az árak, a feltételek és a foglalási utak szolgáltatásonként egyediek maradnak.

Három szolgáltatáscsoport és a lezárás útjai

A csoportosítás az első szinten csökkenti a választást, anélkül hogy az egyes szolgáltatásokat egységesítené.

Foglalási utak
  • CsoportMozgás és edzésSzolgáltatások: Személyes edzés a privát női stúdióban, élő edzés videohíváson
    Következő lépés: Szolgáltatás oldala és csomagválasztás
    CélBérlet
  • CsoportTanácsadás és ciklustámogatásSzolgáltatások: Táplálkozási és életmód-tanácsadás, többrészes ciklusprogram
    Következő lépés: Időpontfoglalás
    CélElső beszélgetés
  • CsoportDigitális termékekSzolgáltatások: E-book, edzővideó
    Következő lépés: Pénztár
    CélKözvetlen vásárlás

Felhasználói út

Aki ismeri a megfelelő szolgáltatást, közvetlenül belép; akinek még tájékozódásra van szüksége, először személyes beszélgetést választhat.

  1. Érdeklődés

    Belépés a kezdőlapról, keresőből vagy a közösségi médiából.

  2. Szolgáltatások összehasonlítása

    Három csoport ad tájékozódást; a szolgáltatás terjedelme, a feltételek és az árak átláthatóan jelennek meg.

  3. Első beszélgetés vagy csomagválasztás

    A szolgáltatás részletei szolgáltatástól függően a személyes beszélgetéshez vagy közvetlenül a csomaghoz vezetnek.

  4. Foglalás vagy pénztár

    Az időponthoz kötött szolgáltatások a foglalásba, a közvetlenül megvásárolhatók a pénztárba lépnek.

  5. Visszaigazolás

    A lezárás után az ügyfél megkapja a megfelelő visszaigazolást vagy visszajelzést.

Központi szerkezeti döntések

Három belépés hat egyenrangú helyett

A csoportok először arra válaszolnak, hogy edzést, tanácsadást vagy digitális terméket keres valaki, és utána könnyítik meg a konkrét választást.

Több konverziós út egyetlen helyett

A meglévő edzésügyfelek közvetlenül választhatnak csomagot; kiterjedt tanácsadásnál egy első beszélgetés tisztázza először az igényt.

Önálló nyelvi URL-ek

Az olyan útvonalak, mint a /hu/szolgaltatasok és az /en/services, külön megnyithatók, megoszthatók, hivatkozhatók és indexelhetők. A canonical és a hreflang köti össze a változatokat; a kétnyelvűség így az információs architektúra része, nem csupán szövegcsere.

Hozzájárulás a külső időpontfoglalás előtt

Egy helyi komponens először tájékoztat az integrációról. A külső szolgáltatás csak a szükséges döntés után töltődik be; a weboldal többi része ettől függetlenül használható marad.

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 szolgáltatások oldal drótváza kép-, szöveg- és csomaghelyekkel
Előtte – a drótváz rögzíti az egyes szolgáltatások sorrendjét és építőelemeit, szín és képi anyag nélkül.
A megvalósult szolgáltatások oldal az első szolgáltatással és három csomaggal
Utána – ugyanazok az építőelemek élesben: bevezető címke, jellemzők, árak és csomagonként egy útvonal.

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. A keretadatok, a jellemzők és az ársávok közvetlenül az adott szolgáltatásnál állnak.

Szolgáltatás részletei jellemzőkkel és ársávokkal
A keretfeltételek, a konkrét jellemzők és az ársávok közvetlenül az adott szolgáltatásnál szerepelnek.
Színértékek
HexHasználat
  • #FDFBF8
    AlapfelületSilk White
  • #F3F7F3
    Tónusos felületVery Light Lichen
  • #71877A
    MárkaszínMain Brand Sage
  • #55685D
    Hero-felületHero Sage
  • #2D3932
    CímsorokDark Forest Sage
  • #26211D
    FolyószövegDeep Charcoal
  • #544D46
    Másodlagos szövegWarm Grey
  • #E8E4DB
    Elválasztó vonalakSilk Border
Betűk

Ép Testben Ép Lélek

Playfair Display · Címsorok

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

Inter · Folyószöveg és feliratok

Elemek
Elsődleges gomb999px
Alap
Hover
Fókusz
Inaktív
Másodlagos gomb14px
Alap
Hover
Fókusz
Inaktív
Badge (időtartam)999px
Alap
Hover
Fókusz
Inaktív
Beviteli mező14px
Alap
Hover
Fókusz
Inaktív

Fókuszgyűrű: 2px Main Brand Sage

Lekerekítés és felület
  •  2.5rem
  •  2rem
  •  1.5rem
  • AlapfelületSilk White
  • Tónusos felületVery Light Lichen
Kontrasztigazolás

Fehér szöveg a hero tónuson

5,96:1
#FFFFFF · #55685DWCAG AA · folyószöveg

Fehér szöveg a márkaszínen

3,85:1
#FFFFFF · #71877ACsak nagy betűméret

A 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.

04A megoldás

Szolgáltatásszerkezet, bizalom és foglalás egy rendszerben

A platform hat strukturált szolgáltatást köt össze szakmai és személyes tartalmakkal, valamint a megfelelő következő lépésekkel. Minden szolgáltatás ugyanazt az információs logikát követi, de megtartja saját tartalmát, árait, feltételeit és foglalási logikáját. Új szolgáltatások így teljesen új oldalszerkezet kidolgozása nélkül bővíthetők.

Részletes bemutatkozó oldal, személyes tartalmak, vélemények, valamint eredmény- és fejlődésgaléria egészíti ki a szolgáltatásokat. A szolgáltatásszerkezet és a személyes szint elválasztása egyszerre teszi lehetővé a tárgyilagos összehasonlítást és a bepillantást a szolgáltatás mögötti személybe.

Az árak, a csomagméretek és a lényeges feltételek közvetlenül a szolgáltatásnál állnak. Szolgáltatástól függően csomagválasztás, első beszélgetés, időpontfoglalás vagy később digitális termék közvetlen megvásárlása következik.

A mobil és az asztali nézet ugyanazt az információs architektúrát használja, de nem feltétlenül ugyanazt az elrendezést. Keskeny kijelzőkön a sorrend, a képkivágások és a vízszintes távolságok igazodnak, az interakciók pedig érintésre optimalizáltak.

A pénztár a tervezett foglalási utakhoz és a magyar piachoz igazodik.

Checkout kapcsolattartási és számlázási adatokkal
A kiválasztott szolgáltatástól a lezárásig – érthető csomag- és áráttekintéssel.
Időpontfoglalás a hozzájárulás előtt
A hozzájárulás előtt a külső szolgáltatás nem töltődik be; egy helyi komponens tájékoztat az integrációról.
Ugyanaz az oldal magyarul és angolul
Két nyelv, két önálló cím – canonical és hreflang köti össze őket.
Ugyanaz a szerkezet, saját elrendezésben – nem a keskenyre húzott asztali nézet.
05Technika és üzemeltetés

Úgy építve, hogy a bővítés ne igényeljen minden alkalommal új oldallogikát

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.

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.

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.

FelületLátható
A látható weboldal két nyelven
  • Next.js 16 (App Router)
  • React Server Components
  • Tailwind CSS v4
  • next-intl (magyar / angol)
Válasz felfeléHívás lefelé
SzolgáltatásokKülső szolgáltatás
Projektfüggő funkciók és integrációk
  • 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
Biztosítás felfeléHasználat lefelé
ÜzemeltetésInfrastruktúra
Technikai alap
  • Docker-image (standalone)
  • Privát registry
  • GitHub Actions (CI/CD)
  • Secrets management

A látható weboldal elkülönül a hozzájárulásfüggő szolgáltatásoktól: ha például a külső időpontfoglalás nincs engedélyezve, a többi tartalom továbbra is elérhető marad.

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
06Eredmény

Központi alap a megtalálhatósághoz, a tájékozódáshoz és a foglaláshoz

Az élesítés után mérhető

A platform megvalósítás alatt áll. Az alábbi pontok az élesítés utáni várható állapotot írják le.

  • Hat szolgáltatás három logikus csoportban – mozgás és edzés, tanácsadás és ciklustámogatás, digitális termékek –, túlterhelés nélkül.
  • Az átlátható árak és az összehasonlítható csomagok csökkentik az első foglalás küszöbét.
  • Három foglalási út a döntési érettség szerint: csomagválasztás, első beszélgetés vagy közvetlen vásárlás.
  • Teljes kétnyelvűség (magyar / angol) a napi működésben jelentkező fordítási teher nélkül.
  • A hozzájáruláshoz kötött szolgáltatások csak a hozzájárulás után töltődnek be, nem az első oldalmegnyitáskor.
  • A szerkezet lehetővé teszi további szolgáltatások és foglalási utak bővítését új oldalkoncepció nélkül.
Portfólió

További projektek

  • WebdesignFejlesztésInfrastruktúra

    Woop Art

    Digitális művészeti tér, amely igényesen mutatja be a műveket, és könnyedén vezeti végig a látogatókat a galérián.

    Woop Art
    Woop Art
  • Saját szolgáltatásAdatvédelemArchitektúra
    Technikai modul

    Hozzájárulás-kezelés

    Saját hozzájárulás-motorunk. Kezeli a hozzájárulásokat, csak hozzájárulás után tölti be az érintett szolgáltatásokat, visszavonáskor pedig törli a cookie-kat – miközben az adatok, a nyelvek és a megjelenés projektenként szabadon meghatározhatók.

    Felület
    Sáv és beállítások a projekt saját arculatában
    Hozzájárulás-motor
    Állapot, verziózás, nyilvántartás, szűrés
    Adatforrás
    JSON, API vagy CMS – cserélhető