Weboldal redesign esettanulmány az Antikceg.hu-nál

Weboldal redesign részletes esettanulmány: hogyan javítottunk egy régi honlap SEO‑teljesítményén és felhasználói élményén. Tapasztalataink, lépések a weboldal átalakításról.

Az Antikceg.hu megújulása során egy elavult, technikai hibákkal küzdő weboldalt cseréltünk le egy egyedi grafikával készült, Google-nak is megfelelő és konverzióra optimalizált rendszerre. A projekt fókusza a bizalomépítés és a PPC hirdetési hatékonyság visszaállítása volt. Mivel az eredeti weboldal diviben készült, ezért külön kérés volt, hogy az új weboldal is abban készüljön.

Olvasási idő: 15 perc

TARTALOMJEGYZÉK

01. Arculatváltás / redesign

02. A kritikus hiba feltárása

03. Hogyan építettem újra az Antikceg.hu rendszerét

04. Arculatváltás és pszichológia

05. Logó

06. Gyakran Ismételt Kérdések

Arculatváltás és Redesign

Hogyan térképeztük fel a hibákat a weboldalon?

Dorinával először a Wafe konzultáción találkoztunk. Azért keresett meg, mert a korábban jól működő hirdetési módszereik hosszú hónapok óta már nem hozták a megszokott eredményeket.

A WAFE egy mélyreható, stratégiai szemléletű weboldal elemző szolgáltatásom. Nem csupán a designra fókuszál, hanem teljes körűen átvilágítja a weboldalt. (Ára 40.000 Ft)

Mikre fókuszál pl:

• struktúra
• felépítés
• kommunikáció
• felhasználói útvonal
• és még sok sok egyéb látható, és láthatatlan részletre, amelyek jelentősen befolyásolhatják a teljesítményt 🙂

Miért volt elkerülhetetlen az Antikceg.hu weboldal redesignja?

• Visszaeső hirdetési hatékonyság: A PPC (Google Ads) kampányok nem érték el a várt eredményt, és a konverzió (vásárlói megkeresés) egyre jobban elmaradt.
  
  Bár a látogatók megérkeztek az oldalra, a bizalomépítő elemek hiánya és a zavaros navigáció miatt a tényleges megkeresések (konverziók) rohamosan csökkentek.
  
  Az ügyfél azt tapasztalta, hogy egyre többet költ marketingre, miközben az eredmények egyre gyengébbek.
  
• Élesedő piaci verseny: Az antikvitás piaca telített. Egy elavult, sablonos oldal már nem tudta megkülönböztetni a céget a konkurenciától. A régi arculat nem megfelelően pozicionálta a céget a piacon.
• Reszponzivitási probléma.
• Súlyos, rejtett hiba derült ki, amely komoly meglepetést okozott az ügyfélnek.

De nem is csigáznám tovább a kíváncsiságodat, mert tudom, hogy a kritikus hiba kifejezés rögtön felkeltette az érdeklődésedet.

Mi volt a kritikus technikai hiba: A Google Consent Mode v2 hiánya.

Sajnos a régi weboldal nem felelt meg a Google legújabb, 2024-es technikai előírásainak.

• A probléma: megfelelő süti-kezelés (Consent Mode v2) nélkül a Google Ads algoritmusai nem kaptak pontos adatokat a látogatók viselkedéséről.
• A következmény: a hirdetési rendszer „megvakult”. Sajnos ez egy olyan veszélyforrás volt, amit az ügyfél a kód ismerete nélkül nem láthatott, mégis ezen bukott el a hirdetései sikere.

Hogyan befolyásolja a Consent Mode v2 a hirdetési kampányokat?

AConsent Mode v2 a Google adatvédelmi elvárása. A Consent mód kezeli, hogy a felhasználó hozzájárult-e a sütik (cookies) használatához. Ha hiányzik, a hirdetési rendszerek (Google Ads) nem tudják pontosan mérni a konverziókat és a remarketing listák sem épülnek.

Megfelelő beállítással viszont az algoritmus modellezni tudja az elveszett adatokat, így a hirdetéseid továbbra is hatékonyak és szabályosak maradnak.

