Wprowadzenie

Moim zakresem było stworzenie komponentu magazynów. Przeniosłem projekt do Figmy, zbudowałem design system i zaprojektowałem pełną, nową funkcjonalność obsługi paczek i magazynów (zamawianie, przyjęcie/transport, znakowanie, dokumentacja, wysyłka, reklamacje).
Zależało mi, by nowe elementy naturalnie wpiąć w istniejący system – bez zrywania przyzwyczajeń użytkowników.

Moja rola: UI/UX Designer.

Kontekst biznesowy

Branża luksusowych mebli oznacza nie tylko wysoką wartość towaru, ale też duże oczekiwania co do precyzji i szybkości obsługi. Nowy moduł dał użytkownikom pewność i jedną, czytelną wersję ‘magazynowej prawdy’. Zdiagnozowane kłopoty to:

• zarządzanie produktami (co, gdzie i w jakim stanie),
• trudności z odnajdywaniem towaru w przestrzeni wielu magazynów,
• rozproszone zbieranie danych potrzebnych do dystrybucji i obsługi klienta. To przekładało się na koszty, czas i brak pewności obsługi. Nowy komponent miał uporządkować pracę i dać jeden, czytelny obraz sytuacji.

Wyniki i wpływ

W praktyce zespół przeszedł z Excela do systemu, który jasno pokazuje stany, lokalizacje, zalegające pozycje i uszkodzenia. Logistyka zyskała kontrolę, a codzienna praca stała się przewidywalna: każdy etap obsługi paczki ma swoje miejsce i łączy się z resztą procesów.

Opis projektu

Jest to komponent magazynów dodany do istniejącej aplikacji obsługującej już proces sprzedaży i planowania. Pozwala on tworzyć wiele magazynów w różnych lokalizacjach; wpływa to na listy produktowe i widoki „gdzie co jest”. Najważniejsze było połączenie z pozostałymi modułami – jeden język interfejsu, te same wzorce, bez „zaskoczeń” dla użytkownika.

Zakres funkcjonalny:

• Zamawianie i przyjęcia – transport (w tym międzynarodowy) do magazynu, rejestrowanie ilości i stanu,
• Znakowanie i dokumentacja – etykiety, zdjęcia, notatki,
• Ułożenie w magazynie – lokacje i strefy,
• Wysyłka – zatrudnieni kurierzy, trasy, potwierdzenia wydania,
• Reklamacje – z odwołaniem do historii paczki i dokumentacji.

Sprzęt i urządzenia: wsparcie fizycznych skanerów podpinanych do urządzeń magazynowych; praca na desktopach i urządzeniach mobilnych.

Cel projektowy: nowa funkcjonalność, która płynnie działa w już istniejącym środowisku.

Timeline

• Analiza
  Audyt istniejącego systemu i procesów: zmapowanie zależności (bez zmiany przyzwyczajeń „na siłę”).
• Design System
  Design & Weryfikacja: projekt tokenów (kolory, typografia), tabele, linki, stany, wzorce formularzy i list; biblioteka w Figma.
• Ui/UX
  Ekrany magazynowe (przyjęcia, znakowanie, dokumentacja, wysyłka, reklamacje) w spójnym języku UI i określonym flow użytkownika.
• Współpraca
  Praca z zespołem: ścisła współpraca z programistami, PO i PM; iteracyjne doprecyzowanie zakresu i detali.
• Przekazanie
  Specyfikacje, komponenty i wsparcie wdrożeniowe.

Proces projektowy

Zacząłem od zanurzenia w środowisko, w którym moduł ma żyć: istniejące wzorce, przyzwyczajenia i reguły. Następnie ułożyłem design system (tabele, formularze, listy, kolory, typografia), żeby ujednolicić powtarzalne elementy. Dopiero potem zbudowałem ekrany magazynowe i włączyłem je w istniejące przepływy, tak by dla użytkownika wszystko było zrozumiałe i płynne.

Rozwiązania projektowe

Aby ułatwić codzienną pracę, przełożyłem cele na cztery proste obszary – od przyjęcia po wysyłkę i reklamacje:

• Przyjęcie i znakowanie – rejestrowanie ilości i stanu, dodawanie zdjęć i notatek; etykietowanie tak, by kolejne kroki były proste.
• Lokalizacje i ułożenie – przypisanie do miejsc w magazynie (strefy, sloty), szybki podgląd „gdzie jest produkt”.
• Wydanie i wysyłka – przygotowanie paczek do transportu, komplet informacji dla kuriera i odbiorcy.
• Reklamacje – cała dokumentacja (zdjęcia, protokoły) w jednym miejscu i przejrzysty stan sprawy.

W tle: wsparcie skanerów i pracy mobilnej; spójne komunikaty i stany – tak jak w reszcie systemu.

Persony i scenariusze użycia

Aby pokazać, jak moduł działa w praktyce, poniżej cztery role i ich codzienne zadania.

• Magazynier – przyjmuje dostawę, skanuje, dokumentuje uszkodzenia zdjęciami, oznacza, odkłada w wyznaczone miejsce.
• Lider zmiany / Logistyk – planuje rozmieszczenie towaru między magazyny, kontroluje stany i pozycje zalegające.
• Kurier / Odbiór – odbiera przygotowane paczki z kompletną dokumentacją.
• Obsługa klienta (reklamacje) – weryfikuje zgłoszenia, sięga do historii paczki i zdjęć, prowadzi sprawę do zamknięcia.

Before/After

Before: rozproszone arkusze, brak jednego miejsca „prawdy”, trudna orientacja w stanach i lokalizacjach.
After: spójny komponent magazynów w ekosystemie – jasne stany, zdjęcia i etykiety, jednoznaczne miejsca na kolejne kroki; widoki „gdzie co jest” i „co zalega”.

Integracje i zgodność z ekosystemem

Moduł magazynów został połączony z istniejącymi elementami systemu. Trzymałem się spójnych wzorców UI i logiki procesów, aby użytkownicy nie musieli uczyć się nowych zasad – mieli poczuć, że „to wciąż ten sam system, tylko bogatszy”.

Ryzyka

• Mocne przyzwyczajenia użytkowników: skupiłem się na wzorcach, które już znają; zmiany wprowadzałem w jednoznacznie lepszych miejscach (czytelność, mniej kliknięć, łatwiejszy dostęp do danych).
• Zależności z istniejącymi modułami: każdy ekran zweryfikowałem pod kątem wpływu na system, uspójniłem nazewnictwo - by uniknąć rozjazdów.

Wnioski i lekcje

Najlepiej zadziałała spójność – jeden język UI i powtarzalne komponenty. Sukcesem projektu jest poczucie użytkowników, że system rozwija się razem z nimi, a nie działa przeciwko ich nawykom.

Gdybym zaczynał dziś, jeszcze wcześniej wypracowałbym wspólny słownik pojęć dla całej struktury, żeby szybciej domykać dyskusje o nazewnicze wewnątrz zespołu.