DHL Express (Slovakia)

Webová prezentacecase study

Cíle projektu• Vytvořit novou webovou prezentaci, jež zajistí:

• vyšší počet objednávek nabízených služeb,

• zvýšení povědomí o značce a pozitivní zpětnou vazbu,

• snadné nalezení informací o službách a kontaktních informacích,

• sledování stavu zakázek online,

• možnost členství v zákaznickém klubu a čerpání výhod z něj plynoucích,

• vyšší návštěvnost webu.

Počáteční stavPůvodní webová prezentace trpěla několika nedostatky:

• nemoderní design,

• absence redakčního systému,

• absence vyhledávání,

• nevalidní kód stránek,

• netextové elementy bez alternativního popisku,

• absence nadpisů v odpovídající struktuře,

• absence optimalizace stránek pro vyhledávače,

• nepřehledná struktura a složitá navigace,

• množství zbytečných informací,

• a další.

Design původního webu

Jak jsme postupovaliDle naší metodiky prochází každý SW projekt následujícími fázemi:

• analýza požadavků a cílů,

• stanovení kritérií úspěšnosti,

• specifikace řešení,

• návrh informační architektury,

• návrh uživatelského rozhraní,

• návrh grafické podoby webu,

• implementace webu,

• naplnění obsahem,

• uživatelské testování,

• prezentace klientovi a ostrý provoz stránek.

Analýza požadavků a cílů• Analýza byla první a z pohledu výsledku nesmírně důležitá fáze

projektu.

• Měla za cíl získat od klienta maximum možných informací ohledně jeho požadavků a cílů.

• Chtěli jsme znát cílovou skupinu, informace o nabízených službách a další faktory, které nám následně pomohou při tvorbě webu.

• Získané informace jsme analyzovali a přistoupili ke stanovení kritérií úspěšnosti.

Stanovení kritérií úspěšnosti• Zaměřili jsme se na konkrétní kritéria, která povedou k dosažení cílů

stanovených v předchozí fázi, tedy kritéria, při jejichž splnění bylo možné projekt po dokončení považovat za úspěšný.

• Jako u jiných projektů jsme se přednostně zaměřili na exaktně měřitelné cíle:

• zvýšení návštěvnosti,

• zvýšení počtu objednávek poskytovaných služeb,

• zvýšení počtu zákazníků.

Specifikace řešení• Vytvořili jsme typické scénáře použití webu (tzv. user stories). Jednu

uvádíme na následujícím snímku.

• Přesně jsme definovali funkce, které by měl web poskytovat.

• V dalších krocích procesu specifikace řešení jsme navrhli informační architekturu webu a uživatelské rozhraní.

• Výsledkem procesu byla podrobně zpracovaná projektová dokumentace.

Ukázka „User story“

• Jako uživatel chci odeslat do zahraniční zásilku s doručením v co nejkratším čase:

• kliknu na tlačítko „Expresné služby“,

• následně kliknu na položku „Preprava do zahraničia“,

• vyberu službu „Same day – doručenie v čo najkratší čas,

• pročítám si informace o službě,

• kliknu na odkaz „Odoslať zásielku online“,

• jsem přesměrován na stránky pro odeslání zásilky online.

Návrh informačníarchitektury (IA)• V návrhu informační architektury jsme specifikovali, jaké informace

budou na webu přístupné a jak budou uspořádané.

• Pomocí odpovídajících nástrojů web získal konkrétní strukturu, vyjádřenou i vizuálně.

• Klient měl samozřejmě možnost se k návrhu vyjádřit a předložit případné připomínky a náměty na úpravy.

• Výsledný návrh informační architektury můžete zhlédnout na dalším snímku.

Návrh uživatelského rozhraní (UI)• Pro každou z unikátních stránek vytváříme tzv. wireframe, který

klientovi poskytuje vizuální představu připravovaného webu.

• Přesně si specifikujeme, kde na stránce budou umístěny jednotlivé prvky.

• Dokončením návrhu uživatelského rozhraní byl také dokončen proces přípravy kompletní projektové dokumentace.

Návrh grafiky webu• Grafik na základě vytvořených wireframů připravil konkrétní grafický

návrh stránek.

• Klientovi se v tuto chvíli poprvé dostal do rukou návrh finální vizuální podoby webu.

• Po několika málo úpravách na přání klienta byla grafika hotova, schválena a předána vývojářům.

• Začal proces implementace webu.

Implementace webu• Grafika byla sice hotova, ale před samotnou implementací webu jsme

ještě museli stanovit přesný plán implementace včetně několika milníků.

• Hotovou grafiku nařezal kodér do HTML a CSS šablon.

• Byl vytvořen funkční wireframe, aby si klient mohl udělat lepší představu o finální podobě webu.

• Připravené šablony jsme předali k propojení s redakčním systémem a dokončení dalších prací.

• Průběh práce jsme neustále porovnávali s projektovou dokumentací, aby vše odpovídalo zadání.

Naplnění webu obsahem• Již na začátku projektu jsme požádali klienta o zaslání všech podkladů

pro přípravu obsahu webu.

• Šlo především o:

• informace o službách,

• odkazy na externí služby,

• Q&A,

• dokumenty ke stažení,

• kontaktní informace,

• obrazový materiál,

• a další.

• Podklady byly zpracovány a následně umístěny na web.

Uživatelské testování• Po dokončení implementace byl web naplněn obsahem a plně

otestován dle specifikovaných scénářů užití (user stories).

• S pětičlennou skupinou jsme otestovali použitelnost webu.

• Kompletně jsme otestovali funkčnost webu.

• Na základě výsledků testování jsme pak provedli dodatečné úpravy.

• Web prošel také finální kontrolou dle checklistu výstupní kontroly webu.

Výstupní kontrola• Každý z našich webů prochází na konci vývoje pečlivou

výstupní kontrolou, při které znovu hodnotíme:• použitelnost webu (návštěvník nesmí být nucen přemýšlet

nad tím, jak s webem pracovat, vše musí být maximálně intuitivní),

• přístupnost webu (moderní web musí být dobře přístupný i z prostředí, která nejsou příliš běžná, a především musí být schopni s webem pracovat i handicapovaní uživatelé),

• validitu kódu stránek (kód stránek nesmí obsahovat chyby),• SEO on-page faktory (SEF URL adresy, vyplněné meta tagy,

odpovídající struktura nadpisů, alternativní popisky netextových prvků apod.).

Design nového webu

Webovou prezentaci najdete na adrese www.expresnapreprava.sk.

Děkujeme za pozornostwww.sunmarketing.cz

Facebook.com/SunMarketingTwitter.com/Sun_Marketing