Honza Malý21.6.2019Zpět

S moderním přístupem i ohledem na třicetiletou tradici: Jak jsme tvořili nový web pro Renocar

Do té doby jsme kolem prestižního autosalonu BMW jenom projížděli. Když si nás společnost Renocar v roce 2017 vybrala jako technického tvůrce nových webových stránek, už od začátku bylo jasné, že před převážně mužským týmem Kurzoru leží srdeční zakázka.

Jak to všechno začalo (a skončilo)

Když se podíváte na web Renocaru, uvidíte designové stránky s vystavenými modely aut, kde si můžete objednat testovací jízdu, nakonfigurovat vysněný „bavorák” nebo si vybrat stylový doplněk. Co možná jako běžný uživatel neuvidíte, je to, co stojí za tím.

Když nás Renocar v rámci výběrového řízení důsledně posuzoval, věděli jsme, že klient bude náročný, pečlivý a bude očekávat mimořádnou kvalitu. Zpětně nás těší, že se mu první dojem na Kurzor potvrdil. Už na začátku se totiž Renocar přesvědčil, že naši vývojáři jsou lidé s bohatými praktickými zkušenostmi v oboru a že si nás vybral jako partnera oprávněně. Dodali jsme mu totiž web střižený na míru všemu, co od něj jako jeden z největších prodejců BMW v Česku potřebuje:

  • Web, který je reprezentativní vizitkou předního dealera luxusních vozů.
  • Web, kde si může obsah editovat samostatně, rychle a nezávisle na dodavateli.
  • Web, kde synchronizace funguje, jak má, a data jsou správná v každém okamžiku.
  • Web, který má spolehlivý provoz.
  • Web, který je plně responzivní a zobrazí se na velké většině používaných zařízení.
  • Web, který se rychle načítá i s velkým množství fotek a videí.
  • Web, kde si bude možné v blízké době také koupit auto přímo na e-shopu.

Stejně jako se Řím nepostavil za den, ani web Renocaru nebyl otázkou lusknutí prsty. Přečtěte si krok za krokem, jak jsme se k němu dopracovali.

Návrh webu: Od vstupních dat po vyladěné wireframes

Když máte za zády silného partnera, jakým byla společnost uLab, je tvorba webu radost. uLab zaštiťoval pro Renocar kompletní online strategii a dodával nám základní vstupy, s kterými jsme mohli pracovat. Nebylo to poprvé, co jsme se s uLab setkali u typově stejné zakázky. Věděli jsme proto, že se na ně můžeme spolehnout. Kvalitní analýza konkurence, cílových skupin, obsahová strategie a z ní plynoucí požadavky na web jsou klíčem k úspěchu. Sladili jsme se i s připravovaným plánem online propagace. Rozebrali jsme postupný průchod zákazníka službami Renocaru a získávali podněty k jeho zdokonalení v online i offline částech.

Na nás pak bylo připravit samotný návrh webu, jehož výstupem byl klikací wireframes, tedy drátěný model webu. Ten má tu zásadní výhodu, že se může upravovat a optimalizovat na různé varianty a funkcionality dříve, než se přistoupí k drahé a méně pružné implementaci. Všechno jsme průběžně konzultovali s uLabem a Renocarem, až jsme ho vyladili k optimální funkčnosti a atraktivitě. Velký prostor jsme věnovali hlavně přehledům vozů a konfigurátorů, které byly na webu nejvíce interaktivními částmi.

Ušetřili jsme také spoustu práce grafikovi, který mohl na základě wireframu navrhnout vizuál webu, aniž by před námi stála celá řada rozhodování, která by byla bez znalostí souvislostí stěží správná. V této fázi jsme vycházeli z našich zkušeností v oblasti použitelnosti webu, návrhu uživatelských rozhraní a webových stránek.

 

Obrázek 1: Ukázka wireframes. Využíváme SW nástroje Axure.

