GHV Trading: Nový web se sjednoceným katalogem a e-shopem

2023: Redesign a tvorba nového webu

Na začátku redesignu jsme se nejprve pustili do tvorby nové vizuální identity. To nám pootevřelo dveře a uvolnilo ruce v dalších přípravách webu. Během toho jsme navrhli strukturu připravovaného e-shopu tak, aby byla systematická a zároveň užitečná pro jakéhokoliv návštěvníka. Na těchto základech jsme připravili grafický návrh, který kladl důraz na moderní design, funkčnost a uživatelskou přívětivost. Důležitým technickým krokem v procesu bylo propojení obsahu z původního webu a napojení na stávající informační systémy. Tím jsme dokázali vytvořit nejen vizuálně atraktivní a použitelný nový e-shop pro zákazníky, ale také vysoce efektivní pro samotné správce webu.

Základem se stalo nové logo

Možná trochu neočekávaně jsme spolupráci s GHV Trading započali tvorbou nového loga a manuálu k němu. Po úvodních konzultacích se totiž ve firmě interně shodli, že by uvítali kompletně novou vizuální identitu (a snad i s lehkým posunem barevnosti). A s tím se kromě jiného otevřely nové možnosti, jak redesign webu uchopit a co s ním udělat.

Abychom stvořili skutečně nové, moderní a nadčasové logo a nezůstali ohraničení ve stávajícím vizuálu, uklidili jsme to původní, v té době už zastaralé, do sekce s historií o firmě. A pak už jsme navrhovali, testovali, upravovali podle připomínek a celý proces iterovali.

Nakonec nám z toho vzešel nový jednotný vizuální styl. Jeho základními prvky se staly:

• symbol písmena G s bleskem na jeho levé hraně
• logotyp GHV Trading se čtyřbarevným přechodem
• barevná paleta ze sluneční žluté, trávníkově zelené, modrozelené cyanové a sytě modré naznačující hlavní kategorie produktů

Přímočará struktura bez zbytečného vnořování

V mezičase se už tvořil návrh nové struktury webu a konkrétnější specifikace pro grafický design.

Do té jsme nejprve promítli zaužívané navigační schéma pro e-shopy, které umožňuje snadné a rychlé procházení produktů, jejich vzájemné porovnávání, pohodlné hledání v katalogu a několikakrokový košík. Takovýto koncept jsme následně přizpůsobili primárním produktovým kategoriím, které vzešly z konzultací s klientem.

Zároveň jsme však do struktury vnesli co největší přímočarost, abychom zamezili zbytečnému noření produktů (nebo dokonce variant produktů) do několika podkategorií a kategorií. Namísto toho jsme raději přistoupili k jednoduší a smysluplné kategorizaci, která bude využívat promyšlenou a poměrně rozsáhlou filtraci.

V první vlně jsme si tedy připravili jednoduché e-shopové navigační schéma se základními kategoriemi. To jsme dále doplnili o hlavní komponenty navigace zvyšující důvěryhodnost firmy a budující vztah mezi ní a zákazníky, např. stránku s představením společnosti nebo s rychlým kontaktem na odborníka.

Nakonec jsme novou strukturu webu spolu s jeho specifikací, včetně požadavků a cílů klienta, informací o cílové skupině, SEO pohledu a dalších parametrů, předali ke zpracování grafikovi.

Technicky laděný web v duchu vizuální identity

Do grafického návrhu jsme zohlednili rovnou několik kvalit:

• Moderní a atraktivní vzhled: ve vizuálním vzhledu jsme promítli současné trendy grafického webdesignu, který upoutá zákazníka, ale zároveň vypadá atraktivně a nadčasově
• Funkčnost a intuitivní rozhraní: zaměřili jsme se na co největší uživatelskou přívětivost, proto jsme zákazníkům na pár kliků umožnili filtrovat v kategoriích a pohodlně procházet různé varianty produktů tak, aby snadno a rychle, během pár sekund, našli to, co potřebují
• Jednoduchost a přehlednost: snažili jsme se o co nejmenší kognitivního zatížení, tedy aby zákazník intuitivně, bezpečně a s maximální jistotou vědel, co, kde a jak najde
• Vyvážené technické vyznění: grafický vzhled odpovídá technickému stylu vycházejícímu z nabízených produktů, který působí profesionálně a důvěryhodně
• V duchu vizuální identity: všechny barvy, fonty a grafické prvky jsou navrženy v souladu s novou vizuální identitou značky, což posiluje její celkový dojem na návštěvníka

