DrukKsiążek24 · Kacper Kobyłecki

Klient: Mazowieckie Centrum Poligrafii
Moja rola: Projektowanie UX/UI
Czas: 2 do 3 miesięcy, 2026
Zakres: Sklep i konfigurator / Checkout, pliki i śledzenie / Panel administracyjny / Design system / Polski, niemiecki, francuski

(01)

O projekcie

Kontekst

Mazowieckie Centrum Poligrafii to drukarnia cyfrowa z Marek pod Warszawą. DrukKsiążek24 to miejsce, w którym sprzedaje druk książek online: od 10 egzemplarzy, w sześciu oprawach, z ceną na ekranie, zanim ktokolwiek porozmawia z handlowcem.

Stary sklep działał na gotowym szablonie. Klient chciał takiego, który stanie obok największych drukarni internetowych w Polsce i wprowadzi firmę na rynki zagraniczne.

Zadaniem nie był więc nowy wygląd sklepu, tylko cała ścieżka zamówienia: wybór książki, płatność, przesłanie plików, produkcja i dostawa oraz panel, w którym drukarnia to wszystko obsługuje. W liczbach: 31 ekranów sklepu, 48 ekranów panelu, 12 e-maili i trzy języki.

(02)

Problem

Druk książki ma dziesiątki parametrów. Klient spotyka je raz, drukarnia pracuje z nimi cały dzień.

Papier, druk, oprawa i folia ograniczają się nawzajem, a każde z nich zmienia cenę. Pliki przychodzą po zamówieniu i mogą zostać odrzucone. Termin zależy od dnia, w którym pliki zostaną przyjęte. Stary kalkulator wkładał to wszystko do jednego długiego formularza, a rozgryzienie tego zostawiał klientowi.

Ograniczenia

Sześć opraw, każda z własnym zakresem stron i opcjami
Cena zależy od każdego parametru, nakładu i terminu wysyłki
Pliki przychodzą po płatności i mogą wymagać poprawek
Trzy rynki z własnym językiem, walutą i zasadami podatkowymi
Te same komponenty muszą służyć klientowi i pracownikom

(03)

Podejście

Proces

01
Struktura
Mapa strony sklepu, konta klienta, panelu administracyjnego i stron z treściami.
02
Ścieżka
Proces sprzedaży od początku do końca i każdy status, jaki może mieć zamówienie.
03
System
Kolory, typografia, odstępy i komponenty jako zmienne i style w Figmie.
04
Ekrany
Sklep, konfigurator, checkout, konto i panel administracyjny.

Mapa strony sklepu z sześcioma grupami stron — Rys. 02Mapa strony i adresy podstron.

Schemat statusów zamówienia i osi, którą widzi klient — Rys. 03Statusy zamówienia, od płatności do doręczenia.

(04)

Kluczowe decyzje

Decyzje

Cena nigdy nie znika z ekranu

Kontekst: W druku cena za sztukę mocno spada wraz z nakładem, a zmienia ją prawie każdy wybór. Stary kalkulator pokazywał sumę w trzeciej kolumnie, na końcu długiego formularza.
Decyzja: Nakład i termin wysyłki stały się pierwszym krokiem i trafiły do panelu, który zostaje obok formularza. Panel pokazuje siedem nakładów z ceną netto, brutto i za sztukę oraz trzy terminy wysyłki podane jako konkretne daty. Pasek na dole trzyma sumę i przycisk koszyka na widoku. Gdy książki nie da się wycenić, w miejscu ceny widać powód i można poprosić o wycenę.
Kompromis: Na telefonie pasek mieści sumy i jeden przycisk. Rozbicie kosztów przenosi się do panelu ze szczegółami.

Stary kalkulator z trzema kolumnami: parametry, nakład i podsumowanie zamówienia — Rys. 04Przed: parametry, nakład i podsumowanie w trzech kolumnach.

Nowy konfigurator z formularzem po lewej, tabelą cen po prawej i paskiem ceny na dole — Rys. 05Po: formularz po lewej, ceny po prawej, suma w pasku.

Pojęcia drukarskie wyjaśnione przy samym wyborze

Kontekst: Autor, który drukuje pierwszy raz, nie wie, co to 4+0, PUR ani spad. Stary formularz podawał je w gołych listach rozwijanych.
Decyzja: Opcje, które da się zobaczyć, są pokazane na zdjęciach. Pola i opcje mają podpowiedź: krótki tekst, czasem rysunek oraz odnośnik do właściwego rozdziału poradnika. Opcja, która nie pasuje do konfigurowanej książki, zostaje widoczna, ale wyłączona, z powodem pod spodem. Przy błędnej liczbie stron jest przycisk, który poprawia ją jednym kliknięciem. To, co wynika z innych wyborów, na przykład szerokość grzbietu, jest wyliczane, klient tego nie podaje.
Kompromis: Na każdy język przypada 105 podpowiedzi, które trzeba napisać i aktualizować, dlatego drukarnia edytuje je w panelu.

