Jeden základ.
Viac značiek.
Pre Active24 sme postavili nový web na platforme, ktorá oddeľuje spoločné funkcie od vizuálu konkrétnej značky.
Značka tak môže mať vlastný dizajn, zatiaľ čo technický základ, redakčný systém a integrácie zostávajú spoločné. Active24.cz bol prvým webom spusteným na tomto základe.
470+
dizajnových tokenov
55
redakčných blokov
2
krajiny z jedného kódu
2022
začiatok spolupráce
Začalo sa to jedným dizajnom
Pôvodne vznikol dizajn vo Figme pre nový web jednej zo značiek hostingovej skupiny. Projekt sa však dočasne pozastavil.
Dizajn bol pritom postavený na premenných a komponentoch tak dobre, že sa nemusel použiť iba pre jeden web. Rozhodli sme sa z neho vytvoriť generický dizajnový systém pre celé portfólio značiek skupiny.
Active24.cz sa stal prvým webom, na ktorom sme tento koncept overili v ostrej prevádzke.
Namiesto ďalšieho samostatného webu vznikol základ pre celú skupinu.
Unikátny dizajn bez kopírovania kódu
Cieľ bol jednoduchý: každá značka má vyzerať vlastne, ale nemusí mať vlastný technický základ.
Dizajnový systém sme preto postavili na premenných, ktoré fungujú rovnako vo Figme aj v kóde. Farby, typografia, tlačidlá a ďalšie komponenty sa dajú meniť podľa značky bez prepisovania celej témy.
Zostáva spoločné
Technický základ a generická téma
Redakčný systém a bloky
Integrácie s centrálnymi systémami
Ďalší rozvoj platformy
Mení sa podľa značky
Farby a typografia
Tlačidlá a komponenty
Obsah a jazyk
Konfigurácia pre trh
Nová značka = konfigurácia. Nie nový web od nuly.
Jeden technický základ pre viac značiek
Platformu sme postavili ako WordPress multisite. Jedna inštalácia tak dokáže obslúžiť viacero značiek a krajín.
Figma
premenné pre farby, typografiu a komponenty
WordPress multisite
generická téma a spoločné funkcie
Centrálne systémy
produkty, ceny hostingov a domén, košík
Weby značiek
lokalizovaný obsah a vlastný vizuál
Spoločný kód znamená menej duplikácie a jednoduchší ďalší rozvoj. Zároveň každá značka dostáva priestor na vlastný vizuál a obsah.
Active24.cz a Active24.eu dnes využívajú rovnaký technický základ, no môžu mať lokalizovaný obsah aj vlastnú konfiguráciu značky.
Dizajnový systém, ktorý sa správa ako vo Figme
Vizuál platformy vychádza zo 470+ dizajnových tokenov. Farby, typografia, tlačidlá a ďalšie komponenty sú definované cez spoločné premenné.
Jedna zmena sa tak nemusí riešiť zvlášť vo frontende, editore a administrácii.
Pri novej značke sa zmenia parametre dizajnu. Funkčný základ zostáva rovnaký.
Rebrand nemusí znamenať nový frontend.
Redakcia dostala vlastné stavebnice
Web sme postavili na natívnom Gutenberg editore a doplnili ho o 55 vlastných blokov.
Bloky majú responzívne nastavenia priamo v editore. Redakcia tak vie meniť obsah aj jeho prezentáciu bez zásahu vývojára.
Z čoho redakcia skladá stránky
Hero sekcie
Produktové karty
Porovnávacie tabuľky
FAQ
Kampaňové bloky
Scroll animácie
Produkty a ceny sa na webe neupravujú ručne
Web je napojený na centrálne systémy spoločnosti. Produkty, ceny hostingov a serverov, ceny domén a ďalšie údaje sa synchronizujú priamo cez API.
Redakcia tak nemusí prepisovať údaje, ktoré vznikajú a menia sa v iných systémoch. Web zobrazuje aktuálne informácie priamo zo zdroja.
Redakcia spravuje obsah. Systémy dodávajú aktuálne dáta.
Cenník domén, ktorý nikto nespravuje ručne
Active24 ponúka registrácie, predĺženia a transfery stoviek doménových koncoviek.
Ceny sa načítavajú priamo z centrálneho registra. Redakcia rieši texty a obsah stránky, samotné ceny sa aktualizujú automaticky.
Výsledkom je cenník, ktorý nemusí nikto pravidelne kontrolovať a prepisovať.
Ceny priamo zo zdroja.
Konfigurátory s okamžitým prepočtom
Hostingy, virtuálne aj dedikované servery si návštevník nakonfiguruje podľa svojich potrieb.
Vyberá parametre ako operačný systém, doplnky alebo fakturačné obdobie. Cena sa prepočítava priamo cez API bez načítania celej stránky.
Po dokončení konfigurácie môže produkt pokračovať rovno do košíka.
Zmena parametra → nový výpočet ceny → bez načítania stránky.
Používateľ nevidí, koľko systémov je za tým
Na jednej strane platforma pracuje s centrálnymi systémami, API, konfigurátormi a viacerými značkami. Na druhej strane používateľ vidí jednoduchý web, ktorý reaguje okamžite.
Technická komplexita zostáva tam, kde má byť — v platforme. Používateľ dostáva aktuálne ceny, konfiguráciu produktov a informácie bez zbytočných krokov.
Komplexita patrí do architektúry. Nie do používateľského rozhrania.
Z jedného webu vznikla dlhodobá spolupráca
Implementáciu sme dodali na základe dizajnu vo Figme, v úzkej spolupráci s interným tímom Active24.
Po spustení sme na platforme pokračovali ďalej — pribúdajú nové kampaňové bloky, produktové stránky a ďalšie úpravy podľa potrieb klienta.
Dizajn vo Figme
Dizajn vznikol vo Figme; my sme pod ním postavili technický základ a implementáciu.
Agilný vývoj
Vyvíjali sme po iteráciách, aby sa priority dali upravovať aj počas projektu.
Spolupráca s interným tímom
Implementácia prebiehala priamo s interným tímom Active24.
Dlhodobý rozvoj a podpora
Spolupráca trvá od roku 2022 a platforma sa ďalej rozvíja.
Výsledkom nie je iba nový web
Active24.cz bol prvým webom postaveným na novom spoločnom základe.
V ostrej prevádzke sa overilo, že jeden technický základ zvládne kombinovať vlastný dizajn značky, spoločné funkcie a dáta z centrálnych systémov.
Platforma dnes slúži ako základ pre ďalšie weby klienta. Pridanie novej značky preto nemusí znamenať nový vývojový projekt — základ zostáva spoločný a mení sa konfigurácia dizajnu a obsahu.
Active24 dnes nestojí na jednom webe. Stojí na platforme, z ktorej môžu ďalšie weby vyrastať.
Technológie a architektúra
Technológiu vyberáme podľa projektu, nie projekt podľa technológie. Tu sme potrebovali základ, ktorý unesie viac značiek bez toho, aby sa kód duplikoval.
Dizajnový systém
Figma design system
Dizajn žije v premenných a komponentoch, nie v statických obrazovkách. Práve preto sa dal použiť pre viac značiek než pre jednu.
Dizajnové tokeny
Viac než 470 tokenov pre farby, typografiu, odstupy a komponenty. Definícia je jedna a platí pre frontend, editor aj administráciu.
Generická téma + konfigurácia značiek
Téma nesie funkcie, konfigurácia nesie vzhľad. Nová značka preto nepotrebuje vlastnú kópiu témy.
Redakčný systém
WordPress Multisite
Jedna inštalácia obsluhuje viac značiek a krajín so zdieľaným kódom, dizajnom aj mediálnou knižnicou. Lokalizácia je súčasťou tohto základu, nie samostatnou vetvou projektu.
Gutenberg
Natívny editor namiesto vlastného page buildera. Redakcia pracuje v prostredí, ktoré je súčasťou WordPressu a prežije jeho aktualizácie.
Vlastné bloky pre redakciu
55 blokov navrhnutých pre tento web, vrátane responzívnych nastavení priamo v editore — namiesto univerzálnych pluginov, ktoré si dizajn diktujú samy.
Dáta a integrácie
Integrácie s centrálnymi API
Produkty, ceny hostingov a serverov aj ceny domén prichádzajú zo systémov, kde reálne vznikajú. Web si ich nedrží vo vlastnej databáze.
Konfigurátory hostingov a serverov
Parametre sa prepočítavajú cez API bez načítania stránky, takže cena reaguje na každú zmenu okamžite.
Integrácia košíka
Hotová konfigurácia pokračuje priamo do nákupného procesu, bez toho aby ju používateľ zadával druhýkrát.
Nový web pre ďalšiu značku nemusí byť nový projekt.
Navrhneme technický základ, ktorý dokáže rásť spolu s vaším produktom, tímom aj portfóliom značiek.
Ozveme sa do 24 hodín.
Nezáväzne.