Dlaczego warto inwestować w design system przy planowaniu transformacji cyfrowej?

Dzięki design systemowi praca nad projektami IT jest tańsza, szybsza i bardziej spójna, zapewniając lepsze doświadczenie użytkownika.

Zbyt wiele obietnic jak na jeden artykuł? My tak nie sądzimy.

Aby to udowodnić, zebraliśmy informacje o design systemach, przykłady firm, które z nich korzystają, i ich opinie. Zanurzmy się!

Jeśli nad projektem pracuje wiele osób lub zespołów, design system przyspiesza wdrożenie każdego produktu. Dzięki niemu możemy lepiej komunikować się między zespołami UI-UI, UI-DEV i DEV-DEV — stanowi nasz słownik produktowy i ostateczną księgę wiedzy.

Ponadto zapewnia porządek i kontrolę spójności w projekcie. Dzięki temu wszystkiemu firmy mogą oszczędzać czas i pieniądze. Redukujemy niepewność w procesie projektowania i wdrożenia oraz czas poświęcany na ciągłe konsultacje dotyczące zmian. Design system to ciągły proces, który firmy powinny rozwijać wraz ze zmieniającymi się potrzebami użytkowników i ewolucją produktów. Stworzenie go w wersji ostatecznej nie jest możliwe. Możemy go jedynie regularnie aktualizować. Marcin Sasin, UI Designer w Autentika

Czym jest design system?

<b>Design system</b> to zbiór narzędzi i procesów ułatwiających projektowanie, budowanie i rozwijanie produktów cyfrowych… Tak, to nie jest takie proste.

<b>Pozwólcie, że podamy przykład.</b>

Wyobraź sobie, że potrzebujesz jednego przycisku do swojej aplikacji. Przygotowanie tego prostego elementu wiąże się z podjęciem kilku decyzji: <b>kształt, wypełnienie, rozmiar, cień, krój pisma, marginesy, efekty po najechaniu myszą, efekty po kliknięciu, ikonografia czy ostateczny kod, który umieści go w systemie.</b> Dodajmy, że taki przycisk musi być spójny z innymi elementami aplikacji, których mogą być dziesiątki, a nawet setki.

I tu zaczyna się historia, którą zna każdy, kto ma cokolwiek wspólnego z tworzeniem oprogramowania:

• <b>UX Designer</b> nie zajmuje się większością powyższych cech przycisku,
• <b>UI Designer</b> projektuje nowy wygląd każdego przycisku dla każdego tworzonego projektu osobno,
• <b>Front-end Developer</b> pisze kod w sposób, który mnoży rozbieżności, podejmując własne decyzje.

I to dopiero początek wszystkich problemów. Pomnóżmy te kwestie przez liczbę projektów w firmie i liczbę zatrudnionych osób, uwzględniając rotację pracowników i zespołów, presję czasu i budżetu. Rezultat?

Oto zbiór przycisków udostępniania treści w mediach społecznościowych z jednej z redakcji.

Jakie są konsekwencje braku design systemu?

Powyższy przykład prowadzi do nieprzyjemnych konsekwencji:

• Strata czasu i energii – tworzenie oprogramowania spowalniają długotrwałe procedury projektowe i deweloperskie.

• Słabe UX – użytkownicy korzystający z wielu różnych aplikacji tej samej firmy nie mają poczucia, że mają do czynienia z jednym ekosystemem.

• Brak spójności – każdy system tej samej firmy działa i wygląda inaczej, nawet jeśli na pierwszy rzut oka ma podobne elementy.

• <b>Wysokie koszty rozwoju</b> – firma ponosi koszty tworzenia tych samych elementów wielokrotnie dla różnych celów.

I właśnie wtedy design system, niczym rycerz w lśniącej zbroi, przybywa z pomocą.

Design system w praktyce

W praktyce design system to biblioteka komponentów łącząca projekt, kod i wiedzę o tym, jak ich używać. Opiera się na prostej idei – <b>stwórz raz, używaj wielokrotnie.</b>

<b>I nie — sama biblioteka komponentów to jeszcze nie design system.</b> Ani sam projekt, ani sam kod nie tworzą design systemu. Sama wiedza również nim nie jest. Wszystkie te elementy muszą być właściwie połączone i tworzone razem jako proces oraz ostateczne źródło prawdy zarówno dla projektantów, jak i deweloperów.

Korzystanie z design systemu w praktyce oznacza posiadanie wspólnej podstawy języka projektowania między projektantami, inżynierami, analitykami biznesowymi i interesariuszami — w zasadzie całą firmą. Zapewnienie jednolitego, zintegrowanego i bezproblemowego doświadczenia to nadrzędny cel każdego produktu cyfrowego. Można to porównać do tone of voice w marketingu lub identyfikacji wizualnej marki.

Można myśleć z rozmachem i budować unikalny design system od podstaw. Doświadczyłem jednak, że wiele firm z małymi, niedoświadczonymi zespołami nie ma odpowiedniej wiedzy specjalistycznej, potrzebuje więcej czasu i budżetu, by go ukształtować. Często spotykałem się z dość fragmentarycznym i mieszanym ekosystemem; w takim przypadku sugeruję skorzystanie z publicznego, open-source'owego design systemu. Później można go dostosować do identyfikacji marki i tone of voice. Bonifác Gombos, Product Designer & Design System Consultant @Accenture

Dla kogo jest design system?

Sygnały, że powinieneś rozwijać design system w swojej organizacji, można sprowadzić do kilku wspólnych cech:

