Případová studie: Redesign webu aneb Změna komunikace firmy z prodejce na odborníka v průmyslovém značení

Pondělí, 08.10.2018, Matej Chyľa

Osekali jsme výzkumnou část na nutné minimum, zvolili řadu kompromisních řešení a dospěli k závěru, že web je nutné redesignovat. Podařilo se nám změnit vnímání společnosti a zvýšit množství relevantních poptávek.

Co zajímavého v případové studii odhalím?

1. Bottling Printing

Bottling Printing je specialista na průmyslové značení. Označí cokoliv od drobných etiket až po tunové součástky. Díky výběru vhodného způsobu značení získává jejich klient dokonale čitelné kódy, které dlouho vydrží. A když je třeba, dají se lehko odstranit. My měli společnosti pomoci prostřednictvím nového webu získat více relevantních poptávek.

Průmyslové značení Bottling Printing

2. Zpracováni poptávky

S úvodní poptávkou zá námi přišel marketingový specialista společnosti Filip Ševčík. S jasně formulovaným záměrem získal naši pozornost. 

Filip Ševčík - marketingový specialista Bottling Printing

  
 
Máme zastaralý a neaktuální web, přes který přichází málo relevantních poptávek. Web nedostatečně prezentuje poskytované služby a benefity naší společnosti.

Úpravy, které od vás očekáváme budou navazovat na definování značky, které jsme připravili. Na vás bude upravit současný web a sladit ho s dalšími marketingovými aktivitami společnosti.

Skvělé bylo, že poptávka obsahovala jen popis problému a ne způsob, jakým ho máme řešit. Po prvotním zpracování poptávky jsme ale vůbec netušili:

  • co přesně s webem udělat,
  • v jakém rozsahu,
  • jestli budeme jen optimalizovat, nebo redesignovat,
  • a kolik bude naše práce stát.

Úvodní workshop

Potřebovali jsme nutně více informací. O společnosti, stavu webu, či detailech záměru. A chtěli jsme je získat rychle, aby bylo jasno v nacenění jednotlivých fázích projektu.
 
Půldenní workshop nám poskytl spoustu užitečných informací. K nim jsme vítali další informace z poskytnutých dokumentů, které jsme podrobně prostudovali a později si ověřili, že jsme všechny informace správně pochopili.
 
Informace, které byly součásti poptávky
 

Vyhnuli jsme se dlouhému vysedávání na workshopu a nechali jsme si některé informace poslat k nastudování. Ušetřili jsme tak hlavně čas klientovi – mít plnou zasedačku zaměstnanců a půl dne placeného workshopu navíc, není levná záležitost.

 
Workshop s klientem ale nebyl bezstarostným vykoupením z komplikací, má totiž své limity. Hodně informací nám po něm i tak chybělo. Proto jsme museli zkoumat dál. 

Na workshopu jsme se nedozvěděli, co brání návštěvníkům v tom, aby vybrali správný produkt a poslali poptávku.

3. Výzkum

Abychom pochopili proč problémy na webu vznikají a odstranili je, rozdělili jsme získávání dalších informací do dvou fází:
  • Co se děje na webu?
    Zanalyzovali jsme dostupné data z Google Analytics a organickou návštěvnost webu. Bylo to levné, rychlé a účinné. Získali jsme tak hypotézu o existenci velmi odborně zaměřené cílové skupině, což nám potvrzovali i informace z úvodního workshopu.
  • Proč se to děje?
    Snažili jsme se pochopit, proč odborník nedokončí objednávku a proč odejde z webu bez konverze. Chtěli jsme pochopit motivaci zákazníků se kterou na web přicházejí. Jaké informace je zajímají, co jim chybí a čemu na webu nerozumí. S výběrem vhodné metody jsme měli problém.

Projektové omezení a výzkum

