Design a vývoj v jednom týmu. Za provozu

Když UX a vývoj sedí u jednoho stolu, není potřeba nic překládat. Návrhy se ladí v reálném čase a změny se dostávají na web hned, jak dávají smysl. Ukazujeme, že i velké médium se může proměňovat postupně a efektivně, aniž by se uživatelům měnilo pod rukama.

Spolupráce, která dává smysl

Jeden z nejnavštěvovanějších českých zpravodajských webů, Blesk.cz, prochází proměnou. Nejde o jednorázovou akci, ale o dlouhodobý a postupný proces. Místo klasického redesignu jsme zvolili přístup, který zrychluje technologický vývoj a zároveň lépe reaguje na měnící se potřeby čtenářů.

Web upravujeme po částech, od homepage přes rubriky až po jednotlivé komponenty. Každá změna se nasazuje ve chvíli, kdy dává smysl z pohledu funkčnosti, uživatelského dopadu i priorit redakce.

Produktový manažer, designér a frontendový vývojář pracují v těsném kontaktu. Díky tomu vznikají návrhy, které jsou od začátku proveditelné a odpovídají jak technickým možnostem, tak potřebám redakce. Designér Václav Jelínek a vývojář Jan Pikl spolupracují už od prvního návrhu funkce. Jakmile redakce návrh schválí, vývoj může začít bez prodlev. Vývojář přesně ví, co a proč má dělat, protože byl u celého procesu přítomen. Tím se výrazně zkracuje čas mezi nápadem a realizací.

Rychlé nasazování = okamžitá zpětná vazba

Díky rozdělení vývoje na jednotlivé kroky dokážeme zavádět úpravy postupně a zároveň okamžitě sledovat jejich dopad. Místo velkých celků pracujeme s menšími, kontrolovanými iteracemi. To nám dává prostor testovat i prototypy nebo experimenty, které se nemusí dostat do produkce, ale pomáhají přesněji definovat směr dalšího vývoje.

Jedním z konkrétních výstupů je nová dynamická navigace na Blesku. „Dynamická navigace slouží ke kategorizaci a procházení obsahu nikoli po rubrikách, ale po tématech. Navíc tak, jak témata aktuálně hýbou společností a jak se zároveň zrcadlí v médiu i jeho cílové skupině čtenářů,“ vysvětluje produktový manažer Ondřej Javornický.

Agilní přístup vyžaduje senioritu

Tenhle agilní přístup nám funguje díky zkušenému týmu, který má nadhled, rozumí souvislostem a má prostor rozhodovat. Typickým příkladem je Jan Pikl, který kromě hluboké znalosti Reactu dokáže plánovat, vstupovat do návrhů a přemýšlet v širším kontextu. Rozumí dopadům na výkon, SEO i dlouhodobou udržitelnost. Má rozhodovací pravomoci a bere projekt za svůj. Právě tahle kombinace samostatnosti, technické jistoty a zodpovědnosti je klíčem k tomu, aby vývoj plynul a návrhy nezůstaly jen na papíře.

Technologický základ

Frontend stavíme na TypeScriptu a Reactu, styling řešíme pomocí CSS Modules. Komponenty navrhujeme ve Figmě s jednotným systémem pojmenování jako ArticleTeaser, LiveLabel nebo SectionHeader. Každá nová funkce prochází vizuální i funkční validací ve Storybooku, kód revidujeme v GitHubu. Nasazujeme postupně přes feature flagy, takže změny můžeme nejdřív otestovat v provozu na části uživatelů. Tímto způsobem vznikly i rychlé zprávy v topbaru, které se zobrazují okamžitě, bez nutnosti reloadu.

Zároveň věnujeme velkou část kapacit technologickému základu, napojení na další systémy, udržitelnosti a přepoužitelnosti kódu. Stavíme věci, které uživatelé přímo nevidí, ale tvoří základ pro další rozvoj.

Proces, který nekončí releasem

Neděláme jednorázový facelift, ale budujeme systém, který se dokáže přizpůsobovat. Každou změnu zkoušíme přímo v provozu, vyhodnocujeme a dál ladíme.

Díky tomu potvrzujeme, že když spolu vývoj a design opravdu mluví, dají se i velké věci měnit postupně, promyšleně a s reálným dopadem.