Při návrhu webu jsem samozřejmě vycházel ze svých zkušeností v oblasti použitelnosti webu, návrhu uživatelských rozhraní a webových stránek. Vše pak bylo průběžně s lidmi z uLabu a Renocaru konzultováno. Značnými debatami pak prošly ty nejvíce interaktivní části - přehledy vozů a konfigurátor.

Grafický návrh: Jak webu předat prestižní atmosféru autosalonu

Pro prodejce BMW je image značky a stylu stejně důležitá jako funkčnost a srozumitelnost webu. Jak tedy do vizuální podoby přetvořit pocit, který člověk získá z luxusního prostředí autosalonu, kde ho obklopují nádherné vozy prestižní značky? Snažíme se o řemeslnou excelenci naší práce a chtěli jsme, aby byla znát i na technické a grafické stránce webu Renocaru. Proto jsme se společně s grafikem opakovaně vydali do autosalonu nasát tu správnou atmosféru.

Zpětně máme velkou radost, že se to povedlo téměř na první dobrou. Po počátečních korekcích stránky “Přehledu modelů” se rozjel doslova promazaný stroj a vznikaly nové a nové návrhy podstran s ubývajícím rozsahem připomínek.

Grafik se musel nejvíce poprat s návrhem modelových stránek, které vizuálně bohatou cestou informují o vlastnostech modelů BMW a MINI. Od začátku jsme je pojali jako skládačku určitých dílčích, dobře navržených grafických komponent a nechali marketingovým pracovníkům Renocar volnost při tvorbě jednotlivých modelů. Jak dobře výsledek vypadá, se přesvědčte například u modelu X5.

 

Obrázek 2: Pro práci s grafickými podklady používají naši kodéři placený nástroj Avocode, který patří ke špičce v dané oblasti.

Implementace

Při samotné implementaci jsme postupovali na několika frontách:

  • technická analýza - datový model, požadavky na infrastrukturu a bezpečnost
  • frontendová část - kódování grafiky, tvorba webu
  • backendová část - správa dat, importy

Implementace: Technická analýza

Správně nakonfigurovaný a bezpečný webhosting je základem úspěšného webu. Právní oddělení Renocaru vzneslo velice přísné požadavky na dostupnost a odpovědnost provozovatele za případný výpadek služeb. Provozovatel server hostingu od nás proto dostal seznam požadavků a společně jsme nastavili nejvhodnější konfiguraci webového serveru.

Co bylo v této fázi klíčové? Navrhnout optimální databázové schéma a způsob synchronizace vozů a produktů z interního systému Renocaru, který běží na platformě od společnosti Microsoft. Poradili jsme si i se synchronizací obrázků, pro jejichž zpracování jsme navrhli optimalizaci tak, aby jejich kvalita, velikost a parametry ladily s doporučeními vyhledávače Google.

Synchronizace dat se provádí několikrát denně. Proto náš tým otestoval rychlost na více typech databázových serverů a konfigurací PHP. Navrhli jsme i přístup, který znamená jen minimální výpadek produkčního webu.

Implementace: Front-end část

Když tvoříte web prodejce aut, musíte se držet několika pravidel. První pravidlo je důraz na prodej. Renocar v první řadě prodává skladové vozy, které musí být propojené s prezentací samotných modelů vozů. Zákazník očekává, že na webu najde všechno srozumitelně kategorizované a organizované.

Proto jsme navrhli přehlednou filtraci modelů a skladových vozů. Když má zákazník zájem o skladový vůz, zobrazí se mu detail konkrétního vozu, který umožňuje přímý nákup. Prezentace modelu má charakter katalogu s možností zadat vůz do výroby prostřednictvím konfigurátoru, kontaktovat prodejce s dotazem nebo si objednat testovací jízdu.