Kolumna list rozwijanych ze starego formularza, podpisanych pojęciami drukarskimi — Rys. 06Przed: listy rozwijane z pojęciami drukarskimi.

Krok drugi nowego konfiguratora z opcjami druku pokazanymi jako kafelki ze zdjęciami — Rys. 07Po: krok 2 z 4, opcje druku jako zdjęcia z wyjaśnieniem prostym językiem.

Najpierw zamówienie, potem pliki i jasno, od kiedy biegnie termin

Kontekst: Zamówienie druku nie kończy się na płatności. Pliki muszą jeszcze dotrzeć i przejść weryfikację, a termin biegnie od tego dnia.
Decyzja: Checkout działa bez konta. Po płatności klient wgrywa pliki do opisanych pól: na środek, okładkę i pozostałe. Każde pole pokazuje swój stan: brak, wysyłanie, w weryfikacji, przyjęty, odrzucony. Odrzucony plik wraca z powodem, który wpisała osoba sprawdzająca. Jedno zdanie, „Termin liczymy od akceptacji plików”, wraca na każdym etapie, od konfiguratora po śledzenie. Każde zamówienie można śledzić po numerze i adresie e-mail.
Kompromis: Płatność przed sprawdzeniem plików wymaga zaufania. Dlatego do czasu akceptacji plików klient może anulować zamówienie i odzyskać pieniądze, a checkout o tym informuje.

Trzy stany pola pliku: puste, w trakcie wysyłania i w weryfikacji — Rys. 08Pole pliku: brak, wysyłanie, w weryfikacji.

Oś zamówienia z sześcioma etapami, od złożenia zamówienia do doręczenia — Rys. 09Oś zamówienia tak, jak widzi ją klient.

Jeden system, dwie skórki: sklep i panel

Kontekst: Klient widzi jedno pole naraz i przychodzi raz. Pracownicy przez cały dzień patrzą na wiersze zamówień, wyszukiwarkę i trzy przyciski.
Decyzja: Panel korzysta z tych samych komponentów co sklep, w drugim trybie: mniejsze kontrolki, ostre rogi, obrysy zamiast cieni, neutralne szarości, bez animacji hover. W tabelach status to kropka i słowo, bo kolumna wypełnionych plakietek zamieniała się w ścianę koloru. Zamówienia przechodzą dalej same, gdy wpłynie płatność albo plik. Pracownikom zostają dwa ręczne kroki, a ręczna zmiana statusu i przycisk anulowania celowo nie rzucają się w oczy.
Kompromis: Każdy komponent musi działać w obu trybach, dlatego zanim trafi na ekran, jest sprawdzany w jednym i w drugim.

Plakietki statusu zamówienia w trzech formach: wypełniona z ikoną, stonowana oraz kropka ze słowem — Rys. 10Jeden status, trzy formy: z ikoną, stonowana oraz kropka ze słowem do tabel.

Lista zamówień w panelu administracyjnym z kropką i słowem przy każdym statusie — Rys. 11Zamówienia w panelu: ostre rogi, obrysy, status jako kropka i słowo.

Trzy rynki, jeden sklep

Kontekst: Klient chciał sprzedawać w Niemczech i we Francji. Każdy rynek ma własny język, walutę, stawki podatku i zasady prezentowania cen.
Decyzja: Jeden sklep, rozpoznawany po adresie. Polski tekst jest domyślny, a każdy sklep podmienia tylko to, co się różni. W sklepie niemieckim i francuskim na pierwszym miejscu stoi cena brutto, pole numeru podatkowego nazywa się tak, jak w kraju kupującego, a adresy stron są przetłumaczone. Cennik jest przeliczany z polskiego po kursie, a panel pokazuje, w którym sklepie jest on aktualny.
Kompromis: Brakujące tłumaczenie pokazuje się jako polskie zdanie. To celowe: widoczna luka doczeka się poprawki, cichy fallback już nie.

Tabela nakładów w polskim sklepie z cenami netto w złotych — Rys. 12Polska: na pierwszym miejscu cena netto, w złotych.

Ta sama tabela w niemieckim sklepie z cenami brutto w euro — Rys. 13Niemcy: na pierwszym miejscu cena brutto, w euro.

Ta sama tabela we francuskim sklepie — Rys. 14Francja: ten sam panel po francusku.

(05)

Design

Ekrany

