Shopify Frontendový vývoj Redesign Landing pages

Frontendový redesign e-shopu Birne

Frontendová implementace redesignu Shopify e-shopu Birne, úpravy homepage, katalogu, karet vozidel a tvorba kampaňových landing pages.

Shrnutí projektu

V rámci agentury Ideal Eshop se od roku 2024 podílím na rozvoji e-shopu Birne. Největší částí spolupráce byla frontendová implementace redesignu, při které jsem pracoval na částech homepage, kartách vozidel, katalogu a dalších důležitých částech zákaznického rozhraní. Vedle redesignu jsem se podílel také na tvorbě landing pages pro konkrétní kampaně a cílové skupiny.

Shopify

platforma

03/2024

začátek spolupráce

Redesign

hlavní typ práce

Landing pages

kampaně

Detaily projektu

Kontext, problém, řešení a moje role v projektu.

Kontext klienta

Birne nabízí automobily formou operativního leasingu a dalších souvisejících služeb. Web proto musí přehledně představit dostupnou nabídku vozidel, jejich parametry a podmínky, ale zároveň podporovat také samostatné kampaně zaměřené na konkrétní produkty nebo skupiny zákazníků.

Kontext spolupráce

Na projektu Birne pracuji nárazově podle aktuálních potřeb a připravovaných kampaní. Největší část mé práce tvořila implementace nového designu e-shopu a úpravy částí, které zákazníci používají při procházení nabídky vozidel. Součástí spolupráce je také tvorba samostatných landing pages, které představují konkrétní nabídky, služby nebo kampaně různým skupinám zákazníků.

Řešení

Jednotlivé části redesignu jsem implementoval do existujícího Shopify tématu podle návrhů připravených ve Figmě. U homepage jsem pracoval na vybraných obsahových a prezentačních částech, které představují nabídku Birne a směřují zákazníka do katalogu nebo na konkrétní služby. Karta vozidla byla upravena tak, aby přehledně prezentovala klíčové informace a fungovala konzistentně v různých částech katalogu. Landing pages vznikaly jako samostatné kampaně podle připravených návrhů a musely technicky i vizuálně zůstat součástí jednoho e-shopového prostředí.

Co jsem udělal

Implementace designu podle Figmy
Tvorba a úpravy Shopify sekcí
Redesign částí homepage
Frontendové zpracování katalogu vozidel
Úpravy karet jednotlivých aut
Tvorba kampaňových landing pages
Responzivní chování jednotlivých komponent
Testování v různých rozlišeních a prohlížečích
Práce s Gitem
Nasazování změn do produkčního prostředí

Co jsem řešil

frontendová implementace redesignu e-shopu
úpravy vybraných částí homepage
redesign karty vozidla
redesign katalogu a výpisu aut
responzivní zobrazení katalogu
úpravy obsahových a produktových komponent
landing page pro veterináře
kampaň Zkus a kup
landing page pro exkluzivní nabídku vozů Mercedes
další produktové a kampaňové landing pages
testování a nasazování jednotlivých změn

Hlavní výzva

Birne pracuje s rozsáhlejší nabídkou vozidel, jejich parametry a různými variantami služby. Katalog a jednotlivé karty proto musí zobrazit dostatek informací, aniž by působily přeplněně nebo komplikovaly orientaci zákazníka. Další výzvou jsou samostatné landing pages, které mají rozdílný účel a cílovou skupinu. Každou stránku bylo potřeba implementovat tak, aby odpovídala konkrétnímu návrhu a současně vizuálně navazovala na hlavní web Birne.

Výsledek

Výsledkem je modernizované uživatelské rozhraní, které sjednocuje části homepage, katalog vozidel a produktové karty s aktuálním vizuálním stylem Birne. Nové části e-shopu byly převedeny do responzivní podoby použitelné na desktopu, tabletu i mobilu. Kampaňové landing pages umožňují značce samostatně komunikovat konkrétní nabídky a cílit na rozdílné skupiny zákazníků, aniž by bylo nutné měnit hlavní strukturu e-shopu.

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.

Použité technologie

Shopify Liquid HTML Tailwind CSS JavaScript Git Figma