Rastlinkovo · Optimalizácia existujúceho e-shopu
Optimalizácia e-shopu, ktorý už bol v plnej prevádzke.
Rastlinkovo sme nevytvárali od nuly. V už fungujúcom WooCommerce e-shope sme sa sústredili na výkon, opravy chýb a vybrané úpravy rozhrania.
Nákupná cesta
Optimalizovali sme cestu ako jeden prepojený celok.
Výkon ani chyby sme neposudzovali iba na jednej obrazovke. Sledovali sme, ako sa používateľ presúva od vstupu cez katalóg a vyhľadávanie až po detail produktu a košík.
Posuňte diagram do strany.
- 01
Domov
Vstup do obchodu a prvé rozhodnutie, kam pokračovať.
- 02
Kategória
Prehliadanie ponuky, porovnanie produktov a prechod do detailu.
- 03
Vyhľadávanie
Priama cesta ku konkrétnemu produktu bez prechádzania kategóriami.
- 04
Produkt
Informácie, cena a nákupná akcia v rozhodujúcom bode cesty.
- 05
Košík
Kontrola výberu pred pokračovaním v objednávke.
Informácie
- Typ zásahu
- Optimalizácia existujúceho e-shopu
- Platforma
- Webový e-shop
- Naša úloha
- E-shop sme nestavali. Do fungujúceho WooCommerce sme vstúpili kvôli výkonu, opravili chyby a upravili vybrané časti rozhrania.
- Kontext
- Živý obchod počas zásahov
Technológie
- WordPress
- WooCommerce
- PHP
- MySQL
Čo sa dozviete
- 01Ako prejsť celú nákupnú cestu skôr, než sa začne meniť kód.
- 02Prečo treba výkon hľadať naprieč rozhraním, WooCommerce, runtime a dátami.
- 03Ako zoradiť zásahy podľa dopadu na používateľa, nie podľa ich viditeľnosti.
- 04Ako overiť malú zmenu v celom dotknutom flowe na mobile aj desktope.
01
Najprv pochopiť, potom meniť
Rastlinkovo už fungovalo ako živý obchod s katalógom, vyhľadávaním, detailmi a košíkom. Nezačínali sme čistým návrhom. Prešli sme existujúcu nákupnú cestu, reprodukovali problémy a zmapovali väzby.
“Pri optimalizácii existujúceho systému je kontext súčasťou riešenia.”
02
Výkon je problém prepojeného systému
Pomalá obrazovka nemusí mať príčinu tam, kde ju používateľ vidí. Rozhranie, WooCommerce logika, PHP, pluginy, integrácie a MySQL tvoria jeden reťazec. Optimalizáciu sme viedli podľa toku požiadavky.
03
Priorita podľa dopadu na používateľa
Najvyššie sme zaradili problémy, ktoré prerušovali prehliadanie alebo sa prenášali medzi mobilom a desktopom. Viditeľný detail nemal automaticky prednosť. Rozhodoval dopad a riziko pre okolitú cestu.
“Optimalizácia má poradie podľa dopadu, nie podľa toho, čo je najviac na očiach.”
04
Optimalizovať, testovať, overiť
Každý zásah sme začali reprodukciou problému a jasným rozsahom. Po úprave kódu alebo štýlov nasledovala kontrola dotknutého flowu a responzívnych stavov. Nešlo o to meniť veľa, ale presne.
05
Zlepšenie bez prepisovania
Hodnota bola v pochopení existujúceho riešenia, v nájdení miest s reálnym dopadom a v zlepšení výkonu, správania aj vybraných štýlov. Obchod pritom celý čas bežal.
Architektúra existujúceho riešenia
Výkon nevzniká v jednej vrstve.
Rastlinkovo je existujúci WordPress a WooCommerce obchod. Pri hľadaní príčiny sme preto čítali rozhranie, commerce logiku, PHP runtime, integrácie a dáta ako jeden prepojený systém.
Ako sme postupovali
- 01
Prešli sme existujúcu cestu a reprodukovali konkrétny problém.
- 02
Zmerali sme správanie a oddelili symptóm od pravdepodobnej príčiny.
- 03
Poradie zásahov sme určili podľa dopadu na nákupnú cestu.
- 04
Zvolili sme najmenšiu bezpečnú zmenu v kóde alebo štýloch.
- 05
Zmenu sme otestovali v súvisiacom flowe a na rôznych šírkach.
- 06
Po nasadení sme overili výsledné správanie v živom kontexte.
Posuňte diagram do strany.
- 01
Storefront
Téma, šablóny, katalóg a rozhranie, ktoré používateľ priamo vníma.
- 02
Commerce
WooCommerce prepája produkty, košík a objednávkový proces.
- 03
Runtime
PHP, WordPress jadro, hooky a pluginy vykonávajú aplikačnú logiku.
- 04
Integrácie
Platba, doprava a notifikácie rozširujú tok mimo samotného storefrontu.
- 05
Dáta
MySQL a médiá držia produktový, objednávkový a obsahový stav.
Kontrola kvality
Malý zásah, celý kontrolný okruh.
Pri živom e-shope nestačí opraviť izolovaný riadok. Rozsah sme držali úzky, ale výsledok sme kontrolovali v celej dotknutej ceste, na mobile aj desktope a po uvoľnení zmeny.
Posuňte diagram do strany.
- 01
Reprodukovať
Najprv potvrdiť známy problém v reálnej používateľskej ceste.
- 02
Ohraničiť
Vybrať najmenšiu bezpečnú zmenu bez zbytočného zásahu vedľa.
- 03
Responzívne
Overiť dotknutú cestu na mobilnom aj desktopovom rozložení.
- 04
Uvoľniť
Po zmene ešte raz potvrdiť výsledné správanie živého obchodu.
Podobný cieľ, riešenie podľa vás
