Porozmawiaj o projekcieDesign system dla jednej z największych marek fashion w Polsce
Niespójne komponenty UI spowalniały development nowych funkcji o 40%
+60%
szybkość developmentu
Nowe funkcje powstają 60% szybciej
−40
godzin/sprint
Mniej czasu na uzgadnianie implementacji
40
komponentów
Zastąpiło 847 niespójnych wariantów
100%
WCAG 2.2 AA
Zgodność ze standardami dostępności
Wyzwanie
Na czym polegał problem?
Reserved przez lata budowało swój e-commerce organicznie — każdy zespół tworzył własne komponenty. Efektem był chaos: 14 wersji przycisku, 6 różnych stylów kart produktowych i 0 spójności między sekcjami. Developerzy tracili 40% czasu na uzgadnianie implementacji zamiast budować nowe funkcje.
Proces
Jak podeszliśmy do problemu
Audyt i inwentaryzacja
Zmapowaliśmy wszystkie istniejące komponenty w 3 repozytoriach. Zidentyfikowaliśmy 847 unikalnych wariantów UI — z czego 312 można było zastąpić 40 komponentami systemu.
Token architecture
Zaprojektowaliśmy trójwarstwowy system tokenów: primitive (wartości bazowe), semantic (kontekst użycia) i component (tokeny konkretnych komponentów). Wszystko zgodne z WCAG 2.2.
Biblioteka komponentów
Zbudowaliśmy 40 komponentów bazowych z dokumentacją w Storybook. Każdy komponent ma komplet wariantów, stanów i guidelines dla developerów.
Wdrożenie i adopcja
Przeprowadziliśmy 8 warsztatów z zespołami. Migracja 3 największych modułów zajęła 6 tygodni — o 3 tygodnie mniej niż zakładano.
"Quale nie dostarczyło nam tylko systemu — pomogło zmienić sposób, w jaki myślimy o spójności produktu. Design system żyje i jest aktywnie używany przez wszystkie nasze zespoły."
Powiązane projekty
Inne case studies
Masz podobne wyzwanie?
Porozmawiajmy o Twoim projekcie. Bezpłatna konsultacja, zero zobowiązań.