Kutyafülebolt.hu webáruház készítés

A kutyafülebolt.hu webáruház tulajdonosváltáson ment keresztül, az új tulajdonos, Csinszka pedig nemcsak továbbvinni szerette volna a webshopot, hanem egy frissebb, karakteresebb és modernebb márkát akart építeni köré. A meglévő webáruház már korábban is UNAS rendszerben működött, ezért platformváltás helyett annak teljes vizuális és felhasználói megújítását javasoltuk. Hivatalos UNAS szakértőként a régebbi Taurus sablont Proteus sablonra cseréltük, majd erre építettük fel az új megjelenést és azokat az egyedi funkciókat, amelyekkel a webshop túl tud lépni a sablon alapértelmezett lehetőségein. A projekt azonban nem egyszerű webáruház-átalakítás volt: a Kutyafülebolt teljes arculatának újragondolása is ránk várt, a logótól kezdve a színvilágon és a tipográfián át egészen a webshop vizuális rendszeréig.

Csinszka különösen közel áll a labradorokhoz – neki is van egy labradorja –, ezért az egyik legfontosabb kérése az volt, hogy a márka és a logó meghatározó eleme egy labrador legyen.

Az arculat kialakításánál olyan természetes, matt árnyalatokat választottunk, amelyek egyszerre barátságosak, prémium hatásúak és jól kapcsolódnak a kutyás életérzéshez. A homok-, bézs-, barna- és zöld árnyalatokra épülő földszínek végigkísérik a teljes márkát, és természetesen a webáruház felületein is következetesen visszaköszönnek.

Ebből a koncepcióból született meg a Kutyafülebolt új logója és az arra épülő teljes vizuális világ.

Webáruházaknál teljesen bevett megoldás, hogy egy kategóriát az abban található egyik népszerű termék fotója képvisel. Ezzel önmagában nincs is probléma, ennél a projektnél azonban szerettünk volna egy lépéssel továbbmenni az arculati egységességben. A Kutyafülebolt kategóriáihoz ezért a logó vizuális világából kiindulva egyedi, rajzolt grafikai elemeket készítettünk. Ezek nem egyszerű termékfotók, hanem a márka karakteréhez igazított illusztrációk, amelyek már a kategóriaoldalak szintjén is továbbviszik az arculatot. Ennek köszönhetően a webáruház egésze sokkal egységesebbnek és tudatosabban felépítettnek hat, miközben a kategóriák vizuálisan is könnyebben megkülönböztethetők egymástól.

A tipográfiánál fontos volt, hogy a webáruház egyszerre legyen karakteres és könnyen olvasható. A címsorokhoz és a fontosabb gombokhoz a Paytone One betűtípust választottuk. Ez játékos, szerethető karaktert ad a márkának, miközben kellően hangsúlyos ahhoz, hogy meghatározza a webshop vizuális stílusát. A hosszabb szöveges tartalmakhoz a Nunito került, amely egyszerűbb, letisztultabb és kifejezetten jól olvasható digitális környezetben. A Paytone One alapértelmezetten nem érhető el az UNAS rendszerén belül, ezért egyedi megoldással emeltük be és alkalmaztuk a webáruházban, hogy az online felület valóban kövesse a kialakított arculatot.

Csinszka kifejezett kérése volt, hogy a megújult webáruházban modern, átgondolt és hosszú távon is használható megoldások jelenjenek meg. Ezt mi is fontosnak tartottuk. Nem szerettünk volna megállni annál, hogy kiválasztunk egy sablont, átállítjuk a színeket és feltöltjük a logót. Több olyan egyedi megoldást készítettünk, amelyek alapértelmezetten nem érhetők el az UNAS rendszerében, de érezhetően javítják a webshop megjelenését és használhatóságát.

Gyakori probléma a webáruházaknál, hogy egyszerre több fontos információt szeretnének kommunikálni: ingyenes szállítást, aktuális akciókat, kuponokat, hírlevél-feliratkozást vagy éppen egy szezonális ajánlatot. Ha azonban ezeket egymás alatt jelenítjük meg, már két-három üzenet is túl sok helyet foglalhat el. Mobilon pedig akár a képernyő jelentős részét is elfoglalhatják még azelőtt, hogy a vásárló egyáltalán elérné a webshop tartalmát. Ezért egy carousel rendszerű nanobart készítettünk, amely körülbelül 5 másodpercenként automatikusan vált az üzenetek között. Így akár több fontos információ is kommunikálható ugyanazon a helyen anélkül, hogy zsúfolttá válna az oldal.

A klasszikus webshopoknál a hero vagy slider rész sokszor egy látványosan elkülönülő téglalapként jelenik meg a fejléc alatt. Itt kifejezett kérés volt, hogy a hero szekció ne különálló elemnek hasson, hanem természetesen kapcsolódjon az oldal többi részéhez. Ehhez egyedi slider grafikákat terveztünk, amelyek alsó része színátmenettel kapcsolódik a következő tartalmi blokkhoz. Ennek köszönhetően a hero vizuálisan szinte beleolvad az oldalba, és sokkal egységesebb, modernebb összhatást ad.

