TempleStore.cz - případová studie eshopu

MyEgo.cz

TempleStore.cz - případová studie eshopu

Webdesign, CMS 29.11.11

Vytvořit eshop je na první pohled jednoduché - seznam zboží, detail produktu, nějaké to hledání, objednávkový formulář a hotovo. Takových eshopů jsou desítky tisíc a moc nefungují. Na druhý pohled už to tak jednoduché není - existují různé parametry zboží, jeho fotky, popisy, související zboží, spousta marketingových akcí, věrnostní programy, kupóny, různé platební metody, propojení s účetnictvím, online napojení na sklady prodejen a desítky dalších věcí, na které musí dokonalý eshop myslet.

Jednoduchý eshop je taková Škoda Fabia, má čtyři kola a volant. Špičkový eshop je Mercedes upravený od AMG. Jedná se sice také o auto, ale na úplně jiné úrovni.

Na webu TempleStore.cz je navrženo vše pro maximální zážitek zákazníka. Je to AMGéčkový Mercedes. Jde o to, aby zákazník nejen nakoupil, ale také si odnesl fantastický pocit z nákupu, rád se vracel a doporučil eshop dalším lidem.

Osobně si myslím, že v případě TempleStore.cz jde o jeden z nejlepších eshopů v republice vůbec. V nabídce nyní naleznete přes 15 000 kusů zboží - od snowboardů, skate a street oblečení, přes boty až po různé doplňky, vše je skladem, a kromě eshopu samotného dostupno i v osmi kamenných prodejnách, k okamžitému odběru.

TempleStore.cz

Homepage webu obsahuje upoutávky na aktuální akce, přehledné kategorie zboží, akční a nejprodávanější zboží a adresy kamenných prodejen.

Grafika je cílena na klientelu ehopu - lidé 16-30 let milující boardové sporty a módu s nimi spojenou. Funkce eshopu, popisované dále, jsou ale použitelné obecně, při prodeji jakéhokoliv zboží.

Homepage eshopu

Kdo za to může?

Dodavatelem je GlobalDat a.s. - MyWebdesign.cz.

Grafiku kreslil Pavel Kout / Webface (jednalo se o 25 různých PSD), eshop je propojen na InfoOffice účetnictví a skladové hospodářství (Ing. Karel Pavlík), a vše běží na Windows 2008 R2 / SQL Server 2008 R2 / IIS 7.5 platformě.

Špičkový eshop samozřejmě nemůže vznikout bez toho nejdůležitějšího - výborného klienta a jeho vize. V případě LIP distribution s.r.o. je to jmenovitě Tomáš Jarolím, který se o celý projekt staral a napsal úžasné analýzy. Nejedná se úplně o finále, ale o začátek spolupráce - v přípravě jsou další shop-in-shop vzhledy pro značky, snowboard konfigurátor a další pokročilé marketingové akce. Ale už v této fázi je na co koukat :-)

Seznam produktů a pár super vychytávek

Chcete si třeba koupit pánskou snowboard bundu? Ukážeme vám přehledný seznam zboží, který pamatuje na to, aby se dobře nakupovalo. Tlačítka Předchozí / Další jsou velká, aby se na ně opravdu snadno klikalo (většina eshopů řeší stránkování naprosto chybně), čísla stránek jen opticky udávají celkovou pozici v seznamu zboží, a vše je zpracováváno rychle AJAXem, bez reloadů stránky.

Unikátní vlastnost je náhled na produktové fotky v levém horním rohu, bez nutnosti klikat na produkt. Podívejte se na tuto stránku a najeďte myší nad pár produktů - uvidíte náhled fotky. Pod náhledem se zobrazují dostupné velikosti bundy.

A ani to není vše - má-li produkt více fotek, zobrazí se u něj šipky a můžete ve fotkách listovat už přímo v tomto seznamu, bez přecházení do detailu produktu. Super komfort pro zákazníka. A aby to bylo hezké, je u toho i rychlá animace.

Seznam zboží - hledáme bundu

