Design system, czyli jak zachować tożsamość marki e-commerce przy szybkiej budowie aplikacji m-commerce?

Design system pozwala szybko tworzyć UI aplikacji mobilnej dopasowany do marki, zwłaszcza jeśli wykorzystujemy go razem z nowoczesnymi technologiami typu Flutter w systemie Rappid Workflow.

W rezultacie sam projekt UX/UI powstaje o ok. 53% szybciej, a budowa aplikacji m-commerce skraca się nawet o ok. 45%, w zależności od specyfiki projektu. Sprawdź, jak to możliwe.

Dane podane w artykule są oparte na wewnętrznych benchmarkach Holdapp. Rzeczywisty czas zależy od zakresu i wielkości konkretnego projektu.

Kluczowe wnioski

• Według naszych wewnętrznych benchmarków, klasyczne projektowanie UI dla aplikacji m-commerce wymaga ok. 36 dni roboczych (MD). Niektóre marki wybierają narzędzia no-code/low-code, żeby przyspieszyć ten proces. Takie designy mają jednak bardziej generyczny wygląd.
• Design system oferuje gotowe, zdefiniowane komponenty UI (przyciski, formularze, ekrany koszyka czy checkoutu), zaprojektowane z myślą o powtarzalnych ścieżkach zakupowych w e-commerce.
• To rozwiązanie pozwala na dostosowanie kluczowych elementów brandingu, w tym kolorystyki, typografii, grafik oraz układu kafelków produktów.
• W podejściu Rappid Workflow (opartym na technologii Flutter) sztuczna inteligencja dopasowuje gotowy kod programistyczny bezpośrednio do spersonalizowanego projektu w Figmie.
• Wykorzystanie bazy gotowych komponentów skraca etap projektowania interfejsu z 36 do nawet ok. 17 dni roboczych, w zależności od zakresu projektu (sam branding można wdrożyć w zaledwie 2 MD).
• Optymalizacja fazy projektowej przekłada się na znaczny spadek czasu realizacji całego projektu, od koncepcji po publikację (skrócenie z 55 do 30,5 MD, w zależności od zakresu projektu).
• Marki, które nie posiadają jeszcze rozwiniętej identyfikacji wizualnej, mogą rozpocząć proces od warsztatów, na których określa się wytyczne przed dostosowaniem design systemu.

Czym jest design system i jak działa w Rappid Workflow?

Design system to zestaw gotowych do użycia bloków, z których budujemy aplikację. Obejmują one m.in. takie elementy, jak przyciski, formularze, ekrany koszyka, checkoutu czy home. Pozwala to zachować spójny wygląd UI. W design systemie są też zawarte wytyczne, na jakich bazuje projekt, dotyczące kolorów czy fontów oraz użycia poszczególnych ekranów.

Z kolei Rappid Workflow to system budowy aplikacji we Flutterze. Różni się od typowych rozwiązań low-code tym, że bazuje na kodzie napisanym przez programistów, a przy tym wykorzystuje AI do automatyzacji procesów. Aby szybko tworzyć aplikacje mobilne w Rappid, bazujemy na design systemie.

Dzięki temu, w przeciwieństwie do kreatorów no-code czy low-code, nie otrzymujemy aplikacji o generycznym wyglądzie tylko design dostosowany do charakteru marki. Jego przygotowanie trwa też o wiele krócej niż w przypadku klasycznego developmentu aplikacji mobilnych.

Jak działa design system w Rappid Workflow?

W praktyce działa to tak, że opracowanie design systemu i stworzenie na tej podstawie klikalnego prototypu aplikacji stanowi pierwszy krok, gdy budujemy nowy produkt. Dopiero kiedy design zostanie zaakceptowany, sięgamy po AI. Sztuczna inteligencja dopasowuje napisany przez nas kod, bazując na projekcie z Figmy (narzędzie do projektowania UX/UI).

Design system składa się z różnych modułów, w których są zawarte komponenty UI. Tę bazę stworzyliśmy w oparciu o standardowe ścieżki wykorzystywane w aplikacjach m-commerce. Co ważne, można je edytować. Jeśli np. Twoja marka stosuje określone kolory w swojej identyfikacji, fonty czy ikony nasz design pozwala to wszystko ująć w projekcie.

Co dokładnie można dopasować?

• Kolory
• Fonty
• Zdjęcia i grafiki produktowe
• Układ komponentów w ramach zdefiniowanych wariantów

