Weboldalfejlesztés és UX/UI design a Zempléni Építő és Gépészeti Kft. számára

A Zempléni Építő és Gépészeti Kft. és a projekt célja

A Zempléni Építő és Gépészeti Kft. (ZÉG) egy Sátoraljaújhelyen működő vállalkozás, amely építőipari kivitelezéssel, karbantartással, valamint gépészeti és építőanyag-kereskedelmi tevékenységekkel foglalkozik. A vállalat számára egyedi logót és vizuális arculatot is terveztünk, amelynek elemeit a weboldalak létrehozásakor is következetesen alkalmaztuk.

A ZÉG-gel való együttműködésünk során két külön weboldalt fejlesztettünk: az egyik a vállalkozás kivitelezési és karbantartási szolgáltatásait mutatja be, míg a másik építőanyag-kereskedelmi tevékenységére, termékkínálatára és kapcsolódó szolgáltatásaira összpontosít.

Bár a két weboldal eltérő üzleti célokat szolgál, tervezésük során közös alapelveket követtünk. A célunk olyan digitális felületek létrehozása volt, amelyek a vállalkozás sokrétű tevékenységét könnyen áttekinthetővé teszik, emellett a potenciális ügyfelek tájékozódását és a kapcsolatfelvételt is támogatják. Mindeközben pedig olyan technikai rendszert szerettünk volna kialakítani, amely hosszú távon is egyszerűen kezelhető és bővíthető.

Eltérő üzleti igényekre szabott professzionális weboldalak

A tervezési folyamat egyik legfontosabb feladata a két weboldal eltérő tartalmi és funkcionális igényeinek meghatározása volt. Bár mindkét felület ugyanazon vállalkozáshoz tartozik, más-más célcsoportokat szólítanak meg. A tartalmak rendszerezését és a weboldalak felépítését ezért az adott üzleti terület sajátosságaihoz igazítottuk.

A kivitelezési és karbantartási weboldal esetében a hangsúlyt a szolgáltatások egyértelmű bemutatására helyeztük. Az egyes szolgáltatásokat a kivitelezés és karbantartás területei köré szerveztük, amelyekhez önálló áttekintő oldalakat és részletes szolgáltatási aloldalakat hoztunk létre. Az oldalak felépítése ezáltal lehetővé teszi, hogy a szolgáltatások között a látogatók könnyen eligazodjanak, a számukra releváns információkat megtalálják, és közvetlenül ajánlatot kérhessenek.

Ezzel szemben a kereskedelmi weboldalon elsődleges célul a termékek és termékkategóriák átlátható rendszerezését tűztük ki. A széles építőanyag-kínálatot olyan kategóriarendszerbe szerveztük, amely segíti a különböző termékcsoportok közötti tájékozódást, miközben pedig a kínálat bővítésére is lehetőséget biztosít.

A két weboldal struktúráját tehát nem egy előre meghatározott sablon alapján terveztük meg, hanem a különböző üzleti célokhoz és felhasználói igényekhez igazítottuk. Így mindkét felületen azok a tartalmak és funkciók kerülhettek előtérbe, amelyek az adott tevékenység szempontjából a legfontosabbnak minősülnek.

Szolgáltatásoldalak és referenciák

Az építőipari szolgáltatások bemutatásában a korábbi munkák is kiemelt jelentőséggel bírnak, hiszen a megvalósult projektek a vállalkozás szakmai tapasztalatáról és felkészültségéről is képet adnak. Ennek megfelelően a ZÉG kivitelezési és karbantartási weboldalán a referenciák számára önálló felületet alakítottunk ki, ahol a vállalkozás korábbi munkái részletesen ismertethetők. Az egyes referenciákat a kapcsolódó szolgáltatásokhoz is hozzárendeltük, így az érdeklődők az átfogó szolgáltatásleírásokon túl az adott tevékenységi területhez tartozó referenciamunkákat is megismerhetik.

Az oldal mögött működő tartalomkezelő rendszert úgy alakítottuk ki, hogy a megbízó a szolgáltatásokat és referenciákat önállóan szerkeszthesse, illetve új tartalmakkal bővíthesse. Ez hosszú távon is naprakész és könnyen karbantartható weboldalt biztosít, amely a vállalkozás tevékenységeinek és projektjeinek bővülésével együtt fejleszthető.

A szolgáltatásoldalak kialakításakor a keresőoptimalizálási szempontokat is figyelembe vettük. Az egyes tevékenységekhez kapcsolódó, célzott szöveges tartalmak és egyedi metaadatok lehetőséget teremtenek a releváns keresésekben való megjelenésre, a vállalkozás online láthatóságát ezzel is támogatva. A kivitelezési és karbantartási szolgáltatások aloldalakon történő bemutatása a keresési szándékokhoz igazodó tartalmak kialakítására egyaránt lehetőséget biztosít, így a weboldal nemcsak általános, hanem konkrét építőipari szolgáltatásokra irányuló keresések esetén is releváns találatként jelenhet meg.

