Kako smo redizajnirali DDG Fashion eCommerce kroz Clarity, GA4 i Search Console

Najskuplji redizajn nije nužno onaj koji dugo traje. Najskuplji je onaj koji izgleda novo, a i dalje gubi kupca na istom mestu.

Zato redizajn sajta DDG Fashion nismo počeli od palete, animacija ili omiljenog benchmarka. Počeli smo od pitanja: gde se korisnik zaustavlja između dolaska na sajt i završene kupovine — i zašto?

Odgovor nije mogao da dođe iz jednog alata. Ukrstili smo Microsoft Clarity, Google Analytics 4 i Google Search Console, zatim te nalaze povezali sa realnim kodom, katalogom, lagerom, korpom i checkout procesom. Rezultat nije samo drugačiji interfejs. To je jasniji mobile-first kupovni tok sa više relevantnih merchandising prilika i pouzdanijim merenjem.

Redizajn eCommerce sajta nije isto što i novi izgled

Kod online prodavnice svaki vizuelni element učestvuje u poslovnom procesu. Pretraga utiče na to koliko brzo korisnik dolazi do proizvoda. Filteri utiču na to da li pronalazi dostupnu veličinu. Product kartica utiče na ulazak u PDP ili direktno dodavanje u korpu. Korpa odlučuje da li je sledeći korak jasan. Checkout mora da završi kupovinu bez novih distrakcija i neizvesnosti.

Zbog toga smo redizajn posmatrali kroz tri sloja:

1. Ponašanje: šta korisnici zaista klikću, koliko skroluju i gde nailaze na trenje.

2. Kupovni tok: na kom koraku dolazi do najvećeg osipanja od pregleda proizvoda do kupovine.

3. Namera dolaska: kroz koje organske upite i landing stranice korisnici ulaze i šta očekuju da pronađu.

Tek kada se ta tri sloja ukrste, UX/UI odluka dobija razlog, prioritet i metriku kojom može da se proveri.

Šta nam je pokazao svaki izvor podataka

Microsoft Clarity: ponašanje na stvarnoj stranici

Clarity heatmape, scroll mape i snimci sesija daju kvalitativni kontekst koji zbirna stopa konverzije ne može da pokaže. Mogu da otkriju da korisnik vidi kontrolu, ali je ne razume; da više puta tapne isti element; da ne stiže do važnog CTA-a; ili da se vraća jer je izgubio prethodni kontekst.

Microsoft u dokumentaciji navodi da Clarity heatmape prate klikove i skrol na mobilnim, desktop i tablet uređajima. Za DDG Fashion to je bilo važno jer veliki deo kupovnog puta nastaje na telefonu i u in-app browserima društvenih mreža. Pogledajte Microsoft Clarity dokumentaciju.

GA4: mesto korisnika u eCommerce toku

GA4 smo koristili da razlikujemo problem otkrivanja proizvoda od problema korpe ili checkouta. Google-ov eCommerce model omogućava praćenje događaja kao što su pregled liste, izbor proizvoda, dodavanje u korpu, početak checkouta i kupovina. Google Analytics eCommerce dokumentacija objašnjava kako ti događaji grade sliku ponašanja kupca.

To je promenilo redosled rada. Umesto da ceo projekat svedemo na „lepši checkout“, prioritet smo usmerili na površine na kojima korisnik pronalazi proizvod, bira veličinu i odlučuje da ga doda u korpu.

Google Search Console: namera pre ulaska na sajt

Search Console daje odgovor na drugačije pitanje: kroz koje upite i landing stranice korisnik uopšte dolazi? To je posebno važno kod velikog fashion kataloga, gde kategorije, podkategorije, brendovi, sezonske stranice i pojedinačni proizvodi imaju različitu nameru.

Povezivanje Search Console-a sa GA4 omogućava da se organski upit i landing stranica posmatraju zajedno sa ponašanjem posle klika. Google-ova dokumentacija navodi da integracija prikazuje organske upite, klikove i način na koji se korisnici ponašaju na landing stranicama.

To nam je pomoglo da SEO sadržaj i crawlability ne tretiramo kao dodatak posle dizajna, već kao deo strukture kataloga.

Kako su podaci postali backlog redizajna

Nalaz nije koristan dok se ne prevede u konkretnu izmenu. Zato je svaki prioritet dobio četiri pitanja:

• Koji problem korisnika rešavamo?

• Na kojoj stranici i u kom segmentu se pojavljuje?

• Koji događaj ili signal pokazuje da je izmena korišćena?

• Koji guardrail sprečava da poboljšamo jedan korak, a pokvarimo drugi?

Na taj način redizajn nije postao lista nepovezanih komponenti. Postao je povezan tok: ulaz → pronalazak proizvoda → izbor → korpa → checkout → novo merenje.

Šta smo konkretno unapredili na ddgfashion.rs

1. Jasniji ulaz i prediktivna pretraga