Vybrat si z několika set bund tu pravou pro vás umožňují filtry. Chcete červenou XL bundu? Snadné, kliknete na přehledný filtr. Stejně je možné pracovat s rozmezím slev, cen, či dodatečných parametrů, které jsou u každé kategorie zboží různé.

Filtr na červené bundy

Detail produktu

V detailu produktu vidíte velké produktové fotky, barevné varianty zboží, a samozřejmě velikosti.

Vše je zase zpracováno tak, aby zákazník mohl snadno nakoupit - velikosti jsou navrženy jako velká tlačítka (a nikoliv jako drop-down box u špatných eshopů), a pomocí AJAXu (tedy bez reloadu stránky) se aktualizují informace o dané variantě - skladová dostupnost v eshopu a na prodejnách, popis, související zboží.

Vybraná bunda

Propracované související zboží

Pod produktem vám zobrazíme související zboží. K bundě si pravděpodobně budete chtít koupit kalhoty, nabídneme vám tedy rovnou dvoje, a to ve stejné barevné variantě a od stejné značky (dokonce i ze stejné módní kolekce!), dva kulichy, a dvoje rukavice. Komplet výbava na hory? Jasně, proto vám to ukazujeme...

U každé kategorie je možné v eshopu definovat, jaké související produkty budou nabízeny.

Související zboží načítáme AJAXem. Proč? Jeden z klíčových zážitků na webu je maximální rychlost zobrazení stránky, méně podstatné informace jsou proto dotaženy o sekundu později, ale nijak neblokují zobrazení produktu.

K bundě vám nabídneme i kalhoty, rukavice a kulich

Registrace Facebookem

Zákazník se může do eshopu registrovat velice snadno Facebookem. Pokud už dříve v TempleStore.cz nakupoval, či dostal slevovou kartu na kamenné prodejně, spárujeme mu jeho Facebook účet na tuto databázi a nabídneme mu ihned i stav jeho věrnostních bodů. Může si hned vybrat třeba dárky zdarma a nechat si je poslat.

I když se registruje Facebookem, pošleme mu na jeho email vygenerované přístupové jméno a heslo. Může pro přihlášení použít obě varianty.

Účet zákazníka nabízí i přehled o fakturačních a dodacích adresách, objednávkách a další informace. Vše je přitom online, v propojení s InfoOffice účetnictvím.

Facebook registrace zabere 1 sekundu a nabídne vám spoustu funkcí

Nákupní košík

Nákupní košík, i pro neregistrovaného klienta, nabízí řadu cross-selling a up-selling možností. Pod košíkem vidíte kolik věrnostních bodů získáte za tento nákup a můžete si ihned za ně vybrat dárky.

Je to skvělá motivace proč koupit - nemusíte nakoupit jako u jiných eshopů, až pak se vám připíší body, poté uděláte další nákup a k němu následně dostanete dárek. Máte dárek hned. Zákazník je spokojen (a obchodník neplatí dvakrát poštovné).

Nákupní košík

Marketing, reklama, dárky

Kdo by nechtěl slevy a dárky? Slevy a dárky jsou základem prodeje, lidé milují věci, které dostávají zadarmo.

V TempleStore.cz je celá řada marketingových konceptů, jak zákazníka potěšit. Po registraci sbírá věrnostní body a může si za ně vybírat dárky zcela zdarma. K určitým produktům běží akce +1 zdarma, například si koupíte bundu a dostanete k ní kulich zdarma. A samozřejmě si můžete vybrat, jaký přesně kulich to bude.

Je možné vytvářet slevové akce a promo bannery. Je možné poskytovat slevy na kupóny pro určité zboží, značku či kategorii.

A pro studenty je nabízena 10% sleva na ISIC kartu, s online verifikací její platnosti.

Marketingové akce, dárky a slevy

Zde je příklad marketingové akce +1,, kdy jsem si koupil bundu, a eshop mi nabídne jeden (ze 150) kulichů zdarma. Účetně se mimochodem ten kulich prodá za 1 Kč (nemůžete prodávat za 0 Kč) a sníží se o tu korunu cena původního zboží. Pro zákazníka tedy opravdu zdarma.

