Ile kosztuje design system? Policzyliśmy i oto cena

Kiedyś pisaliśmy, że oszacowanie kosztu design systemu jest niemożliwe. Choć nadal podtrzymujemy to stwierdzenie, wierzymy, że rozumienie kosztów budowy i utrzymania design systemu jest kluczowe. W tym artykule pokażemy, jakie koszty należy uwzględnić przy planowaniu design systemu – i jakich zysków efektywnościowych można się spodziewać.

Zanim przejdziemy dalej, chcemy podkreślić, że traktujemy design system jako inwestycję. Zakładamy, że organizacja decyduje się na niego, by zwiększyć efektywność i jakość pracy, ułatwić wdrażanie nowych członków zespołu oraz przyspieszyć wprowadzanie nowych rozwiązań i funkcji na rynek.

Aby dowiedzieć się, jak mierzyć te zyski efektywnościowe, zajrzyj do naszego niedawnego tekstu, który pomoże Ci zdefiniować KPI i doprecyzować ambicje oraz cele. Możesz też przejrzeć ten artykuł zawierający 10 pytań wartych zadania na pierwszym spotkaniu zespołów produktowych i projektowych.

Zakładamy, że argumentacja za wdrożeniem design systemu opiera się na określeniu o ile mniej pracy możesz dostarczyć za ten sam koszt, o ile więcej pracy możesz dostarczyć za ten sam koszt, o ile możesz poprawić jakość dostarczanej pracy i jaka jest wartość tej poprawy jakości. Dodatkowo zakładamy, że design system dąży do obniżenia progu wejścia dla nowych członków zespołu oraz przyspieszenia ich adaptacji do poziomu jakości i tempa pracy długoletnich członków.

Zgadzasz się? Jeśli tak, przyjrzyjmy się kosztom związanym z taką inwestycją.

I. Koszty inwestycji początkowej

1) Discovery: zrozumienie zakresu i identyfikacja kluczowych punktów

Faza discovery przenosi rozmowę o design systemie z wąskiej grupy zarządczej na forum całej organizacji. Warsztaty z interesariuszami pomagają promować pomysł projektu i odkrywać ukryte opinie, obawy, ryzyka i nadzieje związane z planowaną realizacją. Chodzi o znalezienie kluczowych punktów – co działa, a co nie w danej organizacji.

Z naszego doświadczenia wynika, że etap discovery zazwyczaj następuje po innych inicjatywach biznesowych, takich jak przeprojektowanie kluczowej aplikacji back-office. Zmiany te stanowią punkt wyjścia dla design systemu i muszą być rozumiane, opisane oraz zintegrowane z całością prac nad systemem. Ten etap generuje koszty niezbędne do uzyskania realistycznego obrazu obecnej sytuacji.

Jak wygląda faza discovery?

Tutaj znajdziesz szczegółowy opis naszych standardów w fazie discovery. Poniżej krótki przegląd, abyś wiedział, czego się spodziewać.

• Proces zaczyna się od zrozumienia celów biznesowych klienta, składu zespołu projektowego, interesariuszy, ryzyk, ograniczeń i preferowanego harmonogramu. Na tym etapie poznajemy strukturę organizacji i nawiązujemy relacje z interesariuszami, by stworzyć odpowiednie warunki dla operacji projektowych i deweloperskich.

• Następnie analizujemy istniejące materiały i systemy, by zrozumieć ich aktualny stan – „stan obecny". Obejmuje to sposób pracy zespołów projektowych i deweloperskich, używane przez nich narzędzia, obecne procesy, zasady, dokumenty, pliki i biblioteki.

• Ważna jest też analiza poprzednich prób stworzenia design systemu (jeśli takie były). Pomaga nam to zrozumieć, co zostało zrobione, co nie zadziałało, dlaczego i jakich wniosków organizacja wyciągnęła.

• Kolejna faza obejmuje badania użytkowników, w tym warsztaty, wywiady z zespołami projektowymi i deweloperskimi oraz rozmowy z innymi kluczowymi interesariuszami. Wnioski są następnie podsumowywane w dokumentacji definiującej grupy docelowe, problemy, motywacje, obawy użytkowników i proponowane rozwiązania.

• Następnym krokiem jest inwentaryzacja projektu. Polega na skatalogowaniu wszystkich ukończonych, trwających i planowanych produktów i projektów cyfrowych. Bierzemy je pod uwagę przy planowaniu design systemu, szukając różnic i podobieństw dla projektu referencyjnego, na którym opiera się pierwsza wersja systemu. Dla istniejących projektów tworzymy katalog komponentów. Dla projektów trwających lub planowanych, proces tworzenia design systemu jest integrowany z bieżącymi pracami, a zasady i narzędzia systemu są rozwijane równolegle.

• Naszym celem jest też identyfikacja kluczowych punktów, takich jak obszary wymagające poprawy UX – szczególnie w zakresie dostępności – by móc efektywnie ponownie wykorzystywać pojedyncze rozwiązania. Czasem podobne problemy UX są rozwiązywane w różny sposób w ramach systemu, co prowadzi do niespójności. Design system rozwiązuje to, wprowadzając standard rozwiązywania konkretnych problemów, zapewniając unifikację wszystkich podobnych przypadków.

Te działania dają kompleksowe rozumienie stanu obecnego i stanowią podstawę do kolejnego etapu: Ideacji.

2) Ideacja: formułowanie rekomendacji i strategii

Etap Ideacji prezentuje wnioski z fazy Discovery jako konkretne rekomendacje. W zależności od specyfiki projektu mogą one obejmować:

• Rekomendacje dotyczące funkcjonalnego zakresu pilota nowego systemu, czyli które części design systemu dostarczymy najpierw i przetestujemy ze wszystkimi interesariuszami i implementacjami?

• Mapę drogową etapu projektowego, uwzględniającą priorytety biznesowe i potrzeby zespołu deweloperskiego.

• Rekomendacje technologiczne.
• Skład zespołu design systemu.
• Rekomendacje UX/UI dla analizowanych aplikacji.

Kulminacją tego etapu jest stworzenie „widoku z lotu ptaka" obejmującego wszystkie zebrane spostrzeżenia. Ten kompleksowy przegląd pozwala agencji i klientowi wypracować przybliżony koszt design systemu. Choć precyzyjna wycena może wydawać się trudna, to wstępne szacowanie jest niezbędne do planowania i alokacji zasobów.

3) Scenariusz wdrożenia design systemu

Na podstawie wiedzy zebranej podczas fazy Discovery i rekomendacji sformułowanych w etapie Ideacji możemy przygotować kompleksowy scenariusz wdrożenia design systemu. Scenariusz ten jest niezbędny, ponieważ wdrożenie design systemu można realizować na wiele sposobów, a wybór najlepszej metody dla organizacji jest kluczowy.

Może to być wdrożenie etapowe, które pozwala na stopniowe przyjęcie systemu, minimalizując zakłócenia i umożliwiając dostosowania po drodze, lub wdrożenie kompleksowe, które pozwala organizacjom na szybsze przyjęcie design systemu. Scenariusz wdrożenia jest też kluczowy przy aktualizacji istniejącego systemu.

II. Koszty budowy

Budowa design systemu obejmuje kilka ról i zadań, z których każde wpływa na całkowity koszt.

Poniżej przedstawiono typowe role w procesie budowy wraz z szacowanym średnim czasem wymaganym dla każdego komponentu. Rzeczywisty koszt oczywiście zależy od złożoności design systemu, specyficznych wymagań organizacji i charakterystyki komponentów. Należy pamiętać, że komponenty różnią się złożonością, a niektóre z nich zawierają podkomponenty.

Dla tego przykładu rozważmy budowę komponentu przycisku, który jest fundamentalny dla design systemu i dobrze ilustruje zaangażowany nakład pracy.

Podział ról i średnia liczba godzin

Developer: 24 godziny

Kodowanie komponentu przycisku i zapewnienie jego działania na różnych przeglądarkach i urządzeniach.

Designer: 24 godziny

Skalowalność przycisku, architektura spójna z całym systemem, aspekty wizualne przycisku, w tym różne stany (normalny, hover, aktywny, wyłączony) i warianty (podstawowy, drugorzędny itd.).

Design Technologist: 4 godziny

Zapewnienie wykonalności projektu i jego prawidłowej implementacji w kodzie.

UX Designer/Tester – testowanie: 16 godzin

Zbieranie opinii na temat użyteczności i skuteczności komponentu przycisku. Zapewnienie, że przycisk jest intuicyjny i spełnia potrzeby użytkowników.

UX Writing / Copywriting: 4 godziny

Pisanie jasnych i zwięzłych tekstów dla przycisku, takich jak etykiety, podpowiedzi i pomoc przy dokumentacji. Ten czas może być krótszy, ponieważ sposób pisania treści – ton i głos marki – powinien wynikać z wcześniej przygotowanej dokumentacji.

III. Koszty operacyjne i utrzymania

Budowa design systemu to proces ciągły, przez co przypomina bardziej produkt niż projekt. Poniżej przedstawiono koszty operacyjne i utrzymania niezbędne do utrzymania design systemu w aktualności i sprawnym działaniu (nadal ograniczamy szacunki do jednego komponentu).

Dokumentacja: 16 godzin

Tworzenie kompleksowej dokumentacji dla komponentu przycisku, w tym wytycznych dotyczących użycia, fragmentów kodu i najlepszych praktyk.

Utrzymanie

Prace utrzymaniowe są często najdroższe, ponieważ narzędzia stale ewoluują i zmieniają swoje funkcje. Ze względu na znaczne koszty kluczowe jest mądre podejście do utrzymania i unikanie pośpiesznych aktualizacji design systemu za wszelką cenę.

Powyższe szacunki pokazują czas i koszt budowy pojedynczego komponentu design systemu.

Aby uzyskać dokładniejsze szacunki, możemy założyć, że jeden komponent wymaga około 100–120 godzin pracy, a pierwsza wersja design systemu ma 40 komponentów. Mnożąc to przez średnią stawkę 60 USD/godzinę, otrzymujemy 4800 roboczogodzin, co oznacza około 288 000 USD za podstawową wersję design systemu.

Możemy też liczyć koszt w FTE (pełnych etatach) – 4800 roboczogodzin to 3 osoby pracujące pełen etat przez 10 miesięcy.

IV. Szkolenia i onboarding

Szkolenia i onboarding ułatwiają płynne przejście i pozwalają członkom zespołu efektywnie uczestniczyć w rozwoju design systemu.

Szkolenie obecnych pracowników: 8 godzin

Organizacja warsztatów i sesji szkoleniowych obejmujących podstawy design systemu, w tym jego komponenty, wytyczne i najlepsze praktyki.

Onboarding nowych członków zespołu: 8 godzin

Dostarczanie zasobów, wskazówek i praktycznego wsparcia w celu skrócenia krzywej uczenia się.

Design system: szacunkowa redukcja kosztów

Skoro traktujemy design system jako inwestycję, warto zobaczyć, jakie optymalizacje kosztów możemy zaobserwować po wdrożeniu. Ogólnie możemy mówić o zyskach efektywnościowych dzięki:

• Zwiększonej spójności wszystkich elementów projektu
• Lepszej współpracy między projektantami, deweloperami i innymi interesariuszami
• Wzmocnionej tożsamości marki
• Poprawionej użyteczności końcowego produktu
• Skalowaniu wysiłków projektowych
• Zapewnieniu zgodności z wymogami dostępności
• Uproszczeniu onboardingu nowych członków zespołu

Długoterminowe korzyści: przyszłe oszczędności

Inwestycja w design system przynosi długoterminowe korzyści i przyszłe oszczędności. Organizacje mogą zaoszczędzić znaczny czas i zasoby, redukując redundancję, minimalizując błędy i usprawniając procesy. Początkowa inwestycja zwraca się w miarę jak zespoły stają się bardziej efektywne i skuteczne. Możliwość ponownego wykorzystania komponentów projektowych jeszcze bardziej amplifikuje te oszczędności.

Liczby i przykłady z życia wzięte

Według szacunków Zeroheight, design systemy mogą znacząco poprawić efektywność, prowadząc do redukcji czasu poświęcanego na pracę projektową o 30–50%.

