Design System usprawnia rozwój produktu.


Bartek Zieman
Design System usprawnia rozwój produktu.

Czy Was też dotyka zmora niespójnego produktu?

Na pewno nie raz spotkałeś się z produktem, który jest niespójny wizualnie. Pierwsza strona serwisu wygląda bardzo nowocześnie jednak, gdy wchodzisz dalej, często spotykasz zupełnie niespójne rozwiązania. Wchodząc w głąb platformy często okazuje się, że strony wyglądają tak jakby zaprojektowały je zupełnie inne osoby. I tak właśnie często jest!

Dlaczego tak się dzieje, że produkt traci tak bardzo na spójności?

Wyobraź sobie teraz kilku projektantów, którzy zaczynają pracę nad nową wersją produktu. Ponieważ deadline projektu jest krótki, a nowa wersja ma być wypuszczona pod koniec roku. Wszyscy zatem dostają swój własny obszar zadań do zaprojektowania. Każdy stara się wykonać swoją pracę jak najlepiej. Jednak każdy z projektantów ma swoje sprawdzone rozwiązania, które wypracował przez lata. Oznacza to, że najprawdopodobniej wszystkie te osoby wytworzą mniej lub bardziej niespójne rozwiązania. 

Czy może być jeszcze gorzej? W następnym kroku biznes postanowi, że kolejny zespół zacznie dodatkowo rozwijać również aplikację mobilną. Oznacza to, że kolejne osoby zastosują nowe wzorce projektowe dla tego produktu. Problem ten z każdym miesiącem potęguję się, ponieważ rzadko spłacamy powstający w ten sposób dług technologiczny w postaci braku uspójnienia rozwiązań. 

Niestety nie ruszysz z miejsca bez spisanych wytycznych projektowych

Jak każdy się domyśli, naturalnym rozwiązaniem jest spisanie pewnych zasad projektowych i obranie jednego spójnego kierunku. Jako projektant w większym zespole moją pierwszą potrzebą jest posiadanie jednego, wspólnego pliku projektowego – co pozwala na aktualizowanie jego przez wszystkie osoby w zespole. Pojęcie to nazywane jest „single source of truth – SSOT” – czyli jedno miejsce prawdy. Koncepcja ta świetnie się spisuje do przechowywania i aktualizacji źródeł pliku wizualnego, ale także zaczęto ją stosować w odniesieniu do dokumentacji i wytycznych projektowych. I tak szybkiem krokiem zbliżamy się do pojęcia Design Systemu.

Documentation is the life-blood of a design system. If you don’t document it, it doesn’t exist. You can’t expect people to use a system if it isn’t documented well.

Nie możemy jednak wymagać od projektantów, że będą w stanie utrzymywać spójność produktów i aktualizować każde zmiany jeżeli wcześniejsze decyzje projektowe nie były dobrze udokumentowanie. Jeżeli nie zbierzemy dotychcasowych zasad projektowych w jednym miejscu to nikt nigdy nie zacznie dbać o aktualizację wytwarzanych w przyszłości nowych rozwiązań i usprawnień.

Gdzie zatem powinny się znaleźć wytyczne projektowe? 

W naszej firmie Movade.com zdecydowaliśmy, że do każdej projektowanej przez nas zespół aplikacji będziemy także dostarczać Design System – czyli platformę dedykowaną do przechowywania w jednym miejscu wszelkich ustaleń dotyczących zagadnień projektowych w danym produkcie. Poza elementem dokumentacyjnym, przechowujemy tam także wszelkie powstałe komponenty, z którym budowane są kolejne strony i rozwiązania w produkcie. Mieliśmy już okazję tworzyć takie rozwiązania zarówno dla małego startup’u, jak i wielkiej organizacji.

Trafiając na ten artykuł prawdopodobnie szukasz odpowiedzi na to czym jest Design System. Tworzenie biblioteki komponentów w produkcie to ostatnio gorący temat. Branża IT w której wytwarzamy oprogramowanie coraz więcej inwestuje w projektowanie – warto jednak uczyć się na błędach innych, dlatego zachęcam do kontaktu, jeżeli rozważacie zbudowanie swojego pierwszego Design Systemu w organizacji.

Chętnie podzielę się swoimi spostrzeżeniami – napisz do mnie: bartek@movade.com

 

Design system to spora inwestycja, która się zwróci

Jest to obecnie najlepsze rozwiązanie, ponieważ każda z osób pracujących nad produktem potrzebuje innego rodzaju informacji i zasobów (przykładowy kod użycia, źródło pliku wizualnego czy wytyczne kiedy coś się stosuje). Na różnych etapach rozwijać nasz produkt będą różne osoby (deweloper, projektant, analityk, marketingowiec) – nie mniej każda z nich będzie szukać odpowiedzi dot. sposobu implementacji zasad projektowych.

Zwrot kosztów z uwagi na model re-używalności komponentów

Wdrożenie Designu Systemu zajmuje zazwyczaj od 3 do 9 miesięcy prac. Tak jak wspomniałem jest to spora inwestycja, jednak szybko organizacje zaczynają dostrzegać szereg oszczędności wynikających z jego wdrożenia:

  • szybszy onboarding nowych projektantów,
  • oszczędność płynąca z re-używalności komponentów,
  • lepsza jakość produktu zwiększająca konwersję,
  • mniejsze koszty developmentu (nie duplikuje się funkcjonalności),
  • możliwość skupienia się na kluczowych funkcjonalnościach produktu (ponieważ, te podstawowe komponenty są już zrobione i wysokiej jakości).

Oczędności wynikają wprost z filozofii budowy nowych rozwiązań w oparciu o komponenty i ich szczególną budowę. Dzieję się tak przez atomiczność systemu. Każdy wysoko szczegółowy komponent złożony jest z mniejszych atomów, tak jak klocki lego, które tworzą także inne komponenty. W myśl tej zasady reużywamy zastosowane wcześniej atomy.

Gdy myślę o atomach, widzę mnóstwo małych cząsteczek, z których jestem wstanie złożyć coś większego. Buduje coś z gotowych rozwiązań, które są wysokiej jakości i wspierają te typowe scenariusze użycia. W takim jednak podejściu trzeba podkreślić, że musimy zadbać o to, by każdy wiedział jak używać tych małych cząsteczek do zbudowania czegoś większego. Jeszcze raz warto podkreślić – Design System, jako tylko i wyłącznie zestaw komponentów nas zawiedzie. 

Jeżeli chcesz kontrolować kierunek zmian projektowych w organizacji, zadbać o lepszy przepływ wiedzy o projektowaniu w zespołach, stworzyć sprawne procesy definiujące sposób kontrybucji i wprowadzania optymalizacji UX/UI w produkcie to Design System jest kierunkiem dla Twojej firmy, a ja chętnie podpowiem jak wdrożyć taki Design System dobrze i sprawnie.

Przykłady z życia

Przykładów Design Systemów projektowych jest mnóstwo. Jednak najbardziej znanymi według mnie są systemy od Atlassian, IBM i oczywiście Google Material Design. Poniżej postaram się wam przybliżyć narzędzia tych wielkich korporacji.

ADG by Atlassian

Pierwsza wersja tego systemu powstała w 2012 roku. Dziś po siedmiu latach zespół odpowiedzialny za rozwój i aktualizację tej biblioteki to aż 18 specjalistów.

IBM Design System

Nowa wersja która wyszła pod koniec maja tego roku. Bardzo dobry przewodnik po filozofii i zasad projektowania. Znajdziemy tutaj nie tylko komponenty czy kod ale również wytyczne dotyczące motion design.

Google Material Design 

Zespół odpowiedzialny za rozwój Androida, postanowił uspójnić wszystkie swoje produkty. Stawiając na wysoką jakość interakcji UI oraz trendy projektowe. Warto jednak podkreślić, że ten Design System wywodzi się z mobilnych rozwiązań, których pewne warianty rozwiązań nie będą w pełni użyteczne w zastosowaniu webowym.
Jest to bardzo częsty błąd w implementacji rozwiązań z Material Design.

Jak my podchodzimy do tematu Design System?

Jako studio projektowe, każdy z nas ma różne doświadczenia z tworzeniem Design Systemu. Eksperymentowaliśmy na różnych etapach procesu projektowego. Tworząc całkowicie nowe platformy, czy też równolegle tworząc bibliotekę i wytyczne. Również definiowaliśmy komponenty dopiero po ich wypracowaniu we wcześniejszych etapach procesu. 

Jak dokładnie wygląda dzisiaj roadmapa wdrażania pierwszego Design Systemu dla organizacji to temat na osobny artykuł – to co jednak sprawdza się najlepiej to po prostu zacząć. Zacząc od czegoś małego (atomów), wręcz podstawowego, ale już dostępnego „live”.

Podstawowa lista atomów w Design Systemie w wersji 0.1 to:

  • określenie zasad pracy na Gridzie (wytyczne dla projektantów i developerów),
  • przykładowe szablony z Gridem (aplikacja desktop, mobile, strona www, landing page – tak, by każdy wiedział jak wygląda podstawowa siatka danego rozwiązania),
  • zasady określania wielkości i odległości (zmienne, marginesy, odstępy, …),
  • przyciski i linki,
  • kolory i gradienty,
  • typografia,
  • nawigacja, jej układy i zachowanie.

Jeden z przykładowych zestawów oprogramowania, jakie używamy, przy naszych wdrożeniach:

Kiedy w organizacji pojawi się dedykowane miejsce (SSOT), gdzie zbierane są wszystkie zasady projektowe to bardzo szybko pojawią się pierwsi ewangeliści tej zmiany, zarówno po stronie projektantów jak i developerów.

Bardzo ważnym aspektem podczas tworzenia Design Systemu jest to, że nasze narzędzie będzie żyło i rozwijało się wraz z nowymi potrzebami. Produkt będzie ewoluował naturalnie, rósł zgodnie z kolejnymi osobami dokładającymi swoją cegiełkę do jego rozwoju. By to miało miejsce, organizacja musi wyznaczyć głównego opiekuna, odpowiedzialnego za rozwój i sposób kolaboracji z wytworzonym rozwiązaniem.

Mam nadzieję, że choć trochę pomogłem zrozumieć jak ważnym kierunkiem rozwoju jest wprowadzenie Design Systemu. Temat ten jest bardzo obszerny, jednak warto się nim zainteresować by nie zostać w tyle!

Jeżeli masz jakieś pytania to zachęcam do kontaktu.
Bartek!

Pokaż komentarze (0)

Komentarze

Powiązane

Biznes & Design

Walidacja cyfrowego produktu w 30 dni. 5 rzeczy, dzięki którym zrobimy to dobrze

Pamiętam czasy, zamierzchłe czasy, kiedy wszyscy* robili startupy. Innowacyjne pomysły “uber dla”, szukanie inwestora, “brak konkurencji”, MVP, Lean Canvas, generalny entuzjazm i...

Dodane by Michał Michańczyk
Biznes & Design

Sukces inicjalnego miesiąca zmitygował ryzyko niepowodzenia – wywiad z Marcinem Zaniewiczem, Asseco Poland

8 miesięcy ciężkiej pracy, ponad 600 zaprojektowanych ekranów i setki godzin spotkań. To liczby, które wykręciliśmy, jako Movade razem z Asseco Poland przy projektowaniu ePromak...

Dodane by Michał Michańczyk