Pro pochopení chování zákazníků na webu jsme zvažovali použít hloubkové rozhovory a uživatelské testování současného webuNarazili jsme však na dva limitující faktory:
  • Zaneprázdněnost cílové skupiny, se kterou komunikují jen vybraní obchodní zástupci – měli jsme oslovit a „otravovat“ co možná nejméně zákazníků.
  • Rozpočet, který nebyl ještě přesně stanovený, ale museli jsme jej začít zpřesňovat, protože se rýsovala realizace dražších designových metod jako uživatelské testování. Celkovou cenu naší práce jsme v této chvíli neuměli odhadnout. Chtěli jsme se vyhnout hlavně tomu, aby výzkum zhltl prostředky, které by pak mohly chybět na zpracování změn.

V číslech se začal projekt nafukovatPoznávání a získávání informací mělo obsahovat úvodní workshop, nastudování dokumentů od klienta, zákaznickou analytiku, hloubkové rozhovory či uživatelské testování současného webu.

Hledali jsme proto metodu a způsob, jak bychom mohli získat sice méně přesné, zato překvapivější zjištění.

Výzkum s kompromisy

Když jsme věděli, že se k zákazníkům jednoduše a levně nedostaneme, tak jsme sáhli alespoň po obchodních zástupcích zadavatele, kteří jsou se zákazníky v kontaktu. Cena výzkumu šla tímto dolů, ale ne tak, jak jsme potřebovali.
 
Nejdražší byl náš čas, potřebný na přípravu a realizaci hloubkových rozhovorů. Ten jen tak osekat nejde. Pomocnou ruku nám podal marketingový manažer zadavatele. Nabídl se, že rozhovory s obchodními zástupci zrealizuje sám. 
 
Klienta jsme upozornili na možné limity tohoto způsobu výzkumu, zformulovali jsme sérii dotazů a výzkum nechali zrealizovat marketingového managera. Po společné dohodě jsme tak zvolili výrazně levnější výzkumnou metodu. 

Zjištění, která nás překvapila

Výstup výzkumu byl i navzdory kompromisní formě velmi uspokojivý. Marketingovému managerovi se podařilo získat pár velmi překvapivých informací.

Zákazníky nezajímaly jen technologie, ale i společnost Bottling Printing jako taková. Zjistili jsme, co chtějí zákazníci o společnosti vědět.

 

Technologie na původním webu

Technologie na původním webu

Technologie na původním webu

Popis technologií a jejich rozdělení měl na původním webu vysokou prioritu. Problém byl v tom, že se významná část návštěvníků webu v technologiích vůbec neorientovala. Bez znalostí technologií měl návštěvník na původním webu značně stíženou cestu k vytvoření poptávky.

Redesign

Ještě před tvorbou informační architektury jsme věděli, že účel nového webu se oproti původní verzi výrazně změní. Díky výzkumné části jsme zjistili, že na webu bude třeba prezentovat množství nových informací.
 
Naše původní odhady, které počítali jen se změnou a optimalizací vybraných stránek jsme rázem museli přehodnotit. Změnila jsem prioritizace prezentovaných informací a proto jsme museli pracovat na nové informační architektuře a rozložení layoutu stránek.
 
K redesignu nás vedla i nová vize společnosti, upravený grafický manuál pro tvorbu printových materiálů a profilace společnosti, jako spolehlivého partnera, který cílí na náročnou klientelu. Tomuto profilu neodpovídala starší grafická šablona webu ani místy špatná práce s typografií. Proto jsme se společně s klientem domluvili na redesignu celého webu.

4. Informační architektura

Po všech zjištěních jsme potřebovali poskládat všechny nové i nynější informace na webu a přišla tak na řadu informační architektura.
 
Základ architektury vycházel z analýzy klíčových slov a připravené předlohy od Markéty Kabátové. Ta společně se svým týmem z uLab zmapovala vyhledávané dotazy, roztřídila je a připravila strategii pro budoucí cílení na organickou, ale i na placenou návštěvnost.
 
Výborně zpracované podklady nám značně usnadnily práci. Získali jsme představu o tom, jaké vyhledávací dotazy bude muset nový web pokrýt nad rámec rozsahu současného webu. První verzi architektury jsme společně s Markétou rozšířili o podstránky, které bylo třeba doplnit na základě závěrů z uživatelského výzkumu.
 
