Pro společnost DHL Express (Slovakia) jsme realizovali novou webovou prezentaci - Expresnapreprava.sk. Jejím cílem bylo především přehlednou formou prezentovat informace o nabízených službách, zvýšit počet zákazníků a motivovat ty stávající k opakovaným objednávkám, umožnit rychlé nalezení kontaktních informací, ale například i sledovat stav zakázky online. Jak jsme postupovali se dozvíte v případové studii.

1. Webová prezentace
case study
DHL Express (Slovakia)

2. 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.

3. Počáteční stav
Pů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ší.

4. Design původního webu

5. Jak jsme postupovali
Dle 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.

6. 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.

7. 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ů.

8. 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.

9. 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.

10. 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.

12. 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.

15. 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.

16. 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í.

17. 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.

18. 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.

19. 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.).

20. Design nového webu
Webovou prezentaci najdete na adrese
www.expresnapreprava.sk.

21. Děkujeme za pozornost
www.sunmarketing.cz
Facebook.com/SunMarketing
Twitter.com/Sun_Marketing