Sokan azt gondolják, hogy a süti tájékoztató egy felugró ablak amire csak rákattintanak. Egy átlagos felhasználó nem tudja, hogy e mögött az ablak mögött folyamatok is vannak.

A valóságban a süti banner nem egy sima „pop-up”. Egy szabályos, modern megoldás mögött bonyolult technikai folyamatok zajlanak a háttérben. Például itt dől el az is, hogy a Google mérőkódjai elindulhatnak-e vagy sem.

A régi weboldal fő problémája az volt, hogy

• csak a látszat volt meg: az előző készítő egy egyszerű felugró ablakot használt, amely nem tartalmazott valódi választási lehetőségeket vagy részletes beállításokat,
• hiányzó minősítés: a Google ma már szigorúan listázza, melyik süti-kezelő (CMP – Consent Management Platform) plugineket fogadja el hitelesnek.

Mi történik abban az esetben, ha nem felelünk meg a Google előírásainak?

• adatvesztés és „vakság” (Measurement Loss). A Google Ads és a Google Analytics 4 (GA4) egyszerűen nem fogja látni a konverziókat. Nem fogod tudni, hogy ki vásárolt, ki töltött ki űrlapot, vagy melyik hirdetésed hozott valós üzletet.
  
  Az adatok 30-60%-a egyszerűen eltűnik a rendszerből.
• A hirdetési algoritmus összeomlása. A modern hirdetések (pl. Performance Max kampányok) mesterséges intelligenciára épülnek. Ha az AI nem kap adatot arról, hogy ki a jó ügyfél, nem tud tanulni.

Mi a következménye?
A rendszer elkezdi „találomra” megjeleníteni a hirdetéseidet, ami drasztikusan megemeli a kattintási költségeket (CPC), miközben a megtérülés (ROAS) zuhanni fog.

• Kizárás a remarketingből. Ha nincs szabályos Consent Mode v2 beállításod, nem tudsz remarketing listákat építeni. Vagyis nem fogod tudni elérni azokat a látogatókat, akik már jártak az oldaladon, de még nem kértek ajánlatot. Ez az egyik leghatékonyabb hirdetési forma elvesztését jelenti.

Milyen komolyabb baj lehet még egy rossz süti tájékoztatóból?

Ha egy weboldal (mint pl az Antikceg.hu) hirdet, de nincs rajta szabályos Consent Mode v2, a Google a következő lépcsőzetes szankciókat alkalmazza:

• Mérés megvonás: 2024 márciusa óta a Google egyszerűen nem rögzíti a konverziókat és nem engedi a remarketing listák építését az EEA (Európai Gazdasági Térség) területén, ha nem érkezik tőled szabályos hozzájárulási jel.
• Hirdetési korlátozás: azoknál a fiókoknál, ahol sorozatosan hiányoznak a hozzájárulási jelek, a Google elkezdi korlátozni a hirdetések megjelenítését, vagy teljesen letiltja a személyre szabott hirdetéseket.
• Fiók felfüggesztés: a Google hivatalos irányelvei (EU User Consent Policy) kimondják, hogy a tartós meg nem felelés a Google Ads fiók teljes felfüggesztéséhez vezethet. Ez az Antikceg.hu esetében azt jelentette volna, hogy a cég teljesen eltűnik a keresőből, és nem is tudna hirdetni, amíg a hibát nem javítják.

Miután sikeresen túljutottunk ezen a számukra kifejezetten stresszes szakaszon, szerződést kötöttünk Dorinával azért, hogy javítsam a feltárt hibákat, és egy teljesen újragondolt, stratégiai alapokra épített weboldalt készítsek számukra, amely valóban megkülönbözteti őket a konkurenciától.

Íme az Antikceg.hu redesign előtti hero képe

Hogyan építettem újra az Antikceg.hu rendszerét?

Stratégiai UX és konverziós struktúra

Az alábbi feladataim voltak a redesign folyamatában:

