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%. Sprawdź, jak to możliwe.

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%.

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.

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).

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.