Frontendový redesign e-shopu Direct Auto
Frontendová implementace redesignu Shopify Plus e-shopu Direct Auto, landing pages a interaktivních komponent včetně kalkulačky financování ve Vue.js.
Shrnutí projektu
V rámci agentury Ideal Eshop se od roku 2024 podílím na rozvoji Shopify Plus e-shopu Direct Auto. Největší částí spolupráce byl kompletní frontendový redesign podle návrhů ve Figmě, vedle kterého jsem pracoval také na landing pages a funkčních komponentách, například kalkulačce financování vytvořené ve Vue.js.
Detaily projektu
Kontext, problém, řešení a moje role v projektu.
Kontext klienta
Direct Auto nabízí automobily a související služby prostřednictvím vlastního e-shopu. Web proto neslouží pouze jako katalog vozidel, ale musí zákazníkovi srozumitelně představit konkrétní nabídku, parametry vozů, možnosti financování a doplňkové služby.
Kontext spolupráce
Na projektu Direct Auto pracuji nárazově podle aktuálních potřeb a rozsahu připravovaných změn. Nejvýznamnější částí byla frontendová implementace nového designu e-shopu, která zahrnovala úpravy klíčových zákaznických stránek a komponent. Vedle samotného redesignu se podílím také na tvorbě landing pages a technicky složitějších částí webu.
Řešení
Jednotlivé části redesignu jsem implementoval do existujícího Shopify Plus tématu podle návrhů připravených ve Figmě. U detailu produktu bylo potřeba vytvořit přehledné rozložení pro informace o vozidle, ceně a navazujících možnostech. U kolekcí a výpisů vozidel se řešilo nové vizuální zpracování karet a struktury stránky. Kalkulačka financování vznikla ve Vue.js ve spolupráci s dalším vývojářem a moje práce zahrnovala frontendovou implementaci a začlenění do prostředí e-shopu.
Co jsem udělal
- Implementace nového designu podle Figmy
- Tvorba a úpravy Shopify sekcí
- Frontendové zpracování produktových a kolekčních stránek
- Tvorba landing pages pro doplňkové služby
- Dopracování responzivního chování jednotlivých částí
- Úpravy existujícího Shopify Plus tématu
- Testování a nasazení změn
- Frontendový vývoj interaktivních komponent ve Vue.js
- Spolupráce s dalšími vývojáři na složitějších funkcích
Co jsem řešil
- spolupráce na redesignu e-shopu Direct Auto
- frontendová implementace detailu vozidla
- redesign kolekcí a výpisů vozidel
- úpravy produktových a obsahových komponent
- landing pages pro doplňkové služby
- hero sekce a další prezentační části
- responzivní zobrazení nového designu
- kalkulačka financování ve Vue.js
- napojení kalkulačky do existujícího prostředí e-shopu
- testování a nasazování jednotlivých změn
Hlavní výzva
Direct Auto kombinuje prvky klasického e-shopu s prezentací komplexního produktu. Zákazník potřebuje rychle pochopit parametry konkrétního vozu, možnosti financování, dostupné služby a další podmínky nabídky. Redesign proto nebyl pouze vizuální změnou. Nové rozhraní bylo potřeba převést do funkční a responzivní podoby tak, aby informace zůstaly přehledné i na stránkách s větším množstvím obsahu. Technicky náročnější částí byla kalkulačka financování, která musela reagovat na vstupy zákazníka a vizuálně zapadnout do nového designu.
Výsledek
Výsledkem je modernizované uživatelské rozhraní, které sjednocuje hlavní části e-shopu a umožňuje srozumitelněji prezentovat vozidla i související služby. Nový design detailu produktu, kolekcí a landing pages byl převeden do responzivní podoby použitelné napříč různými zařízeními. Kalkulačka financování doplňuje prezentaci vozidla o interaktivní nástroj, díky kterému si zákazník může přímo na webu pracovat s parametry financování.
Poznámka ke spolupráci
Projekt je realizován v rámci agentury Ideal Eshop. Na projektu působím jako frontendový vývojář a prezentuji zde pouze části, na jejichž implementaci jsem se přímo podílel. Na některých technicky složitějších částech, například kalkulačce financování, jsem spolupracoval s dalšími členy vývojového týmu.
Použité technologie
Vybrané oblasti práce
Konkrétní části projektu, na kterých jsem se v rámci spolupráce podílel.
Kalkulačka financování
Interaktivní výpočet financování ve Vue.js, na kterém jsem spolupracoval s dalším vývojářem.
- frontendová implementace
- responzivní zobrazení
- začlenění do designu webu
- napojení do existujícího prostředí e-shopu
Redesign detailu vozidla
Frontendová implementace nového detailu produktu podle návrhu ve Figmě.
- přehledné zobrazení parametrů vozu
- prezentace ceny a souvisejících možností
- dobrá použitelnost na desktopu i mobilu
Redesign výpisu vozidel
Nové zpracování kolekcí a výpisů produktů sjednotilo prezentaci jednotlivých vozidel s celkovým vizuálním stylem.
- responzivní zobrazení
- úpravy produktových karet
- nová struktura stránky
- snazší procházení nabídky
Landing page doplňkových služeb
Implementace výrazné hero sekce a navazující landing page pro služby spojené s nákupem vozu.
- převod návrhu z Figmy
- hero sekce
- obsahové bloky
- přizpůsobení pro různé velikosti obrazovek
Ukázky z projektu
Vybrané screenshoty z redesignu e-shopu, výpisu vozidel, kalkulačky financování a landing page doplňkových služeb.
Kalkulačka financování
Detail vozidla
Výpis vozidel
Doplňkové služby
Potřebujete redesign nebo novou funkci pro svůj e-shop?
Pomohu s převodem designu z Figmy, úpravou existujícího Shopify nebo Shoptet řešení i vývojem interaktivních komponent na míru.
Probrat projektDalší projekty
Vývoj funkcí na míru pro Renovality CZ a SK
Interaktivní test typu pleti, úpravy košíku pro slevové kampaně, produktové poradenství a další vlastní funkce pro český a slovenský Shoptet.
Dlouhodobý vývoj Shoptet e-shopů Buga a Buga Outlet
Kompletní implementace nového vzhledu, vlastní funkce nad rámec Shoptetu a dlouhodobý rozvoj hlavního e-shopu Buga i jeho outletové verze.