Jak jsme přepnuli Sazku na Allwyn až o 50 % rychleji
Rebrand Sazky na Allwyn Česko nebyl „jen“ o výměně loga. Byl to přechod na nový digitální rámec – barvy, typografie, komponenty, ikony... Stovky screenů v novém. Jak jsme k tomu přistoupili, co to znamenalo pro vývoj a co si z toho můžete odnést pro vlastní značku?
Rebrand jako nová éra, ne nové logo
Od ledna 2026 funguje Sazka jako Allwyn Česko. Hry zůstaly stejné, ale rámec se změnil: digital-first, data a větší důraz na zodpovědné hraní. Na naší straně to znamenalo přepsat jazyk UI.
Co to obnášelo v praxi? Kompletní změnu barevnosti a typografie, což jsou dvě klíčové ingredience digitálního designu. S nimi se přirozeně změnily všechny UI prvky – ikony, tlačítka, formuláře, modální okna, tikety, ale také vizuály herních prvků a doprovodná grafika.
Design systém jako motor redesignu
Bez design systému (DS) by takhle rozsáhlý rebrand znamenal v podstatě vytvořit všechny weby a aplikace znovu. Díky design systému stačilo jen upravit parametry základních tokenů (např. barvy, typografii), a mohli jsme základní změny ihned „přepnout“ – ze žluté Sazky na tyrkysový Allwyn, z původního písma na nové – a propsat je napříč komponentami na webech i v aplikacích.
- Odhad úspory: díky DS jsme podobné zásahy zvládli až o 50 % rychleji.
- Dopad u klienta: až o 30–40 % nižší náklady na design, vývoj a rollout.
To je rozdíl mezi „hezkou dokumentací“ a systémem, který opravdu pohání produkt.
Víc o tom, jak jsme stavěli design systém Sazky najdete tady.
Dotvoření digitálních brand assetů: ikony a použitelnost napříč touchpointy
Abychom nový brand dokázali aplikovat na robustní systém digitálních touchpointů, museli jsme některé brand assety pro digitál dotvořit.
Společně s týmem Allwyn jsme navrhli a doplnili prvky, které z nového brandu vizuálně vycházejí a zároveň neztrácejí použitelnost v UI, například sadu ikon pro produktové i provozní scénáře, navázaná na nový styl (tvary, rytmus, optická váha), ale čitelná v malých velikostech a v různých hustotách rozhraní.
Dva skiny vedle sebe: rok v přechodu
Rebrand probíhal zhruba rok a během něj běžely releasy ještě ve „staré“ Sazce. Potřebovali jsme paralelně udržovat starý i nový vizuál. Ve Figmě jsme to vyřešili skrze nativní funkci "variables":
- Sazka skin (legacy styl)
- Dark mode pro hry
- Allwyn skin (nový styl)
Díky tomu šlo vzít hotovou obrazovku a na dvě kliknutí ji zobrazit v Allwyn módu. Klient okamžitě viděl „teď vs. potom“. Po finálním přepnutí jsme mohli Sazka‑skin odstranit a jet už jen Allwyn.
Rebrand jako generální úklid digitálu
Tak velký redesign je zároveň skvělý audit ekosystému. Rychle vylezlo na povrch, co není správně napojené na DS (třeba starší projekty typu Sazka klub). Vzali jsme to jako příležitost:
- Napojili jsme starší šablony na aktuální DS.
- Sjednotili styly.
- Posílili DS jako ultimátní zdroj pravdy pro vývojáře.
Díky semantickým tokenům (např. vyhrazená „tlačítková“ barva) při změnách mizí zbytečné rozhodování. Výsledek: méně zádrhelů v handoffu, konzistentnější produkt a nižší design debt.
Co přesně jsme udělali (7 konkrétních kroků)
- Zarámovali rozsah: identifikovali všechny digitální touchpointy a dopad změn.
- Navrhli a zavedli nové tokeny (barvy, typografie) a propsali je do komponent.
- Ověřili brand v UI na klíčových obrazovkách a dotvořili s týmem klienta to, co pro aplikaci brandu v digitálu chybělo.
- Upravili vizuály pro všechny sekce webů i aplikací, aby byly v souladu s novou identitou.
- Postavili jsme nový Figma‑skin (Sazka / Dark / Allwyn) pro snadnou kontrolu před a po „na klik“.
- Vyčistili archiv: vrátili jsme se ke starým šablonám, napojili je na DS a sjednotili vizuál.
- Hladký release: podklady jsme vývojovému týmu klienta připravili s předstihem, díky tomu a přepnutí proběhlo bez ad‑hoc zásahů.
Automatizace designu do vývoje jako další krok
DS jako jediný zdroj pravdy ušetřil desítky drobných debat typu „který odstín má tohle tlačítko“. Tokeny říkají přesně co a kde – vývoj prostě použije správný token a je to.
Co nás čeká dál? Ještě vyšší míra automatizace. Navazujeme integrací (např. přes Supernovu) tak, aby se změny přelévaly z Figmy přímo do kódu. Víc rychlosti. Méně „ruční práce“.
Co si z toho vzít, pokud řešíte podobnou změnu
- Bez DS to nepůjde. Rebrand, který sahá do UI, musí být postavený na tokenech a komponentách.
- Počítejte s přechodovým obdobím. Udržujte „dva světy“ přes skiny – návrhy i vývoj budou čitelnější.
- Využijte rebrand jako audit. Najděte a napojte staré kusy na DS. Ušetří vám to práci u další změny.
- Měřte dopad. Když dokážete říct „o 50 % rychleji, 30–40 % levněji“, máte argumenty pro board.
Jak vám s tím pomůžeme
Přechod na design systém navrhujeme i u dalších značek – od auditu brand architektury, přes napojení design systému, až po konkrétní digitální experimenty. Ideální další krok: krátký Molekula workshop nad vaším ekosystémem, kde najdeme vaši cestu k design systému.