Prípadová štúdia soselectronic.com

Prečo bol potrebný nový web?

Aktualizácia dát v reálnom čase, orientácia webu na používateľa, responzívny dizajn a umelá inteligencia.

1. Aktualizácia dát v reálnom čase

Výmena informácií medzi ekonomickým systémom a webom fungovala v dávkach. Aj keď pri citlivých informáciách bola aktualizácia dát nastavená na niekoľko minút, nie vždy to bolo postačujúce.

Nový web je postavený na aktualizácií dát v reálnom čase a akákoľvek zmena v počte kusov na sklade sa prejaví na webe okamžite.

2. Orientácia webu na používateľa

Používateľov webu sme veľmi pozorne počúvali a v oblasti práce s parametrami tovarov sme urobili najviac vylepšení.

Prečo by mal mať používateľ definované, ktoré parametre a v akom poradí si pri filtrovaní môže zobraziť? Nové riešenie ich umožní napr. aj jednoduchým “drag and drop” usporiadať a nastavenie si zapamätať aj pri ďalšej návšteve.

Do vyhľadávača pridávame funkciu „autocomplete“, ktorá už pri písaní hľadaného textu priebežne a v reálnom čas ponúka v rozbalenom okne možné výsledky ako aj ich počet v jednotlivých kategóriách.

Systém prehľadáva tovary aj v hodnotách ich parametrov. Do zoznamu parametrov pridávame ďalšiu užitočnú funkciu “porovnaj” a na detail tovaru pridávame funkciu “tovar s podobnými parametrami”.

3. Responzívny dizajn

Dnes už úplná samozrejmosť. Nový web sa plne prispôsobuje svojim obsahom a rozložením displeju používateľa. Navyše, sa prispôsobuje aj samotné ovládanie jednotlivých prvkov webu. Čo už také samozrejmé pre každého nie je. Veď inak ovládame mobil (dotyk prstom) a inak počítač (myš, klávesnica).

4. Smart web - web učiaci sa od používateľov.

Postupne na web nasadzujeme prvky umelej inteligencie. Systém si už dnes pri práci používateľa zapamätá, ktoré časti parametrického vyhľadávania chce mať aktívne a ako ich chce usporiadať.

Kľúčové oblasti úspechu projektu

Dnes už dokážeme zhodnotiť, čo bolo pre úspech projektu dôležité. Myslíme si, že bez kvalitných ľudí, správneho výberu technológií a pravidelnej komunikácie s používateľmi webu by realizácia takéhoto typu projektu nebola úspešná.

1. Technická analýza, návrh riešenia a tvorba tímu

Komplexnosť riešenia, prepojenie na ekonomické systémy spoločnosti a viac ako miliónové mesačné obraty eshopu pre nás znamenajú obrovskú zodpovednosť. Prvým krokom bola dôsledná analýza súčasného stavu a dohoda o technológiach.

Hneď od začiatku sme projekt rozdelili na dve samostatné časti. Prvú časť tvorilo “API”, ktoré predstavovalo zdroj dát a popisovalo celú logiku aplikácie. Druhú časť tvoril “Frontend” - používateľské rozhranie s ktorým prichádzal do styku návštevník webu.

Okrem technologickej výhody nám takého rozdelenie umožnilo aj efektívnejšie využitie ľudských zdrojov. Na projekte tak mohlo súčasne pracovať viacero ľudí na strane nášho zákazníka ako aj u nás. Všetci fungujeme ako jeden tím a úlohy máme medzi sebou rozdelené ako rovnocenní kolegovia.

Zloženie tímu:

2. Návrh používateľského rozhrania

Jednou z výziev pre nás bolo navrhnúť používateľské rozhranie tak, aby bolo prístupné a použiteľné pre B2C ako aj pre B2B zákazníkov.

Riešenie spočívalo v pravidelnej komunikácii nášho zákazníka s používateľmi a postupnom ladení jednotlivých elementov stránky.

3. Rýchlosť používateľského rozhrania