K zakoupené bundě dostanete kulich zdarma

Značky a výrobci

Orientovat se můžete v eshopu i podle značek. Do budoucna navíc každá z top značek dostane svůj unikátní design (nejen logo, ale i pozadí, jiné menu, barvy), shop-in-shop provedení.

Výběr podle značek

Různé dárky v košíku

A takto vypadá můj finální nákupní košík. Přišel jsem si koupit červenou bundu, systém mi ale doporučil i červené a černé kalhoty, na ty černé od Vehicle jsem dokonce získal slevu díky kupónu "VEHICLE", k tomu jsem dostal kulich zdarma (+1 k té bundě), a za získané (virtuální) body jsem si vybral dárek - VEHICLE potítko.

Nákupní košík si mohu také uložit pro pozdější použití, přidat takto uložený košík zpět nákupního košíku aktivního, či sdílet jej na Facebooku a pochlubit se co kupuji (či bych si chtěl koupit).

Zboží zdarma, dárky, slevové kupóny

Doprava a platba

Nezbývá tedy, než přejít do dalšího kroku - k volbě dopravě a platbě. Graficky velice poutavě zpracované. Pokud si zvolíte osobní odběr na prodejně, AJAXem vám ukážeme její adresu, mapu a telefon.

Komfortní info o dopravě

A ve třetím kroku, kdy znáte finální cenu i s dopravou a platbou a máte vybrané dárky, vyplníte dodací údaje k objednávce. Můžete nakoupit i bez registrace, ale systém vás nenápadně motivuje k registraci.

Fakturační a doručovací adresa

Online propojení s účetním systémem

Objednávka je dále zpracovávána InfoOffice back-endem. Pokud je to nutné, je zboží přeposláno z více skladů do jednoho centrálního. A o každém tomto kroku máte přehled, online:

Stavy objednávek

Navštívené a oblíbené produkty

Stalo se vám někdy, že jste si prohlíželi katalog zboží, a u desátého kusu jste se chtěli vrátit k tomu prvnímu, ale nevěděli jste jak jej najít? Jasně, je to častý problém. Zde vám také pomůžeme, i pro neregistrované klienty nabízíme automaticky seznam navštívených produktů, můžete se k nim jednoduše vracet.

Podobně jednoduše si můžete přidávat produkty do oblíbených - stačí kliknout na ikonu srdíčka u produktu. Opět AJAX. Vybíráte si z 3 různých bot a nevíte zatím které? Přidejte si je do oblíbených.

Navštívené a oblíbené porodukty

Hledání a našeptávač

Systém používá pokročilý fulltext pro hledání produktů i jejich našeptávání. A hledá se nejen v produktech, ale i ve značkách a v kategoriích. Snadno naleznete, co chcete.

Vyhledávání a našeptávač

Ostatní stránky

Nadesignovány na míru jsou i statické stránky eshopu - například informace o jednotlivých prodejnách. Zážitek z webu musí být 100%!

Detail kamenné prodejny

Chcete podobný eshop?

Chcete také eshop, který vypadá a funguje jako AMGéčkový Mercedes, namísto běžné Fabie? A nemusí být podobný TempleStore.cz, bude dokonale upraven pro vaše klienty.

Budeme moc rádi, když nás kontaktujete.

Komentáře

1 David Kadlec 29.11.11, 10:11:29

Dobrý den, zajímalo by mě, jestli E-Shop procházel nějakým větším testováním - zvlášť u cílové skupiny. To Ajaxové přepínání stránky s produkty je pěkné, ale osobně bych ocenil, kdyby po přechodu na další stranu mě prohlížeč zobrazil opět první řádek produktů, protože podle mě každý vybírá odshora dolů, kdežto teď to jen překreslí produkty a musím buď vyjet až nahoru a jet dolů, nebo jet "cik-cak" a přepínat stranu nastřídačku nahoře a dole. Dál bych filtr aktivoval až po nějakém stisknutí tlačítka, když navolím nějaký filtr, tak se překreslí produkty a já vyberu další a opět se překreslí.. Podle mě to zpomaluje, radši bych si navolil filtry a nechal zobrazit už mnou vyfiltrované zboží.
Toť jen pár poznatků a názorů od cílové skupiny.
(Poznámka k rolování u produktů. Možná je to dáno mým rozlišením notebookových 1366x768, ale to má v cílovce každý druhý a asi by stálo za to se na to podívat.)
2 Radek Hulán 29.11.11, 10:11:40

