Case study 03 / 03UX · UI · Design system

Marketplace Panel

Narzędzie wewnętrzne2026

Wewnętrzny panel dla sprzedawcy mebli, który sprzedaje na wielu marketplace'ach jednocześnie. Około 800 ofert, kilka kont sprzedawcy i jedno pytanie zadawane co rano: czy po opłatach i reklamach to wciąż zarabia? Zaprojektowałem UX i UI panelu i pomagałem ułożyć jego strukturę. Projekt jest prywatny, dlatego sklep, ludzie i wszystkie liczby na ekranach są zmyślone.

Klient: Sprzedawca mebli
Moja rola: Projektowanie UX/UI, struktura produktu
Czas: Kwiecień do października 2026
Zakres: Siedem sekcji na komputerze i telefonie / Design system / User flows

(01)

O projekcie

Kontekst

Sprzedawca wystawia meble na wielu marketplace'ach jednocześnie, z kilku kont. Każdy marketplace ma swój panel i swoje opłaty, po swojemu nazywa ten sam status zamówienia, a z panelem sprzedawcy łączy się przez własne API. Przy tylu integracjach nie było jednego miejsca, w którym dałoby się odpowiedzieć na najprostsze pytanie: jak nam poszło w tym miesiącu?

Zaprojektowałem panel, który odpowiada na nie w jednym miejscu: sprzedaż, opłaty i wynik po prowizjach dla każdego konta i każdej oferty, zamówienia ze wszystkich marketplace'ów na jednej liście i wiadomości od kupujących w jednej skrzynce. Odpowiadałem za UX i UI: za to, jak czyta się każdy ekran, czego wymaga od osoby, która z niego korzysta, i co mówi, kiedy brakuje liczby. Pomagałem też ustalić, jak panel jest zbudowany: jakie ma sekcje oraz co widzi właściciel, co menedżerowie, a co pracownicy.

Projekt jest prywatny i nikt spoza firmy nie może się do niego zalogować. Dlatego sklep, kupujący i liczby są tutaj zmyślone, a wielu części panelu nie pokazuję.

(02)

Problem

Odpowiedź na jedno pytanie, czy ta oferta wciąż zarabia po opłatach i reklamach, była rozrzucona po osobnych panelach wszystkich marketplace'ów.

Prowizja jest naliczana w chwili opłacenia zamówienia, przychód liczy się dopiero po wysyłce paczki, reklamy są rozliczane kilka dni później, a sprzedaż, którą przynoszą, widać w jeszcze innym panelu. Każdy marketplace podaje to wszystko przez własne API, we własnym formacie i we własnym tempie. Niestarannie zestawione, te liczby kłamią: opłata pojawia się przed swoim przychodem, szacunek wygląda jak fakt, a brakująca liczba uchodzi za zero. Zanim panel mógł stać się przydatny, musiał uczciwie mówić o każdej liczbie, którą pokazuje.

Ograniczenia

Wiele marketplace'ów i wiele integracji API, jedno nazewnictwo
Każda liczba ma źródło i żaden szacunek nie udaje faktu
Trzy role: właściciel, menedżerowie i pracownicy, którzy nie widzą finansów
Każdy ekran działa też na telefonie

(03)

Kluczowe decyzje

Decyzje

Przeczytane to jeszcze nie odpowiedź

Kontekst: Kupujący piszą o dostawach, brakujących elementach i fakturach, a zwłoka w odpowiedzi kosztuje ocenę. Stara skrzynka sama otwierała najnowszy wątek i oznaczała go jako przeczytany, więc wiadomość mogła stać się przeczytana, choć nikt jej nie przeczytał, a przeczytana wyglądała na załatwioną, nawet jeśli nikt na nią nie odpisał.
Decyzja: Nic już nie otwiera się samo. Wątek staje się przeczytany dopiero wtedy, gdy ktoś go otworzy, wątek oznaczony jako nieprzeczytany takim pozostaje, a otwarty wątek jest zapisany w adresie, więc link z pierwszego ekranu prowadzi prosto do niego. Obok nieprzeczytanych skrzynka liczy teraz także to, co czeka na odpowiedź: każdy wątek, w którym ostatnie słowo należało do kupującego, bez względu na to, czy ktoś już do niego zajrzał.
Kompromis: Jedno kliknięcie więcej przed pierwszą wiadomością. O tym, któremu kupującemu odpowiedzieć najpierw, zawsze decyduje teraz człowiek, nigdy skrzynka.

