Projekt E-pneumatiky.cz stál před redesignem, protože původní web nebyl responzivní. Podíl uživatelů z mobilu se stále zvyšuje, takže to byl logický krok.

Původní neresponzivní web, ze kterého jsme vycházeli

Příprava a začátek projektu

Přípravu můžete chápat různě. Někdy je to předimplementační analýza, jindy marketingový průzkum. Zde bylo klíčové zvládnout precizně redesign uživatelského rozhraní (UI) a zlepšit UX eshopu.

První schůzka:

• Řekli jsme si, co je cílem práce a jakou máme představu o postupech. Každý může totiž chápat smysl práce různě.
• Prošli jsme celý současný web a nechali jsme si vysvětlit aktuální stav webu na každé podstránce, abychom nic nepřehlédli.
• Nacenili jsme orientační čas na práci a podrobnější rozpis činností.

Definovali jsme zadání práce takto:

“Chtěli bychom dobře zvládnutou technickou tvorbu wireframů pro 3 responzivní breakpointy a vnést do projektu tvoje zkušenosti v UX designu.”

Projekt hlídala z pohledu SEO Tereza Nováková — to abychom nenavrhli nic, co by pokazilo současné SEO e-shopu.

Průběh práce a co jsme řešili

Vycházeli jsme především z toho, že lidé jsou už nějak zvyklí e-shopy používat a zásadní věci musím dodržet (tyto poznatky jsou jinak běžnou součástí každé analýzy použitelnosti e-shopu) – víme, jak má správně fungovat filtr a víme, jak se má chovat menu i nákupní košík. 

Obvykle zkoumáme větší problémy, které nemají tak jednoznačné řešení. Někdy musíme ověřit funkci s uživateli, jindy hledět na mousetracking apod. Na podrobnější uživatelský výzkum nebyl ovšem prostor, takže jsme se museli spokojit s informacemi z produktového týmu od klienta.

Na webech se zabýváme obsahem, důvěryhodností a přesvědčivostí. Na starém webu nebyly mikrotexty (rozsah i obsah) úplně v pořádku, tak náprava do lepšího stavu nezabrala moc práce. Nemáme sice jak změřit vliv, ale rádi věříme, že to byl dobrý tah.

Responzivní rozhraní pro mobily a tablety

Postupně jsme se dostávali na složitější rozhraní a hlouběji do eshopu – na ladění rozhraní pro mobily a tablety. A vznikaly tam zajímavé diskuse.

“Naklikaný to bylo fakt rychle. Co jsem neodhadl, bylo množství připomínek.”

"Měl jsem z komentářů upřímně radost, protože šly hodně do hloubky a byly konstruktivní. Netočilo se to okolo blbostí. Konečně někdo, kdo se zajímá, proč to takhle vypadá a jaký to má důvod. Rád nad svou prací diskutuju a když se můžu podělit o know-how, tak je to prostě fajn."
-- Marek Čevelíček

39 responsivních wireframů redesignu

To je pěkně velká sada obrazovek v podstatě k jednoduchému e-shopu. Až když si jej proklikáte, zjistíte, že vlastně obsahuje 3 kroky checkoutu. Dále trojkombo každého e-shopu – homepage, katalog produktů, detail produktu. A pár typově odlišných obrazovek pro různé sekce. Pneumatiky se prezentují trochu jinak než hlinikové disky.

Všechno to násobte třemi (desktop, mobil a tablet) + stylesheet design elementů.

Nacenění redesignu se povedlo — 90h předpokládaného času. Ale dost se změnil časový fond na jednotlivé úkoly. Tak třeba jsme nečekali, že wireframy budeme tvořit kratší dobu, než úpravy a připomínkování, kterého bylo fakt hodně. Tohle se ale prostě stává, podstatné je u každého projektu včas a průběžně komunikovat.

*     *     *

Projekt jsme připravili do stavu, kde všechny obrazovky jsou hodně podrobně navržené i prokonzultované. Konkrétně v týmu s Jardou (kodér) a Terkou (SEO) byla fajn spolupráce:

---

Výsledek redesignu e-shopu

www.e-pneumatiky.cz po zpracování návrhu e-shopu grafikem.

 

*     *     *

 

Čeká i váš projekt redesign? Pomůžeme vám vytěžit z toho maximum!

Redesign/UX e-shopu →