Dinamikus termékkatalógus és termékkategóriák kialakítása

A kereskedelmi weboldal fejlesztése során a széles építőanyag-kínálat átlátható és felhasználóbarát bemutatására szintén kiemelt figyelmet fordítottunk. Ennek érdekében egy olyan dinamikus termékkatalógust fejlesztettünk, amelyben a termékeket logikusan felépített, többszintű kategóriarendszerbe szerveztük. A különböző termékcsoportok között a fő- és alkategóriák segítségével az érdeklődők könnyebben eligazodhatnak, és a keresett építőanyagokat egyszerűbben megtalálhatják. Az egyes termékek önálló oldalakon jelennek meg, ahol a hozzájuk tartozó leírások és képek is megtekinthetők.

A termékkatalógus kialakításakor a hosszú távú bővíthetőséget és az egyszerű tartalomkezelést is szem előtt tartottuk. A Payload CMS-re épülő rendszer lehetővé teszi, hogy a vállalkozás új termékeket és termékkategóriákat hozzon létre, a meglévő információkat módosítsa, illetve szükség esetén a kínálatot átszervezze.

A termékkatalógus mellett a vállalkozás további tartalmainak bemutatására is külön felületeket készítettünk. Az egyes kereskedelmi szolgáltatások, az aktuális akciók és a letölthető kiadványok önálló oldalakon kaptak helyet, amelyek szintén a tartalomkezelő rendszeren keresztül frissíthetők. Ezzel olyan egységes, könnyen karbantartható weboldalt hoztunk létre, amely nemcsak a termékek közötti tájékozódást segíti, hanem az építőanyag-kereskedés teljes kínálatának és kapcsolódó szolgáltatásainak bemutatását is támogatja.

Ajánlatkérési és partnerprogram-jelentkezési folyamatok

A kapcsolatfelvételi lehetőségek kialakítására mindkét weboldalon külön figyelmet fordítottunk, azonban az űrlapokat az eltérő üzleti igényekhez igazítottuk. A célunk az volt, hogy az érdeklődők megkereséseiket egyszerűen és célzottan küldhessék el, a vállalkozás pedig azokat a megfelelő területen, hatékonyan kezelhesse.

A kivitelezési és karbantartási oldalon egy ajánlatkérő űrlapot készítettünk, amelyen a látogató kiválaszthatja, hogy kivitelezéssel vagy karbantartással kapcsolatban szeretne-e érdeklődni és ajánlatot kérni. A kétféle megkeresés ugyanazon felületen küldhető el, a háttérben azonban feltételes e-mail-értesítési rendszer működik: az ajánlatkérés típusától függően az értesítés a megfelelő céges e-mail címre érkezik.

A kereskedelmi weboldalon két űrlapot hoztunk létre. Az ajánlatkérő felület a termékek és szolgáltatások iránt érdeklődő látogatókat szolgálja ki, a partnerprogram-jelentkezési űrlap pedig a szakmai együttműködések kezdeményezését segíti elő.

Egyedi arculat és felhasználóközpontú UX/UI design

A két webdesign készítésekor a ZÉG számára tervezett arculati rendszerből indultunk ki, ugyanakkor annak elemeit az egyes üzleti területek sajátosságait figyelembe véve különböző grafikai megoldásokkal egészítettük ki. A kivitelezési és karbantartási weboldalon karakteres, modern megjelenésre törekedtünk, amelyet letisztult elrendezés, határozott tipográfia és az arculati színek tudatos alkalmazása határoz meg. A nyitóképernyőn és a kapcsolatfelvételre ösztönző szekciókban az arculati színekből kialakított színátmeneteket alkalmaztunk, melyek látványosan, finom kontrasztot teremtve a weboldal főbb tartalmi egységeit emelik ki.

A kereskedelmi weboldal vizuális kialakításakor a ZÉG Újház hálózathoz való tartozását is figyelembe vettük, így az Újház márka arculati elemeire építve annak jellegzetes kék, narancssárga és fehér színvilágát alkalmaztuk. A vizuális hierarchiára is figyelmet fordítottunk, hogy a termékkínálat, a szolgáltatások és az aktuális ajánlatok egyaránt jól áttekinthetők legyenek. Az alapvetően világos felületek, a tudatosan alkalmazott kontrasztok és a következetes grafikai megoldások segítségével olyan designt terveztünk, amelyben a látogatók figyelmét a hangsúlyosabb elemek természetes módon a fontosabb információkra és funkciókra irányítják.

A weboldalak UX/UI tervezésekor az arculati és esztétikai szempontok mellett a felhasználói élmény minőségét is szem előtt tartottuk. A navigációs struktúra, a tartalmi hierarchia és az interaktív elemek tervezése és fejlesztése során arra törekedtünk, hogy a látogatók a keresett információkat gyorsan és könnyedén megtalálják, továbbá a fontos funkciókhoz egyszerűen hozzáférjenek. Természetesen a reszponzív designról is gondoskodtunk, az egyes felületeket a változatos képernyőméretek sajátosságaihoz igazítottuk, így a weboldalak mobiltelefonon, táblagépen és asztali számítógépen egyaránt kényelmesen használhatók.

Blogfunkció, keresőoptimalizálás és látogatottságmérés

Mindkét weboldalon önálló blogfelületet alakítottunk ki, amelyek a vállalkozás tevékenységeihez kapcsolódó szakmai, edukatív és tájékoztató tartalmak rendszeres közzétételéhez járulnak hozzá. A blogok emellett a vállalkozás szakmai hitelességének erősítéséhez és a potenciális ügyfelek megszólításához is hozzájárulhatnak.

A weboldalak fejlesztése során a SEO-szempontokat a tartalmi struktúra és az egyes oldaltípusok kialakításába is beépítettük. A szolgáltatások, termékek, termékkategóriák és blogbejegyzések önálló, keresőbarát URL-eken érhetők el, az egyes oldalakhoz pedig releváns metaadatok rendelhetők. Ez lehetőséget teremt arra, hogy a keresőmotorok találatai között a különféle témákhoz és keresési szándékokhoz igazodó tartalmak önállóan jelenjenek meg. A blogfunkciók révén a weboldalak tartalma később új, célzott kulcsszavakra épülő cikkekkel is bővíthető, a hosszú távú organikus láthatóság növelését támogatva.

A weboldalakhoz Google Analytics- és Google Tag Manager-integrációt is készítettünk, amelyek a látogatottság, a felhasználói aktivitás és a marketingtevékenységek eredményességének mérését végzik. Az így gyűjthető adatok segítségével a vállalkozás pontosabb képet kaphat a látogatói viselkedésről, a legnépszerűbb tartalmakról és a weboldalak teljesítményéről, ami a további fejlesztések és marketingdöntések tervezését is támogathatja.

Modern weboldalfejlesztés Next.js és Payload CMS alapokon

Az egyes weboldalak fejlesztéséhez modern, hosszú távon fenntartható technológiai megoldásokat választottunk. Mindkét felület Next.js keretrendszerrel és Payload CMS tartalomkezelő rendszerrel készült, amelyek a gyors, reszponzív és rugalmasan bővíthető weboldalak kialakításához megfelelő alapot szolgáltatnak. Bár a két projekt eltérő üzleti igényeket szolgál ki, technológiai felépítésüket azonos fejlesztési alapelvek mentén terveztük meg.

A tartalomkezelő rendszereket mindkét weboldal esetében a vállalkozási terület sajátosságaihoz igazítottuk. Az egyedi tartalomtípusok és szerkesztési felületek segítségével a ZÉG munkatársai a meglévő információkat fejlesztői közreműködés nélkül módosíthatják, illetve a weboldalakat új tartalmakkal is bővíthetik.

A két weboldal egymástól független rendszerként működik, így a tartalmak kezelése és a későbbi fejlesztések az egyes üzleti területek igényeihez igazíthatók. A korszerű technológiai alapok és az egyedileg kialakított tartalomkezelési megoldások együttesen biztosítják, hogy a weboldalak hosszú távon is könnyen karbantarthatók és továbbfejleszthetők maradjanak.

A projekt eredménye

A Zempléni Építő és Gépészeti Kft. számára korszerű webfejlesztési technológiák alkalmazásával két modern, reszponzív és keresőoptimalizált weboldalt készítettünk. A szintén kialakított arculati rendszer következetes alkalmazásával pedig egységes online jelenlétet teremtettünk, miközben a két felület struktúráját, tartalmát és funkcióit az adott célcsoportok sajátosságaihoz igazítottuk.

A ZÉG kivitelezési és karbantartási weboldala a vállalkozás építőipari szolgáltatásainak és referenciamunkáinak ismertetését, valamint az érdeklődők internetes ajánlatkérését támogatja. Az Újház ZÉG kereskedelmi weboldalon egy átlátható, többszintű termékkatalógust, a kereskedelmi tevékenységhez kapcsolódó tartalmi felületeket és az üzleti együttműködéseket támogató funkciókat alakítottunk ki. Mindkét weboldalhoz egyedi tartalomkezelő rendszert készítettünk, amely a meglévő információk frissítését és az új tartalmak közzétételét egyaránt egyszerűvé teszi.

Összességében a két projekt eredményeként egységes, mégis az eltérő üzleti igényekhez igazodó digitális jelenlétet alakítottunk ki. A fejlesztett weboldalak a vállalkozás tevékenységeit professzionálisan     kommunikálják, az ügyfélszerzést hatékonyan támogatják, mindemellett pedig a későbbi tartalmi és funkcionális bővítésekhez is stabil alapot biztosítanak.