Stara skrzynka, trzy przyciski filtra z czerwonym licznikiem przy nieprzeczytanych i lista wątków, na której najnowszy jest już otwarty i zaznaczony — Rys. 01Najnowszy wątek otwierał się sam i stawał się przeczytany. Jedynym filtrem były nieprzeczytane.

Nowa skrzynka, zakładki Wszystkie, Czeka na odpowiedź, Nieprzeczytane i Przeczytane, każda z licznikiem, lista, na której wątki czekające na odpowiedź są oznaczone, i pusty panel czytania z komunikatem Wybierz wątek — Rys. 02Nic się nie otwiera, dopóki ktoś tego nie wybierze, a to, co czeka na odpowiedź, ma własną zakładkę.

Każdy kolor ma jedno zadanie

Kontekst: Stary pierwszy ekran kolorował prawie wszystko: opłaty na czerwono, zmiany w czerwonych i zielonych plakietkach, niebieski kafel pod każdą ikoną. Prowizja, koszt, którego nikt nie uniknie, była najbardziej czerwonym elementem ekranu, więc oko nauczyło się czerwień pomijać.
Decyzja: Każdy kolor znaczy teraz jedną rzecz. Zieleń i czerwień należą do jednej liczby, wyniku po prowizjach, i tylko wtedy, gdy pochodzi on z rozliczeń samych marketplace'ów. Bursztyn oznacza to, co na kogoś czeka. Niebieski kolor marki mówi, gdzie jesteś i co jest wybrane: bieżąca sekcja, aktywna zakładka, wybrany wątek, linia trendu. Opłaty mają znak minus zamiast koloru, a zmiany w okresie są szare.
Kompromis: Szacowany wynik pozostaje szary, nawet gdy wygląda dobrze. Panel woli powiedzieć mniej, niż powiedzieć coś, czego nie potrafi potwierdzić.

Duża karta ze starego pierwszego ekranu, wynik po prowizjach z niebieskim kaflem ikony, zielona plakietka zmiany, opłaty na czerwono i rabaty na zielono — Rys. 03Czerwień opłat, zielona plakietka i niebieski kafel na jednej karcie.

Cztery liczby nowego pierwszego ekranu w układzie dwa na dwa, wynik po prowizjach na zielono z małą niebieską linią trendu, przychód z linią trendu, opłaty jako liczba ujemna i rabaty — Rys. 04Jedna liczba w kolorze, a niebieski tylko dla trendu. W układzie dwa na dwa, tak jak pas składa się na wąskim ekranie.

Brak liczby nigdy nie jest zerem

Kontekst: Sprzedaży z reklam nie ma w żadnym API, które panel potrafi odczytać. Jest w panelach reklamowych marketplace'ów i trzeba ją wpisywać ręcznie. Bez niej nie da się policzyć ROAS, a zero w tym miejscu wyglądałoby jak kampania, która się nie udała.
Decyzja: Tam, gdzie liczba nie ma źródła, panel pisze Brak danych i mówi, czego potrzebuje. ROAS jest liczony tylko z tych dni i kont, dla których wpisano sprzedaż, a samo puste miejsce otwiera formularz brakującego wpisu, ustawiony od razu na sprzedaż z reklam i na właściwe konto, zamiast kazać właścicielowi szukać go niżej na stronie.
Kompromis: W niektórych komórkach Brak danych widnieje całymi dniami, dopóki ktoś nie wpisze sprzedaży. To i tak bardziej przydatne niż liczba, której nie można ufać.

Blok Wyniki reklam, w którym ROAS i sprzedaż z reklam mają oznaczenie Brak danych i notkę z informacją, co wpisać, oraz otwarty na nim formularz wpisu na zakładce sprzedaży z reklam, z kontem, sprzedażą brutto i okresem — Rys. 05Brak danych mówi, czego potrzeba, a formularz otwiera się na właściwym rodzaju wpisu.

Ustawienie, które przelicza każdą liczbę, najpierw pyta

Kontekst: Mnożnik rentowności zamienia wynik po prowizjach w szacowany zysk netto całej firmy. Jego zmiana przelicza każdą kwotę zysku w panelu i w raportach PDF, łącznie z miesiącami już zamkniętymi, a pomyłka o jedną cyfrę przechodzi niezauważona.
Decyzja: Zapisanie nowej wartości otwiera potwierdzenie, które pokazuje ustawienie teraz i po zmianie oraz mówi wprost, co się stanie: każda kwota zysku netto spadnie o 75 procent. Sama wartość jest wypisana na przycisku: Ustaw 10%. Pierwszym wyborem jest Anuluj, a starą wartość można później przywrócić.
Kompromis: Jeden krok więcej przy zmianie, którą robi się kilka razy w roku. I właśnie o to chodzi.

