Prípadová štúdia soselectronic.com

Keď 10% zákazníkov, tvorí 90% celkového objemu objednávok.
sos
Kto je SOS electronic?

Distribútor elektronických súčiastok pre priemyselnú výrobu. Od roku 2013 je členom medzinárodnej obchodnej skupiny Conrad group.

  • Viac ako 25 rokov na trhu elektronických súčiastok
  • Priame zastúpenie v 7 krajinách
  • So zákazníkmi komunikuje v 7 jazykoch (SK, CZ, HU, PL, RO, DE, EN)
  • Dodáva produkty do viac ako 100 krajín sveta
  • Jeden backend - 7 domén, 7 jazykov, 7 rôznych DPH, 7 formátov mien
navštíviť web

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.

Aktualizácií dát v reálnom čase

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

Parametre

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.

Parametre

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

Responzívny dizajn

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

Smart web

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:

Produktový vlastník:
Rastislav Talárovič (SOS electronic)

Scrum manažér:
Miroslava Francová (bart.sk)

Analýza a návrh technológie:
Michal Hricišín (bart.sk)

Grafické spracovanie a návrh UI:
Viktor Novák (bart.sk)

Používateľské testovanie a komunikácia s návštevníkmi webu:
Adrián Lipták (SOS electronic)

Programovanie používateľského rozhrania:
Marek Šafárik (bart.sk)

Programovanie RestAPI:
Juraj Pivka (bart.sk)

Prepojenie na ekonomické a externé systémy:
Dárius Kraus (SOS electronic)

Technická podpora:
Matúš Čopík (SOS electronic)

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.

Návrh UI
Rýchlosť 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.

Rýchlosť práce s produktovým katalógom
sos.sk

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

Páči sa Vám ako sme vytvorili a rozvíjame B2B riešenie SOS electronic?

Kontaktujte nás