Design system to zbiór zasad, procesów i narzędzi, które służą do projektowania i rozwijania produktów cyfrowych.
Jeśli wdrażasz i rozwijasz sklepy internetowe lub posiadasz sklep i samodzielnie wprowadzasz w nim zmiany, to posiadasz design system. Twój zespół projektantów i programistów używa jakichś narzędzi i pracuje według jakichś zasad, nawet jeśli nie są ściśle zdefiniowane i usystematyzowane. Np. wykorzystuje istniejące kolory, kroje pism i elementów do tworzenia kolejnych modułów lub podstron w sklepie. Prawdopodobnie taki design system jest niespójny, chaotyczny i bardziej utrudnia niż ułatwia prace projektowe. Uświadomienie sobie posiadania design systemu jest dobrym punktem wyjścia do zastanowienia się nad poprawą i optymalizacją firmowego design systemu.
Spis treści:
- Dlaczego warto zoptymalizować design system?
- Jak zbudowany jest design system?
- Jak udoskonalić swój design system?
- Jakie korzyści niesie design system dla sprzedawców w eCommerce?
- Czy warto zainwestować w design system?
Dlaczego warto zoptymalizować design system?
Modelowy design system gwarantuje spójność produktu i pozwala oszczędzać nakłady pracy. Dzięki niemu praca nad produktem jest prostsza i bardziej poukładana, a produkt sam w sobie jest spójniejszy i bardziej dopracowany.
Oprócz tego dobrze zaprojektowany design system ułatwia komunikację między projektantami i programistami (oraz innymi działami firmy) i umożliwia szybsze wdrożenie nowej osoby do projektu.
Jak zbudowany jest design system?
Jeśli chcemy wdrożyć użyteczny design system, musimy najpierw przyjrzeć się jego budowie. W Internecie znajduje się mnóstwo informacji o różnych design systemach np. Material Design, Carbon czy Ant. Możemy zwrócić uwagę, że wymienione systemy znacznie się od siebie różnią. Nie ma tutaj bowiem jednego słusznego rozwiązania. Dobrze zaprojektowany design system rozwiązuje problemy podczas pracy nad produktem i odpowiada na potrzeby projektantów i programistów.
Poniżej przedstawię uniwersalny wzorzec, na który składają się trzy poziomy:
- Zasady projektowania (design principles) - ogólne, abstrakcyjnie sformułowane reguły i zasady
- Język wizualny (style guide) - kolorystyka, typografia, ikonografia, odległości, cienie, ale take ton i głos marki, preferowany styl fotografii i ilustracji
- Biblioteka wzorców (pattern library) - elementy i komponenty interfejsu graficznego m.in. przyciski, pola tekstowe, karty.
Biblioteka wzorców (pattern library) zazwyczaj dzieli się na hierarchiczne poziomy. Najpopularniejszym wzorcem jest Atomic Design opracowany przez Brada Frosta, dzięki któremu możemy stworzyć uporządkowany design system, w którym każdy poziom jest bardziej rozbudowany niż poprzedni. Atomic Design wyróżnia pięć poziomów:
- atomy - najbardziej podstawowe elementy np. przycisk, pole tekstowe
- molekuły - bardziej złożone elementy, które składają się z atomów np. połączenie pola tekstowego z labelem i tekstem pomocniczym
- organizmy - połączenia molekułów, które tworzą pewną, powtarzającą się w kolejnych częściach interfejsów sekcję np. formularz
- szablony - struktury złożone z organizmów, które tworzą całe podstrony np. formularz zakładania konta
- strony - szablony wypełnione są docelowymi zdjęciami i tekstami
Pamiętajmy, że zarówno układ poziomów, jak i nazewnictwo używane w Atomic Design, które wprost odwołuje się do fizyki, ma nam jedynie pomóc zwizualizować i zrozumieć zależności.
Jak udoskonalić swój design system?
Na początek należy zacząć od audytu design systemu. W tym celu można samodzielnie przeanalizować design system i porównać go do wiodących systemów na rynku. W Internecie znajduje się mnóstwo informacji oraz poradników dotyczących tego jak projektować i wdrażać design systemy. Można więc skorzystać z dostępnej już wiedzy i spróbować we własnym zespole poprawić lub przebudować design system. Oczywiście w celu poprawy lub przygotowania nowego design systemu można tą czynność zlecić także zewnętrznej agencji, która specjalizuje się w usługach projektowania interfejsów serwisów internetowych.
Jakie korzyści niesie design system dla sprzedawców w eCommerce?
Celem wdrożenia nowego design systemu lub też poprawy już istniejącego muszą być zawsze korzyści biznesowe po stronie zamawiającego. W przypadku serwisów eCommerce głównym zadaniem, jakie pełni design system, czy też design jako taki jest maksymalizowanie sprzedaży w sklepie internetowym.
Głównym obszarem korzyści jakie niesie za sobą dobrze zaprojektowany i wdrożony design system jest optymalizacja współczynnika konwersji (CRO) w sklepie internetowym. Magiczna konwersja, której maksymalizacja jest marzeniem nie jednego managera eCommerce jest głównym produktem odpowiedniego design systemu. Zaprojektowany zgodnie z wymaganiami użytkowników i ciągle udoskonalany design system przyczynia się znacząco do zwiększenia konwersji w sklepie internetowym. Odpowiedni układ serwisu, spójność komunikacji wizualnej, czytelność i jasność przekazu, a także logika systemu to elementy, które mają istotny wpływ na konwersję użytkowników. Nie bez przyczyny działania dotyczące optymalizacji współczynnika konwersji w serwisach eCommerce dotykają głównie obszaru designu. Takie działania, jak testy A/B, analiza map ciepła, czy też nagrania użytkowników poruszających się po serwisie stanowią główny element optymalizacji nie tylko współczynnika konwersji lecz także samego design systemu.
Można więc powiedzieć, że optymalizacja design systemu niesie za sobą optymalizację współczynnika konwersji i stanowi jedną z kluczowych korzyści posiadania dobrze zaprojektowanego oraz wdrożonego design systemu.
Czy warto zainwestować w design system?
Zazwyczaj w przypadku inwestycji w eCommerce, kluczowym kryterium decyzji jest współczynnik ROI (Return on Investment). Nie inaczej jest w przypadku poprawy bądź zmiany design system. Jako manager e-commerce musisz przede wszystkim poddać analizie opłacalność inwestycji w design system zwłaszcza z perspektywy potencjalnych wzrostów po stronie konwersji użytkownika.
Z doświadczenia wiem, że zmiany designu mają dość duże przełożenie na współczynnik konwersji, który średnio wzrasta nawet o ponad 30 - 50%. W przypadku mniejszych sklepów internetowych taki wzrost po stronie konwersji może okazać się niewystarczający w kontekście zwrotu z inwestycji. W przypadku sklepów, które generują kilkaset tysięcy złotych miesięcznych obrotów, wzrost konwersji o 30% może oznaczać dodatkowe kilkadziesiąt / kilkaset tysięcy złotych przychodu miesięcznie.
Najważniejszym zadaniem jest tak naprawdę analiza i podliczenie oczekiwanego ROI w przypadku inwestycji w design system sklepu internetowego. Warto w tym kontekście zastanowić się nad skorzystaniem z usług specjalizującej się w tym zakresie agencji, która z pewnością pomoże oszacować potencjalne zyski z inwestycji.