Strona główna sklepu ze sliderem na górze i początkiem sekcji opraw — Rys. 15Strona główna.

Sześć kart opraw, każda ze zdjęciem, zakresem stron i najniższą ceną — Rys. 16Sześć opraw, każda z zakresem stron i najniższą ceną.

Karuzela gotowych zestawów, z kartą powieści na pierwszym planie — Rys. 17Drugi sposób wejścia: od rodzaju książki.

Panel „Wysyłka i nakład” z trzema terminami wysyłki i tabelą siedmiu nakładów — DetalTabela nakładówSiedem nakładów z ceną netto, brutto i za sztukę, dzięki czemu klient widzi, jak spada cena jednostkowa. Nad tabelą są trzy terminy wysyłki, oznaczone jako „Najszybciej”, „Zalecana” i „Najtaniej”.

Dymek podpowiedzi, który wyjaśnia format gotowej książki rysunkiem i listą wymiarów — DetalPodpowiedźZnak zapytania obok pola otwiera krótkie wyjaśnienie, rysunek i odnośnik do poradnika. Na telefonie podpowiedź otwiera się jako panel od dołu, bo dymek z odnośnikiem nie sprawdza się pod palcem.

Telefon na drewnianym stole ze stroną główną sklepu na ekranie — Rys. 18Sklep na telefonie.

Dwa ekrany konfiguratora na telefonie: strona produktu i krok pierwszy z paskiem ceny — Rys. 19Konfigurator na 390 px: pasek ceny zostaje na dole.

Zamówienie w panelu administracyjnym z plikami do sprawdzenia, terminem produkcji, statusem i notatkami — Rys. 20Zamówienie: pliki do przyjęcia albo odrzucenia, termin i następny krok.

Nowa wycena w panelu administracyjnym z konfiguracją, cenami dla kolejnych nakładów, kosztem produkcji i marżą — Rys. 21Wycena: koszt produkcji, marża i cena dla klienta.

Cennik w panelu administracyjnym z zaokrągleniami, limitami, opcjami do wyboru dla klienta i tymi, których nie można łączyć — Rys. 22Cennik: co klient może wybrać i czego nie można łączyć.

Cały plik

79ekranów
159komponentów
12e-maili

Szesnaście ekranów desktopowych z pliku w Figmie w pięciu równych kolumnach, ekrany sklepu po lewej, ekrany panelu administracyjnego po prawej — Szesnaście z ekranów w Figmie: sklep po lewej, panel drukarni po prawej.

(06)

System

Design system

243 zmienne w siedmiu kolekcjach. Po zmianie 21 z nich sklep staje się panelem: te same komponenty, inne narzędzie.

Kolekcje zmiennych
Kolekcja	Zmienne	Tryby
Primitives	58	Jedna wartość
Color	66	Shop / Panel
Spacing	37	Desktop / Mobile
Radius	9	Shop / Panel
Size	24	Shop / Panel
Typography	32	Desktop / Mobile
Motion	17	Jedna wartość

Co zmienia się między trybami
	Shop	Panel
Promień przycisku	Pigułka	2 px
Promień karty	20 px	2 px
Promień pola	12 px	2 px
Wysokość pola	44 px	40 px
Wysokość przycisku	42 px	40 px
Szarości	Slate, lekko niebieskie	Neutralne

Typografia

DM Sans
Regular / Medium / SemiBold

Komponenty

Przyciski i plakietki
Formularze
Nawigacja
Nakładki i treść
Sklep: koszyk, zamówienia, konto

W pliku

159 komponentów
84 ikony
30 stylów tekstu
16 stylów efektów

Plansza komponentów z przyciskami, przyciskami z samą ikoną i plakietkami we wszystkich wariantach — Rys. 23Przyciski i plakietki: warianty, rozmiary i stany.

Plansza komponentów z kontrolkami formularza i ich stanami — Rys. 24Kontrolki formularza i ich stany.

(07)

Rezultat

Efekt

Jeden system, który prowadzi książkę od ceny do paczki: sklep, konfigurator, checkout, weryfikacja plików, śledzenie i stojący za nimi panel, w trzech językach.

Co powstało

Sklep i konfigurator dla sześciu opraw i sześciu gotowych zestawów
Checkout, wgrywanie plików, śledzenie bez konta, konto klienta
Panel: zamówienia, pliki, płatności, wyceny i cennik z wersjami
Narzędzia do treści: edytor bloga, biblioteka mediów, SEO, strony miast, edytowalne podpowiedzi
Design system w Figmie: 243 zmienne, 30 stylów tekstu, dwa tryby
Trzy działające sklepy: polski, niemiecki i francuski

Zobacz na żywo