
Web Dopravního podniku města Brna
Pro dopravní podnik jsme vytvořili web, který jej reprezentuje, dobře se ovládá a je spolehlivým průvodcem pro cestování městskou hromadnou dopravou.
- Projekt: Roman Kučera
- UX, design, copywriting: Tereza Ticháčková
- UX, design konzultant: Ivan Kebeleš
- Backend: Jan Polzer
- Frontend: Lukáš Polzer
Dopravní podnik města Brna
Dopravní podnik města Brna (DPMB) je druhý největší dopravní podnik v České republice. Ročně přepraví kolem 300 milionů cestujících.
Zadání klienta a naše role
Web, s nímž podnik doposud pracoval, byl starý deset let a nutně potřeboval modernizaci. Poprvé jsme se s klientem setkali nad analýzou původního webu. Následovalo rozhodnutí o vzniku kompletně nových stránek. Podařilo se nám zvítězit ve výběrovém řízení. Postupně jsme navrhli informační architekturu, UX, obsah, design a web nakódovali na redakčním systému Drupal. Třešničkou na pomyslném dortu pak bylo vítězství tohoto webu v soutěži WebTop100 2023 v kategorii UX.


Výchozí situace
Původní web DPMB pocházel z roku 2013 a vznikl svépomocí přímo uvnitř společnosti. S postupem let se do něj přidávala řada nových informací a funkcí. Neustálými aktualizacemi se web stal velmi složitým, nepřehledným a špatně se ovládal. Web byl nepřívětivý jak pro návštěvníky, tak pro zaměstnance podniku, kteří měli na starost jeho aktualizace.
Neexistovala také odpovídající responzivní verze webu, což se s rozšiřujícím počtem mobilních zařízení stalo velkým problémem.
Analýza & výzkum
V rámci analýzy jsme prozkoumali návštěvnost jednotlivých sekcí a setřídili nejdůležitější informace. Základní úkolem analýzy bylo zjistit, jaké informace cestující na stránkách hledají a jak s nimi pracují.
Původní web byl rozdělen do několika sekcí (Doprava, Jízdné a podobně). Analýza mimo jiné ukázala, že v každé sekci existují zpravidla jedna až dvě velmi navštěvované stránky a ty ostatní navštěvuje méně než 1 procento uživatelů.
Důkladně jsme také sledovali proces vkládání nových informací a systém obsluhy webu zaměstnanci DPMB.

Nová struktura a UX
Výsledky z analýzy jsme využili při přípravě nové informační architektury. Zúžili jsme počet stránek a informace roztřídili zcela jiným způsobem. Některé sekce jsme rozdělili, některé zanikly úplně nebo se staly součástí jiných.
Vytvořili jsme také systém pro často kladené dotazy k jednotlivým tématům (například Elektronické šalinkarty, Tištěné jízdenky a podobně). Ten pomohl shromáždit na jednom místě všechny potřebné informace, a to v přehledném formátu, který se snadno udržuje, edituje a doplňuje.
Design pro všechny cílové skupiny
Při navrhování vzhledu webu jsme upřednostnili vizuální minimalismus. Hlavní roli na webu hrají dopravní informace a cílem designu je jejich zvýraznění, nikoliv přehlušení.
Důležitou podmínkou pro grafiku bylo také zohlednění všech demografických skupin cestujících městské hromadné dopravy. Stránky musely být přehledné, jednoduché a dobře čitelné i pro seniory nebo osoby se zrakovým postižením.
Web tak pracuje s relativně velkými prvky, vzdušnými obsahovými bloky a dobře čitelným fontem. Je optimalizovaný pro použití specializovaných čtecích zařízení a lépe přístupný pro uživatele se zhoršeným zrakem.

Důraz na vývoj a inovace
Webové stránky jsme postavili na systému Drupal. Největší technickou výzvou byla příprava administrace pro zaměstnance a napojení stránek na původní informační systém DPMB. Díky perfektní komunikaci s oddělením Dopravních informací se nám podařilo rozhraní nejen propojit, ale též vylepšit a obohatit o nové prvky.
Zaměstnancům podniku jsme zjednodušili a zdokonalili proces zadávání mimořádných událostí a aktualizaci jízdních řádů. Správci systému získali mnohem přehlednější rozhraní pro práci a vylepšený systém pro rozesílání newsletterů.
Pro cestující jsme nově nachystali filtr mimořádných událostí a spolehlivé fulltext vyhledávání.

Výsledky & hodnocení
Vytvořili jsme reprezentativní, vysoce funkční a dobře ovladatelný web. Z dat vyplývá, že cestující na webu snadno najdou, co potřebují. Díky tomu stráví na webu méně času hledáním a méně vytěžují informační linku DPMB. Z uživatelského testování také vyplývá, že stránky vnímají jako atraktivní a zajímavé. To potvrzuje i vítězství webu v kategorii UX soutěže WebTop100.
Zaměstnanci chválí obsluhu webu, která jim zjednodušuje práci a zrychluje zveřejňování důležitých informací. Ve vztahu k partnerům získal DPMB reprezentativní web, který podporuje respekt a dobré jméno jeho značky.
Ukázky



Naše nové stránky jsou jednoduše ovladatelné, dají se upravovat a rozvíjet podle aktuálních požadavků, především jsou však moderní a přehledné.
Ing. Miloš Havránek, Generální ředitel DPMB
Kontakt
Spojte se
s námi!
Využijte sílu konceptu PR 360®. Společně s vámi vytvoříme nový skvělý web, který podpoří váš brand i byznys.