Pravidlo číslo dva. Přes sekci Servis obsluhuje Renocar stávající zákazníky. Fanouškům zase věnuje čistě e-shopovou část s kategorií Doplňky & Lifestyle. Nesmí samozřejmě chybět ani představení společnosti a poboček.

Tohle všechno jsme poskládali do funkční struktury jednoho webu, který je plně responzivní a disponuje vysokou rychlostí načítání i přes velký objem foto a video materiálů. To je pro designový web luxusních aut mimořádně důležité, protože jeho zákazníci jednoduše čekat nechtějí. Technicky nám to umožňuje AJAX (načítání částí stránky), Lazy loading obrázků, CSS3 a SVG (pokročilé stylovací praktiky) a další.

Pravidlem číslo tři je obsah. Web tohoto rozsahu vyžaduje velký objem textových informací. Chtěli jsme, aby si marketingový tým Renocaru mohl obsah udržovat primárně sám. Je to pro něj mnohem rychlejší a flexibilnější, než zadat požadavek programátorovi a čekat na zpracování. Proto je každá část webu editovatelná. Na složitějších stránkách, jako jsou detaily modelu, jsme navíc editorům umožnili volit rozložení prvků a jejich vzájemné pořadí. Dbali jsme na to, aby byl systém jednoduchý na používání a co nejvíce zapadal do každodenního používání. To jsme si otestovali s několika pracovníky Renocaru a na základě jejich reakcí „vychytali mouchy”.

 

Obrázek 3: Při testování v různých prohlížečích nám pomáhá placená verze nástroje LambdaTest, který online vytváří různé konfigurace operačních systémů a prohlížečů a umožní v nich stránku prohlédnout.

Implementace: Backend část

Kdybyste ale na sebekrásnějším webu neměli aktuální data, byl by k ničemu. Renocar je větší společnost a je pochopitelné, že už používají existující systémy na správu dat, která se mají zobrazit na webu. Jde hlavně o skladové vozy, produkty v sekci Doplňky a jednotlivé konfigurace modelů. Všechny tyto informace se na webu pravidelně synchronizují z interních zdrojů.

Než jsme data importovali, živě jsme diskutovali s IT oddělením Renocaru. Společně jsme se snažili co nejvíce eliminovat lidský faktor při managementu dat, ať už v procesu přenosů, nebo při zpracování dat na webu. Díky tomu jsme dosáhli vysokého stupně automatizace. Existují i procesy pro reportování případných chybových stavů. I když se synchronizuje značné množství dat, podařilo se nám docílit jen nepostřehnutelného několikasekundového výpadku minimálního počtu sekcí webu. Běžný uživatel ho nezachytí a na funkčnosti webu se nikterak nepodepisuje.

Spuštění: Před ostrým provozem pár nezbytností

Než jsme nový web pustili do světa, čekalo nás pár posledních nezbytností:

  • přesměrování - jak manuální editací seznamu přesměrování, tak automatickou dedukcí ze starého formátu URL do nové podoby
  • analytika - ve spolupráci s uLab jsme implementovali pokročilé měřící nástroje zejména do míst s velkou uživatelskou interakcí, tedy tam, kde uživatel projevuje svůj zájem (formuláře, konfigurátory)
  • testování v prohlížečích a zařízeních - web je značně responzivní a na front-endu jsme využili nejmodernější přístupy, proto jsme provedli některé úpravy v prohlížečích, které mají na věc jiné názory. Největší problémy? MS Edge.

A protože jsme nic nechtěli nechávat náhodě, týden před živým provozem jsme spuštění webu simulovali klonem produkčního prostředí na testovací doméně. To abychom vychytali jakékoliv případné problémy, které by nám i Renocaru mohly zkomplikovat život.

 

Obrázek 4: Nástroj New Relic neustále ověřuje, zda je web z různých lokalit dostupný a jak dlouho mu načtení trvá. Jako záložní řešení sledování provádí ještě Datadog.

Závěr: Co jsme se naučili