• konkurencia elemzés
• navigáció újratervezése
• felhasználói útvonal egyszerűsítése
• SEO barát weboldal
• CTA gombok tudatos elhelyezése
• bizalomépítő elemek kialakítása (szakmai hitelesség, folyamatleírás)
• mobilra optimalizálás
• arculatváltás
• animált hero
• egyedi grafikai elemek
• levelezés átalakítása a régi gmailes e-mai cím miatt
• jogilag tiszta képek keresése

A közös meetingek során arról beszéltünk:

• milyen érzéssel érkezik ma egy érdeklődő az oldalra
• milyen bizonytalanságok merülhetnek fel benne
• és milyen érzéssel kellene távoznia.

Antikeg.hu moodboard

Arculatváltás

Elkészítettem az ügyfél számára egy moodboard-ot, amelyben megmutattam, hogy milyen vizuális irányba halad majd a weboldal.
Végül egy zöld-arany-barna árnyalatot álmodtunk meg.

Miért ezek a színek lettek?

Pszichológia a színek mögött: Miért a zöld, az arany és a barna?

Az antikvitás világa a bizalomról, a történelemről és az érték megőrzésről szól. Amikor az Antikceg.hu új színpalettáját terveztem, olyan kombinációt kerestem, amely azonnal pozicionálja a céget. Amely metmutatja azt, hogy nem egy egyszerű „piaci árusról”, hanem egy szakértő, értékálló vállalkozásról van szó.

• Mélyzöld: stabilitás és elegancia színe. A zöld ezen árnyalata nyugalmat és biztonságot sugároz. A pszichológiában a megbízhaósághoz és a tartóssághoz kapcsolódik.
  
  Az antik piacon ez kulcsfontosságú, hiszen az ügyfeleknek érezniük kell, hogy értékeik jó kezekben vannak.
  
• Arany: a nemesfémek és a műkincsek értéke. Az arany használata ebben a kontextusban nem a hivalkodásról szól. Elsődleges célja, hogy vizuálisan is utaljon a nemesfémekre (aranytárgyak, ékszerek, pénzérmék) és a műkincsek belső értékére.
• Barna: a patinás múlt és hitelesség. A barna a nemes faanyagok, a régi bútorok és a történelem színe. Természetességet és megbízhatóságot kölcsönöz a designnak, segítve a látogatót abban, hogy érzelmileg is kapcsolódjon az antik tárgyak patinájához.

Miért szerettem ezen weboldalon dolgozni?

A designban és a szövegírásban teljesen szabad kezet kaptam.

Szövegírás:

Természetesen az alapokat részletesen átbeszéltük, hiszen sok volt a speciális tartalom. Amiért igazán szeretem a webdesignermunkát, az az, hogy mindig van lehetőség mélyebbre ásni magam egy-egy témában. Az antik tárgyak világa engem is hamar magával ragadott.

Bár egy aranyóra pontos árát továbbra sem tudnám megmondani :), mégis betekintést nyerhettem olyan információkba, hogy mekkora szakértelemre van ahhoz szükség, hogy meg tudjuk határozni egy antik tárgyak értékét.

A weboldal kialakításakor már tisztázódott, hogy a hirdetésüket másik ügynökség fogja átvenni, a régi helyett. Szuper lehetőséget kaptam így arra, hogy hacsak külsősként is, de a Klikkmarketinggel együtt dolgozhattam az ügyfél SEOján. A későbbi terv ugyanis az volt, hogy az Antikceg.hu PPC hirdetést fog futtatni.

Egyedi arculat és pozicionálás

• sablon megoldások helyett egyedi grafika készült,, teljesen az antikvitásra szabva,
• antikvitás hangulathoz illeszkedő vizuális világ

A személyes kedvenceim az egyedi ikonok lettek.
Az ikon választásnál mindig fontos, hogy az adott oldal elemeivel harmonizáljon. Az antikvitás esetében nagyon nehezen találtam megfelelő ikont, így kénytelen voltam én elkészíteni.

De nem bántam meg, imádtam minden percét.
Remélem neked is tetszenek:

Logó

Az eredeti logó meglehetősen sablonos volt, ezért egy új, letisztultabb az antikvitás hangulatát jobban tükröző változat készült.

