Weboldalfejlesztés és UX/UI design a Nyíregyházi Torna Sportegyesület számára

A Nyíregyházi Torna Sportegyesület és a projekt célja

A Nyíregyházi Torna Sportegyesülettel közel tíz éve dolgozunk együtt, amely idő alatt az egyesület jelentős fejlődésen ment keresztül. A szervezet mára a város legnagyobb tornaegyesületévé vált, egyes csoportjai pedig olyan népszerűek, hogy várólistával működnek. Növekedésével párhuzamosan ugyanakkor a digitális kommunikációval és a weboldalon elérhető információk mennyiségével kapcsolatos igények is jelentősen megváltoztak.

A korábbi WordPress-weboldal vizuálisan és technikailag egyaránt elavult, a page builderre és számos bővítményre épülő rendszer karbantartása pedig egyre nehézkesebbé vált. Az új weboldal tervezésekor ezért nem egyszerűen a korábbi felület korszerűsítésére törekedtünk: az információs architektúra egészét, a tartalomkezelés módját és több fontos funkció működését is újragondoltuk.

Kiemelt cél volt, hogy különféle látogatói csoportok a számukra releváns információkat minél gyorsabban megtalálják. Például egy már aktív sportoló szülője, aki az éppen aktuális edzésrendre kíváncsi, és egy olyan érdeklődő, aki gyermekét egy próbaedzésre íratná be, vagy az egyesület működéséről szeretne többet tudni, más tartalmakat keres.

Új információs architektúra a könnyebb tájékozódásért

Tervezési folyamatunk egyik alapvető részfeladata ezért a nagy mennyiségű és eltérő célú információ átlátható rendszerbe szervezése volt. Az edzésrendek, hírek, galériák, gyakori kérdések, blogbejegyzések, táborok, workshopok, dokumentumok és egyesületi információk önálló, egyértelműen elérhető tartalmi egységeket kaptak.

A fontosabb tartalmak mellett a látogatók továbblépését több CTA-szekció segíti, többek között a próbaedzés, a táborok és az egyesülethez való csatlakozás irányába. A támogatók és vélemények szintén modernebb, a teljes vizuális rendszerbe illeszkedő designt kaptak. A próbaedzésre és táborra történő jelentkezéshez külön űrlapokat készítettünk, így az érdeklődőknek nem kell külső csatornát használniuk vagy adataikat strukturálatlan e-mailben küldeniük.

Az edzésrend teljes újragondolása

Az egyik legjelentősebb UX-problémát az edzésrend korábbi megjelenítési módja jelentette. Az egyes helyszínekhez tartozó órarendek ugyanis egyetlen oldalon, hagyományos, Excel-táblázatokra emlékeztető formában jelentek meg. Egy szülőnek így akár több, számára teljesen irreleváns helyszín és csoport táblázatán kellett végiggörgetnie ahhoz, hogy a keresett információt megtalálja.

Az új rendszerben az egyes városok, illetve helyszínek ellenben saját edzésrendoldalt kaptak. Ezeken belül a tanévközi és a nyári edzésrend között külön fülek segítségével lehet váltani, így két eltérő időszak információit ugyanazon logikus struktúrán belül, mégis elkülönítve jelenítjük meg.

A korábbi táblázatos megoldást egy kártyaalapú felületre cseréltük. Az információkat fontosságuk és funkciójuk szerint csoportosítottuk: a csoport, a helyszín, az edzők, az elérhetőségek, a tagdíj és az edzésidőpontok világos vizuális hierarchiában jelennek meg. A gyors tájékozódást ikonokkal és tipográfiai kiemelésekkel segítjük, ezáltal a látogatóknak a szükséges információk megtalálásához nem egy elavult táblázat sorait kell végigolvasniuk.

Technikai szempontból az edzésrendeket a Payload CMS-ben strukturált tartalomként modelleztük, az egyes helyszínekhez tartozó megfelelő oldalakat pedig a Next.js dinamikus útvonalakon hozza létre. A tanévközi és nyári programok, csoportok, időpontok, edzők, helyszínek, díjak, kapcsolattartási adatok és egyéb információk külön adatmezőkként kezelhetők. Az NYTSE munkatársai az adatokat az adminfelületen módosíthatják anélkül, hogy magát az oldalt szerkeszteniük kellene.