Na przykład eksperyment Figmy wykazał wzrost efektywności o 34%, co odpowiada dodaniu 3,5 projektanta do zespołu 7 osób. Ta poprawa zwiększyła tygodniowy wymiar godzin projektowych z 140 do 212, co daje łącznie 9 964 godzin rocznie. Figma szacuje również, że wdrożenie design systemu może zredukować koszty projektowania do 8 222 godzin rocznie, oszczędzając 27% czasu wcześniej poświęcanego na zadania projektowe.

Ponadto Telus odnotował oszczędność 6 480 godzin rocznie dzięki skróceniu czasu pobierania standardowych symboli z 10 minut do zaledwie 30 sekund. Ta oszczędność czasu pozytywnie wpłynęła na 40 000 pracowników i 36 000 stron internetowych. W przykładzie przytoczonym przez Robina Cannona dotyczącym firmy ACME Corp, potencjalne zyski efektywnościowe zostały opisane w następujący sposób:

• Średnie wynagrodzenie projektantów i deweloperów front-end wynosi 75 000 USD/rok.
• „Koszt całkowity" pracownika w tej firmie wynosi 1,5 raza jego wynagrodzenie. Koszt całkowity to koszt zatrudnienia pracownika ponoszo przez firmę, obejmujący wynagrodzenie, benefity, sprzęt, ubezpieczenie, koszty energii itp.
• ACME Corp zatrudnia 1 000 projektantów i deweloperów front-end.
• Szacuje się, że przyjęcie design systemu przyniesie poprawę efektywności zespołu produktowego o 30–50%.
• Szacuje się, że 20% firmy przyjmie design system w pierwszym roku.

Hipoteza ta sugeruje, że inwestycja w design system przyniesie 11,25 mln USD zysków efektywnościowych w pierwszym roku. A co z kosztami? Cannon założył 10 osób pracujących pełen etat nad design systemem, z średnim wynagrodzeniem 75 000 USD/rok. Koszt design systemu to proste obliczenie: 10 osób × 75 000 USD wynagrodzenia × 2 (koszt całkowity) = 1 500 000 USD. Hipoteza sugeruje zatem zwrot z inwestycji w stosunku 7,5 do 1. Jednak zyski efektywnościowe reprezentują koszty alternatywne, a nie dodatkowy dochód, umożliwiając zespołom realizację zaległych zadań, redystrybucję zasobów lub potencjalne zmniejszenie liczby pracowników.

Obliczanie ROI

W 2022 roku Smashing Magazine zaprezentował wzór do obliczania efektu ROI design systemów. Wzór ten porównuje koszty związane z tworzeniem i utrzymaniem produktów bez design systemu z korzyściami i zyskami wynikającymi z wdrożenia systemu.

X = procent czasu zainwestowanego w budowę design systemu.

Y = procent czasu poświęcanego na bieżące utrzymanie po fazie startowej. Faza startowa odnosi się do początkowego wysiłku wymaganego do doprowadzenia projektu do punktu, w którym może płynnie przejść w tryb utrzymania.

Z = czas zaoszczędzony dzięki design systemowi jako procent – zysków produktywności lub efektywności.

Po obliczeniu składników „kosztu" i „zysku" można podstawić je do wzoru ROI, aby wyliczyć zwrot z inwestycji.

Istniejące badania dotyczące produktywności design systemów pokazują, że zespoły projektowe zwiększyły efektywność projektów średnio o 38%, podczas gdy zespoły deweloperskie odnotowały średni wzrost o 31%.

Chcesz dowiedzieć się więcej?

Nie traktujemy powyższych liczb jako wyrytych w kamieniu – precyzyjne szacowanie kosztów design systemu nadal pozostaje wyzwaniem i zależy od wielu czynników. Jeśli chcesz pogłębić rozumienie tego, co jest potrzebne do zbudowania design systemu, zajrzyj do studium przypadku, które przygotowaliśmy po współpracy z Wirtualną Polską – design system stworzony na potrzeby wewnętrzne i aplikacje back-office.

Prowadzimy też ankietę wśród firm na temat ich design systemów, z planami kompleksowej publikacji w tym roku. Ankieta jest po polsku i dotyczy design systemów budowanych w Polsce – sprawdź, czy pasujesz!