W ci\u0105gu ostatnich trzech lat pracowa\u0142em z ponad 20 sklepami internetowymi, kt\u00f3re przesz\u0142y na design systemy. W ka\u017cdym przypadku s\u0142ysza\u0142em te same argumenty: „przyspieszymy development”, „zapewnimy sp\u00f3jno\u015b\u0107”, „zmniejszymy koszty utrzymania”. Nikt nie m\u00f3wi\u0142 o tym, co trac\u0105. A trac\u0105 w\u0142a\u015bnie to, co w e-commerce najcenniejsze: wyr\u00f3\u017cnienie na tle konkurencji i emocjonalne po\u0142\u0105czenie z klientem.<\/p>\n
Design systemy powsta\u0142y jako odpowied\u017a na problemy du\u017cych organizacji. Google Material Design, Apple Human Interface Guidelines, IBM Carbon \u2013 wszystkie te systemy mia\u0142y sens w kontek\u015bcie korporacji, gdzie setki designer\u00f3w i developer\u00f3w musz\u0105 pracowa\u0107 nad dziesi\u0105tkami produkt\u00f3w. Problem zaczyna si\u0119, gdy t\u0119 sam\u0105 logik\u0119 pr\u00f3bujemy zastosowa\u0107 w e-commerce, gdzie ka\u017cdy detal interfejsu powinien opowiada\u0107 histori\u0119 marki.<\/p>\n
W 2023 roku analizowa\u0142em 50 polskich sklep\u00f3w z bran\u017cy fashion. 38 z nich u\u017cywa\u0142o praktycznie identycznych komponent\u00f3w: ten sam uk\u0142ad kart produkt\u00f3w, ta sama nawigacja, te same przyciski CTA. R\u00f3\u017cni\u0142y si\u0119 tylko kolory i logo. Klient przeskakuj\u0105cy mi\u0119dzy sklepami nie czu\u0142, \u017ce wchodzi do r\u00f3\u017cnych miejsc \u2013 czu\u0142, \u017ce przegl\u0105da r\u00f3\u017cne katalogi w tym samym centrum handlowym.<\/p>\n
Klientka prowadzi\u0142a sklep z unikaln\u0105 bi\u017cuteri\u0105 r\u0119cznie robion\u0105. Ka\u017cdy produkt mia\u0142 swoj\u0105 histori\u0119, ka\u017cdy materia\u0142 by\u0142 starannie dobrany. Po wdro\u017ceniu „nowoczesnego design systemu” opartego na popularnej bibliotece komponent\u00f3w, sklep straci\u0142 swoj\u0105 organiczno\u015b\u0107. Galeria produkt\u00f3w wygl\u0105da\u0142a jak w sieci\u00f3wce, a nie jak pracownia artystki. Konwersja spad\u0142a o 23% w ci\u0105gu 2 miesi\u0119cy. Klienci w badaniach m\u00f3wili: „straci\u0142 urok”, „wygl\u0105da jak ka\u017cdy inny sklep”.<\/p>\n
Firma budowa\u0142a przez lata spo\u0142eczno\u015b\u0107 wok\u00f3\u0142 warto\u015bci: przygoda, autentyczno\u015b\u0107, blisko\u015b\u0107 natury. Ich strona pe\u0142na by\u0142a autentycznych zdj\u0119\u0107 z wypraw, nieregularnych uk\u0142ad\u00f3w, element\u00f3w inspirowanych mapami topograficznymi. Po „profesjonalizacji” przez agencj\u0119, kt\u00f3ra wdro\u017cy\u0142a standaryzowany design system, strona sta\u0142a si\u0119 sterylna. Usuni\u0119to wszystkie niestandardowe elementy, galerie zdj\u0119\u0107 ujednolicono, nawigacj\u0119 uproszczono do schematu znanego z ka\u017cdego sklepu. Zaanga\u017cowanie spo\u0142eczno\u015bci spad\u0142o o 40%, a wsp\u00f3\u0142czynnik odrzuce\u0144 wzr\u00f3s\u0142 o 35%.<\/p>\n
Specjalistyczny sklep kierowany do fotograf\u00f3w i filmowc\u00f3w mia\u0142 skomplikowany system filtrowania produkt\u00f3w \u2013 u\u017cytkownicy mogli filtrowa\u0107 wed\u0142ug parametr\u00f3w technicznych niedost\u0119pnych w standardowych rozwi\u0105zaniach. Po wdro\u017ceniu „zunifikowanego design systemu” filtr uproszczono do podstawowych kategorii. Eksperci przestali korzysta\u0107 ze sklepu, bo nie mogli znale\u017a\u0107 potrzebnych produkt\u00f3w. Sprzeda\u017c spad\u0142a o 18% w segmencie profesjonalnym.<\/p>\n
W wi\u0119kszo\u015bci projekt\u00f3w, kt\u00f3re widzia\u0142em, decyzje o wdro\u017ceniu design system\u00f3w podejmuj\u0105 zespo\u0142y developerskie. Ich priorytetem jest efektywno\u015b\u0107 pracy, nie unikalno\u015b\u0107 do\u015bwiadczenia klienta. Kiedy developer ma do wyboru: napisa\u0107 customowy komponent (2 dni pracy) lub u\u017cy\u0107 gotowego z biblioteki (2 godziny), wyb\u00f3r jest oczywisty. Problem w tym, \u017ce suma tych wybor\u00f3w tworzy generyczny interfejs.<\/p>\n
Sp\u00f3jno\u015b\u0107 w designie oznacza, \u017ce wszystkie elementy wsp\u00f3\u0142graj\u0105 ze sob\u0105 i tworz\u0105 harmonijn\u0105 ca\u0142o\u015b\u0107. Standaryzacja oznacza, \u017ce wszystkie elementy s\u0105 takie same. W e-commerce potrzebujemy sp\u00f3jno\u015bci, nie standaryzacji. Klient powinien czu\u0107, \u017ce ka\u017cda cz\u0119\u015b\u0107 sklepu jest cz\u0119\u015bci\u0105 tej samej historii marki, ale nie powinien mie\u0107 wra\u017cenia, \u017ce widzia\u0142 ju\u017c t\u0119 histori\u0119 w 10 innych miejscach.<\/p>\n
Wiele firm wdra\u017ca design systemy, bo „wszyscy to robi\u0105”. W zesz\u0142ym roku uczestniczy\u0142em w spotkaniu, gdzie CTO m\u00f3wi\u0142: „Musimy mie\u0107 design system, bo nasz konkurent go ma”. Nikt nie pyta\u0142: „Czy ten design system pomo\u017ce nam lepiej sprzedawa\u0107? Czy wzmocni nasz\u0105 mark\u0119?”<\/p>\n
Zamiast traktowa\u0107 design system jako zbi\u00f3r sztywnych regu\u0142, potraktujmy go jako j\u0119zyk, w kt\u00f3rym mo\u017cemy tworzy\u0107 r\u00f3\u017cne opowie\u015bci. Podstawowe elementy (kolory, typografia, spacing) mog\u0105 by\u0107 ustandaryzowane, ale kluczowe komponenty (galerie produkt\u00f3w, systemy filtrowania, \u015bcie\u017cki zakupowe) powinny odzwierciedla\u0107 unikalno\u015b\u0107 marki.<\/p>\n
W jednym z projekt\u00f3w dla JurskiTech.pl stworzyli\u015bmy tzw. „elastic design system”. Mia\u0142 on:<\/p>\n
Przed wdro\u017ceniem jakiegokolwiek elementu design systemu, testuj go w kontek\u015bcie konkretnych cel\u00f3w biznesowych. Zamiast pyta\u0107: „Czy ten komponent jest zgodny z systemem?”, pytaj: „Czy ten komponent zwi\u0119ksza konwersj\u0119? Czy poprawia do\u015bwiadczenie naszych klient\u00f3w?”<\/p>\n
W przypadku sklepu z artyku\u0142ami dla zwierz\u0105t testowali\u015bmy dwie wersje karty produktu: jedn\u0105 z design systemu i jedn\u0105 customow\u0105. Customowa wersja, inspirowana opakowaniami karmy, mia\u0142a o 27% wy\u017csz\u0105 konwersj\u0119.<\/p>\n
Wyznacz 20-30% interfejsu jako „stref\u0119 eksperymentaln\u0105”. To w tych miejscach mo\u017cesz testowa\u0107 niestandardowe rozwi\u0105zania, kt\u00f3re mog\u0105 sta\u0107 si\u0119 przewag\u0105 konkurencyjn\u0105. Mo\u017ce to by\u0107 unikalny system rekomendacji, interaktywny przewodnik zakupowy, czy niestandardowa galeria produkt\u00f3w.<\/p>\n
Kiedy firma rozwija si\u0119 na wielu rynkach i potrzebuje zachowa\u0107 sp\u00f3jno\u015b\u0107 mi\u0119dzy r\u00f3\u017cnymi wersjami j\u0119zykowymi, design system pomaga utrzyma\u0107 jednolity standard.<\/p>\n
Gdy nad sklepem pracuje kilkana\u015bcie os\u00f3b (designerzy, frontend developerzy, UX writerzy), design system staje si\u0119 konieczno\u015bci\u0105 komunikacyjn\u0105.<\/p>\n
Firmy zarz\u0105dzaj\u0105ce kilkoma markami pod jednym holdingiem mog\u0105 korzysta\u0107 z design systemu jako fundamentu, kt\u00f3ry adaptuj\u0105 do potrzeb ka\u017cdej marki.<\/p>\n
W ci\u0105gu ostatnich lat obserwuj\u0119 niebezpieczny trend: firmy traktuj\u0105 wdro\u017cenie design systemu jako cel sam w sobie. Mierz\u0105 sukces wdro\u017cenia liczb\u0105 komponent\u00f3w, zgodno\u015bci\u0105 z wytycznymi, pr\u0119dko\u015bci\u0105 developmentu. Zapominaj\u0105 o jedynym prawdziwym mierniku sukcesu w e-commerce: czy klient wybiera nasz\u0105 mark\u0119, a nie konkurencj\u0119.<\/p>\n
Design system powinien by\u0107 jak szkielet budynku: niewidoczny, ale konieczny. To, co widzi klient \u2013 fasada, wn\u0119trza, detale \u2013 powinno opowiada\u0107 unikaln\u0105 histori\u0119 marki. Kiedy szkielet staje si\u0119 fasad\u0105, tracimy to, co najcenniejsze: r\u00f3\u017cnic\u0119, kt\u00f3ra sprawia, \u017ce klient wybiera w\u0142a\u015bnie nas.<\/p>\n
W JurskiTech.pl pracujemy nad projektami e-commerce z podej\u015bciem: najpierw zrozumie\u0107 mark\u0119 i jej klient\u00f3w, potem dobra\u0107 narz\u0119dzia. Czasem oznacza to stworzenie custom design systemu od podstaw. Czasem \u2013 adaptacj\u0119 istniej\u0105cych rozwi\u0105za\u0144. Zawsze \u2013 priorytetyzacj\u0119 unikalno\u015bci do\u015bwiadczenia klienta nad wygod\u0105 developmentu.<\/p>\n
Pami\u0119taj: w e-commerce, gdzie konkurencja jest na wyci\u0105gni\u0119cie klikni\u0119cia, bycie „takim samym jak wszyscy” to najkr\u00f3tsza droga do bycia niewidzialnym.<\/p>\n","protected":false},"excerpt":{"rendered":"
Jak nadmierne wdra\u017canie design system\u00f3w niszczy unikalno\u015b\u0107 marek w e-commerce W ci\u0105gu ostatnich trzech lat pracowa\u0142em z ponad 20 sklepami internetowymi, kt\u00f3re przesz\u0142y na design systemy. W ka\u017cdym przypadku s\u0142ysza\u0142em te same argumenty: „przyspieszymy development”, „zapewnimy sp\u00f3jno\u015b\u0107”, „zmniejszymy koszty utrzymania”. Nikt nie m\u00f3wi\u0142 o tym, co trac\u0105. A trac\u0105 w\u0142a\u015bnie to, co w e-commerce najcenniejsze:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[10,285,205,252,376],"class_list":["post-1506","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-e-commerce","tag-brand-identity","tag-design-systems","tag-digital-strategy","tag-ui-ux-design"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1506"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1506\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}