[1] procházel testováním a připomínkováním. Samozřejmě na konkrétní detaily mohou mít různí lidé různé názory.. :)

Nicméně skrolování stránky k hornímu kraji je dobrá připomínka, už to funguje ;)
3 Honza Krenstetter 29.11.11, 11:11:10

Má to drobnou chybu. Mám start lištu vpravo a bohužel mi to část obrázku "dává" jako by do lišty.
Bez odhledu na prohlížeč, teda nezkoušel jsem IE, ale chrome i Firefox jsou na tom stejně. viz. obrázek:
http://www.templestore.cz/s/kola#section=7&sort=ta&page=1&offset=45...
4 Tomas Kubik 29.11.11, 11:11:10

Mám pár otázek :) Jak dlouho trval vývoj obchodu,? Začínalo se od nuly? A jak to vypadá se znovupoužitelností konkrétní implementace (tj. je velký problém použít stávající systém na úplně jiný sortiment?)
5 Honza Krenstetter 29.11.11, 11:11:11

[3] špatný link :-/
http://imageshack.us/f/94/plochaeshop.jpg/...
6 Radek Hulán 29.11.11, 11:11:14

[3] to je v pořádku, jinak by to překrývalo produkty, kdyby náhled byl více vpravo... Na šířce viewportu menší než 1030px to může dělat, uživatelé s běžným monitorem to mají ok.

Náhled takto vlevo je prostě záměr designéra.
7 Radek Hulán 29.11.11, 11:11:20

[4] vývoj cca od července, tedy 4 měsíce. Počítám do toho i analýzu (funkční, technickou, marketingovou), zkoumání struktury (do té doby neznámého a nepříliš dokumentovaného) účetnictví pro online propojení, datový model, návrh cca 25 PSD grafikem, šablony, až po vlastní programování. Trošku se to časově zaseklo jen na grafice (klient ji hodně připomínkoval), plán byl o měsíc kratší.

Znovupoužitelné je téměř vše. Ono i takové napojení na konkrétní účto realizujeme jako různá VIEW a INSTEAD OF triggery, kdy eshop pracuje se "svojí" strukturou (názvy tabulek a sloupců, které on zná), a ta je na pozadí překládána do struktur daného účta.
8 Tomas Kubik 29.11.11, 12:11:08

[7] 4 měsíce je pak , bych řekl, hodně dobrá doba (i s ostrým nasazením) ... Pro celistvý obrázek, kolik programátoru, krom grafika, na tom bylo zapojeno?
9 Petr Vytlačil 29.11.11, 12:11:50

Moc pěkná práce, přehledné, z uživatelského hlediska komfortní, mnoho možností jak nalézt vhodné zboží atd.. Nějaké drobnosti bych sice jako uživatel chtěl jinak řešeny, ale to je jen subjektivní pocit.
Super práce!!!
Snad budu mít jednou více času a síly také si naprogramovat tak propracovaný eshop.
10 Ivan Moc 29.11.11, 01:11:10

Pěkné, jen bych měl malou připomínku, když listuji produkty a dám v prohlížeči "Zpět" tak se nezobrazí žádné produkty ale jen zpráva:
"Pro uvedenou kombinaci parametrů nebylo nalezeno žádné zboží."
s nutností provést refresh. Prohlížeč chrome. Také mi celý web přijde opravdu pomalý, nejsem na žádné rychlé lince, ale třeba Alza se načítá mnohonásobně rychleji a to Alza zobrazuje 35 produktů (vs. 15).
11 Radek Hulán 29.11.11, 01:11:24

[10] díky za připomínku, AJAXové "zpět" funguje, kromě úplně první stránky, tam byla chyba, je opravena.

Alza se určitě na pomalé lince načte rychleji - nemá skoro žádnou grafiku, webové fonty, ani velké obrázky a náhledy produktů jako TempleStore. Jen obrázek na pozadí u TempleStore má 300KB :) Zážitkový web ale nemůže být "plochý" jako prodejce elektroniky.
12 Petr Jirků 29.11.11, 03:11:55

Zdravím,
Velice se mi líbí zpracování. Často nesouhlasím s Vašimi striktními názory, ale tento eshop je více než povedený. Perfektní jsou náhledy fotek na výpisu kategorie. Ráno při průchodu na další stránku mě stránka občas přesměrovala místo nahoru na patičku. (nyní jsem nezaznamenal, takže asi opraveno).
Rád bych se zeptal na drobečkovou navigaci. Je zaměřena na strukturu e-shopu. Není správné použití generování drobečkové navigace přesně tak jak se uživatel pohybuje webem až k poslední položce ve struktuře webu?
Druhý dotaz: Jak hodláte bojovat s vyhledávači, když firma má obsahově stejný a již zaindexovaný eshop?
Jinak moc povedené.
13 Daniel Mrózek 29.11.11, 04:11:53

E-shop opravdu hodně povedený, a nejspíš i souhlasím s tím, že je to nejlepší eshop v republice (teda alespoň z této kategorie a z těch co znám).
Jeden návrh bych ale měl. Když už se stránkování, načítaní náhledů a dalších věcí řeší přes AJAX, proč toho nevyužít i při nastavování filtrů. Ten reload mě tam sice až tak neštve, ale jsem na 100Mb/s lince, s pomalejším připojením už by ten reload až tak příjemný asi nebyl...
14 Radek Hulán 29.11.11, 05:11:50

[13] AJAXové filtry nejsou problém - hodinka implementace. Už fungují :)
15 singha 30.11.11, 01:11:08

Souhlasím s tím, že shop se povedl a je výborně vybavený. Nicméně bych přece jen přidal svou poznámku do mlýna:
Parametrů produktu může být více a můžou nabývat i jiných hodnot, než jsou krátké řetězce typu "XL". Tak např. barva podlahy (bavíme se o univerzálním shopu pro jakékoliv zboží, žejo) může být "Bělené dřevo černé". Takových hodnot jednoho parametru se u jednoho produktu může v reálu vyskytnout třeba i deset a nedej bože, aby těch parametrů na výběr bylo u produktu více :)
Pak už se použití user-friendly tlačítek místo "drop-down box u špatných eshopů" nezdá, podle mého názoru, až tak úplně ideální.
16 Radek Hulán 30.11.11, 02:11:06

[15] dle mého je drop-down box vždy špatně, je potřeba to řešit jinak.. Drop-down neukazuje co je možné zvolit, skrývá to.
17 singha 30.11.11, 05:11:23

[16] U drop-downu je samozřejmě label a pak je zřejmé (pokud je popisek vhodně zvolený), jaké hodnoty se v něm asi skrývají.
Já rozumím vaší argumentaci, ale přemýšlím v rovině univerzální aplikace, která by se dala použít pro všechny typy zboží a jakýkoliv shop.
18 Jaroslav Mikuš 30.11.11, 05:11:56

Trochu je pro mě matoucí údaj "Přihlašovací údaje", kde se má povinně zadat email v části "Nakoupit bez registrace".
Chápu smysl, někam by mělo přijít info o objednávce atd., ale může to mást zákazníky, kteří se registrovat nechtějí, žádnou registraci nemají a tudíž nemají ani "přihlašovací email".
Lepší by bylo začlenit email jako povinnou položku do fakturačních údajů s vysvětlivkou, že na tento email přijde potvrzení objednávky.
19 Radek Hulán 30.11.11, 06:11:13

[18] rozumím, ale takto je to záměr. Lidi jasně uvidí, že mezi registrací a neregistrací vlastně není významný rozdíl (ani nemůže být, položky jsou potřeba stejné), a registrují se. Fyzicky se jedná o identický formulář, mohu vyplnit údaje jako neregistrovaný, přepnout se na registraci, hodnoty zůstávají. Má to pro ně výhody - třeba sbírání bodů a slevy, které by poté stejně chtěli (volají, dožadují se slev a tak). Toto jemné popíchnutí směrem k registraci to řeší.