Egy webáruház esetében a termékoldal az egyik legfontosabb felület, hiszen itt születik meg a vásárlási döntések jelentős része. Emiatt nemcsak azt néztük, hogy melyik elrendezés mutat jól, hanem azt is, hogy melyik layout ad elegendő teret a döntést segítő és bizalomteremtő elemeknek. Olyan termékoldal-elrendezést választottunk, amelyben a termékfotók, árak, információk és vásárlási lehetőségek mellett kényelmesen elférnek a vásárlói bizalmat erősítő tartalmak is. Ilyen például a Trustindex értékelések megjelenítése, amelyek közvetlenül a vásárlási folyamat során mutatják meg más ügyfelek tapasztalatait. Így a termékoldal nem egyszerűen egy termékadatlap, hanem tudatosan felépített értékesítési felület is.

Az ajándékkártyák korábban is elérhetők voltak a webáruházban, azonban vizuálisan nem igazán különültek el a többi terméktől, és a megjelenésük sem ösztönözte különösebben arra a vásárlókat, hogy valóban ajándékként gondoljanak rájuk. Ezért ezt a részt is teljesen újragondoltuk. Az ajándékkártyák természetesen megkapták a Kutyafülebolt új arculatának színeit, tipográfiáját és grafikai világát, de szerettünk volna ennél egy kicsit játékosabb és emlékezetesebb megoldást kialakítani. Mivel több különböző értékű ajándékkártya közül lehet választani, azt találtuk ki, hogy az utalvány értékét a rajta szereplő kutya mérete is vizuálisan érzékeltesse. Az alacsonyabb összegű ajándékkártyákhoz kisebb testű kutyafajtákat társítottunk, majd az érték növekedésével fokozatosan egyre nagyobb kutyák jelennek meg a grafikákon. Így például az 5 000 Ft-os ajándékkártyához egy tacskó, míg a 100 000 Ft-os ajándékkártyához egy berni pásztorkutya került. Ezzel az egyszerű, de játékos vizuális ötlettel az ajándékkártyák önálló karaktert kaptak, miközben továbbra is teljesen illeszkednek a webáruház egységes arculatába. Nemcsak egy digitális utalványt lát a vásárló, hanem egy olyan terméket, amely már a megjelenésével is azt sugallja: ezt jó érzés ajándékba adni.

Az UNAS főoldalak alsó szerkeszthető területén gyakran egyszerű, hosszú szöveges tartalmakkal találkozunk. SEO szempontból ezek hasznosak lehetnek, vizuálisan azonban könnyen megtörhetik egy szépen felépített webshop összképét. Emiatt sok webáruház inkább teljesen kihagyja ezt a területet, vagy egy külső értékelési widgetet helyez el rajta. Mi egy egyedi accordion megoldást készítettünk. Az így elhelyezett tartalom egyrészt segíti a keresőoptimalizálást és lehetőséget biztosít releváns információk elhelyezésére, másrészt nem jelenik meg egyetlen hatalmas szövegblokként a vásárló előtt. Az accordion így egyszerre SEO-funkció és dizájnelem, ráadásul vizuálisan is szépen lezárja a főoldalt közvetlenül a footer előtt.

Ügyfelünk szerette volna, ha a Kutyafülebolt több nyelven is használhatóvá válik, azonban egy webáruháznál ez lényegesen összetettebb feladat annál, mint hogy néhány oldal szövegét lefordítjuk. A teljes termékkínálatot, kategóriákat, gombokat, rendszerüzeneteket és egyéb felületi elemeket is több nyelven kellett volna kezelni, ami hagyományos módon jelentős manuális munkát igényelt volna. Léteznek erre specializált megoldások, például a Weglot, azonban egy nagyobb webáruház esetében ennek folyamatos havi költsége már jelentős tétel lehet. Ezért egy másik irányt választottunk: saját fordítási megoldást fejlesztettünk, amely a Google fordítómotorjára épül, és lehetővé teszi, hogy a webáruház tartalmai több nyelven is elérhetők legyenek anélkül, hogy minden egyes terméket és felületi elemet manuálisan kellene újra létrehozni. Ezzel egy olyan egyedi funkció került az oldalba, amely az UNAS alapmegoldásai között nem érhető el, és jelentősen megkönnyíti a webshop nemzetközi használatát.

A láblécet sem szeretjük egyszerűen néhány linkre korlátozni. Egy jól kialakított footer a webáruház fontos navigációs pontja, ezért igyekeztünk itt is minél több valóban hasznos információt elérhetővé tenni. A logó és a kapcsolati adatok mellett helyet kaptak a hasznos tudnivalók, fontos információs oldalak, népszerű kategóriák és vásárlást segítő hivatkozások is. A cél az volt, hogy a vásárló az oldal legvégére érve se egy zsákutcába jusson, hanem innen is könnyen tovább tudjon navigálni a számára releváns tartalmakhoz.

A Kutyafülebolt esetében nem egy meglévő sablon egyszerű átszínezése történt. Egy már működő UNAS webáruházból egy új arculattal, karakteres vizuális világgal és számos egyedi fejlesztéssel rendelkező modern webshopot építettünk, miközben megtartottuk az UNAS rendszer stabil hátterét. A projekt jól mutatja azt is, amit az UNAS webáruházak tervezésénél képviselünk: a sablon számunkra csak a kiindulópont. Egyedi grafikai, CSS- és fejlesztési megoldásokkal akkor is karakteres, márkához igazított webshop építhető, ha maga a webáruház egy kész rendszerre épül. Ha egy UNAS webáruházból nem egyszerűen működő, hanem valóban saját márkára szabott online értékesítési felületet szeretnél, mi pontosan ebben tudunk segíteni.