Design System opisuje zasady tworzenia i działania rozwiązań cyfrowych, najczęściej występuje w formie dedykowanej strony. Są to zasady dotyczące zarówno warstwy wizualnej, jak również sposobu działania poszczególnych elementów, prezentujące również warstwę kodu, z której korzystać będą developerzy. To opisy i wytyczne, które określają kierunek i narzucają pewne ograniczenia dla produktów lub usług, które rozwijamy.

Najpopularniejszym Design Systemem jest Material Design stworzony przez Google, dedykowany dla rozwiązań na platformę Android. Bardzo szybko zyskał popularność i stał się skalowalny również na inne systemy. Jeżeli otworzymy kilka aplikacji natywnych z systemu Android i przyjrzymy się rozmieszczeniu przycisków, stylom typografii, wzorcom zapisania informacji czy edycji to zauważymy, że w zasadzie mimo różnych funkcji, działają i wyglądają podobnie.

‍Spójność wizualna i funkcjonalna pozwala użytkownikom szybciej zrozumieć poszczególne elementy interfejsu oraz zasady ich działania, umożliwia również przełożenie znanych użytkownikowi wzorców na kolejne, z którymi będą spotykać się w innych aplikacjach. Oczywiście nie każdy system musi być opisany tak szczegółowo jak w przypadku Material Design, ale tworząc własne rozwiązania warto korzystać z dobrych praktyk wypracowanych przez Google.

Design System często mylony jest z prostym Style Guide, czyli opisem komponentów skupionym na stronie wizualnej. Pozwala na szybsze i prostsze projektowanie kolejnych widoków czy przełożenie jednego projektu na inne produkty. W większości organizacji to właśnie Style Guide sprawdzi się najlepiej, bo nie każda firma będzie potrzebowała własnego systemu.

Kiedy warto zacząć budować własny system?

Jeżeli mamy stronę internetową, aplikację mobilną (na iOS i Androida), a do tego planujemy kolejne rozwiązania, to właśnie najlepszy moment na uporządkowanie i opisanie zasad, które będziemy stosować podczas ich tworzenia. Warto zaznaczyć, że wprowadzenie jednolitego systemu nie oznacza, że wszystkie produkty staną się identyczne (choć można do tego dążyć). Łatwiej będzie nadać im jednak pewien charakter i styl, który może stać się rozpoznawalną cechą naszej marki. Design System ułatwia zachowanie spójności między produktami – ich wyglądem i sposobem działania. Co więcej – oszczędza czas. Dobrze przygotowany system będzie zbiorem skalowalnych elementów gotowych do przeniesienia na kolejne funkcje.

Wśród wielu zalet pojawiają się również wady, które warto poznać przed rozpoczęciem prac nad systemem.

Ciemne strony tworzenia Design Systemu

Pokusiłabym się o stwierdzenie, że Design System nigdy nie jest skończonym produktem. Na początku nie jesteśmy w stanie wygenerować wszystkich elementów interfejsu i ich wzajemnych relacji. Pamiętajmy, że warstwa wizualna jest jedynie jedną z części systemu, więc wytworzone komponenty trzeba opisać w kontekście różnych przypadków, a także przekazać do wdrożenia. Próba tworzenia wszystkiego jest możliwa, ale będzie dużą stratą czasu. System powinien rozwijać się wraz z produktami, których dotyczy, a to oznacza, że będzie tworzony miesiącami, a nawet latami.

Nie można rozwijać go w wolnej chwili pomiędzy innymi projektami, nie powinien być tworzony w pojedynkę. Zespół pracujący nad systemem powinien składać się z doświadczonych projektantów interfejsów i front-end developerów, a organizacja powinna traktować podejmowane prace jako rozwijanie kolejnego produktu. Rzadko organizacje dysponują zasobami, które mogą poświęcić rok, dwa i więcej, na rozwijanie wewnętrznego produktu. Czy zatem prace nad Design Systemem można zlecić na zewnątrz?

Potrzebujemy systemu, nie mamy zasobów

O ile wygenerowanie opisu warstwy wizualnej produktu (Style Guide) nie jest procesem rozbudowanym, tak w przypadku systemu, zlecenie projektu „na zewnątrz” (do agencji, software house lub freelancerów) może okazać się bardzo kosztownym błędem.

W 2017 roku, firma Diebold Nixdorf rozpoczęła prace nad odświeżeniem portfolio i budową nowego produkt w oparciu o zbiór wstępnie zebranych wytycznych. Tworzenie Design Systemu w przypadku firmy, której portfolio składa się z kilkudziesięciu produktów stanowi prawdziwe wyzwanie. Do niewielkiego zespołu projektowego Diebold Nixdorf dołączył Mobee Dick, który w ścisłej współpracy z zespołem projektantów i developerów klienta rozpoczął pracę nad systemem.

Współpraca z agencją nie może być doraźna czy „pod projekt”. Nie interesuje nas outsource typu „płacę fakturę i wymagam”. Przy dużej skali biznesu korporacyjnego nie ma miejsca na doraźność bo inaczej nic się nie zmieni. Nasze produkty żyją, rozwijają się. Najlepsze efekty daje ciągła współpraca, bez końcowej daty na umowie.

Łukasz Krebok, Head of UX , Diebold Nixdorf

Dziś nadal wspólnie rozwijamy Design System dla Diebold Nixdorf, który stopniowo rozrasta się o kolejne komponenty i warianty użycia, a współpraca z Mobee Dick przynosi konkretne korzyści finansowe (przeczytaj wywiad z Head of UX w Diebold Nixdorf – Łukaszem Krebokiem).

Dzięki pracy wewnątrz organizacji klienta możemy szybko zrozumieć produkty i proces pracy stosowany w organizacji. Możemy więc tworzyć produkt, który odpowiada rzeczywistym potrzebom klienta, a nie wizji agencji, której specyfika pracy zdecydowanie różni się od tej korporacyjnej.

Czy zatem warto zlecać budowanie design systemu na zewnątrz? Tak, pod warunkiem, że będzie robił to doświadczony zespół, pracując ramię w ramię z wewnętrznym zespołem projektowym i developerskim.