Ustawienie mnożnika rentowności, pole z nową wartością 10 procent i przycisk Zapisz mnożnik — Rys. 06Ustawienie: jedno pole, które zmienia każdą kwotę zysku w panelu.

Potwierdzenie, 40 procent teraz i 10 procent po zapisaniu, ostrzeżenie, że każda kwota zysku netto spadnie o 75 procent, przycisk Anuluj i przycisk z napisem Ustaw 10% — Rys. 07Pytanie przed zapisem: stan teraz i po zmianie, skutek opisany słowami, wartość na przycisku.

Lista mówi, co zawiera, zanim ktokolwiek kliknie

Kontekst: Lista zamówień miała dziewięć zakładek statusu bez żadnych liczb, więc żeby sprawdzić, czy coś czeka na płatność, trzeba było otwierać zakładki jedną po drugiej. Katalog ofert otwierał się posortowany po cenie, z najdroższą ofertą na górze, bez względu na to, czy kiedykolwiek się sprzedała.
Decyzja: Każda zakładka statusu ma teraz swój licznik, także wtedy, gdy to zero, więc nikt nie otwiera pustej zakładki tylko po to, żeby sprawdzić, a rząd zakładek jest przy okazji podsumowaniem dnia. Katalog otwiera się posortowany po przychodzie z ostatnich 30 dni, więc pierwszy ekran pokazuje to, co się sprzedaje, a oferty, które nie sprzedały niczego, mają własną zakładkę, na której widać ich liczbę.
Kompromis: Dziewięć liczników zagęszcza rząd zakładek, a zero jest pokazane tak samo wyraźnie jak sto. Ukrycie pustych zakładek dałoby spokojniejszy widok, ale zakładek, które pojawiają się i znikają, trudniej się nauczyć.

Stara lista zamówień, dziewięć zakładek statusu bez liczb, przycisk daty, przycisk filtra i pole wyszukiwania w drugiej linii oraz trzy wysokie wiersze z datą, ofertą, kwotą i dwiema plakietkami statusu — Rys. 08Dziewięć zakładek statusu i ani jednej liczby.

Nowa lista zamówień, dziewięć zakładek statusu, każda z licznikiem, pole wyszukiwania, filtry i sortowanie oraz trzy pierwsze zamówienia z datą, kontem, statusem i kwotą — Rys. 09Każdy status ma swój licznik, także wtedy, gdy to zero.

(04)

Design

Ekrany

Stary ekran finansów, wynik jako długa karta z wierszami jeden pod drugim i opłatami na czerwono, obok karta wyników reklam, a niżej szeroka tabela — Rys. 10Finanse czytało się jak paragon: jedna długa karta wierszy, z opłatami na czerwono.

Nowy ekran finansów, pięć liczb w jednym pasie i tabela kont z kolumnami opłat, w której przy brakującej sprzedaży z reklam jest napis Brak danych — Rys. 11Pięć liczb, a pod nimi jedna tabela dla wszystkich kont. Tam, gdzie liczby brakuje, jest napis Brak danych.

Stary katalog ofert, rząd akcji nad listą, pole wyszukiwania i wysokie wiersze posortowane po cenie, z kolorowymi plakietkami statusu — Rys. 12Katalog: rząd akcji nad listą i oferty posortowane po cenie.

Nowy katalog ofert, zakładki z licznikami, jeden pasek narzędzi z wyszukiwaniem, filtrami i sortowaniem ustawionym na przychód oraz więcej wierszy w widoku — Rys. 13Jeden pasek narzędzi, akcje zebrane w menu i oferty posortowane według tego, ile zarabiają.

Stary ekran zamówień, dwie duże karty przychodu nad listą i trzy wysokie wiersze w widoku — Rys. 14Dwie karty przychodu spychały listę w dół: w widoku mieściły się trzy zamówienia.

Nowy ekran zamówień, jeden pas czterech liczb, zakładki statusów z licznikami i siedem zamówień w widoku — Rys. 15Jeden pas liczb, zakładki z licznikami i siedem zamówień w widoku.

