27. díl — Kódování webu — Jak se staví e-shop Dudlu.cz

Kódování je jistá forma oživování grafického návrhu do interaktivní verze, ve které si můžeme osahat, jak se design bude chovat. Od testování hooverů (efekty po najetí myši na prvky), dropdown menu (horizontální plachta kategorií), po celkové chování na mobilu, tabletu a v různých rozlišeních. Samotný proces testování je poměrně náročný a vyžaduje detailistické oko, proto si v tomto díle ukážeme, jak probíhalo kódování na Dudlu a dáme vám menší checklist toho, co jsme v betě ladili.

Kódování Dudlu
Redesign e-shopu Dudlu.cz — Kódování webu

Checklist kontroly kódování:

Samotné testování probíhá na beta verzi, která může být jednorázově sehraným klonem 1:1 s vaší aktuální verzí, nebo jen beta s pár produkty na ukázku. Opět záleží, jaký máte rozpočet. Čím méně si toho necháte do bety nahrát, tím více budete muset zapojit představivost a hrozí, že do ostré verze vypustíte chyby. My jsme si nechali udělat hodně lite verzi, která obsahovala pár ilustrativní produktů a zároveň jsme jeli i bez externích doplňků, takže u řady věcí jsme netušili jak ve výsledku dopadnou.

Je třeba mít na paměti, že wireframy, návrh designu a samotné kódování dělají často zcela jiné osoby, tedy i pokud si o designu říkáte, jak jste se skvěle s dodavatelem pochopili, tak u kódování sedí jiný člověk, který si výsledný obraz bude interpretovat po svém. Jen pro představu jsme si okolo redesignu vyměnili přes 60 e-mailů, z toho 20 bylo k designu a 40 pro kódování, kde bylo třeba důkladně projít jak na mobilu, tak na desktopu řadu elementů a dotáhnout šablonu k maximální spokojenosti:

  1. Odkontrolovat prázdná místa a zbytečně velká odsazení
  2. Odkontrolovat parametrické filtry a jejich zobrazení
  3. Odkontrolovat dropdown menu a humber menu
  4. Odkontrolovat vizualizaci interních linků
  5. Odkontrolovat ikonky dárků a dopravy zdarma
  6. Odkontrolovat recenze obchodu v kartě produktu
  7. Odkontrolovat zobrazení podobných a souvisejících produktů
  8. Odkontrolovat jazykovou sadu textů včetně microcopy
  9. Odkontrolovat přidání zboží do košíku a celý košík
  10. Odkontrolovat shopping bar do dopravy zdarma zbývá XY Kč
  11. Odkontrolovat zobrazení USP a jejich responzivitu
  12. Odkontrolovat zobrazení podkategorií a jejich responzivitu
  13. Odkontrolovat články a jejich formátování
  14. Odkontrolovat nadpisy, odrážky a číslování skrz celý web
  15. Odkontrolovat informační proužek při aktivaci

A bylo toho samozřejmě více, ale před spuštěním jsme se nejvíce točili okolo těchto detailů, které prostě při tom množství změn utečou a ne vždy se v nich pochopíte na první dobrou.

Finální verze redesignu Dudlu po nasazení na ostrou

A co očekávat po nasazení z bety na ostrou?

Největším rizikem pro nás jsou externí doplňky, které jsme si pro betu nechtěli platit a to byla jediná neznámá proměnná, která nám přidělávala vrásky. Naštěstí tým z eGuru jich drtivou většinu dokázal nahradit vlastním kódem a my se tak očistili od spoléhání se na kompatibilitu třetích stran. I tak pár složitějších doplňků jako Rozbalené dárky v košíku, Product widgets a Poznámka k produktu jsme si nechali a naštěstí vše do designu perfektně zapadlo.  Nový design je venku a je třeba ho ověřit mezi zákazníky, ale o tom až v další díle, tak nás sdílejte, lajkujte a ať i vám e-shopy rostou.

Hlavní partneři projektu Dudlu.cz

Tržby (GA)

 15 000 000 Kč

PPC (reklama): 3 400 000 Kč

Ostatní zdroje: 3 700 000 Kč

SEO (reklama): 5 300 000 Kč

Přímá návštěva: 2 200 000 Kč

Sociální sítě: 400 000 Kč

Data aktualizována: Leden  2024

E-shop spuštěn: Březen 2019

Objednávky (GA)

20 000 transakcí

PPC (reklama): 5 700

Ostatní zdroje: 4 100

SEO (reklama): 8 000

Přímá návštěva: 1 800

Sociální sítě: 400

Data aktualizována: Leden 2024

E-shop spuštěn: Březen 2019

Návštěvnost (GA)

3 300 000 návštěv

PPC (reklama): 350 000

Ostatní zdroje: 285 000

SEO (reklama): 2 500 000

Přímá návštěva: 130 000

Sociální sítě: 35 000

Data aktualizována: Leden 2024

E-shop spuštěn: Březen 2019

WordPress Pricing Table Plugin

Klikněte na CHCI VÍCE a ponořte se do četby celého našeho seriálu

5/5 - (1 vote)
Podpořte autora sdílením:

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *