Menu

Web jako hrdinský příběh. Jak vznikala odvážná vizitka spediční firmy?

Vystoupit z řady chce odvahu, ale pokud ji máte, může se vám podařit to, čemu marketér Seth Godin říká „efekt fialové krávy“. Budete nepřehlédnutelní. To se podařilo spediční firmě ByTorp, pro kterou BlueGhost stavěl web i celou vizuální identitu.

Web jako hrdinský příběh. Jak vznikala odvážná vizitka spediční firmy?

Představte si že jedete autem kolem pastvin, na kterých se pasou stáda hnědého skotu. Nuda. Něco takového už jste viděli mockrát. Náhle však mezi dobytkem zasvítí něco nečekaného. Jedna z krav je fialová! Je to vůbec možné, říkáte si? To už však vystupujete z auta, vytahujete mobil, fotíte, natáčíte, snažíte se přilákat zvíře k ohradníku a po celou tu dobu nevěříte svým očím. Následně o svém zážitku řekne všem svým přátelům, a protože jsou zvědaví, vyrazí i oni na pastvinu a celý scénář se opakuje. Historka o netradičním zvířeti se šíří jako tichá pošta. Každý ho chce vidět na vlastní oči!

Tento psychologický princip odlišnosti funguje v marketingu i podnikání dokonale. Být jiní je nejsnazší způsob, jak na svojí firmu upozornit. Odlišit se obvykle nevyžaduje vyšší rozpočet a náklady, ale spíše odvahu jít proti proudu. A kdo jiný by se měl umět plavit lépe než spediční firma? Přečtěte si, jak vznikal web, který vás vytrhne z letargie: ByTorp.cz.

Web a jeho cíle

Klient chtěl zastřešit své přepravní služby pod novým brandem ByTorp. Hlavním cílem webu bylo představit firmu B2B zákazníkům a partnerům a výrazně ji odlišit od konkurence. Webová prezentace proto slouží jako kompletní portfolio – pokud někdo již zná část klientových služeb, či přišel do styku s brandem, web mu odprezentuje, co dalšího firma umí. Hlavním cílem je, aby zákazník poptal přepravu, k čemuž směřují veškerá CTA tlačítka.

Modrý duch tvořil kompletní firemní a vizuální identitu. Po rozhovorech s klientem se nejprve zaměřil na brand positioning, stanovení klíčových asociací a archetypu značky. ByTorp jsou hrdinové v přepravě, kteří se ničeho nebojí a dopraví cokoliv, kamkoliv, včas a v pořádku. Řeší komplikované logistické úkoly, ať už se jedná o pozemní, námořní nebo leteckou přepravu či o kurýrní služby. Jsou mistry v řešení nestandardních situací. Je to sehraný tým lidí s mnohaletým logistickým know-how, který chce opravdu pomoct, nikoliv pouze poskytovat službu. Na základě vzniklé specifikace se BlueGhost nadále mohl pustit do opravdu odvážného vizuálního zpracování. Hrdinové se přece ničeho nebojí a odlišují se na první pohled.

Vizuální zpracování

Celý vizuál je dobrodružný. Logo se skládá ze dvou částí, modrého nápisu a oranžovo-žlutého symbolu. Modrý duch nechtěl, aby bylo příliš popisné, ale spíše abstraktní. V nápisu se pracuje se sebevědomým, extendovaným tučným řezem písma Druk. Symbol blesku evokuje vykřičník nebo také klikatou cestu vedoucí k cíli, který je znázorněn tečkou. Podprahově symbolizuje hrdinství, odvahu a energii čelit překážkám. Chtěli jsme, aby vizuál byl dramatický, dynamický. Aby dokázal překlopit zažité seriózní konvence oboru do “dobrodružna a zábavy ve stylu Indiana Jones”.

Vizuál je postavený na výrazných barevných plochách a outlinových vektorových ilustracích, které citují logo. Některé jsou abstraktní, jiné popisnější, přibližující se encyklopedické ilustraci. Modrá barva je původní korporátní barvou, kterou jsme zanechali a přidali k ní oranžovo-žlutou, která je na barevném spektru kontrastní k použité modré. Revoluční je stylizace celého webu do žánru animovaného filmu. Celé připodobnění je velmi odvážné a zcela nezvyklé v segmentu, ve kterém klient podniká.

Protože klientovou doménou jsou přepravní služby, je i celý web v pohybu. Jednotlivé slidy s ilustracemi na sebe navazují a pomocí scrolly-tellingu vyprávějí Příběh zásilky. Tzv. „balíkova cesta“ je jednotícím prvkem všech slidů a znázorňuje transport zakázky od začátku až do konce (balík nejprve letí letadlem, pokračuje lodí, přesedlá na kamion, na vlak, až se nakonec navzdory úskalí dostává do rukou zákazníka). Každý slide má svůj vlastní mikropříběh, který navazuje na hlavní sdělení. Např. hlavním sdělením jsou Kurýrní služby, avšak když se během přepravy něco pokazí (do balíku uhodí blesk), ByTorp to dokáží vyřešit (balíku se otevře nouzový padák a je zachycen, zachráněn a končí v rukou adresáta.) Tato příběhovost způsobuje, že web je sám o sobě animovaným filmem, který vás vtáhne do děje.

Technické řešení

Technické řešení sestává ze dvou oddělených částí. První je backoffice aplikace, která má na starosti práci s daty (pracuje s MySQL databází, zpracovává nahrané soubory, komprimuje obrázky atd.). Zároveň slouží jako administrační rozhraní webu a vystavuje RESTful API, pomocí kterého zpřístupňuje data pro frontendovou aplikaci. Ta je postavená na vlastním objektově orientovaném řešení napsaném v jazyce PHP 7.4.

Frontendová aplikace slouží návštěvníkům webu. K textům a dalším informacím uloženým v databázi, obrázkům, souborům a všem dalším administrátorsky nastavitelným datům přistupuje pomocí API vystavovaného backoffice aplikací. Ta je postavená na frameworku Symfony 3.4 a je také napsána v jazyce PHP 7.4.

V obou částech řešení je serverová logika doplňována kódem v jazyce ECMAScript 6. Pro lepší kompatibilitu se staršími prohlížeči je kód transpilován do ECMAScript 5.1. K transpilaci se používá nástroj Encore, který zas v pozadí využívá Webpack. Ve frontendové aplikaci Encore obstarává i kompilaci a minifikaci CSS kódu. Frontendová i backoffice aplikace u uživatelů vynucují přístup přes protokol HTTPS. Certifikační autoritou je Let's Encrypt a obnovování certifikátů je automatizováno.

Závěrem

Až příště budete potřebovat doručit cokoliv, kamkoliv, včas a v pořádku, nyní již víte, koho oslovit. A až budete chtít navrhnout dynamický web, který vaší firmu udělá nezapomenutelnou, ozvěte se Modrému duchovi. Mimochodem, ByTorp byl nominován do soutěže WebTop100 2021, jejíž vyhlášení bude v listopadu. Tak držte palce. Vzhůru do nekonečna a ještě dál!

Jak se vám článek líbil?

0

Praktický

3

Inspirující

0

Zábavný

3

Nic moc

Pojďme spolu vytvořit něco skvělého!

Dlouhodobá spolupráce může začít jedním kliknutím

Domluvit schůzku