Ile trwa dostosowanie design systemu do danej marki e-commerce?

Według naszych benchmarków design system w Rappid Workflow potrafi zredukować czas potrzebny na przygotowanie UX/UI designu nawet o ok. 53%. Wiele zależy od tego, czy marka ma już określone elementy identyfikacji wizualnej albo przynajmniej określone preferencje.

Kluczem jest jednak to, że nie musimy budować wszystkiego od zera, co w przypadku standardowej aplikacji m-commerce zajmuje ok. 36 dni roboczych (man-day, czyli MD) samego projektowania UX/UI. Tymczasem samo dostosowanie design systemu do wytycznych identyfikacji wizualnej marki zabiera ok. 2 MD.

Potem trzeba jeszcze przeznaczyć trochę czasu na dostosowanie różnych elementów w taki sposób, żeby cały projekt w pełni satysfakcjonował klienta. Obejmuje to zadania, które nie mają ścisłego związku z brandingiem, jak np. dostosowanie kafelków produktu. Razem, w przypadku standardowej aplikacji m-commerce, proces ten zajmuje ok. 17 MD. 

Ta redukcja o ok. 53% dotyczy wyłącznie fazy projektowania UX/UI. Budowa aplikacji to osobny etap: development, testy QA i publikacja w sklepach zajmują ok. 55 MD w klasycznym podejściu i ok. 30,5 MD w Rappid Workflow, czyli o ok. 45% mniej. Jeśli projekt obejmuje obie fazy, cały proces skraca się z 91 do 47,5 MD, czyli o ok. 48%. Jest to uogólniona estymacja – każdy projekt estymujemy indywidualnie. Rzeczywisty czas może być krótszy lub dłuższy niż podane wartości.

Co jeśli nie ma identyfikacji wizualnej marki?

Nie każda firma wchodząca w projekt ma już ustalone kolory, fonty czy pełny branding. W takim przypadku proces zaczynamy od warsztatu, podczas którego ustalamy Wasze preferencje dotyczące identyfikacji wizualnej marki.

Alternatywnie możemy też przygotować propozycje na podstawie Waszych odpowiedzi na nasze pytania, które pozwalają nam się zorientować co jest dla Was ważne, co Wam się podoba i powinno współgrać z charakterem marki.

Dopiero gdy opracujemy elementy brandingu, dopasujemy do nich design system. Nie trzeba więc mieć gotowego brand booka, żeby zacząć. W Holdapp możemy Ci zaproponować, w jakim kierunku warto pójść przy projektowaniu aplikacji.

Ile można zaoszczędzić? Podsumowanie w liczbach

Poniższe dane to orientacyjne uśrednienia z naszych projektów, nie gwarantowany czas realizacji.

*Jeśli masz własny zespół projektowy i gotowy UI design, w grę wchodzi wyłącznie oszczędność na budowie aplikacji, czyli ok. 45%. Pełne ok. 48% dotyczy projektów, w których odpowiadamy również za projekt UX/UI. Powyższa estymacja opiera się na naszych wewnętrznych benchmarkach. Dla każdego projektu estymujemy czas budowy indywidualnie – wiele zależy od specyfiki aplikacji, a zwłaszcza jej wielkości.

Czy warto zdecydować się na design system w Rappid Workflow?

Design system w ramach Rappid Workflow pozwala szybciej tworzyć aplikacje m-commerce przy jednoczesnym zachowaniu unikalnej tożsamości marki. Wykorzystanie design systemu skraca czas projektowania UX/UI o ok. 53% (z 36 do 17 MD). Sama budowa aplikacji (development, testy QA i publikacja w sklepach) jest krótsza o ok. 45% (z 55 do 30,5 MD). Jeśli projekt obejmuje obie fazy, cały proces skraca się o ok. 48% (z 91 do 47,5 MD). Konkretny harmonogram i zakres oszczędności ustalamy indywidualnie podczas konsultacji, w zależności od specyfiki Twojego projektu.

Rappid Workflow powstał z doświadczenia zdobytego przy 14 latach budowy aplikacji dla marek takich jak między innymi Answear, Homla czy Medicine. Sprawdź nasze portfolio i zobacz, jakie aplikacje m-commerce tworzymy w Holdapp.

Chcesz zobaczyć, jak design system dopasowany do Twojej marki może wyglądać w praktyce? Umów się na konsultację i porozmawiajmy o Twoim projekcie w Rappid Workflow.