Všetko o redizajne nášho webu

WebSupport prechádza v ostatnom období veľkými zmenami: rastom tímu, inováciou železa, novými projektami. Najnovšie pribudol aj radikálny esteticko-funkčný upgrade webu. Prečítajte si, aké dôvody nás k tomu viedli a čo všetko sme sa pri tom naučili.

Prečo sme sa rozhodli pre redizajn

Vo WebSupporte máme hlboko zakorenenú neustálu snahu o maximálnu kvalitu a evolúciu. Uvedomovali sme si, že naša webstránka prestáva plniť naše vlastné kritériá kvality. Postupom času jednoducho nekontrolovateľne obsahovo narástla a stratila na prehľadnosti. Zostarol nielen dizajn, ale aj CMS, ktoré nám to dalo pocítiť pri každej editácii. Možno trochu trúfalo, ale chceme patriť medzi technologických lídrov, a preto sme už viac nemohli zanedbávať majiteľov tabletov a smartfónov. V neposlednom rade sme sa chceli novým dizajnom a nadväzujúcou celkovou identitou jednoznačne odlíšiť od konkurencie a jasne povedať: „Toto je WebSupport“.

10/2012 – Výber dizajnéra

Usporiadali sme malé výberové konanie bez chlebíčkov a známostí. Oslovili sme spolu niekoľko freelancerov a agentúr. Každý dostal brief a rovnaké zadanie: návrh homepage a jednej podstránky. Vyberali sme z piatich návrhov rôzneho rozsahu: od faceliftu až po úplný redizajn. Najviac nás oslovil radikálny, no minimalistický nástrel od zlínskej agentúry Madeo. Bol koniec októbra 2012.

11-12/2012 – Začiatky prác

November sme strávili určovaním rozsahu prác, presekávaním informačnej štruktúry a vytyčovaním milestones jednotlivých častí. Tesne pred Vianocami sme dostali darček v podobe nástrelu grafického štýlu. Návrh sa značne vyvinul a posunul sa smerom k ilustráciám, z čoho sme mali veľkú radosť.

1-2/2013 – Hľadanie vizuálu

Grafický štýl aj wireframy sú však len náznaky, na ktorých sa dá ľahko zhodnúť. No to, či je návrh presne tým, čo hľadáte, zistíte až pri pohľade na homepage. Nasledujúci mesiac sme strávili hľadaním finálnej podoby homepage. Prešli sme štyrmi rôznymi návrhmi a viacerými verziami každej z nich. Stále to však nebolo ono. V tomto patrí chalanom z Madea náš veľký obdiv za čas a úsilie, ktoré tomu venovali.

Po mesiaci skúšania sme sa zhodli na 2-týždňovej prestávke a následnom finálnom pokuse. Spoločne sme vymysleli koncept prepájajúci náš serverový svet a popkultúru. Ilustrácie budú obsahovať známe obrazy, filmové scény alebo hudobné plagáty, no v každom z nich bude vtipne zakomponovaný server. Predstava napríklad scény z Levieho kráľa, kde ten opičák miesto malého levíčaťa Simbu zdvíha nad hlavu server, nás riadne pobavila. To bol presne vtip a “piece of art”, ktoré sme do nového webu chceli dostať.

3/2013 – Bootstrap

Pustili sme sa teda s Madeom do pilovania dizajnu homepage a podstránok. Všetky funkčné prvky, ktoré sa vyskytli v návrhoch, sa zároveň stávali súčasťou bootstrapu, najprv grafického a následne aj html twitter bootstrapu. Vďaka tomu sme získali možnosť rýchleho stavebnicového vyskladania nových stránok v rovnakom štýle.

4/2013 – Najlepšie je aj tak vlastné CMS

V rovnakom čase sa náš devel tím pustil do programovania vlastného CMS s cieľom maximalizovať jednoduchosť editácie. Za desať dní bol na svete systém, ktorý naša maďarská country manažérka prirovnala k “presadnutiu zo škodovky do bavoráka”. Po vychytaní drobných detailov a spísaní krátkeho manuálu sprístupníme toto CMS zdarma pre každého. Následne by sme sa mu povenovali v samostatnom blogposte a vypichli všetky jeho prednosti.

4-6/2013 – Práca inhouse