Next.js és Payload CMS a könnyebb tartalomkezelésért

A korábbi WordPress-rendszer helyett az új weboldal Next.js és Payload CMS használatával készült. Erre azért volt szükség, mert az NYTSE oldalán jelentős mennyiségű, egymástól eltérő szerkezetű és rendszeresen frissülő tartalom található.

Ahelyett, hogy ezeket egy page builder különálló oldalain kellene manuálisan szerkeszteni, többek között a hírek, blogbejegyzések, edzésrendek, galériák, munkatársak, gyakori kérdések, vélemények, valamint a hónap és az év tornászai számára önálló tartalomtípusokat alakítottunk ki. Így a tartalom és annak frontend-megjelenítése elkülönül egymástól: az egyesület a szükséges adatokat kezeli, a weboldal pedig  azokat automatikusan a megtervezett vizuális rendszer szerint jeleníti meg.

A választott technológia nemcsak a szerkesztést könnyíti meg – hosszú távon a rendszer bővíthetőségét is biztosítja. Egy új edzésrend, hír vagy galéria létrehozásakor például nincs szükség egy korábbi oldal lemásolására és manuális átszerkesztésére.

Saját fejlesztésű galéria a WordPress-plugin helyett

A galéria működését szintén újragondoltuk. A korábbi WordPress-oldalon ezt egy külön bővítmény biztosította, amelynek használata további külső komponens karbantartását, folyamatos frissítését és az esetleges kompatibilitási problémák kezelését is szükségessé tette.

Minden albumhoz borítókép, képkészlet, publikálási dátum és saját URL tartozhat, a frontend pedig a galériaoldalakat ezekből automatikusan építi fel. Az albumokhoz az évszámot és a bennük található képek számát is megjelenítjük, így a látogató már a megnyitás előtt több információt kap.

Ez a korábbi felület egyik további problémájára is megoldást kínált: az albumoknál nem mindig volt egyértelmű, hogy melyik év eseményeit mutatják be, és időrendi megjelenítésük sem volt maradéktalanul következetes. Az új, strukturált adatmodell lehetővé teszi a tartalmak kiszámítható és megfelelő rendezését, miközben a galéria a weboldalnak vizuálisan is szerves részévé vált.

Dicsőségfal, amely az egyesület értékeit is közvetíti

Az új weboldal egyik teljesen új funkciójaként egy Dicsőségfalat is létrehoztunk, amelyen az NYTSE a hónap és az év tornászait emelheti ki. Ugyanakkor a Dicsőségfal jelentősége egy egyszerű eredménylista létrehozásán túlmutat. Az egyesület ugyanis a gyerekeket nem kizárólag versenyeredmények alapján szeretné elismerni: a fejlődés, a kitartás és a közösségben végzett munka is lehetőséget adhat arra, hogy egy sportoló kiemelésben részesüljön. Az új funkció ezért az NYTSE közösségi szemléletét és értékrendjét is képes közvetíteni.

A hónap és az év tornászait is külön Payload-tartalomtípusként alakítottuk ki. Az adminfelületen többek között az év és a hónap mellett a sportoló neve, városa és további információi is megadhatók. Az év tornászairól emellett fénykép feltöltésére is lehetőség van, az egyesület kiemelt tornászai pedig külön vizuális hangsúlyt kaphatnak. Így egy alapvetően emberközpontú funkció mögött is strukturált és könnyen bővíthető tartalomkezelési rendszer működik.

Gyakran ismételt kérdések a szülők tájékoztatására és a keresőoptimalizálás támogatására

A korábbi weboldalon gyakori kérdéseket és válaszokat nem tartalmazott, pedig az egyesület működésével, a jelentkezéssel, az edzésekkel és a szükséges felszereléssel kapcsolatban rendszeresen számos olyan kérdés merül fel, amelyre a szülők már a kapcsolatfelvétel előtt választ kereshetnek. Ezért egy külön GYIK-oldalt hoztunk létre, amelyen minden fontos kérdés és válasz rendszerezve megtalálható. A hat leggyakoribb kérdést a főoldalon is kiemeltük, ahonnan a látogató a teljes gyűjteményhez továbbnavigálhat.