A fekete-fehér logóterv az egyik legfontosabb alaplépés a tervezés során. Ha egy logó színek nélkül is jól működik, akkor biztos lehetsz benne, hogy formában, arányban és felismerhetőségben is erős.

Ez nemcsak a letisztult megjelenés miatt fontos, hanem azért is, mert előfordulhat, hogy más felületen (például nyomtatásnál vagy egyszerűbb megjelenítéseknél) színek nélkül használjuk.

A tervezés során az is fontos szempont volt, hogy a későbbiekben akár önállóan is használható legyen az „A” betű, ezért az jobban hangsúlyos lett.

A logó mellé minden esetben készítek mockupokat is, hogy könnyebb legyen elképzelned a végeredményt. Ezeken a látványterveken a logó már valós helyzetekben jelenik meg – például névjegyen, weboldalon vagy akár csomagoláson.

Így nem csak egy önálló grafikát látsz, hanem azt is, hogyan működik a saját márkád részeként. Ez segít abban, hogy magabiztosabban tudj dönteni, és valóban átérezd a végeredményt.

Íme a mockup látványterv, ha a jobb képet megnézed, ott már egy AI val generált képet látsz:)

Ma már a látványtervekben gyakran AI-val generált fotókat is használok. Sajnos sokan még mindig rosszul nyúlnak a mesterséges képalkotó eszközökhöz, pedig óriási lehetőség van benne, ha tudatosan használjuk.

Néhány évvel ezelőtt a mockupok világa jóval korlátozottabb volt: nehéz volt igazán minőségi, ráadásul specifikus helyzetekhez illő képeket találni. Ha pedig még egyedire is kellett szabni őket, az rengeteg időt vitt el.

Pedig a látványterv kulcsfontosságú, hiszen segít abban, hogy az ügyfél ne csak elképzelje, hanem valóban lássa is, hogyan működik majd a megjelenése a saját környezetében.

Ma viszont az AI-nak köszönhetően sokkal gyorsabban tudok olyan egyedi képeket létrehozni, amelyek tökéletesen illeszkednek az adott projekthez. Ez nemcsak időt spórol mindkettőnk számára, hanem lehetőséget ad arra is, hogy még pontosabban, még személyre szabottabban mutassam meg a terveket.

TECHNIKAI INFORMÁCIÓ:

Miért fontos, hogy ne gmail címet használjunk egy weboldalon?

A bizalomépítés egyik fontos eleme a professzionális megjelenés, amelybe a céges e-mail cím is beletartozik. Egy igényesebb márkánál a @gmail.com-os végződés könnyen kelthet kevésbé kiforrott benyomást, hiszen inkább a személyes használathoz kötődik.

A projekt során ezért a korábbi címet egy saját domain alapú (pl. info@antikceg.hu) e-mail rendszerre cseréltük, ami egységesebb és hitelesebb képet ad a kommunikációban, és finoman erősíti a cég iránti bizalmat.

Már élő weboldalt hogyan lehet redesignolni?

Mivel egy élő weboldalt kellett átalakítani, így a terveket egy technikai domainen végeztem el.
Miután elkészült a weboldal tartalma és dizájnja, és Dorináék mindent jóváhagytak, a végszámla kiállítását követően a weboldal átkerült a végleges helyére.

ÖSSZEGZÉS:

A weboldal elkészítése gördülékenyen zajlott.
Dorina és párja nagyon elégedett volt a kész honlappal, szerintük teljesen újjászületett a vállalkozásuk az új weboldal által.

Lehet, hogy már van weboldalad, csak nem hozza azt, amit szeretnél.
Az is lehet, hogy még csak most körvonalazódik benned az egész.

Bármelyiknél tartasz, egy jól átgondolt alapokra épített weboldal sokkal többet tud adni számodra, mint gondolnád.

Beszéljük át egy kötetlen 20 perces beszélgetésben, miben tudok segíteni neked.

GYAKRAN ISMÉTELT KÉRDÉSEK

Mi az a redesign?

A redesign nem pusztán vizuális frissítés, hanem a weboldal átgondolt újratervezése. Nem csak a színek és betűtípusok változnak, hanem a teljes felépítés, tartalmi struktúra és felhasználói útvonal is.

