Case study · Product design
Stała współpraca w zespole odpowiedzialnym za budowę, standaryzację i skalowanie wieloplatformowego systemu projektowego dla jednej z największych instytucji finansowych w Polsce.
Kontekst
Współpracę z klientem zaczęłam od zleceń UX-owych i UI-owych. Na podstawie mojej pracy z komponentami lider zespołu design systemowego zaproponował mi dołączenie. Przez 4+ lat współtworzyłam design system obsługujący ponad 30 zespołów produktowych.
Zastałam środowisko korporacyjne: rozproszone biblioteki, manualne procesy, brak wspólnych standardów. Setki komponentów w różnych technologiach, każdy zespół z własnymi zasadami.
faza 01
Na potrzeby edukacji w organizacji zdefiniowałam sześć poziomów dojrzałości design systemu – framework, który pozwala precyzyjnie określić, gdzie organizacja jest i dokąd może dojść.
01
Brak struktury
Brak zasad i dokumentacji. Design System nie istnieje jako spójna jednostka, co generuje wysokie koszty i niespójność produktów.
02
Początki standaryzacji
Powstają pierwsze komponenty i zasady, lecz brak centralnego zarządzania i formalnej strategii.
03
Design System jako narzędzie
Istnieje zespół Design Systemowy i spójne komponenty. Brakuje pełnej integracji z developmentem i centralnego repozytorium.
04
Design System jako język komunikacji
Design System staje się wspólnym językiem między zespołami – projektowaniem, developmentem i biznesem. Struktura, zasady i tokeny tworzą spójny sposób pracy, który porządkuje decyzje i automatyzuje powtarzalne działania.
05
Design System jako produkt
Design System ma strategię, roadmapę i wysoką dojrzałość procesową. Automatyzacja wspiera projektantów i developerów.
06
Design System jako ekosystem
Pełna integracja i automatyzacja. Design System rozwija się dynamicznie wraz z organizacją i potrzebami użytkowników.
faza 02
Kiedy pojawiła się przestrzeń na uspójnienie choćby jednego elementu – byłam inicjatorką. Pierwszy projekt, który pokazał organizacji, że design system to realna zmiana w produkcie, nie teoria.
01
Audyt
Zmapowałam ponad 500 istniejących ikon rozproszonych w kilkudziesięciu bibliotekach developerskich.
02
Projekt
Zaprojektowałam dedykowaną, spójną bibliotekę ikon od zera.
03
Wdrożenie
Wspólnie z developerami wdrożyłam bibliotekę jako repozytorium kodu.
04
Migracja
Przeprowadziłam podmianę starych ikon na nowe w kilkudziesięciu widokach produkcyjnych.
edit
doc
phone
bank
send
coffee
faza 03
Dwuosobowy zespół – ja i lider – z mandatem na pełną tokenizację.
01
Audyt
Ponad 300 komponentów, istniejące tokeny prymitywne w kodzie, kilkadziesiąt bibliotek developerskich do zmigrowania.
02
Tokeny
Zaprojektowałam hierarchiczny system: core → prymitywne → semantyczne, z eksportem do JSON i integracją z repozytoriami kodu. Dark mode uwzględniony od pierwszego dnia.
03
Wdrożenie
Aplikacja natywna – względnie nowa, wdrożenie przebiegło sprawnie. Web – 80% aplikacji to web view. Migracja komponent po komponencie, negocjacje z zespołami, testowanie na żywym organizmie.
04
Dokumentacja
Dokumentowałam anatomię każdego komponentu i wytwarzałam specyfikacje w formie dostępnej dla dwóch zespołów developerskich (aplikacja natywna + web).
05
Koordynacja
Organizowałam spotkania przekazaniowe, robiłam podsumowania ustaleń, raportowałam postępy i ustalałam priorytety wdrożeń.
faza 04
Przy tokenizacji nastąpiło również przejście z oprogramowania Sketch na Figmę. Byłam jedną z osób, które mocno dążyły do tej zmiany – Sketch nie dawał gwarancji stabilnej pracy przy tak rozbudowanej bibliotece.
Komponenty
wytworzyłam pełną bibliotekę komponentów w Figmie, podmieniając tokeny i przygotowując migrację dla developerów.
Projektanci
Projektanci pracujący dotąd na Sketchu musieli przejść na nowe oprogramowanie. Tworzyłam instrukcje obsługi biblioteki, zasady tworzenia plików i służyłam wsparciem przy wdrażaniu się w Figmę.
faza 05
Brałam aktywny udział w badaniach użyteczności komponentów design systemowych – w kontekście realnych widoków, nie w izolacji.
Współtworzyłam scenariusze badawcze, uczestniczyłam w sesjach w focusowni. Wyniki wracały do iteracji komponentów.
faza 06
Zaprojektowałam i zaproponowałam koncepcję niezależnego repozytorium design systemowego – jedno źródło prawdy dla całej organizacji. To był mój pomysł.
01
Przygotowanie treści
Wyeksportowałam wszystkie ustalenia, rozpisałam specyfikacje i zapisałam je w plikach Markdown (.md). Pliki .md działały w repozytorium natywnie – treści wyświetlały się bezpośrednio po wczytaniu, bez dodatkowych narzędzi.
02
Automatyzacja dokumentacji
stworzyłam proces generowania dokumentacji komponentów bezpośrednio z Figmy do .md – opisy, stany, zasady użycia, warianty.
03
Zawartość repozytorium
Przede wszystkim zasady: fundament systemu projektowania, w tym zasady pisania opracowane wspólnie z UX writerem. Do tego tokenizacja (w tym ztokenizowane animacje), dokumentacja komponentów oraz interaktywne demo w Storybooku.
04
Jedno źródło prawdy
Projektanci, developerzy i biznes otrzymali jedno miejsce, w którym mogli dowiedzieć się wszystkiego, co dotyczy systemu projektowania.
faza 07
Kiedy bank zdecydował się na zewnętrzny audyt dostępności WCAG, przyszedł raport z ponad 600 pozycjami do zaopiekowania. Organizacja stanęła – nikt nie wiedział, jak się do tego zabrać. Problem z podziałem ról, brak governance, ogromna skala.
01
Analiza
Przeanalizowałam cały raport i każdą pozycję otagowałam według obszaru: UX writing, design system, UX, development.
02
Backlog
Z chaosu Excelowego stworzyłam uporządkowany backlog w Jirze – każda pozycja jako task z odpowiednimi tagami.
03
AI jako wsparcie
Do analizy reguł WCAG i klasyfikacji zadań stworzyłam dedykowanego agenta AI, który znacząco przyspieszył pracę.
04
Rekomendacje DS
Dla obszarów DS opracowałam gotowe rekomendacje poprawek uwzględniając aktualny stan wdrożenia.
Podsumowanie
Od ujednolicenia ikonografii po współautorstwo design systemu obsługującego 30+ zespołów produktowych. Rozproszone biblioteki → ztokenizowany ekosystem z automatyczną dokumentacją, Storybookiem i centralnym repozytorium. Ponad 300 komponentów zaudytowanych i zmigrowanych, przejście ze Sketcha na Figmę, kilkadziesiąt bibliotek developerskich ujednoliconych w jedno źródło prawdy.
Wypracowane fundamenty mogą zostać szybko zweryfikowane przez zmiany organizacyjne – to jedna z największych lekcji tej współpracy. Po przerwie wróciłam do tego samego klienta. Obecnie porządkuję projekt wewnętrzny dla doradców finansowych – niezależny system budowany wcześniej poza globalnym design systemem, z rozproszonymi interfejsami i brakiem struktury projektowej. Dokładnie ten typ wyzwania, w którym jestem najsilniejsza.
Szukam projektantki.
A jakiej?
Takiej, co nie boi się Figmy, Excela i developera naraz.
Cześć. To ja. 🙂