Pre zvýšenie efektivity pripomienkovania sme sa s Madeom dohodli a prevzali dokončenie vizuálu podstránok aj ich nasekanie do HTML k nám. Od toho momentu (začiatok apríla) sme začali šliapať na plné obrátky. V priemere čo deň, to podstránka. Jeden deň sa podstránka nakreslila, schválila a na konci druhého dňa už bola v HTML podobe prepojená s CMS. V tejto fáze sa nám veľmi osvedčila kanban tabula. Postit s podstránkou sa nachádzal v stĺpci “To-do”, akonáhle sa začalo na nej pracovať, posunuli sme ho do “In progress”. Po dokončení prechádzal do stĺpca “Delivered” a vtedy prišlo na rad testovanie html alebo schvaľovanie návrhu. Pri testovaní html sme išli veľmi poctivo a každú podstránku sme si prešli na veľkom monitore, notebooku, tablete aj mobile. Toto priebežné testovanie si nevieme vynachváliť. Bugy sa opravili ešte, keď sa programátor venoval danej podstránke a predišlo sa aj ich opakovaniu na nasledujúcich podstránkach. Ak bolo všetko v poriadku, lístok prešiel na koniec tabule, do stĺpca “Done”. Náš systém síce nebol dokonalý, ale pomáhal nám vizualizovať tok práce a vždy odrážal súčasný stav. Jedno vylepšenie do budúcna za všetky: pridať stĺpec “Stack”, kde by boli všetky úlohy a v “To-do” by boli iba úlohy, ktoré si tím určí na týždeň.

Deadline

Na začiatku interných prác sme si určili deadline pre dokončenie všetkých podstránok na 1.6. a 1.7. byť pripravení na spustenie webu aj s upravenou objednávkou. Napriek tomu, že išlo o interný projekt a lákalo by povedať “posuňme o týždeň, o dva, o štyri…”, rozhodli sme sa ich však vyhlásiť za sväté a nepovoliť. Od spustenia novej objednávky na jeseň 2012 sme získali niekoľko kľúčových podnetov na zlepšenie od zákazníkov a aj z user testingu. V snahe zapracovať ich čo najlepšie a vytvoriť čo najpoužiteľnejšiu objednávku sme sa začali zamotávať do množstva stavov, ktoré môžu nastať. Práve tu nám pomohol pevný deadline, ktorý nás nasmeroval späť k lean prístupu: spravili sme tie najkľúčovejšie úpravy a ďalšie budú pribúdať postupne po spustení.

7/2013 – Ideme online

V absolútnom finále sme sa vďaka novému vývojovému procesu v devel tíme, chvalabohu, vyhli typickým problémom pri nasadzovaní projektu. Žiadne riešičky konfigurácií ani nedostupné stránky, len jeden príkaz, slávnostný enter a web bol online. Už ostávalo len dávať pozor, či niečo kritické nevyskočí a sledovať reakcie ľudí. Vďaka trochu nevšednému použitiu nicereply v hornej lište sme získali jednoduchý, ale brutálne funkčný nástroj na získavanie feedbacku. (Žeby nový pivot?) Hodnotenia ukázali, že web návštevníkov nenechal chladných a najčastejšie sa vyskytovali dva extrémy: veľká spokojnosť a naopak, veľká nespokojnosť. To nás utvrdzuje v opodstatnení nášho rozhodnutia a investovaného úsilia. Jediným objektívnym ukazovateľom však aj tak budú predajné čísla, na ktoré sme veľmi zvedaví.

Čísla a naše ponaučenie

Sme veľmi hrdí, že sa nám podarilo tak veľký a náročný projekt ukočírovať časovo, budgetovo aj kvalitatívne. Celkovo sme vytvorili asi 30 normostrán nových textov, tie sme preložili do 4 jazykov (CZ, DE, HU, EN), vytvorili viac ako 30 návrhov podstránok, napísali tisíce riadkov kódu, nakreslili 59 ikoniek + 10 ilustrácií a obetovali tomu cca 150 človeko-dní a stovky postitov. Ako najväčšie ponaučenie do budúcich projektov si berieme dôležitosť správnej komunikácie takéhoto projektu. Spätne si uvedomujeme, že by nám to pomohlo vyhnúť sa zbytočným otázkam, negatívnym reakciám a zrejme aj znásobilo marketingový zásah.

8/2013 – Čo ďalej?

Práca s novým webom pre nás spustením nekončí, práve naopak, je to len začiatok. Vďaka takémuto tvrdému reštartu máme čistý stôl a môžeme prejsť na neustále testovanie, ladenie a vylepšovanie. Už teraz máme plné hlavy nových vychytávok. Naviac postupne pracujeme na premietnutí navrhnutého štýlu do našej vizuálnej identity. Môžete sa tak tešiť na nové mailingy, bannery, kupóny, tričká, nohavičky a kadečo iné.

P.S. 1

Vďaku nielen za azbestové nervy a vytrvalú, poctivú robotu si okrem tímu Madea zaslúžia aj naši: Ľuboš Ľahký za vedenie a úspešné spustenie celého projektu, Lucia Kubinská za to, ako skvelo zvládla prebrať a rozviť cudzí návrh; Tomáš Liška za trpezlivosť, s akou bol ochotný pilovať HTML k dokonalosti; Tomáš Tatarko za jeho fajnové CMS; Martina Ličková a Ivan Kopčík za super supervíziu, Mišo Truban za odvahu pustiť sa do tohto maratónu a celému WebSupportu za všetko to testovanie a vylepšovanie. Ste Weľmi Supper.

P.S. 2

Ak máte akékoľvek otázky, sem s nimi, radi na ne odpovieme alebo im venujeme samostatný blogpost.