Obsah
Úvod
Klientka sa sama svojpomocne urobila pred štyrmi rokmi vlastný web, venuje sa alternatívnej liečbe chorôb. Keďže web bol staršieho dátumu, bez analýzy kľúčových slov už nebol pre klientku dostatočný. Oslovil som ju cez facebook keďže zadala dopyt na pomoc s redizajnom webu.
Jej cieľ bol urobiť modernejšiu verziu webstránky, ktorá by mala tieto funkcie: vyhľadávanie na stránke, cookies lištu, prehľadnejší dizajn. Potrebovala sa zbaviť spamových komentárov ktoré pribúdali na webstránke každý deň. Prakticky doriešiť bezpečnosť webstránky ako celku.
Tento článok ukazuje cestu transformácie webstránky zdravie v živote. Od starého „chorého“ webu ku mladšiemu „zdravému“ webu.
Situácia pred úpravou (čo nefungovalo)
Podľa slov klientky:
Stará verzia neobsahovala kľúčové slová z obsahovej stránky a ani niektoré podstatne činnosti neboli hneď jasné a viditeľné: napríklad eshop.
Na starej stránke chýbal jednotný a profesionálny štýl.
Menu malo dôraz hlavne na „môj príbeh“ a konzultácie.
Vizuál stránky bol už zastaralý, kontrast na mnohých miestach nebol dostatočný, ako favicon bol použitý komplikovaný obrázok, rezponzivita na tablete a mobile bola slabšia, najmä v oblasti pätičky.
Stará verzia webstánky bežala na zastaralej verzi php. Obsahovala 38 pluginov. tieto dva dôvody spomaľovali načítanie webstránky približne o jednu sekundu.
Web mal ťažko čitateľné niektoré texty – kvôli nízkemu kontrastu text vs pozadie.
Dosť závažný problém boli aj spamové komentáre ktoré pribúdali neustále.
Niektorí ľudia sa sťažovali na horšiu čitateľnosť niektorých textov. (pridáme na čo si sťažovali
Ukážky starej verzie stránky:
Všimni si hlavne posunutú pätičku na tablete.
* starú verziu webstránky som dočasne umiestnil na subdoménu
Na starej verzii webstránky boli použité priveľa zelenej farby. CTA prvok následne splýval. Dizajn pôsobil zliaty dojmom pretože bola priveľa použitá jedna farba.
Cieľ redizajnu (čo sme chceli dosiahnuť)
- Hlavné ciele redizajnu boli
- zlepšiť prehľadnosť webstránky
- zmodernizovať dizajn
- zachovať dôležité funkcie webstránky (blog, katalóg chorôb)
- zlepšiť čitateľnosť textov
- pridať analytiku
- zlepšiť pozície v Googli
- vytvorenie celistvého dizajnu
Zamerali sme sa minimalistický dizajn s dôrazom štuktúry podľa hľadaní slov v Googli. Hlavný cieľ bola jednoduchšia prezentácia služieb tak, aby sa v nej klienti nestratili.
4. Riešenie a proces (ako prebiehala práca)
Najprv sme sa klientkou dohodli na dizajne / farbách novej stránky. Ukázal som jej 3 návrhy a vybrali si jeden z nich. Neskôr sme zmenili vybraté farby.
Ako hlavné farby sme zvolili smaragdovo zelenú a oranžovú farbu. Pozadie sme zvolili bledo žltú / krémovú farbu.
Farby textov sa podľa potreby striedali biela, čierna.
Následne sme pristúpili ku zmenám štruktúry zjednodušilo sa menu, názvy podstránok sa zvolili podľa hľadaní v Googli. Už žiadne hádanie.
Najväčšou výzvou bolo zachovať katalóg chorôb keďže bola táto časť nakódená na mieru.
Po redukcii pluginov a zmene verzie php sa web zrýchlil približne o 1s pri načítavaní.
Výsledok (nový web)
Názorné ukážky webstránky pred a po úpravách.
Počet pluginov
Hero časť webstránky a menu
Ďalšia časť domovskej stránky
Ukážka blogov
Pätička na tablete
- Pätička na mobile
Ďalšia ukážka hotovej webstránky
Reakcie a výsledky
Klientka si musela na začiatku „osviežiť“ ako upravovať detaily webu keďže používala predtým staršiu verziu Eleontoru.
Dáta o zmenách návštevnosti žiaľ nemám pretože starý web nemal nasadenú analytiku.
Čo sa podľa slov klientky zmenilo a čo sa klientke páči na novej webstránke?
Návštevník ihneď pochopí čomu sa stránka venuje a čo mu ponúka.
Vizuálna jednotnosť a pútavosť.
Záver
Web je teraz rýchlejší, prehľadnejší a ľahšie použiteľný ako predtým. Už žiadne splývajúce texty s pozadím. Ľahko dostupné CTA menu webstránky zvyšuje výrazne konverziu. Web je orientovaný na zákazníka.
Chceš vytvoriť nový web? Kontaktuj ma 0905 885 383.
