Domestici spustili interaktivní mapu Race Across America: mobile-first aplikace s optimalizací 14MB GPS dat a real-time storytellingem

Projekt Domestici propojuje účast v jednom z nejnáročnějších cyklistických závodů světa Race Across America s osvětou o paliativní péči v Česku. Klient potřeboval fanouškům, dárcům i široké veřejnosti ukázat cestu týmu napříč Spojenými státy v reálném čase a zároveň ji propojit s příběhy českých hospiců, edukativním obsahem a otázkami k zamyšlení.

Foxily do projektu vstoupilo nejen jako technologický partner, ale také jako sponzor. V okamžiku, kdy do startu závodu zbývaly pouhé tři týdny, jsme navrhli a implementovali interaktivní mapovou aplikaci, která zvládla vysoký nápor uživatelů a současně nezahltila jejich zařízení ani při pomalejším mobilním připojení.

Výsledkem bylo lehké, vizuálně silné a technicky odolné řešení, které spojilo sportovní příběh s charitativním přesahem a umožnilo sledovat závod i edukativní obsah v jednom přehledném rozhraní.

Výchozí stav: minimum času, vysoké nároky na vizualizaci a potřeba vtáhnout publikum do děje

Klient chtěl během závodu vtáhnout fanoušky a dárce přímo do dění. Nestačilo pouze ukázat bod na mapě. Bylo potřeba vytvořit živý digitální zážitek, který zobrazí aktuální polohu závodníků, projetou trasu i záchytné body a zároveň postupně odhalí silnou edukativní vrstvu kampaně spojenou s paliativní péčí.

Největší výzvou byl čas. Vývoj začal pouhé tři týdny před startem závodu a zadání se formovalo agilně v průběhu projektu. Klient proto potřeboval partnera, který bude schopen okamžitě prioritizovat, rychle iterovat a dodat funkční i vizuálně atraktivní řešení v řádu dnů, nikoliv měsíců.

Zároveň bylo od začátku zřejmé, že rozhodující část návštěvnosti přijde z mobilních zařízení, často na pomalejším datovém připojení. Technické řešení tak muselo být navrženo s absolutní prioritou pro mobile-first scénář.

Z pohledu projektu to vytvořilo tři klíčové požadavky:

1. Real-time storytelling: zobrazit aktuální pohyb závodníků, projetou trasu a nabídnout možnost zpětného přehrání průběhu závodu.
2. Silný a čistý vizuál: přizpůsobit mapové podklady tak, aby nepřebíjely obsah a podtrhly emotivní charakter kampaně.
3. Maximální výkon na mobilech: zajistit rychlé načítání a plynulé vykreslení i při práci s velmi objemnými mapovými daty.

Cíle projektu: sledování závodu, edukace a bezchybné fungování na mobilních sítích

Projekt byl od počátku definován jako kombinace sportovního live trackingu, interaktivního storytellingu a extrémně důsledné technické optimalizace.

Klíčové cíle byly:

1. Vytvořit webovou mapovou aplikaci vloženou do stávajícího webu klienta.
2. Zobrazit aktuální polohu závodníků, projetou trasu a checkpointy v přehledné a atraktivní formě.
3. Umožnit zpětné přehrání průběhu závodu pomocí interaktivního časového posuvníku.
4. Propojit mapu s příběhy hospiců, fotografiemi a osvětovým obsahem o paliativní péči.
5. Optimalizovat datově náročné mapové podklady tak, aby aplikace běžela plynule i na mobilních telefonech a pomalém připojení.

Řešení: Vue pro rychlou iteraci, custom Google Maps a UX odladěné pro mobilní použití

Pro splnění náročných požadavků na rychlost dodání i flexibilitu vývoje jsme zvolili moderní frontendový přístup postavený na Vue.js. Tato volba nebyla motivována pouze výkonem, ale především schopností rychle iterovat funkce a průběžně reagovat na měnící se zadání během velmi krátkého vývojového okna.

Mapová vrstva vznikla nad Google Maps API, které bylo výrazně přizpůsobeno potřebám projektu. Standardní mapové podklady obsahují velké množství vizuálního šumu – názvy nepodstatných lokalit, rušivé barvy a další elementy, které odvádějí pozornost. Pomocí custom stylingu a filtrování dat jsme mapu vyčistili tak, aby na displeji dominovala samotná trasa, checkpointy a obsah s charitativním přesahem.

Velká pozornost byla věnována také mobilnímu UX. Interaktivní ovládání bylo odladěno tak, aby mapa uživatelům „neujížděla pod prsty“ a aby se s ní dalo pohodlně pracovat i na menších displejích. Součástí rozhraní byl časový slider, který umožnil zpětně přehrát průjezd závodníků, a zároveň dynamicky odkrýval paliativní body s příběhy hospiců a doplňujícími fotografiemi.

Storytelling v mapě: sportovní výkon propojený s příběhy hospiců

Aplikace nebyla pouze technickým live trackerem. Jejím cílem bylo vytvořit emocionálně silný digitální formát, který propojí sportovní výkon s edukací a dobročinným přesahem.

Pohyb závodníků po mapě se tak stal nosičem širšího příběhu. Uživatelé mohli sledovat nejen trasu a checkpointy, ale také postupně objevovat tematické body věnované paliativní péči, příběhům hospiců a otázkám, které rozvíjely smysl celé kampaně.

Vývoj v extrémně krátkém čase: 14 dnů od prvního řádku kódu po produkci

Celý projekt byl od prvního řádku kódu po produkční nasazení realizován za méně než 14 dnů.

Tento výsledek potvrdil schopnost týmu Foxily dodávat funkční řešení i v situacích, kdy se zadání vyvíjí za pochodu a časový prostor je extrémně omezený. Rychlost dodání přitom nešla na úkor stability ani kvality výsledného UX.

Výsledky: plynulý provoz během závodu a technologie s reálným společenským přesahem

Navzdory vysokému podílu mobilního trafficu i datově náročné trase běžela aplikace po celou dobu závodu plynule a bez výpadků. Uživatelé mohli pohodlně sledovat dění v reálném čase a zároveň vnímat edukativní vrstvu kampaně, která byla přirozeně zasazená do mapového rozhraní.

Mezi hlavní přínosy patří:

1. interaktivní live tracking závodu s možností zpětného přehrání průběhu,
2. úspěšná optimalizace 14MB GPS souboru pro mobilní zařízení a mobilní sítě,
3. vizuálně čistá mapa přizpůsobená identitě projektu a potřebám storytellingu,
4. dodání řešení v šibeničním termínu kratším než 14 dnů vývoje,
5. technologický projekt s charitativním a společenským přesahem, realizovaný pro bono jako podpora paliativní péče.