Header je dobio jasniju strukturu, vidljivu pretragu i navigaciju prilagođenu mobilnim i desktop uređajima. Prediktivna pretraga na fokus daje korisne početne predloge, a posle unosa prikazuje kategorije i proizvode. Dodata je podrška za tastaturu, kontrola zastarelih zahteva i jasno loading, success i empty stanje.

Cilj nije bio da pretraga izgleda sofisticiranije, već da skrati put do relevantnog proizvoda.

2. Katalog koji ranije pokazuje proizvode i čuva kontekst

Na listi proizvoda prioritet su dobili naslov, broj rezultata, sortiranje, filteri i sam proizvodni grid. Mobilni filter radi kao drawer sa višestrukim izborom, živim brojem rezultata i jasnim CTA-om za primenu. Aktivni filteri ostaju vidljivi kao chips, a reset zadržava korisnika u odgovarajućem katalogu.

Product kartice sada bolje podržavaju odluku: više fotografija, wishlist, dostupne boje i veličine, popust i kontrolisani Quick Add. Na mobilnom korisnik može da pregleda fotografije gestom, bez slučajnog otvaranja proizvoda ili Quick Add prozora.

3. PDP koji ranije uklanja neizvesnost

Stranica proizvoda je organizovana tako da ključna pitanja dobiju odgovor pre nego što korisnik izgubi fokus: cena i ušteda, izbor veličine, tabela veličina, dostupnost u radnjama, isporuka, plaćanje, povrat i dominantan „Dodaj u korpu“ CTA.

Ako veličina nije izabrana, interfejs vodi korisnika do prve kontrole i prikazuje jasnu inline poruku. Na mobilnom sticky CTA skraćuje put do akcije posle skrola, dok galerija zadržava stabilne dimenzije i optimizovane slike.

4. Upsell i cross-sell kao relevantan merchandising, ne nasumičan dodatak

Broj preporuka nije sam po sebi cilj. Dobra preporuka mora da bude relevantna, dostupna i postavljena u pravom trenutku.

Zato smo merchandising rasporedili kroz tri površine:

• „Upotpuni izgled“ na PDP-u — komplementarni proizvodi dok korisnik razmatra glavni artikal;

• „Dodaj uz ovaj proizvod“ posle dodavanja u korpu — kratak post-add upsell bez gubitka potvrde da je glavna akcija uspela;

• cross-sell u punoj korpi — relevantni proizvodi pre prelaska na plaćanje.

Preporuke koriste stvarni lager i obavezan izbor veličine. Već dodat, skriven ili nedostupan proizvod se izbacuje. Ručno kurirane relacije imaju prednost, a zatim slede komplementarne kategorije i kontrolisani fallback.

Jednako važna odluka bila je šta ne raditi: upsell i cross-sell nisu preneti u checkout. Tamo je prioritet završetak porudžbine, ne novo razmišljanje.

5. Korpa sa jasnijim sledećim korakom

Korpa sada ranije prikazuje pregled porudžbine, ukupan iznos, prag besplatne dostave i dominantan CTA. Na telefonu fiksna donja traka zadržava ukupan iznos i „Završite narudžbu“ u vidnom polju, dok promo kod ostaje sekundarna radnja.

Izmene količine i varijante prolaze kroz kontrolisan red zahteva, kako sporiji odgovor ne bi prepisao novije stanje korpe. To je mali tehnički detalj sa velikom UX posledicom: korisnik dobija pouzdanu potvrdu da je sistem prihvatio akciju.

6. Checkout bez suvišnih izlaza

Checkout je ostao jedna stranica, sa guest kupovinom kao primarnim tokom. Header je sveden, pregled porudžbine je dostupan i na telefonu i na desktopu, polja koriste odgovarajući autofill i mobilne tastature, a greške se prikazuju uz konkretna polja i u sažetku.

CTA jasno razlikuje plaćanje karticom od pouzeća. Dodata je zaštita od duplog slanja i kontrolisan retry za neuspešno kartično plaćanje, bez kreiranja nove porudžbine.

SEO nismo sklonili da bismo „očistili“ dizajn

Jedan od čestih konflikata u redizajnu online prodavnice nastaje kada SEO sadržaj zauzme prvi ekran, a proizvodi se potisnu ispod dugačkog teksta. Obrnuta krajnost je potpuno uklanjanje sadržaja i internih linkova.

Na DDG Fashion kategorijama SEO opis je premešten iza liste proizvoda i kontrole „Prikaži još“, ali je ostao server-renderovan i prisutan tačno jednom u HTML-u. Korisnik ranije dolazi do proizvoda, dok pretraživač i dalje dobija semantički sadržaj, hijerarhiju i interne veze.

Google za eCommerce posebno naglašava crawlable navigaciju, jasnu strukturu kategorija i proizvoda, strukturirane podatke i pravilnu implementaciju paginacije ili postepenog učitavanja. Google eCommerce SEO smernice i smernice za paginaciju i „load more“ bile su važne granice pri implementaciji.

Merenje je deo proizvoda, ne izveštaj posle lansiranja