A megoldás egyszerre javítja a felhasználói élményt és csökkentheti az ismétlődő kérdésekből származó kommunikációs terhet. Emellett SEO-szempontból is értékes tartalmat biztosít, hiszen a gyakran ismételt kérdésekre adott válaszok a weboldal szöveges tartalmát olyan releváns témákkal bővítik, amelyek a felhasználók keresési szándékához kapcsolódhatnak, és ezáltal az organikus láthatóságot is támogathatják.

Az egyesület bemutatása

A Rólunk oldal kialakításakor fontosnak tartottuk, hogy az NYTSE mögött álló emberek ne egyszerű névlistaként jelenjenek meg. A csapat bemutatását ezért vizuálisan is barátságos, könnyen felfedezhető felületként terveztük meg. Az elnök és az edzők között egyszerűen lehet navigálni, az egyes szervezeti tagokról pedig részletesebb információk is olvashatók.

A weboldal más, elsősorban információközlő részein hasonló szemléletet alkalmaztunk. A Kapcsolat oldalon például a különböző elérhetőségeket logikusan csoportosítottuk, míg a Dokumentumok oldalon az egyes fájlokat leírással és a dokumentumtípus felismerését segítő ikonokkal jelenítjük meg. A cél ezeknél az oldalaknál is az volt, hogy a látogatónak ne egy rendezetlen információhalmazból kelljen tájékozódnia.

Az adó 1%-ának felajánlásához kapcsolódó információkat szintén önálló, részletes oldalon rendeztük el. Egy hosszú, egybefüggő tájékoztató helyett vizuális hierarchiát alakítottunk ki, és a folyamatot könnyen követhető lépésekre bontottuk. Az oldalon a szükséges adatok és teendők mellett külön GYIK is helyet kapott.

Hírek, blog és hosszú távon bővíthető tartalmi rendszer

Az oldalon a híreket és a blogbejegyzéseket külön tartalomtípusként kezeltük. Ez lehetőséget nyújt arra, hogy az NYTSE az egyesület aktuális eseményeiről és eredményeiről szóló híreket a hosszabb, informatív vagy szakmai jellegű blogtartalmaktól elkülönítse.

A hírek és blogbejegyzések megkülönböztetése tartalmi és keresőoptimalizálási szempontból egyaránt hasznos. A hírek többnyire az egyesület aktuális életének dokumentálását szolgálhatják, míg a blogra hosszabb távon is releváns, organikus keresési forgalmat támogató tartalmak íródhatnak.

A projekt eredménye

Az NYTSE új weboldalának fejlesztése során egy elavult WordPress-felület egyszerű újratervezése helyett a teljes digitális rendszert gondoltuk újra. A tartalmi struktúrát a különböző felhasználói igényekhez igazítottuk, a korábban nehezen áttekinthető információkat újraszerveztük, és több olyan funkciót is kialakítottunk, amely korábban egyáltalán nem állt rendelkezésre.

A Next.js frontend és Payload CMS-alapú tartalomkezelés lehetővé teszi, hogy az összetett tartalmak – az edzésrendtől és galériától kezdve a híreken és GYIK-elemeken át egészen a dicsőségfalig – strukturáltan legyenek kezelhetők. Az egyesület munkatársainak így elsősorban a tartalommal kell foglalkozniuk, miközben annak megjelenítéséről a weboldal előre kialakított egységes komponensei gondoskodnak.

Az eredmény egy olyan modern és reszponzív weboldal, amely nemcsak az NYTSE jelenlegi méretéhez és működéséhez igazodik, hanem a további bővüléshez is megfelelő technikai alapot biztosít. Mindeközben a strukturált információk, a könnyebben áttekinthető edzésrendek, az online jelentkezési lehetőségek, a dicsőségfal és az egyesület emberközpontú bemutatása a szülők, sportolók és érdeklődők számára is használhatóbb digitális felületet teremt.