Célja, hogy a weboldal logikusan, átláthatóan és üzleti szempontból hatékonyan működjön. Ide tartozik a technikai háttér, a mobilos megjelenés és a konverziót támogató elemek optimalizálása is.

Miért érdemes egyedi grafikát készíteni a weboldalhoz?

Az egyedi design kiemeli a vállalkozást a versenytársak közül, a látogatókban bizalmat ébreszt, és vizuálisan is a cég szakértelmét közvetíti.

Mennyi idő alatt készül el egy hasonló redesign?

A projekt méretétől és komplexitásától függően általában 4–8 hét, a tervezéstől a végleges élesítésig.

Mit jelent a reszponzivitási hiba?

Amikor nem jelenik meg minden képernyő felületen megfelelően egy weboldal. Pl egymásra csúsznak a tartalmak, túl kicsi a szöveg a kijelzőn, túl közel vannak a gombok, és nem tudunk az ujjunkkal jól navigálni. A hamburger menü nem jól van beállítva, a képek eltorzulnak.

Hogyan tesztelhető a weboldal reszponzivitása?

• Amikor egy weboldal képernyőjén vagy asztali gépen, egér jobb kattintással eljuthatsz a vizsgálat menüig.
• vagy: F12 billentyű -> „Device Toolbar” ikon (itt kiválaszthatsz konkrét mobil típusokat, pl. iPhone, asztali méret, tábla méret).

Mit jelent a SEO barát weboldal?

Egy weboldal újratervezésében (redesign) a SEO (keresőoptimalizálás) az egyik legkritikusabb pont. Sokan elkövetik azt a hibát, hogy csak a látványra figyelnek, közben pedig „elássák” az oldalt a Google találati listáján.

A SEO-barát (Search Engine Friendly) weboldal olyan felépítésű, amit a keresőmotorok (pl. Google) könnyen tudnak „olvasni”, értelmezni és rangsorolni.

Mit jelent a gyakorlatban a jó seozott címsor?

A Google imádja a rendet. Ha a címsorok (H-tagek) nincsenek megfelelően beállítva, az olyan, mintha egy könyvben nem lennének fejezetcímek.

H1 (a főcím): Ebből oldalanként szigorúan csak egy lehet, egy adott oldalon. Ez az oldal „címe”, ami megmondja a legfőbb témát.

H2, H3, H4… (alcímek): Ezek teremtenek logikai sorrendet. Segítenek a Google-nek (és az olvasónak is) gyorsan átlátni a fontosabb pontokat. Ha össze-vissza használjuk őket (például csak azért választunk egy H3-at, mert tetszik a betűmérete), a keresőmotor összezavarodik, és ez nem tesz jót a Google rangsorunknak.

Miért fontos a SEO, ha később hirdetni (PPC) is szeretnék?

Sokan azt gondolják, hogy ha fizetnek a hirdetésekért (PPC), akkor a weboldal technikai állapota vagy a keresőoptimalizálás (SEO) már nem is számít. Ez azonban óriási tévhit! Az Antikceg.hu esetében is azért dolgozunk közösen a Klikkmarketinggel, mert a két terület felerősíti egymást.

Hogyan segíti a jó SEO a hirdetéseidet?

• Alacsonyabb hirdetési költségek. A Google pontozza a hirdetéseidhez tartozó érkezési oldalakat (Landing page). Ha az oldalad SEO-szempontból rendben van (gyors, releváns a tartalma, jók a címsorok), magasabb „minőségi pontszámot” kapsz.
  
  Ez pedig azt jelenti, hogy kevesebbet kell fizetned egy-egy kattintásért, mint a konkurenciádnak.
  
• Jobb konverzió. Hiába hozunk oda egy látogatót hirdetéssel, ha az oldal lassú vagy nem találja meg rajta az információt (például rossz a hierarchia), elég gyorsan elveszíti a türelmét, és elhagyja az oldalt. A SEO-barát felépítés segít abban, hogy a hirdetésre költött forintok valódi megkeresésekké váljanak.
• Hitelesség és bizalom:.Az antik tárgyak világa a bizalomról szól. Ha egy ügyfél látja a hirdetésedet, de később organikus (nem fizetett) találatként is szembejön vele az oldalad a Google-ben, az szakértelmet és stabilitást sugall.