• Jeśli Twoja firma posiada już rozbudowany ekosystem systemów IT, który zamierza rozwijać, prawdopodobnie potrzebujesz design systemu.

• Możesz potrzebować design systemu, jeśli Twoja firma planuje rozwijać nowe systemy IT.

• Jeśli zespoły projektantów i deweloperów w Twojej firmie mają problemy z komunikacją i z trudnością osiągają spójne rezultaty, prawdopodobnie potrzebujesz design systemu.

Celowo używamy słowa „prawdopodobnie", ponieważ <b>dyskusja na temat design systemów jest znacznie bardziej złożona.</b> W naszych wstępnych rozmowach z klientami dokładnie analizujemy portfolio projektów, platformy i technologie użyte do ich budowy. Definiujemy oczekiwany poziom spójności między tymi platformami i systemami oraz analizujemy strukturę i kompetencje zespołów wdrożeniowych.

<b>Nie ma jednego, uniwersalnego sposobu na zbudowanie design systemu.</b> Plan zależy od ekosystemu projektów IT w Twojej firmie i celów, które chcesz osiągnąć.

Design system nie ma na celu ograniczania projektantów — ma przyspieszać projektowanie, jednocześnie pozwalając im być kreatywnymi w ramach języka marki. Jacob Miller, Product Manager w Figma

Korzyści design systemu dla Twojej organizacji

Stawka jest rzeczywiście wysoka. Prawidłowo wdrożony, stosowany i rozwijany design system przekłada się na <b>wymierne korzyści dla Twojego biznesu:</b>

1. Możesz go używać do szybszego tworzenia nowych projektów, zwiększając produktywność zespołów projektowych i deweloperskich. 2. Możesz oszczędzać na rozwijaniu istniejących produktów, ponieważ kod będzie wielokrotnego użytku, a prototypowanie stanie się prostsze. 3. Możesz uczynić swoje aplikacje bardziej spójnymi pod względem wyglądu, odczuć i działania, zamieniając je w jeden ekosystem. 4. Możesz zapewnić użytkownikom odpowiedni poziom komfortu, promując dobre UX i wielokrotnego użytku szablony UX.

Zapytaliśmy <b>Basalissę Albers, design system Product Owner @Adverity</b>, jakie są trzy najważniejsze korzyści z wdrożenia design systemu w jej organizacji:

Produktywność, skalowalność i spójność.

• Produktywność. Nasz design system pozwala projektantom i inżynierom skupić się na szerszym obrazie bez tracenia czasu na drobne szczegóły UI. Nie muszą poświęcać czasu na rozwiązywanie problemów projektowych, które zostały już rozwiązane w innych miejscach, ani tworzyć tych samych elementów wielokrotnie. Pozwala im pracować efektywniej i zwiększa produktywność.

• Zwiększona produktywność prowadzi do skalowalności. Poprzez zwiększenie produktywności design system przyspiesza projektowanie i tworzenie nowych funkcji, umożliwiając nam szybsze i bardziej spójne skalowanie.

• Ostatni, ale równie ważny punkt — spójność. Na poziomie szczegółowym nasze wielokrotnego użytku komponenty wyglądają i zachowują się tak samo wszędzie w naszym produkcie. Na wyższym poziomie design system zapewnia wytyczne prowadzące do bardziej spójnych projektów ogółem. Spójne doświadczenie sprawia, że interakcje stają się bardziej przewidywalne i zmniejszają obciążenie poznawcze naszych użytkowników.

Przykłady design systemów

Przyjrzyj się flagowym rozwiązaniom gigantów IT. Od dłuższego czasu udowadniają, że design system to znaczące usprawnienie procesu tworzenia oprogramowania:

• Design system Polaris firmy Shopify: https://polaris.shopify.com/
• Design system Lightning firmy Salesforce: https://www.lightningdesignsystem.com/
• Design system Carbon firmy IBM: https://www.carbondesignsystem.com/
• Design system Spectrum firmy Adobe: https://spectrum.adobe.com/
• Design system Material firmy Google: https://material.io/design/

Design system dla branży mediów online

Współpracujemy z Wirtualna Polska Group od ponad czterech lat. To jedna z największych grup medialnych w Europie Środkowej, docierająca do 22,1 miliona użytkowników miesięcznie. Przez 25 lat zgromadziła wiele różnych narzędzi cyfrowych (reklamowych, IT i redakcyjnych, między innymi). Naszym zadaniem było stworzenie spójnego <b>systemu back-office (wraz z design systemem)</b> — zestawu rozwiązań wspierających rozwój istniejących i tworzenie nowych narzędzi. Jeśli chcesz dowiedzieć się więcej, sprawdź nasze case study.

Oto co mówi o design systemie <b>Aleksandra Rabenda, Head of Delivery Team @ WP</b>:

Dziś nie wyobrażam sobie naszej pracy bez design systemu. To system, który zaoszczędził naszej organizacji wiele pieniędzy, a co najważniejsze — stresu i zamieszania. Tworząc kolejne aplikacje, mamy komponenty gotowe w jednym miejscu i wszystko wygląda pięknie i uporządkowanie.

Podsumowanie

Design system to zbiór narzędzi i procesów upraszczających tworzenie, budowanie i projektowanie produktów cyfrowych. Decyzja o rozwinięciu własnego design systemu musi być poprzedzona gruntowną analizą opartą na solidnych podstawach biznesowych. To właśnie taka rozmowa, do której chcielibyśmy zachęcić. <b>Czy jesteś gotowy do niej dołączyć?</b>