Aby sme vyhoveli čo najväčšiemu počtu zákazníkov pridávali sme na stránku pravidelne nové funkcionality. Tieto zmeny mali negatívny dopad na rýchlosť stránky, čo bolo viditeľné najmä pri mobilných zariadeniach.

Zrýchlenie načítania stránky spočívalo v minifikácii a optimalizácii javascriptov a CSS štýlov. Viacero menších súborov sa automaticky spája do jedného väčšieho. Zjednodušili sme HTML štruktúru stránky a výborný dopad na rýchlosť malo aj presunutie načítavania niektorých informácií do asynchrónnych volaní. Postupne sa nám vďaka malým krokom podarilo upraviť stránku tak, aby sa veľmi rýchlo načítala aj na mobilných zariadeniach alebo pri pomalšom pripojení na internet.

4. Práca s produktovým katalógom, tvorba RestAPI servera

Pri veľkom počte produktov (270 000+) predstavuje úzke hrdlo celej aplikácie rýchlosť spracovania dát produktového katalógu. Pre zákazníkov je veľmi dôležité parametrické filtrovanie a taktiež fulltextové vyhľadávanie. Väčšina súčiastok má viacero parametrov, rôzne cenové hladiny ako aj reštrikcie výrobcov, ktoré určujú, v ktorých krajinách sa môžu/nemôžu predávať. Množstvo podmienok kladie zvýšené nároky na databázu a predlžuje čas zobrazenia dát na frontende.

Pre základ celého frontendu sme použili PHP framework Phalcon, ktorý zvládne niekoľkonásobne viac požiadaviek zákazníkov než bežný PHP framework. Tým sme zabezpečili dostatočnú rezervu v prípade nárastu návštevnosti. Ako nosnú kostru katalógu produktov sme zvolili Elasticsearch. Jedná sa o vyhľadávací mechanizmus, ktorý zvládne aj náročné filtračné podmienky výrazne rýchlejšie než klasické vyhľadávanie v databáze. Z Elasticsearchu sú generované parametrické filtre, zoznamy kategórií, značiek ako aj samotné produktové zoznamy. Nasadením Elasticsearchu sa významne urýchlilo fulltextové vyhľadávanie.

Čo s eshopom po jeho spustení?

Spustením eshopu vznikajú neustále nové a nové požiadavky na zapracovanie. Často pochádzajú od zákazníkov firmy SOS electronic a taktiež od obchodných referentov, ktorí sa o zákazníkov starajú. Jedná sa tak o zapracovanie špeciálnych požiadaviek, ktoré su typické pre B2B a v prípade referentov o funkcionality, ktoré uľahčia a zefektívnia ich prácu.

Špeciálne požiadavky zákazníkov SOS electronic sú často výzvou pri implementácii. Musí sa tu myslieť jednak na výkonové hľadisko a taktiež aj na zakomponovanie do existujúceho návrhu používateľkého rozhrania.

Kde nastala chyba a čo sme sa naučili?

Celý projekt v čase pred finalizáciou zápasil s problémom nedostatočnej analýzy v rámci špecifických požiadaviek VIP zákazníkov. Urobili sme perfektný a rýchly web s množstvom nových funkcionalít. Počúvali sme používateľov webu. Avšak niektoré funkcie sme v novom riešení už nepovažovali za dôležité a nahradili sme ich novými, z nášho pohľadu, ešte lepšími funkciami. A to bol omyl. Pohľad VIP zákazníka bol na naše vylepšené funkcie rozdielny. A museli sme ich dorábať a upravovať, čo sa následne odzrkadlilo v rozpočte projektu a termíne jeho konečného spustenia.

Analýza a návrh riešenia v konečnom dôsledku pokrývala požiadavky 90% zákazníkov avšak nebola dostatočná v prípade špeciálnych 10%. Týchto 10% však tvorilo 90% celkového objemu objednávok. A toto je podstatný rozdiel v charaktere riešení B2C vs. B2B.