Gyakorlati tanácsom: A redesign során úgy építettük fel a struktúrát, hogy az később a PPC kampányok kiszolgálására is tökéletes legyen. Ezért fontos, hogy a címsorok (H1, H2) és a tartalom összhangban legyenek azokkal a kulcsszavakkal, amikre később hirdetni fogunk.

Milyen jelek utalnak arra, hogy egy weboldal redesignra szorul?

Nem csak az elavult külső a jel. Figyelmeztető jel, ha a látogatók gyorsan elhagyják az oldalt (magas visszafordulási arány), mert nem találják az információt, vagy ha a weboldal lassan tölt be.

Szintén időszerű a váltás, ha mobilon szétcsúszik a tartalom, vagy ha a konkurencia funkciókban (pl. online értékbecslés kérése) már elhúzott melletted. Akkor is célszerű ha a design elavult, vagy nem a célközönséget szólítja meg.

Milyen előnyei vannak az egyedi webdesignnak az antikvitás piacon?

Az antik tárgyak eladása a bizalomra és az esztétikára épül. Egy sablonos weboldal olcsó hatást kelthet, míg az egyedi design tükrözi a tárgyak különlegességét és az eladó szakértelmét. Segít kiemelni a részletgazdag fotókat, és olyan prémium élményt nyújt, amely meggyőzi a gyűjtőket: itt valódi értékre és hozzáértésre találnak.

Mit jelent egy hirdetés algoritmusra gyakorolt hatása?

A modern hirdetési rendszerek, különösen a Performance Max (PMax) kampányok, nagymértékben támaszkodnak a gépi tanulásra és az adatokra. Ha az AI nem kap elegendő és pontos adatot a felhasználói viselkedésről (a hozzájárulás hiánya miatt), akkor nem tud hatékonyan optimalizálni. Ez valóban vezethet:

• Adatvesztéshez (Measurement Loss): A konverziók 30-60%-a eltűnhet a rendszerből, ami torzítja a kampányok teljesítményét
• A hirdetési algoritmus hatékonyságának romlásához: Az AI „megvakul”, és találomra jeleníti meg a hirdetéseket, ami növeli a kattintási költségeket (CPC) és csökkenti a megtérülést (ROAS)
• Remarketing kizáráshoz: A szabályos Consent Mode v2 hiányában nem építhetők remarketing listák, ami az egyik leghatékonyabb hirdetési forma elvesztését jelenti

Mi az a ROAS?

A ROAS (Return On Ad Spend) azt mutatja meg, hogy a hirdetésekre elköltött pénzed mennyi bevételt hoz vissza.
bevétel / hirdetési költség

Hogyan érdemes értelmezni:

• 1 alatt → veszteséges
• 1–3 → kérdéses (költségektől függ)
• 3–5 → általában már jó
• 5+ → kifejezetten erős

Fontos:
A ROAS csak a bevételt nézi, nem a profitot. A különböző értékek hatásossága iparág függő is.

Mit jelent a „jogilag tiszta kép”

A „jogilag tiszta képek” olyan fotókat jelentenek, amelyek felhasználása engedélyezett, és nem sértik mások szerzői jogait vagy személyiségi jogait.

Ez azt jelenti, hogy a képek vagy saját készítésűek, vagy megfelelő licenccel (pl. vásárolt stock fotók) rendelkeznek, így biztonságosan használhatók weboldalon és marketing anyagokban is.

Egy antikvitással foglalkozó cég esetében ez különösen fontos volt, hiszen a készlet folyamatosan változik, sok esetben gyűjtőknek történik a beszerzés, így nincs mindig lehetőség minden tárgyat külön lefotózni.

Emiatt kiemelt figyelmet kapott, hogy a felhasznált képek ne csak esztétikailag illeszkedjenek a márkához, hanem jogilag is rendben legyenek, így hosszú távon is biztonságosan használhatók maradjanak.