Case study: Product Design
ERP i CRM dla biznesu, B2B/B2C, Product Design
Aktualizacja, październik 2026: później przekształciłem ten ERP w zakodowany design system udokumentowany w Storybooku.
O systemie ERP
Wprowadzenie
System ERP Tech Harbor służy do wygodnego zarządzania dużymi firmami, które tworzą produkty i współpracują z dystrybutorami. Przydaje się dyrektorom, menedżerom, marketerom, prawnikom i specjalistom ds. finansów w organizacji. System obejmuje pięć działów firmy (zarząd, magazyny, finanse, dział prawny, marketing) oraz osobny interfejs dla dystrybutorów — łącznie sześć modułów. Pozostaje intuicyjny zarówno dla osób biegłych technologicznie, jak i dla tych, które słabiej znają nowe technologie. To case study pokazuje, jak użytkownicy wykonują codzienne zadania w zależności od swoich ról.
Moja rola
Projektant interfejsów i produktu.
Metodologia obejmowała empatię wobec problemu, jego zdefiniowanie, burzę mózgów, projektowanie, prototypowanie i testy.
Moje obowiązki
Prowadzenie wywiadów, papierowe i cyfrowe wireframe’y, prototypy low- i high-fidelity, badania użyteczności, uwzględnianie dostępności i iteracje projektu.
Narzędzia
Design engineering: Storybook · React · TypeScript · Figma Variables · Figma MCP · Claude Code · GitHub · Vercel
Badania i hipoteza
Opis problemu
System ERP Tech Harbor ma usprawniać zarządzanie firmą, jednak użytkownicy, głównie pracujący profesjonaliści w wieku od 22 do 65 lat, na początku mają trudności z nawigacją, choć uważają interfejs za intuicyjny. Cenią efektywność i rozwój intelektualny, więc mają mało czasu na skomplikowane lub niewygodne procesy. Jak usprawnić onboarding i nawigację, aby przejście na system było płynne i oszczędzało czas?
Elementy problemu
Problemy ze skalowalnością
Pierwotnemu systemowi ERP brakowało elastyczności, by obsłużyć rosnącą skalę działalności, przez co był nieefektywny dla firm przetwarzających duże ilości danych.
Złożone procesy i stroma krzywa uczenia
Interfejs był funkcjonalny, ale wymagał czasu na przyzwyczajenie, co spowalniało pracę i obniżało efektywność.
Rozproszone doświadczenie użytkownika
Informacje były rozrzucone po różnych sekcjach, przez co trudno było się poruszać i wyciągać wartościowe wnioski.
Przestarzały interfejs z lukami w użyteczności
Projekt powielał tradycyjne struktury ERP, co powodowało problemy z użytecznością i utrudniało płynną, intuicyjną pracę.
Przegląd podjętych decyzji
Po badaniach i zidentyfikowaniu kluczowych problemów projekt był stopniowo rozwijany dla poszczególnych działów systemu ERP.
Menu nawigacji dla użytkownika „Menedżer”.
Menu nawigacji dla użytkownika „Menedżer finansowy”.
Użytkownicy systemu ERP
System ERP obsługuje właścicieli firm, kadrę zarządzającą, zespoły sprzedaży, prawników, kierowników magazynów i księgowych, zapewniając automatyzację procesów i sprawną współpracę. Korzystają z niego także międzynarodowi dystrybutorzy, którzy potrzebują dostępu do danych w czasie rzeczywistym.
David, współwłaściciel globalnej firmy, szuka zintegrowanego systemu do sprawnego zarządzania operacjami. Ceni szybkie wykonywanie zadań na różnych urządzeniach, ale napotyka trudności, takie jak zbyt duże teksty interfejsu na telefonie i ograniczona edycja danych dystrybutorów, co pokazuje potrzebę ciągłych usprawnień.
CEO
„Korzystam z systemu ERP, by monitorować finanse i kluczowe wskaźniki firmy. Pomaga automatyzować rutynowe procesy i przyspiesza podejmowanie decyzji”.
Prawnik międzynarodowy
„System ERP usprawnia moją pracę z dokumentami prawnymi i umowami, zapewniając zgodność z przepisami i sprawne zarządzanie dokumentacją”.
Przedstawiciel handlowy
„Korzystam z ERP do zarządzania relacjami z klientami, śledzenia transakcji i analizy sprzedaży — to bardzo ułatwia mi pracę”.
Kierownik magazynu
„System pomaga mi śledzić stany magazynowe w czasie rzeczywistym, ograniczając błędy i zapobiegając brakom”.
Księgowy
„ERP automatyzuje zarządzanie finansami, dzięki czemu śledzenie wydatków, fakturowanie i planowanie finansowe są bardziej efektywne”.
Badania z użytkownikami: problemy
Wygoda
Interfejs opiera się na tabelach i kartach, co zapewnia czytelne i intuicyjne doświadczenie.
Zaufanie
„Ta usługa musi być bezpieczna dla naszej firmy i naszych dystrybutorów”. (David)
Nawigacja
Użytkownicy zaproponowali dodanie breadcrumbs na ekranach, by łatwiej wracać.
Dostępność
System obsługuje motyw dzienny i nocny, zmianę rozmiaru tekstu i czytniki ekranu.
Cyfrowe wireframe’y
System ERP składa się z pięciu działów oraz osobnego interfejsu dystrybutora (łącznie sześć modułów). Stworzyłem wireframe’y wszystkich ekranów i rozpisałem ścieżki użytkowników dla każdego modułu.
Ściśle współpracowałem też z programistami i kierownikami zespołów, aby zrozumieć funkcje systemu. Spotykaliśmy się na SESJACH BURZY MÓZGÓW i analizowaliśmy projekt i logikę wszystkich działów.
Finalna iteracja
Makiety
Po drugim badaniu użyteczności ustaliłem, że pola wyszukiwania, filtry i przyciski na urządzeniach mobilnych powinny być większe. Zwiększyłem też odstępy między polami a przyciskami, aby ułatwić precyzyjne klikanie.
Stosowałem zasady responsywnego projektowania i nieco zmniejszyłem rozmiar czcionki w niektórych elementach. Dodano ciemny motyw, by zmniejszyć zmęczenie oczu i zwiększyć komfort osób, które go wolą.
Projekt responsywny
Co zmierzyłbym dalej
Aby zweryfikować projekt po wdrożeniu, użyłbym następujących metryk i metod do mierzenia i poprawy doświadczenia użytkownika:
Śledzenie zachowań użytkowników
Wykorzystanie narzędzi takich jak Google Analytics, Hotjar czy Mixpanel do analizy interakcji w systemie ERP/CRM, aby znaleźć typowe punkty tarcia i obszary do poprawy.
Metryki konwersji i zaangażowania
Mierzenie, jak sprawnie użytkownicy przechodzą między funkcjami, wykonują zadania (np. dodają klientów, generują raporty) i korzystają z automatyzacji.
⏱️
Realizacja zadań i oszczędność czasu
Śledzenie, ile czasu zajmują kluczowe działania w systemie, aby skrócić czas poświęcany na powtarzalne procesy.
Mapy cieplne i nagrania sesji
Wykrywanie problemów z użytecznością przez wizualizację kliknięć, głębokości przewijania i wzorców interakcji z funkcjami takimi jak tabela zarządzania klientami.
Testy A/B dla usprawnień UI
Testowanie różnych układów, rozmieszczenia przycisków i formularzy, aby poprawić użyteczność i adopcję.
Kwestie dostępności
01
Użyłem też bezszeryfowego kroju „Poppins”, aby teksty w aplikacji były łatwe w czytaniu.
02
Zastosowałem kolory i kontrast w polach i przyciskach, by były czytelne dla osób słabowidzących. W zakodowanej bibliotece dokumentacja komponentów obejmuje stany, style focusu i notatki ARIA; w Storybooku włączony jest dodatek a11y.
03
Zaprojektowałem ciemny motyw, aby z systemu ERP wygodnie korzystali różni użytkownicy.
Design system
W trakcie projektu zbudowałem design system dla ERP: wspólne style, komponenty i warianty, które rosły razem z produktem wraz z dodawaniem nowych modułów i ekranów.
Od Figmy do Storybooka
W kolejnym projekcie (październik 2026) przekształciłem makiety ERP w zakodowaną bibliotekę komponentów: 60 komponentów w React i TypeScript (22 atomy, 38 molekuł) oraz 242 design tokeny generowane z jednego pliku tokens.json. Każdy komponent jest udokumentowany w Storybooku wraz ze stanami, przypadkami brzegowymi, notatkami o dostępności i mapowaniem Figma–kod. Przygotowałem proces wspierany przez AI (Figma → Figma MCP → Claude Code → pull request w GitHubie → podgląd w Vercel). To ja decydowałem, co budować, przeglądałem każdą zmianę i scalałem każdy pull request.
Co zrobiłbym dalej
Testy i dokumentacja skupione na użytkowniku
Przeprowadzić testy użyteczności kluczowych ścieżek oparte na zadaniach i udokumentować każdy problem razem z poprawką w design systemie.
Wywiady z użytkownikami w celu rozwoju systemu
Przeprowadzić jakościowe wywiady z każdą rolą, aby znaleźć pozostałe problemy i ustalić priorytety usprawnień.
Inkluzywne badania dostępności
Przeprowadzić audyt dostępności według WCAG oraz sesje badawcze z osobami z niepełnosprawnościami.
Efekt
Po pierwszym miesiącu korzystania z systemu ERP, który pomaga automatyzować większość procesów biznesowych, użytkownicy zareagowali pozytywnie. Oto jedna z wypowiedzi użytkownika:
Rezultaty (kontynuacja z design systemem, październik 2026)
• 60 komponentów (22 atomy, 38 molekuł)
• 242 design tokeny (kolory, typografia, cienie, rozmiary, odstępy, siatka, layout, promienie)
• 137 ikon SVG w dwóch rozmiarach
• ~480 historii w Storybooku z dokumentacją MDX
• 9 pull requestów, 5 dni aktywnej pracy (1–5 października 2026)
Czego się nauczyłem
Tworząc pierwszą wersję systemu ERP, nauczyłem się korzystać z empatii i odkładać na bok własne założenia. Badania użyteczności pomogły usprawnić funkcje i sposób pracy z systemem. Później przeniesienie makiet do kodu nauczyło mnie, że design systemy skalują się tylko wtedy, gdy tokeny i dokumentacja żyją w kodzie, a nie tylko w Figmie.
Podsumowanie
Podnoszenie wydajności systemu ERP wymaga całościowej strategii: gruntownych testów, usprawnień skupionych na użytkowniku i dbałości o dostępność. Stawiając na opinie użytkowników i inkluzywność, nie tylko optymalizujemy system — tworzymy środowisko, w którym potrzeby każdego użytkownika są spełnione.
Link do strony firmy, dla której powstał system ERP: rifbar.com.