LiveU — Design System Signa

Provocarea

LiveU alimentează transmisiuni video live pentru cele mai importante companii de broadcasting, agenții de știri și rețele sportive din lume. Tehnologia lor e folosită în cele mai solicitante medii imaginabile — știri de ultimă oră, sport live, reportaje de teren. Dar în timp ce hardware-ul și sistemele backend erau de clasă mondială, ecosistemul lor de design se fracturase.

Ani de creștere rapidă și echipe multiple de produs generaseră un peisaj de fragmentare în design. Tipografia varia între produse. Utilizarea culorii era inconsistentă — același albastru însemna “acțiune primară” într-o aplicație și “informativ” în alta. Componente care îndeplineau funcții identice arătau și se comportau diferit pe platforme diferite. Fiecare funcționalitate nouă necesita reinventarea pattern-urilor de UI de la zero.

Costul nu se măsura doar în ore de design, ci și în confuzia utilizatorilor. Difuzorii care operau mai multe produse LiveU întâlneau un limbaj diferit de interfață în fiecare, erodând încrederea pe care un instrument profesional o cere.

Trei piloni strategici

Am încadrat întreaga inițiativă în jurul a trei piloni care au ghidat fiecare decizie:

Unifică

Stabilește o singură sursă de adevăr pentru fiecare pattern vizual și de interacțiune din ecosistemul de produse LiveU. Un singur stil de buton. Un singur model de navigare. O singură ierarhie tipografică. Fără excepții, fără “cazuri speciale” care erodează consistența în timp.

Simplifică

Redu încărcătura cognitivă atât pentru designeri, cât și pentru dezvoltatori. Mai puține componente care fac mai mult. Convenții clare de denumire. Ghiduri de utilizare evidente. Sistemul trebuie să facă din alegerea corectă alegerea ușoară.

Scalează

Construiește pentru viitor, nu doar pentru prezent. Sistemul trebuie să acomodeze produse noi, platforme noi și echipe noi fără a necesita schimbări structurale. Procesele de guvernanță trebuie să fie suficient de ușoare pentru a încuraja adoptarea și suficient de robuste pentru a preveni deviația.

Cinci etape de dezvoltare

Etapa 1 — Fundații

Stratul de fundație a stabilit token-urile de design pe care fiecare componentă le moștenește. Am început cu tipografia: am selectat Plus Jakarta Sans ca font principal de display pentru claritatea sa geometrică și căldura modernă, împerecheat cu Inter ca font de lucru pentru UI, datorită lizibilității sale excepționale la dimensiuni mici și setului extins de caractere.

Token-urile de culoare au fost organizate pe trei niveluri: culori de brand (imuabile), culori semantice (sens contextual) și culori de componentă (aplicații specifice). Spațierea a urmat un grid de bază de 8px cu o scală consistentă. Token-urile de elevație, rază de colț și mișcare au completat fundația.

Etapa 2 — biblioteca de componente

Folosind metodologia Atomic Design, am construit biblioteca de componente pe patru straturi:

• Atomi — cele mai mici elemente indivizibile: butoane, input-uri, badge-uri, icoane, toggle-uri și stiluri tipografice
• Molecule — combinații de atomi care formează unități funcționale: bare de căutare, câmpuri de formular cu etichete și validare, carduri de metrici și meniuri dropdown
• Organisme — secțiuni complexe de UI compuse din molecule: headere de navigare, tabele de date cu sortare și filtrare, panouri de dashboard și dialoguri modale
• Pattern-uri — layout-uri recurente la nivel de pagină și fluxuri de interacțiune: secvențe de onboarding, pagini de setări, navigare de la listă la detaliu și fluxuri de recuperare din erori

Fiecare componentă a fost construită cu variante multiple, stări și dimensiuni, toate alimentate de token-urile de fundație. Peste 120 de componente au fost livrate, fiecare cu documentație completă.

Etapa 3 — guvernanță

Un design system fără guvernanță e un design system care așteaptă să se degradeze. Am stabilit procese clare pentru propunerea de componente noi, modificarea celor existente și retragerea pattern-urilor învechite. Am definit un model de contribuție care permite oricărei echipe să trimită adăugiri, cu un proces de revizuire care asigură calitatea și consistența.

Etapa 4 — documentație

Fiecare componentă a primit documentație detaliată care acoperă ghiduri de utilizare, recomandări și contraindicații, cerințe de accesibilitate, comportament responsive și note de implementare în cod. Documentația a fost tratată ca un livrabil de primă clasă, nu ca o idee ulterioară.

Etapa 5 — validare în lumea reală

Sistemul a fost validat prin aplicarea lui la două reproiectări de produs live din ecosistemul LiveU. Acest test de stres a scos la suprafață cazuri limită, a relevat lacune în biblioteca de componente și a confirmat că sistemul poate gestiona complexitatea din lumea reală. Feedback-ul din aceste implementări a fost integrat înapoi în sistem înainte de lansarea finală.

Livrabile

Sistemul de Design Signa complet a inclus:

• Bibliotecă completă de componente Figma cu 30+ componente master și variantele lor
• Specificație de token-uri de design pentru predarea către dezvoltare
• Ghiduri de tipografie și culoare cu rapoarte de accesibilitate
• Sistem de grid și layout cu breakpoint-uri responsive
• Bibliotecă de iconografie cu principii de utilizare
• Ghiduri de mișcare și animație
• Documentație de guvernanță și fluxuri de contribuție
• Ghiduri de migrare pentru produsele existente

Rezultatul a fost o creștere de 60% a vitezei de design — nu pentru că designerii au lucrat mai repede, ci pentru că au încetat să reinventeze. Fiecare ecran nou pornea de la pattern-uri dovedite, fiecare funcționalitate nouă se construia pe fundații stabilite, iar fiecare produs vorbea același limbaj vizual pentru prima dată în istoria LiveU.