Námi doplněné podstránky měli za cíl přivézt ke konverzi i méně odborné publikum a zároveň podpořit důvěryhodnost společnosti u odbornější části návštěvníků. K tomu nám sloužila například úvodní stránka, nebo podstránka s referencemi. 

Výsledkem spolupráce byla architektura, která pokrývala všechny důležité vyhledávané dotazy a zároveň poskytovala potřebné stránky pro naplnění uživatelských scénářů.

5. Wireframe

Ještě před tvorbou samotného modelu webu jsme měli vyřešené zásadní body celého návrhu:
  • Identifikovali jsme důvody nedokončených konverzních akcí.
  • Zjistili jsme, co je potřebné na novém webu prezentovat.
  • Připravili jsme uživatelské scénáře a informační architekturu.
Jednou ze zásadních úloh, kterou jsme museli na novém webu zlepšit bylo představení společnosti jako takové a důvodu proč by se o ni měli potencionální zákazníci zajímat.
 
Zatímco původní web cílil rovnou na konkrétní technologie a stroje, tak nový web měl návštěvníkovi prezentovat, že pro výběr vhodného řešení potisku je nejlepší se přímo poradit s odborníkem z Bottling Printing.
 
Výběr vhodné technologie může být velmi složitý, proto hned na vstupní stránce konkrétní technologie představujeme specialistu, který zákazníkovi s výběrem pomůže. Je to zásadní posun od původní nutnosti porovnat všechny dostupné možnosti, vybrat vhodný stroj a následně poslat poptávku.
 

Prohlédněte si různé druhy produktů

Řekněte nám, co chcete značit a o zbytek se postaráme my

Prohlédněte si různé druhy produktů“ vs. „Řekněte nám, co chcete značit a o zbytek se postaráme my.“ Prezentace produktů ale i konverzní cesta se zásadně změnili.

 
Zdůraznili jsme, že v Bottlingu to není jen o prodeji samotné technologie. Zákazníkům, kteří vyžadují kompletní servis jsme jasně odprezentovali, že jsou na správném místě. 
 

původní home page

původní home page

wireframe

wireframe

nová home page

nová home page

Vyřešili jsme to, jak dostat na konverzní cestu zákazníka bez zkušeností s průmyslovým značením. Designovali jsme jeho konverzní cestu a začali u objasnění, jak celý proces poptávky značení probíhá.
 
Proces poptávky značení

Rychlé guerillové testování 

Kvůli technickému oboru a obsahu, který byl zatím jen v pracovní verzi jsme se rozhodli, pro rychlé uživatelské testování a méně relevantní cílovou skupinu. Báli jsme se, že obsah v pracovní verzi při takto technickém oboru bude výrazně deformovat výsledky testování.
 
Návrh jsme podrobili rychlému testování srozumitelnosti účelu webu a přehlednosti navigace. Potěšilo nás, že i laická cílová skupina dokázala identifikovat smysl webu, prodejní argumenty a pojmenovat to, čemu se majitel webu věnuje.

6. Obsah

Správnost tvorby low fidelity wireframe jsme si ověřili při spolupráci s Obsahovou agenturou, která na projektu tvořila obsah. Ve fázi, kdy nebyli připravené finální informace o konkrétní technologii značení a na denním pořádku byla řada změn, nedávalo smysl podrobně navrhovat každý jeden detail drátěného modelu. 
 
Místo propracovaného modelu se nám osvědčila průběžná komunikace s dalšími dodavateli a postupné zapracování změn návrhu. Více o tvorbě obsahu si můžete přečíst i na webe Obsahové agentury. 

7. Grafika a kódování šablony

Pro tvorbu grafiky jsme měli dobře připravené podklady. Mohli jsme dokonce operovat s už předpřipravenými texty, což je vždy velká výhoda.
 