Ze spolupráce s Renocarem si odnášíme několik klíčových myšlenek a zkušeností:

  • V první řadě jsme si ověřili, že nás baví komplexní zakázky s náročnými klienty a máme k tomu dobře postavené procesy. Nejsme korporát, ale malý specializovaný tým, který funguje efektivně.
  • Snažíme se o řemeslně dokonalý vývoj. I tady jsme do naší práce dali maximum. Z výsledku jsme měli všichni nefalšovanou radost. Dokonce náš klíčový vývojář odmítal přejít na další projekt, dokud neměl jistotu, že web bude fungovat jak má.
  • Na straně klienta často bývá širší tým, který se vyjadřuje postupně a mnohdy s protichůdnými názory na věc. Ověřili jsme si, že pro úspěšný vývoj je také důležitá naše dovednost správně řídit tuto diskuzi směrem ke shodě nad jediným zvoleným řešením.
  • V klíčových fázích projektu se nám podařilo zapojit relevantní pracovníky. Díky tomu jsme získali velice přínosné informace z jejich třicetiletých zkušeností, které jsme mohli zohlednit ve vývoji webu.
  • Neseděli jsme za stolem a netvořili web na dálku. S Renocarem jsme se důkladně seznámili - od servisu, přes showroom až po volanty vozů.
  • V Renocaru ocenili, že s nimi mluví přímo majitelé Kurzoru. Věděli, že se mohou obrátit na konkrétního člověka, který jim bude k dispozici.
  • Klient nemusí být odborník na web. Renocar byl ale naším partnerem a my partnerem pro něj. Nikdo nebyl v nejistotě. Vzájemně jsme se poslouchali. Obě strany přicházely s nápady. Když něco nedávalo smysl, řekli jsme si to narovinu.

Dojmy: Jaká byla spolupráce

Kurzor jsme Renocaru doporučili, protože jsme s nimi spolupracovali na dalších projektech, se kterými jsme byli velmi spokojení. Líbí se nám jejich přístup. Snaží se pro firmu udělat maximum, jsou rychlí a pracují s novými technologiemi. Co se nám líbí, že se dokáží i rychle učit. Třeba implementace analytiky je s nimi procházka růžovou zahradou. A to teda vůbec nebývá zvykem :)

Markéta Kabátová, CEO, uLab

Pět otázek pro klienta

Odpovídá Petr Poláček, Online Specialista, Renocar:

  1. Proč Kurzor?

    Potřebovali jsme nový web a dostali jsme od agentury ULab doporučení právě na Kurzor. Po získání více informací o této firmě jsme věděli, že se jim podaří vytvořit web, který potřebujeme.

  2. Hodnocení?

    Pánové z Kurzoru chtějí znát produkt, který mají prezentovat a proto se dokonale seznámili s firmou Renocar. Když jsme potřebovali domluvit společnou schůzku abychom si vyjasnili naše nebo jejich nápady, rádi zajeli k nám, pohostili nás u nich, nebo se propojili přes Skype. Po spuštění webu bylo pár připomínek ze strany uživatelů, které vždy obratem vyřešili.

  3. Co oceňujete?

    Právě tu rychlost řešení jakéhokoliv problému a jejich nadšení do práce, kterou dělají.

  4. Proč nový web?

    V dnešní době tráví čas na internetu vlastně skoro každý. A když něco hledáte, brouzdáte po netu a narazíte na stránku, která už je zastaralá a nedostačující, tak vás to akorát odpudí a donutí odejít, a proto jsme se rozhodli pro nový web.

  5. Splněné představy?

    Web je moderní, designově lepší než předchozí, a je v něm více prostoru pro zveřejňování příspěvků, takže ano, Kurzor udělal to, co jsme potřebovali.

Honza Malý
maly@kurzor.net
+420 722 211 443
Honza se specializuje na návrh webů a UI, věnuje se také vývoji.