Všetko o redizajne nášho webu


  • Zdieľať na Google+

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.
redizajn preview

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ť.
nastrel stylu

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.
vsetky navrhy
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ť.
Finálny návrh

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.
bootstrap

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.cms preview

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ň.
kanban task

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í.
Diagram objednávky

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í.
hodnotenia redizajnu

Čí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.

Komentáre

  • Robert Slovak
    Odpovedať
    Autor
    Robert Slovak

    ok, pekne. co ma trcohu vyrusuje a brzi je, ze ked chcem spravovat svoje domeny, musim sa prihlasovat dvakrat. raz na websupport.sk a potom ked si kliknem na svoje meno (co som nasiel az nahodou, ze tak to mam robit) tak sa musim prihlasit znova na webadmin. navyse, ten stale nie je az taky pekny,)

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Robert, na cross logine už naši kóderi pracujú.

  • Matej Pilát
    Odpovedať
    Autor
    Matej Pilát

    super, že ste napísali tento článok, bude mi inšpiráciou pri vylepšení ThinkPro.sk 🙂

    A teším sa až zverejníte vaš CMS, určite vyskúšam

  • Jozef Krajčovič
    Odpovedať
    Autor
    Jozef Krajčovič

    Nechapem načo mate vlastneho grafika/kov ked ste oslovili agenturi. To nedokažu par somarin navrhnut.

    Bootstrap by som teda určite nepoužil zbytočne vela balastu.

    • srigi
      Odpovedať
      Autor
      srigi

      Na stranke Bootstrapu sa daju vyklikat iba tie komponenty, ktore skutocne pouzijete. Kniznica tak moze kludne mat iba 20kB namiesto povodnych 106.

  • Ján Letko
    Odpovedať
    Autor
    Ján Letko

    Najlepšie je aj tak vlastné CMS … presne tak ! Gratulujem.

  • spam
  • milos
    Odpovedať
    Autor
    milos

    Nemozem si pomoct. Ale mam pocit ze sa pomalsie nacitava ta stranka.

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Ešte trošku poladíme rýchlosť, nech je to svižné.

  • Aleš Náprstek
    Odpovedať
    Autor
    Aleš Náprstek

    Tento článek se mi moc líbím jelikož je popsáno cca, co a jak následovalo, což je pro mnoho lidí poučné a zajímavé. S výslednou podobou webu sice moc nesouhlasím (mě osobně se nelíbí), ale z všeobecného pohledu změna svůj účel splnila, jelikož se o tom mluví skoro všude 😉

  • ivusko
    Odpovedať
    Autor
    ivusko

    používate nejaký PHP framework pre vlastné CMS? my sme si tiež napísali vlastný systém a to v YII. dobrá práca pri redizajne 😉

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      My tiež na Yii 😉

  • Joe
    Odpovedať
    Autor
    Joe

    Pozrel som si rôzné svetové topky dizajnov web hostingov a všetci zachovávajú základné pravidlo.
    Ak človek tak reálny, usmiaty, dôveryhodný!
    Je to príjemné na myslenie, neruší to a hlavne je viac dôveryhodné, že je to služba pre ľudí a nie pre postavičky, či figúrky, že to nie je rozprávka, seriál, ale reálna a seriózna spoločnosťsť s rovnakými službami.
    Píšem preto, že ste cool, a chcem, aby ste aj cool ostali!

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Dík za feedback, skúsili sme to trochu inak ako ostatní, uvidíme, či to bolo správne rozhodnutie.

  • matej
    Odpovedať
    Autor
    matej

    Zda sa, ze je to optimalizovane cisto len na mobilne zariadenia. Na PC je tam akurat mnozstvo volneho priestoru a clovek musi stale scrollovat hore-dole.

    • xaxofon
      Odpovedať
      Autor
      xaxofon

      suhlas – je fajn optimizovat aj pre mobilne zariadenia, ale main stream je a asi dlho este zostane desktop (vid google analytics). Primarny device by preto mal byt desktop monitor sirokouhly. Grafika sa da sekundarne layoutovat aj pre mobile devices, ale na sirokouhlom monitore je mnoho zbytocne strateneho priestoru. Nefandim novemu dizejnu, hoci je vidno za tym dost prace.

  • Béďa Trávníček
    Odpovedať
    Autor
    Béďa Trávníček

    Musím povedať, že sa mi nový vzhľad stránky nepáčil, ale ja som už raz taký konzervatívny. Ale si zvykám a tiež čakám na prepojenie prihlásenia, lebo to zjednodšuje objednávky, ktorých mám stále v zálohe niekoľko. A tiež som zvedavý na CMS, v tomto až taký konzervatívny nie som 😉

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Na cross logine pracujeme, tiež sa naň tešíme 😉

  • Juraj G.
    Odpovedať
    Autor
    Juraj G.

    Jednoducho je tento typ dizajnu momentalne hitom a pohltil ma rovnako, ako vas vo websupporte. Jednoduchy, napadity, rychly, „responsive“ a navyse si zije vlastnym zivotom. Registrujem viacero velikanov, ktori takto presedlali na ilustrovane weby, dokonca aj firmy s vaznym vystupovanim a portfoliom. Obrovsky potencial do buducnosti, web tohto stylu cloveka nenudi a nudit nebude.

  • ondro
    Odpovedať
    Autor
    ondro

    heeh, nemate co robit tak si vymyslate somariny. stranka vyzera ako lacny komx, novy navstevnik nevie kde je co a stary sa musi X krat prihlasit, aby sa dostal do webadmina. citim sa ako ked som prvy krat videl office 2007 🙂

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Tak aspoň s tým loginom ťa potešíme, pracujeme na tom 😉

    • Michal
      Odpovedať
      Autor
      Michal

      Súhlasím s tým čo napísal ondro až na to že som mal a mám chuť odísť z webbsuportu – prečo nedáte ludom možnosť výberu starú a novú stránku ?

      Ked som sem 1 krát prišiel cítil som sa ako na nejakom Gigante konkurujúcom velikánom a dnes už ten pocit nemám ,napravíte to ..?

  • WebSupport
    Odpovedať
    Autor
    WebSupport WebSupport

    Michal, vďaka za názor, ale žiaľ, neplánujeme paralelný chod dvoch stránok.

  • Michal2
    Odpovedať
    Autor
    Michal2

    Nie som clovek ktory by sa stazoval takto verejne a radsej mam priamu komunikaciu. Kedze ale tento pruser je predpokladam „uspech“ celku obraciam sa teda na celok.
    Nova stranka mi je ukradnuta tak ako je. Je mi uplne jedno aky ma dizajn pre mna ako zakaznika ma jedninu podmienku: FUNKCNOST. To co sa ale stalo s objednavkovym formularom je hodne prefackania. Mozno silne ale pravdive. Je to nieco strasne a prisaham ze ak sa toto dostane do administracie tak ju odmietam pouzit. Inak povedane zbalime si svojich 300 svestak a pojdeme inam. Vasa stranka je pre mna 1-miestny extravagantny sportiak. Ja ale potrebujem previezt tovar v hnusne kockatej skaredej ale fukcnej dodavke. To co mi ponukate nechcem.
    Dnes som druhu domenu objednal na WS. Preco? Lebo som nenasiel moznost zadat vlastny SK-NIC. Takze ma caka tlacenie podpisovanie a posielanie 2 formularov. Dakujem.
    Je chyba vo mne? Asi ano niesom totiz dost trendy ale vy sa pre mna stavate 4 stranova zmluva plna drobneho pisma ktoru nikto necita. Preto ak existuje iny sposob ako sa pridat k protestu okrem peticie sem s nim.
    Ziadam preto rovnako ako Michal aby ste dali ludom sancu vyberu.
    PS: Je mi to luto ale posledna vec ktora sa Vam podarila bol prvoaprilovy zart s moznostou vyberu jazyka. Obcas si v adrese zmenim jazyk z sk na hh nech sa trosku zasmejem. Zial…

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Ďakujeme za feedback, vážime si ho. Ak máte aj ďalšie konkrétne pripomienky k funkčnosti (ako nejasnosť zadania vlastného SK-NIC), pošlite nám ich prosím na redesign@websupport.sk a my si ich prejdeme. Objednávku sme samozrejme robili podľa výsledkov testovania, predošlých feedbackov a našich skúseností, no nenahovárame si, že sme stvorili niečo dokonalé. Čaká nás ešte veľa vylepšovania a optimalizovania. Každý konkrétny feedback uvítame.

  • Responzívny web – návod pre manažérov a project manažérov | eMDiho blog
    Odpovedať
    Autor
    Responzívny web – návod pre manažérov a project manažérov | eMDiho blog

    […] predošlý design. Mne osobne sa páčia oba. A mali tú “drzosť” ( ), že dokonca opísali celý proces na svojom blogu. Celé to trvalo takmer 9 mesiacov. No dali si záležať. Testovali, ladili, radili […]

  • majsterko
    Odpovedať
    Autor
    majsterko

    Som rad za novy dizajn stranky. Hlavne koli tomu ze svet webov je kombinacia vzhladu a kodu. A to su dva tak odlisne svety, ze je skoro umenie dat tieto dve veci do suladu. Sam obcas programujem svoje dizajny webov a viem, ze je to v mojej hlave boj kto bude mat navrch, ci „dizajner“ alebo „programator“. U mna castejsie vyhrava „dizajner“ z coho „programtor“ ma obcas chut dat vypoved 8-). Preto klobuk dole pred spojenim tychto dvoch veci v kolektive a mnozstve hlav bez pocitu, ze ste urobili kompromis. Ak ste nejaky urobili, nikomu to nehovorte 😎 Dizajn sa mi zada prvoplanovy, jednoduchy, jednoznacny, ergonomicky. Funcnost je tiez OK (to dvojite prihlasovanie je otazka casu 8-). Z tych kritickych slov netreba robit zaver ustupu. Je to len skuska spravnosti, ze ste urobili dobry nekompromisny redesign. To su iba reakcie programatorov 😎 Najradsej by na uvodnu oprazovku nasukali co najviac okien s maximom informacii a vo vsetkych farbach duhy. Nejaka tematika alebo ideovost marketingu im je ukradnuta. Je ale dobre tychto ludi respektovat na urovni webadminu , aby svoje veci mohli robit „davkovo“. Nam „dizajnerom“ co spravujeme do 10 webov a domen je nam webadmin dostatocny. Preto by som ho neprerabal v intenciach webu. Nech vam zostane takyto progres co najdlhsie.

  • majsterko
    Odpovedať
    Autor
    majsterko

    A zabudol som napisat aj malu kritiku ci podnet k zjednoteniu vstupych podcasti websupportu. Min by stacilo aby horna lista co je vo webadmine bola aj na blogu, webmail, wiki… s pripadnym doplnenim funkcionality prihlasenia a odhlasenia. Viem ze rezim centralneho (crosoveho) prihlasovania pre rozne samostatne funkcionalitne sekcie je problematicky (cookies, session…), ale mozno o to viac bude vyzvou hladat riesenie. Ja osobne technicke riesenie nepoznam 8-(

  • szurke
    Odpovedať
    Autor
    szurke

    Ten pozitívny nával energie z tohoto tímu je úžasný 🙂 len tak dǎlej 😀

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Vďaka, snažíme sa 🙂

  • Michal
    Odpovedať
    Autor
    Michal

    Homepage ma vyse 140 requestov http://tools.pingdom.com/fpt/#!/bJypvY/www.websupport.sk 😛
    1. Ja by som tie javascripty poupratal https://i.imgur.com/j7grQi4.png (kde pouzivate fancybox? potrebujete mousewheel funkciu? tie pridavne .js su optional)
    Ja pouzivam len jquery.fancybox.pack.js?v=2.1.5 a spolu css davam len na podstranku, kde to potrebujem.
    2. Dvakrat tam je /assets/43d6ae5/vendor/select2/select2.min.js
    3. Preco je zvlast login.css cartJsApp.css domaincheckerHeader.css

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      Máš pravdu, kus sa nám to zasvinilo O:-) V blízkej dobe sa chceme na to pozrieť a upratať. Díky moc za upozornenie.

  • Ako sa vyvíjal dizajn našich webov od roku 2002 – 2016 – WebSupport blog
    Odpovedať
    Autor
    Ako sa vyvíjal dizajn našich webov od roku 2002 – 2016 – WebSupport blog

    […] to už 3 roky, kedy sme redizajnovali náš web. Pri tejto príležitosti sme si opäť prebehli všetky dizajnové variácie od roku 2002. Tu […]