O klientovi
GHV Trading je prodejce a dodavatel rozmanitého sortimentu pro jakékoliv práce s elektronikou. Zaměřuje se především na měřicí testovací přístroje (vhodné k provoznímu měření, elektro revizím a diagnostice elektrických systémů) a komponenty a měřicí techniku pro rozvadeče. Díky svým nezpochybnitelným odborným znalostem a zkušenostem, dnes už více než 30leté historii a jedné z nejširších nabídek na trhu se v současnosti řadí mezi absolutní špičku ve svém odvětví.
Více o klientovi na www.ghvtrading.cz
Zadání klienta
GHV Trading mělo několik klíčových požadavků, které vycházely z rozsahu a dlouhověkosti společnosti – široká a rozmanitá nabídka produktů, desítky partnerů, dodavatelů, prodejců a značek, nižší stovky odborných článků a tisíce katalogových listů. Z ryze praktického hlediska tak měl být nový web založen na tom stávajícím. Veškerý dostupný obsah měl předurčovat skladbu většiny nových stránek a zároveň by se obsah měl automaticky překlopit takřka 1 ku 1. Z funkčního hlediska chtěli vylepšit e-shopový katalog v několika rovinách:
- spojení katalogu a e-shopu do jednotného řešení, které nabízí přehledné, jednoduché, efektivní a snadno použitelné procházení, filtrování a porovnávání produktů;
- zlepšení uživatelské zkušenosti nejprve pro běžné zákazníky (B2C), následovně i pro malo- a velkoobchodní partnery (B2B);
- ladění grafického vzhledu do technického stylu s moderním hávem, který zachová stávající barevné rozdělení;
- v dlouhodobém horizontu zlepšení přirozené dohledatelnosti (s požadavkem přípravy na kontinuální rozvoj a optimalizaci webu pro vyhledávače).
Výsledné řešení
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ů.
Rozdíly po a před
Podobné reference
ARPEG: Redesign webu na míru pro dlouhodobý rozvoj
Tvorba e-shopu na míru pro Prefa Brno
Nový prezentační web zaměřený na design a čisté provedení