Napojení na původní web a současný informační systém

Jednou z největších výzev při tvorbě nového e-shopu, především z hlediska kódování a programování, bylo:

• na jedné straně napojení s původním webem, jejich URL adresami a klíčovými kategoriemi (aby se nenarušila historie daných stránek a jejich hodnota a relevance ve výsledcích vyhledávání)
• na druhé straně napojení se informačním softwarem (ve kterém jsou denně a různými lidmi spravovány tisíce produktů a desetitisíce variant produktů).

Technicky náročný úkol se nám ale podařilo vyřešit. Starý web jsme kompletně, v podstatě 1 ku 1, přenesli se všemi texty i obrázky, s produkty a variantami produktů, s URL adresami hlavních stránek i kategorií, s články, novinkami chystanými událostmi a pobočkami spolupracujících firem.

Navíc se celý systém pravidelně aktualizuje (např. co se týče skladové dostupnosti nebo ceně) na základě dat odesílaných z interního informačního systému. Díky tomu klientovi odpadá zdlouhavá a duplikující se administrativní práce.

Namísto toho mohou správci jednotlivých sekcí zaměřit své síly na důležitější firemní aktivity, nebo nám i v budoucnu pomáhat s rozvojem webu, např. tvorbou podkladů ke psaní nebo kontrole textů.

2024: Implementace nových funkcí a a optimalizace synchronizačních procesů

Hned v následujícím roce jsme nezaháleli, protože obzvlášť na novém webu je vždy co aktualizovat, dolaďovat, optimalizovat a zkrátka vylepšovat.

Vylepšení e-shopových funkcí a doplnění možností v košíku

Mezi nejviditelnější úpravy ze zákazníckého hlediska patří tzv. produktové soustavy. Produktová sestava je kombinace zpravidla dvou (ale i několika) produktů, které si zákazníci často pořizují dohromady nebo vyžadují dokoupení dalších služeb.

Jak to funguje? Pokud si uživatel přidá do košíku jeden produkt (např. transformátor proudu), objeví se pop-up okno. V něm se nabídne zákazníkovi, zda chce do košíku přidat i další doplňky (např. cejchování a plombovací krytky), nebo zda si přeje pořídit skutečně jen pouze vybrané zařízení bez jakýchkoli dalších produktů nebo služeb.

Výhody takových produktových sestav poznají jak běžní uživatelé GHV Trading, tak i samotní administrátoři webu:

• Zákazníkům lze nabídnout bližší propojení dvou produktů, které k sobě téměř bezvýhradně patří a k jejich plné funkčnosti je potřeba koupit oba.
• Správcům webu umožní lépe spojovat produkty, které by mohly být pro zákazníky užitečné.

Velmi speciální úpravou je automatická změna DPH podle toho, zda je odběratel z Česka nebo ze Slovenska. Systém tak dynamicky přepočítává a upravuje celkovou hodnotu objednávky na základě místa odběru. Jde o specifické řešení, protože naprostá většina e-shopů buď prodává pouze v ČR (a účtuje české DPH), nebo pouze v SR (a účtuje slovenské DPH).

Kromě toho jsme do druhého kroku Košíku doplnili možnost zaslání na výdejní místo DPD (DPD Pickup Point) pro Česko i Slovensko. Zákazníkům se tak rozšířily možnosti dopravy a doručení.

Optimalizace synchronizace se systémem ABRA a antispam

Podívali jsme se také na vyladění interních procesů napojených na informační systém ABRA. Optimalizovali jsme tedy synchronizaci s naším redakčním systémem, zaměřili jsme se především na snížení počtu požadavků, zvýšení rychlosti a obecně zmenšení zátěže. Výsledkem je až o 50 % rychlejší načítání dat a menší zatížení serveru.

Současně jsme implementovali novou, rozšířenou antispamovou ochranu pro veškeré webové formuláře, včetně Košíku jakožto hlavního objednávkového formuláře e-shopu.