Cílem tvorby grafiky webu bylo sladit podobu webu s ostatními grafickými materiály a prezentovat Bottling jako firmu s fajn lidmi a cenným know-how. Zadavatel už dávno není garážová firma a na grafice to muselo být vidět, proto jsme v grafice použili podkladové fotografie z výstav i fotky konkrétních zaměstnanců.
 
Celý vzhled má člověku říci, že za firmou stojí skupina odborníků, kteří dokážou obsáhnout velké a náročné zakázky jak znalostmi, tak schopnostmi. Klíčem k dobré grafice byli vždy podprahové informace a na ty jsme se při její tvorbě speciálně soustředili. 
 

Grafika webu Bottling Printing

Grafika webu Bottling Printing

Grafika webu Bottling Printing

Grafika webu Bottling Printing

Grafika webu Bottling Printing

Grafika webu Bottling Printing

8. Před spuštěním webu

Přesměrování

Více než 600 původních URL adres, 100 jsme museli přesměrovat. Přesměrovávali jsme stránky s novou URL, stejně tak i některé zanikající stránky, na které mířily odkazy z jiných webů. Nezapomněli jsme ani na vstupní stránky (kontrolovali jsme prostřednictvím Google Analytics vstupní stránky za poslední dva roky).

Nastavení měření webu

Abychom zvládli web do budoucna optimalizovat, připravili jsme si po spuštění webu dobrou vstupní pozici. Prostřednictvím Google Tag Manageru jsme implementovali Google Analytics. Tam jsme kromě definování konverzí nastavili i řadu dalších eventů jako:
  • kopírování kontaktních informací,
  • interakce s video obsahem,
  • kliknutí na lightbox galerie,
  • využívání filtrování v kategoriích,
  • kliknutí na taby a navigační prvky například v detailu produktu.
Cílem nastaveného měření bylo kvantitativně zjistit, o které informace je na webu největší zájem. Pro budoucí optimalizaci bude dobré vědět, jestli zákazníky zajímá (např. v detailu produktu) spíš video obsah, galerie obrázků, nebo technické informace o produktu. Zároveň máme díky nastavenému měření možnost identifikovat eventy, které typicky přecházejí vykonání konverzní akce.

9. Přínos redesignu pro klienta

Redesignem webu jsme pomohli přerodu vnímání firmy z pouhého prodejce na společnost, která zabezpečuje profesionální servis spojený s průmyslovým značením. Vyžádalo si to spolupráci tří dodavatelů, několika inhouse zaměstnanců zadavatele a spoustu času stráveného vzájemnou komunikací.
 
Spolupráce mimo jiné přinesla:
  • zrychlení načítání webu v průměru na 1/3 původní rychlosti,
  • získání většího množství relevantních poptávek chvíli po spuštění webu, společně se snížením komunikace při vysvětlování postupu zpracování poptávky,
  • sladění webu s novou grafickou identitou společnosti,
  • zjednodušení a zrychlení práce na obsahu webu, bez nutnosti kontaktovat nás jako dodavatele s technickými požadavky,
  • a pokrytí větší škály vyhledávaných dotazů.

Co na to klient? 

Filip Ševčík - marketingový specialista Bottling Printing

 
 
„Dopředu se velmi těžko odhaduje, zda bude vzájemná spolupráce přínosem a nebo průšvihem. A to především v případě, kdy máte v plánu udělat velký krok do neznáma. Jsem rád, že jsme tento krok udělali zrovna se společností Liquid Design, vyplatilo se!“

Filip Ševčík, marketingový specialista Bottling Printing

Realizace: 2017-2018
Doba práce: 12 měsíců v několika etapách
Dodali jsme: předimplementační analýzu, uživatelský výzkum s mnoha kompromisy, návrh webu, grafiku webu, kódování a vývoj webu, nastavení měření

Matej Chyľa
Pracoval som ako freelancer, zbieral som skúsenosti popri štúdiu, absolvoval som stáž. To všetko preto, aby som dnes mohol navrhovať fungujúce weby. Základom mojej práce je nikdy nekončiaci designový proces. Získavam informácie, overujem hypotézy a testujem vhodnosť možných riešení.