Ale je fakt, že "Přihlašovací údaje" by se mohlo přejmenovat na "Kontaktní email" nebo tak něco..
20 Jaroslav Mikuš 30.11.11, 11:11:44

[19] Tak pak nastává otázka smyslu volby "Bez registrace", pokud nutím zákazníka vypsat to samé.
Osobně bych se přimlouval pro maximální zjednodušení. Kdy bez registrace by byl nutný pouze ten email a nic jiného. Zákazník, který se registrovat nechce k tomu má své (a je jedno že často iracionální) důvody. V řadě případů tedy stejně budou údaje smyšlené s výjimkou toho emailu, který ví, že musí zadat správně. A až v tom emailu by byla informace, že když se zaregistruje, získá za daný nákup xx bodů, slevy atd atd. A ještě produktivnější na zisk uživatelů by mohl být děkovný email po 14 dnech od nákupu, kdy uplyne "vracení lhůta". Něco jako "Děkujeme za nákup a těšíme se na Vaši další návštěvu. Pokud se zaregistrujeme, zapíšeme Vám ještě zpětně xx bodů, ktzeré bude moci využít atd atd...". Prostě zákazník, co koupí a nevrátí zboží = spokojený zákazník, u kterého lze předpokládat ochotu k opětovnému nákupu a takový se k registraci motivuje nejlépe.
Taky si nejsem zcela jistý, zda formulace v obchodních podmínkách jsou právně relevantní. Zejména se mi nezdá část v reklamačním řádu: Firma templestore.cz nenese v žádném případě odpovědnost za jejich technickou a věcnou nepřesnost. Dále firma templestore.cz nenese žádnou odpovědnost za škodu způsobenou nepřesným poskytnutím informací týkajících se výrobků. To bych tedy řekl, že není pravda. V obou případech odpovědnost prodejce nese, protože ona je prodávajícím subjektem, takže zákazník se se vším obrací na něj. A jestli pak Templestore následně požaduje dorovnání po dodavateli je jeho věc, nikoliv zákazníka. Ale chápu, že Vám byly dodány texty nejspíše a tohle neřešíte, to je věc zákazníka.
Každopádně na jednu věc jsem možná narazil, co se webdesignu týče. Pokud má zboží volbu z více velikostí, vyskočí na mě samostatné okno "Stránka na webu http://www.templestore.cz says:" (nevím proč je část anglicky, zřejmě důsledek dev verze Chrome) Nejdřív vyberte požadovanou velikost. Děkujeme. Po zmáčknutí OK je automaticky vybrána nejmenší velikost a tato mi rovnou skočí do Nákupního košíku jako položka (nákupní košík se rovnou zobrazí). To je zřejmě chyba.
21 Ondra Jakeš 01.12.11, 09:12:25

Eshop je do detailu promyšlený, klobouk dolů. Jediný problém vidím ve výpisu FB v pravo, který bortí fotky. Co s tím?
22 Matěj Šerák 04.01.12, 08:01:12

[11] Ono by se to načítání asi dalo drobet urychlit - např. kompresí (html, js a css). Ten obrázek na pozadí má 2650 x 1600 px, to mi také přijde trochu jako luxus, full hd by mohlo stačit. Jinak web považuju za velmi zdařilý, líbí se mi prohlížení obrázků před rozklikem, to je vážně super! Hodnocení kladů je ale svým způsobem k ničemu, tak napíšu, co bych udělal jinak :) 1) Strana 404 2) Místo ,- bych psal všude Kč (ale to je asi jen mé hnidopišství) 3) Strana s výsledky vyhledávání - tam bych určitě drobečkovou navigaci doplnil na Templestore.cz >Hledání výrazu "hledaný výraz"+ možná i kolik produktů to našlo. Jinak pěkný.

Twitter	Facebook
Instagram	LinkedIn

TempleStore.cz - případová studie eshopu

MyEgo.cz