Redesign webu pro českou firmu specializující se na obnovitelné zdroje a chytrá úsporná řešení. A byla to výzva hned z několika důvodů.
Problémy původního webu
Výběr technologií
Původně vybraná šablona už přestala vyhovovat a její úpravy byly stále nákladnější. Místy nefunkční responzivita také nepřispívala k uživatelskému zážitku, hlavně na mobilním telefonu.
Objem informací
Objem informací celého webu je opravdu velký. Skládá se z několika stovek stran plných informací o úsporných řešeních, produktech a další aktivitě firmy. K tomu je třeba připočítat i e-shop, který běží na jiném webu.
Navigační menu však nebylo schopné toto obsáhnout a bylo složité na webu konkrétní informace najít. Některé informace tu byly duplicitní, jiné schované hluboko v informační struktuře. Informace nebyly navzájem propojené a chybělo flow, které by návštěvníka provedlo celým webem.
Nový web – moderní prezentace s ohledem na návštěvníky
Podat návštěvníkům velké množství informací na jednom místě je vždy velká výzva. Další specifikum firmy Geocore je, že na její web chodí různé typy návštěvníků – lidé z firem nebo domácností, architekti, kutilové, majitelé skladů… což je opravdů různorodé skupiny lidí s různými požadavky.
S firmou jsme vedli i diskuzi, zda by bylo vhodné e-shop s novým webem propojit, ale nakonec jsme od toho z mnoha důvodů ustoupili.
Fáze 1: Informační struktura nového webu a propojení informací
V první fázi jsme prošli všechen obsah, který na webu byl. Společně se zaměstanci firmy jsme vše roztřídili a zhodnotili, zda bude pro nový web potřeba. Texty pak samozřejmě prošly revizí z pohledu odbornosti zaměstnanci firmy.
- Objem informací celého webu je opravdu velký a toto množství bylo složité i na správu jako takovou. Informace byly navíc často duplikované, což také ztěžovalo jejich správu.
- Obsah webu byl kompletně přetříděn a rozdělen do logických skupin (stránky, příspěvky, produkty, reference…), aby bylo i z pohledu administrace vše jasné a přehledné.
- Informace jsou na webu navzájem prolinkované, aby bylo snadné se po webu pohybovat a návštěvník byl po webu veden správným směrem.
- Enormní množství informací nedovolovalo správně pohlídat už neexistující stránky. Mnohé odkazy na webu nevedly nikam, ale nebo možné je nějak ohlídat.
- Neexistující odkazy opravené a díky automatickému propojení pomocí kategorií minimalizované do budoucna.
- Struktura informací navíc kopírovala logiku firmy (např. sportřební produkty vs. produkty pro firmy), což nebylo přehledné z pohledu návštěvníka, který není zasvěcen v oboru.
- Od toho bylo upuštěno a produkty byly roztříděny do logických kategorií, nikoli podle technických parametrů.
- Původní navigační menu nebylo schopné toto obsáhnout a bylo složité na webu konkrétní informace najít. Některé informace na webu byly duplicitní, jiné schované hluboko v informační struktuře.
- Tento problém vyřešilo rozdělení informací do logických celků.
- Velmi pomohlo i megamenu, které pojme větší množství informací, než klasické menu.
- To vše podtrlo i opravené a přehledné vyhledávání.
- Informace nebyly navzájem propojené a chybělo flow, které by návštěvníka provedlo celým webem.
- Produkty, reference, blog a další… to vše je teď navzájem tématicky propojeno, aby tvořily cestu webem, jak je tomu u takového webu potřeba.
Fáze 2: Migrace starého obsahu do nových struktur
Původní obsah byl vkládán do struktur, které web původně dovoloval – příspěvků a stránek pouze. Z pohledu množství a typů informací toto rozdělení hrubě nestačilo.
- Na webu přibyly nové struktury, které informace seskupily logicky a několikanásobně zjednodušily správu obsahu. Navíc byly rozděleny do kategorií, aby se daly lépe propojovat.
Produktové stránky
Challenge byla propojit stránky s e-shopem. Od původní myšlnky ohledně sloučení e-shopu s webem do jednoho celku jsme nakonec upustili a dohodli se, že preztačně-informační část zůstane od e-shopu oddělena.
- K propojení pak slouží různé odkazy na webu a landing pages pro hlavní produkty, na které je cílena reklama. Ty pak vedou návštěvníka do e-shopu.
Fáze 3: Revize původního webu
Ze strany firmy – informačně i grafiky, po jednotlivých etapách
- Na webu bylo 56 pluginů, což není málo. Takové množství klade nároky i na HW.
- Pluginy byly zredukovány na 19 + jeden na míru, který obsahuje výpočetní funkcionality z minulého webu.
- Technologie použité na webu už byly zastaralé. Bylo obtížné web upravovat a udržovat v provozuschopném stavu, natož více rozšiřovat.
- Díky redukci pluginů je teď správa o mnoho jednodušší a problému s webem o mnoho méně. Včetně správy aktualizací.
- Starý web měl několik neduhů, které bylo třeba opravit, mezi nimi i vyhledávání. Často se stávalo, že některé informace nenabídlo správně nebo vůbec.
- Vyhledávání na novém webu je schopno zobrazit relevantní výsledky napříč všemi typy informací, včetně úryvků a náhledových obrázků. Díky tomu se vyhledávání stalo dalším piliřem pro hledání informací na webu.
- Revizí samozřejmě prošly i všechny texty, které na webu jsou, s důrazem na kvalitní obsah pro vyhledávače.
Šablony pro všechny typy informací
Kompletní revize se týkala i článků na blogu. Původní blog nebyl přehledný a hlavně vůbec ne responzivní. A stránky kategorií nefungovaly vůbec.
- Nově má web vše opraveno a navíc má i přehledný filtr, který umožňuje tematicky třídit články podle preferencí. Příspěvky i kategorie mají přehlednou šablonu, která jim dává moderní a funkční vizuál.
- Díky rozdělení na jednotlivé typy (produkty, reference, systémová řešení, atd…), bylo možné vytvořit pro každý typ informací vlastní šablonu na míru. Šablona informace obalí a jednotně naformátuje, zatímco obsah jako takový je psát v jednoduchém editoru, který je jednoduchý a rychlý na editaci.
Fáze 4: Grafika pro nový web
- Původní koupená šablona, která byla během času několikrát upravována různými vývojáři z různých důvodů, po čase přestala požadavkům firmy stačit.
- To vše nahradila šablona Bricks s designem na míru, kterou je možné jakkoli v budoucnu měnit, bez omezení. Díky globálním nastavením budou změny rychlé a jednoduché.
- Grafika nevyhovovala moderním trendům a přístupnosti. Chyběl uniformní styl celého webu a sjednocený vzhled, který by to celé zastřešil.
- Vizuál na míru (následující logomanuál a další podklady od grafické firmy), zastřešuje celý web a dává mu uniformní vzhled. Včetně dynamických prvků a formulářů s výpočty.
- Výrazným a nápomocným prvkem je megamenu, které zpřehledňuje nabídku firmy.
- Na mnoha místěch byla rozbitá responzivita, která znesnadňovala pohyb návštěvníků po webu.
- Web je plně responzivní, obsahuje výrazné UX/UI prvky, které zpřehledňují podané informace a dělají je lépe “stravitelnými”.
- Web navíc následuje pravidla přístupnosti, jak je tomu u moderních webů zvykem.
- Starému webu chyběl lidský prvek – anynomní web firmy bez obličejů
- Přidaly se fotky lidí, aby firma byla blíže k lidem
Grafické UX/UI prvky
Fáze 5: Nové funkce
Konfigurátor systémových řešení
Redesignem původního webu však práce neskončila, protože nyní bylo konenčné možné web dále rozšiřovat bez dalších technologických dluhů.
Ve vzduchů stále zůstavala viset otázka, jak jednoduše a ještě lépe ukázat návštěvníkům všechna řešení, které firma nabízí. A jako odpověď vznikl Konfigurátor systémových řešení.
- Jde o namíru naprogramovaný filtr, který je schopen podle typu budovy, možností zdrojů energie okolo ní a požadavků na další prvky zobrazit řešení, která firma nabízí. To řeší problematiku různých typů návštěvníků, kteří tu hledají informace.
- Výsledné informace je možné nechat si zaslat e-mailem, ze kterého je možné se k nim díky speciální URL kdykoli vrátit nebo je sdílet.
Formuláře pro výpočet na webu
Mimo konfigutorů na webu přibyly i formuláře pro výpočet úspory řešení (stropní vytápění, dvěřní clony a další). Díky tomu vidí návštěvník hned po zadání údajů, jak velkou úsporu mu řešení může přinést (úspory pak je třeba zpřesnit na míru každému projektu).
Fáze 6: Bezvýpadkové nasazení + napojení služeb
Finální migrace webu proběhla bez výpadku web samotného nebo služeb, které jsou na něj navázány.
- Web byl zmigrován na nový hosting,
- nasadily se nové analytické a další nástroje včetně funkční cookie lišty.
- Proběhlo také přesměrování původních stránek kvůli SEO včetně opravy původních neexistujících stránek.
Fáze 7: Multilang (právě probíhá)
V plánu je 5 jazykových mutací – CZ, SK, EN, DE, UK. Prozatím jsou nasazeny automatické překlady, které budou v budoucnu nahrazeny profesionálními překlady od odborníků.
Přeji lidem z Geocore, ať jim web přináší samé skvělé příležitosti a těším se na další spolupráci!