Novi UI nema vrednost ako ne možemo da utvrdimo kako se koristi. Zato su merchandising zone povezane sa eCommerce događajima: prikaz liste, izbor proizvoda i dodavanje u korpu nose kontekst pozicije i strategije preporuke. Funnel događaji su usklađeni duž korpe i checkouta, a consent i učitavanje marketinških skripti postavljeni su kao deo tracking i analytics arhitekture.

To ne znači da jedan dashboard automatski dokazuje uzročnost. Znači da za svaku sledeću odluku imamo bolju osnovu: isti segment, isti događaj, stabilan transaction ID i poređenje sa realnim backend porudžbinama. O tome zašto samo instaliran alat nije isto što i pouzdano merenje pisali smo u tekstu „Zašto tracking nije samo ubačen Pixel“.

Kako smo proverili redizajn

Redizajn nije prihvaćen samo na osnovu nekoliko lepih screenshotova. Provereni su ključni tokovi na telefonima i desktop breakpointima, uključujući:

• pretragu, tastaturu, Escape i povrat fokusa;

• mobilni meni i mega meni;

• filtere, aktivne chips i vraćanje pozicije;

• Quick Add, izbor veličine i zaštitu od duplog slanja;

• PDP galeriju i dostupnost po prodavnicama;

• post-add drawer, upsell i cross-sell;

• korpu sa različitim brojem artikala;

• checkout validaciju, order summary i metode plaćanja;

• nulti horizontalni overflow i vidljiva focus stanja.

Automatske provere pokrivaju relevantan PHP, JavaScript, SCSS build, cart/checkout ugovore i testove dostupnosti. Produkcija je dodatno proverena posle lansiranja.

Šta danas možemo odgovorno da tvrdimo

Možemo da pokažemo koje su funkcije unapređene, zašto su dobile prioritet i kako se njihov doprinos meri. Možemo da potvrdimo da DDG Fashion sada ima jasniju pretragu i katalog, kontrolisan izbor veličine, više relevantnih upsell/cross-sell tačaka, stabilniju korpu i checkout koji smanjuje distrakcije.

Ne objavljujemo procenat rasta prihoda, konverzije ili prosečne vrednosti porudžbine dok period posle redizajna nije dovoljno dug, sezonski razumljiv i usklađen sa backend podacima. To nije ograničenje priče, već uslov da case study ostane dokaziv.

Šta drugi eCommerce timovi mogu da primene

Ako planirate redizajn eCommerce sajta, krenite od sledećeg reda:

1. Proverite da li je eCommerce merenje kompletno i usklađeno sa backendom.

2. Segmentirajte mobilni, social WebView i desktop saobraćaj.

3. Ukrstite funnel sa heatmapama i snimcima sesija.

4. Povežite organske upite sa landing stranicama i ponašanjem posle klika.

5. Prioritet dajte mestu najvećeg trenja, ne najvidljivijoj komponenti.

6. Upsell i cross-sell postavite tamo gde pomažu odluci, ne tamo gde prekidaju plaćanje.

7. Svaka izmena treba da ima događaj, guardrail i plan ponovnog merenja.

Zaključak

Dobar redizajn eCommerce sajta nije zbir trendova. To je proces u kojem ponašanje korisnika, analitika, organska namera i realna pravila prodaje postaju jedan backlog — a zatim jedan dosledan kupovni tok.

Na DDG Fashion projektu Clarity, GA4 i Search Console nisu ostali tri odvojena dashboarda. Postali su konkretne odluke u pretrazi, katalogu, PDP-u, merchandisingu, korpi, checkoutu i merenju.

Ako želite da postojeću online prodavnicu analiziramo na isti način, zakažite eCommerce analizu. Počećemo od toka koji danas imate, podataka kojima verujete i mesta na kojem kupovina gubi tempo. Možete pogledati i druge uspešne ECOM01 projekte.

Često postavljana pitanja

Šta znači redizajn eCommerce sajta vođen podacima?

To znači da se prioriteti ne određuju samo prema vizuelnom utisku. Ponašanje korisnika, eCommerce funnel, organski upiti, tehnička ograničenja i poslovni cilj povezuju se sa konkretnim UX/UI izmenama i metrikama za proveru.

Koja je razlika između Clarity-ja, GA4 i Search Console-a?

Clarity pokazuje kako korisnik pokušava da koristi stranicu. GA4 pokazuje gde se nalazi u kupovnom toku i koje događaje izvršava. Search Console pokazuje kroz koje organske upite i landing stranice dolazi. Zajedno daju potpuniju sliku od bilo kog alata pojedinačno.

Kako upsell i cross-sell mogu da unaprede online prodavnicu bez ometanja kupovine?

Preporuke treba da budu relevantne, dostupne i postavljene pre checkouta: na PDP-u, posle dodavanja u korpu i u samoj korpi. Checkout treba da ostane fokusiran na završetak porudžbine.

Da li redizajn garantuje rast konverzije?

Ne. Redizajn stvara i testira hipoteze. Rast se potvrđuje tek kroz pouzdano merenje, dovoljno dug period i poređenje sa backend porudžbinama, uz kontrolu sezonalnosti, kampanja i promene strukture saobraćaja.