Struktura opłat, szary pasek podzielony według rodzaju opłaty i tabela z kwotą i udziałem każdego rodzaju, sumą i rabatami — DetalOpłaty bez alarmuTo, co pobierają marketplace'y, jest kosztem sprzedaży, a nie porażką, dlatego strukturę opłat pokazuje neutralny pasek z tabelą pod spodem: prowizje, reklamy i dostawa jako udziały w opłaconych zamówieniach. Przypis wyjaśnia, jak liczony jest każdy udział.

Paleta poleceń z polem wyszukiwania i listą sekcji, każda ze skrótem złożonym z G i litery — DetalCtrl KDo każdej sekcji i każdej oferty wystarczy kilka klawiszy. Paleta wymienia sekcje razem z ich skrótami, G i litera, a oferty zaczyna wyszukiwać od drugiego wpisanego znaku.

Karta najlepszych ofert, przełącznik między najlepszymi a stratnymi ofertami oraz pięć ofert z miniaturą, kontem, liczbą sprzedanych sztuk i wynikiem po prowizjach — Rys. 16Najlepsze i najgorsze oferty według wyniku, pod jednym przełącznikiem.

Karta ostatnich wiadomości, pięć wątków kupujących z loginem, jednowierszowym podglądem i godziną oraz link do skrzynki — Rys. 17Ostatnie wiadomości od kupujących, od razu na pierwszym ekranie.

Karta ostatnich zamówień, pole wyszukiwania i pięć zamówień z kropką statusu, produktem, kupującym i kwotą — Rys. 18Pięć najnowszych zamówień i wyszukiwarka, która prowadzi do dowolnego zamówienia.

Ustawienie wyglądu, piętnaście kolorów akcentu jako przyciski opcji, z jednym zaznaczonym, i przełącznik segmentowy intensywności — Rys. 19Każdy wybiera kolor akcentu i jego intensywność, tylko dla swojej przeglądarki.

Pierwszy ekran na telefonie z czterema liczbami w dwóch rzędach i przychodem dzień po dniu pod nimi — Rys. 20Pierwszy ekran na telefonie.

Katalog ofert na telefonie, każda oferta jako karta ze statusem, ceną, liczbą sprzedanych sztuk i wynikiem po prowizjach — Rys. 21Tabele zamieniają się w karty.

Rozmowa z kupującym na telefonie, pytanie kupującego o brakujący element i odpowiedź sklepu — Rys. 22Jedna rozmowa naraz.

Cały plik

14ekranów, na komputerze i telefonie
169komponentów
17obszarów z user flows

Dziesięć desktopowych ekranów panelu w dwóch rzędach po pięć, wszystkie ze zmyślonymi danymi — Dziesięć z ekranów panelu, wszystkie ze zmyślonymi danymi. Jego prywatnych części tutaj nie dokumentuję.

(05)

System

Design system

Strukturę buduje szarość Zinc. Czerwień, bursztyn i szmaragd pokazują stan, a niebieski kolor marki zaznacza, gdzie jesteś i co jest wybrane. Nic innego nie koloruje interfejsu, więc kolor na ekranie zawsze coś znaczy.

Kolekcje zmiennych
Kolekcja	Zmienne	Tryby
Primitives	39	Jedna wartość
Color	51	Light
Spacing	11	Jedna wartość
Radius	4	Jedna wartość
Size	22	Jedna wartość

Typografia

Geist
Regular / Medium / SemiBold

Komponenty

Pole wyszukiwania, wybór okresu i przełącznik segmentowy
Zakładki statusu z licznikami
Przyciski, główne i drugorzędne
Notka z akcją
Tabela danych z wierszami grup i sumy

W pliku

169 komponentów
654 warianty
91 ikon
8 stylów tekstu

Elementy systemu na jednym arkuszu, pole wyszukiwania i kontrolki okresu, zakładki statusu z licznikami, przyciski, notka z akcją oraz tabela kont z wierszami grup i sumą — Rys. 23Elementy systemu w użyciu, ze zmyślonymi danymi.

(06)

Rezultat

Efekt

Jeden panel dla wielu marketplace'ów, który odpowiada na pytanie, jak idzie sprzedaż, i nigdy nie pokazuje liczby, której nie potrafi potwierdzić.

Co powstało

Siedem sekcji dla wielu marketplace'ów i kilku kont sprzedawcy, na komputerze i na telefonie
Jedno zadanie dla każdego koloru i jedna zasada dla brakujących danych, utrzymane na każdym ekranie
14 ekranów w Figmie, z user flows dla 17 obszarów i ich ścieżkami błędów
Design system Precyzja: 127 zmiennych, 169 komponentów, 654 warianty

Następny projekt →01 / 03

DrukKsiążek24