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. Technický základ, redakčný systém a integrácie pritom zostávajú spoločné. Active24.cz bol prvým webom spusteným na tomto základe.

active24.cz

470+

dizajnových tokenov

redakčných blokov

krajiny z jedného kódu

2022

začiatok spolupráce

Úvodná stránka webu Active24.cz s vyhľadávaním domény

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

Každá značka mala vyzerať po svojom, ale nepotrebovala na to 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 obslúži viacero značiek a krajín.

Architektúra platformy

Dizajnový systém

Figma

premenné pre farby, typografiu a komponenty

tokeny 1:1

Spoločný základ

WordPress multisite

generická téma a spoločné funkcie

dáta cez API

Zdroj dát

Centrálne systémy

produkty, ceny hostingov a domén, košík

konfigurácia značky

Výstup

Weby značiek

lokalizovaný obsah a vlastný vizuál

Spoločný kód znamená menej duplikácie a jednoduchší ďalší rozvoj. Každá značka pritom má priestor na vlastný vizuál a obsah.

Active24.cz a Active24.eu dnes bežia na rovnakom technickom základe, no každý môže 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, typografiu aj komponenty definujú 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ť.

Cenník domén Active24 s cenami s DPH aj bez DPH — Cenník doménových koncoviek s cenami s DPH aj bez DPH.

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.

Hotovú konfiguráciu potom návštevník pošle rovno do košíka.

Konfigurátor webhostingových balíkov Active24 so slidermi a živými cenami

Každá zmena parametra prepočíta cenu bez načítania stránky.

Používateľ nevidí, koľko systémov je za tým

Platforma pracuje s centrálnymi systémami, API, konfigurátormi a viacerými značkami. Používateľ z toho vidí jednoduchý web, ktorý reaguje okamžite.

Technická zložitosť zostáva v platforme. Používateľ dostane aktuálne ceny, konfiguráciu produktov aj informácie bez zbytočných krokov.

Zložitosť 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.

Na platforme pracujeme aj po spustení. Pribúdajú nové kampaňové bloky, produktové stránky a ďalšie úpravy podľa potrieb klienta.

Dizajn vo Figme

Dizajn vznikol vo Figme. Technický základ a implementáciu sme dodali my.

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

Na implementácii sme pracovali 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 je dnes základom pre ďalšie weby klienta. Nová značka preto nemusí znamenať nový vývojový projekt: základ zostáva spoločný, mení sa konfigurácia dizajnu a obsahu.

Stránka registrácie domén Active24 s overením dostupnosti domény — Registrácia domén s overením dostupnosti priamo na webe.

Active24 dnes stojí na platforme, z ktorej môžu vyrastať ďalšie weby.

Technológie a architektúra

Pri Active24 sme potrebovali základ, ktorý unesie viac značiek bez duplikovania kódu.

Dizajnový systém

Figma design system

Dizajn je postavený na premenných a komponentoch, nie na statických obrazovkách. Preto sa dal použiť pre viac značiek.

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 a nevyžaduje samostatnú vetvu projektu.

Gutenberg

Namiesto vlastného page buildera sme použili natívny editor. Redakcia tak pracuje v prostredí, ktoré je súčasťou WordPressu a prežije jeho aktualizácie.