Aporia Pro · Kacper Kobyłecki

Klient: Produkt wewnętrzny
Moja rola: Projektowanie UX/UI, koncepcja i wdrożenie
Czas: Marzec do sierpnia 2026
Zakres: Zadania w trzech widokach / Projekty klientów / Sesje pracy / Design system / Kolor workspace'u

(01)

O projekcie

Kontekst

Aporia Pro to wewnętrzne narzędzie do pracy dla małego zespołu. Zadania, projekty klientów i plan tygodnia są w jednym miejscu, więc nikt nie musi ręcznie pilnować, żeby się ze sobą zgadzały.

Zrobiłem w nim wszystko: koncepcję, UX i UI oraz kod. Była to też moja praca inżynierska, a wiele rzeczy zbudowałem w nim po to, żeby się uczyć. Najlepiej widać to na kolorze, o którym piszę niżej.

Projekt jest prywatny i nikt spoza zespołu się do niego nie zaloguje. Dlatego dane na ekranach są zmyślone, od ludzi i klientów po liczby, a wielu funkcji narzędzia w ogóle tu nie pokazuję.

(02)

Problem

Jedno zadanie pojawia się w tabeli, na tablicy i w kalendarzu tygodnia. Musi pozostać jednym zadaniem i dać się zmienić wszędzie, gdzie się na nie trafi.

Zadanie ma status, priorytet, osoby, termin, etykiety, podzadania, checklistę i dyskusję. Może należeć do projektu klienta albo istnieć osobno, być wspólne albo prywatne, może też być przypięte do bloku czasu. Każdy widok pokazuje inny wycinek tego samego rekordu i ma na to inną ilość miejsca.

Ograniczenia

Trzy widoki tych samych zadań: tabela, tablica, kalendarz
Zadania w projektach klientów i poza nimi
Praca zespołu i praca prywatna obok siebie
Te same ekrany na telefonie
Każdy workspace ma jeden kolor marki, a pozostałe kolory zachowują swoje znaczenie

(03)

Kluczowe decyzje

Decyzje

Jeden kolor przemalowuje całe narzędzie

Kontekst: Każdy workspace ma jeden kolor marki. Chciałem zrozumieć, jak działają skale kolorów, więc nie sięgnąłem po gotową paletę. Tę część zbudowałem celowo, jako eksperyment.
Decyzja: Generator napisałem ręcznie. Wchodzi jeden hex, wychodzi dziesięć odcieni: barwa zostaje, jasność schodzi po stałej krzywej z 97% do 15%, a nasycenie jest przygaszone na obu końcach. Pięć charakterów, od żywego po prawie szary, stroi ten sam kolor. Zabarwienie panelu bocznego, aktywna pozycja, przyciski, zakładki, liczniki i poświata w tle korzystają z tych dziesięciu wartości, więc niczego nie trzeba przerysowywać.
Kompromis: Kolor marki nie może niczego znaczyć. Status, priorytet, przekroczone terminy, błędy i fokus mają własne, stałe kolory, więc bordowy workspace nie sprawi, że zadanie po terminie będzie wyglądać, jakby wszystko było w porządku.

Ta sama tablica zadań w czterech workspace'ach: indygo, szmaragdowym, bordowym i pomarańczowym — Rys. 01Ten sam ekran w czterech workspace'ach. Zmienił się tylko kolor marki.

Zadanie powstaje w jednej linijce, a edytuje się je w miejscu

Kontekst: Zadanie ma około dziesięciu pól, ale zaczyna się od kilku słów.
Decyzja: Do dodania zadania wystarcza jedna linijka: w stopce grupy w tabeli, na górze kolumny na tablicy albo w pełnym formularzu. Pole zostaje otwarte, więc listę można wpisać jednym ciągiem. Wszystko inne ustawia się tam, gdzie jest pokazane. Tytuł zmienia się dwukrotnym kliknięciem, a status, osoby, termin i priorytet w małych okienkach wyboru w wierszu albo na karcie. Pola w widoku zadania zapisują się same.
Kompromis: Nie ma przycisku zapisu, więc nie ma też czego anulować. Pasek zapisu został tylko w ustawieniach projektu.

Jednolinijkowe pole nowego zadania nad kartą zadania — Rys. 02Nowe zadanie to jedna linijka. Enter zapisuje, Escape anuluje.

Karta zadania z otwartym menu, w którym są trzy statusy i trzy akcje — Rys. 03Status zmienia się w menu samej karty.

Zamknięcie pyta raz i da się je cofnąć

Kontekst: Zadanie zamyka się jednym kliknięciem w kółko obok tytułu. O jedno kliknięcie łatwo też przez pomyłkę.
Decyzja: Kliknięcie otwiera krótkie pytanie dokładnie w tym samym miejscu, w zielonym kolorze tej akcji. Po zamknięciu na osiem sekund zostaje pasek z przyciskiem Cofnij. Później zadanie nadal można otworzyć ponownie jednym kliknięciem, tym razem bez pytania.
Kompromis: Każde zamknięcie to o jedno kliknięcie więcej. Usuwanie, którego cofnąć się nie da, ma własne potwierdzenie.

Karta zadania z małym zielonym pytaniem, czy zamknąć zadanie — Rys. 04Pytanie pojawia się przy kółku, które zostało kliknięte.

Pasek cofania nad zamkniętą, wyszarzoną kartą zadania — Rys. 05Pasek cofania zostaje na osiem sekund.

Pilne może być tylko jedno zadanie

Kontekst: Priorytet ma cztery poziomy. Najwyższy z nich, Pilne, jest przeznaczony dla jednego zadania naraz.
Decyzja: Pilne to fuksja z koroną, nigdy czerwień: czerwień zostaje przy wysokim priorytecie i przekroczonych terminach. Zanim zadanie dostanie koronę, narzędzie pyta, przy jej zdejmowaniu pyta również, a drugiego pilnego zadania nie przyjmie, dopóki pierwsze nie zostanie zamknięte.
Kompromis: Kiedy dwie rzeczy wydają się pilne, ktoś musi wybrać jedną. Narzędzie nie pozwala odkładać tego wyboru.

Karta pilnego zadania z koroną i pytaniem w kolorze fuksji, czy koronować zadanie — Rys. 06Koronowanie zaczyna się od pytania.

Znaczniki statusów, oznaczenia priorytetów, przekroczony termin, przełącznik i pole z fokusem — Rys. 07Kolory, które coś znaczą, są te same w każdym workspace'ie.

Sesje: kiedy się pracuje, a nie tylko na kiedy ma być gotowe

Kontekst: Termin mówi, na kiedy coś ma być gotowe. Nie mówi, kiedy ktoś do tego usiądzie.
Decyzja: Sesja to blok czasu w kalendarzu, zwykle powtarzany co tydzień. Rysuje się ją, przeciągając po wolnym czasie, ze skokiem co 15 minut. Zadania i pojedyncze podzadania przypina się do niej razem z szacowanym czasem, a wskaźnik pokazuje, ile bloku jest już wykorzystane. W kalendarzu blok wymienia to, co do niego przypięto, a czas, który jeszcze został, oznacza paskiem w przerywanej ramce.
Kompromis: Sesje mogą na siebie nachodzić. Formularz nazywa konflikt, a przycisk zmienia napis, ale nic nie jest zablokowane.

Dzień w kalendarzu z rysowanym właśnie blokiem oraz blok sesji z dwoma przypiętymi zadaniami i 45 wolnymi minutami — Rys. 08Sesję rysuje się przeciągnięciem. Przypięta praca mieści się w bloku, a pasek w przerywanej ramce to czas, który jeszcze został.

Okno sesji z przypiętymi podzadaniami, wskaźnikiem wykorzystania, długością, kolorem i dniami, w które się powtarza — Rys. 09Sesja: co jest przypięte, ile jej wykorzystano, kiedy się powtarza.

(04)

Design

Ekrany

Tablica zadań z trzema kolumnami: do zrobienia, w trakcie i zrobione — Rys. 10Zadania jako tablica. Karta pokazuje tylko to, co dane zadanie ma.

Tabela zadań z grupami w trakcie i do zrobienia oraz podzadaniami pod pierwszym zadaniem — DetalTabelaTe same zadania pogrupowane według statusu. Podzadania są pod swoim zadaniem, a każdą komórkę edytuje się w miejscu: tytuł dwukrotnym kliknięciem, resztę w małym okienku wyboru.

Zadanie otwarte nad listą, z opisem, podzadaniami, checklistą, komentarzami i kolumną pól — DetalZadaniePo lewej opis, podzadania, checklista i dyskusja, po prawej pola. Zadanie otwiera się nad listą, więc po zamknięciu wraca się tam, gdzie się było.

Tydzień w kalendarzu z powtarzającymi się sesjami, przypiętymi do nich zadaniami i spotkaniami — Rys. 11Tydzień. Sesje się powtarzają, a każda pokazuje przypięte do niej zadania i czas, który jeszcze został.

Lista projektów klientów w grupach: aktywne, wstrzymane i zakończone — Rys. 12Projekty klientów pogrupowane według statusu.

Dwa ekrany telefonu: tablica zadań z jedną kolumną i menu otwarte jako wysuwany panel — Rys. 13Na telefonie: jedna kolumna naraz, menu jako wysuwany panel.

Strona dyskusji w projekcie klienta z czterema komentarzami — Rys. 14W projekcie: dyskusja.

Strona plików w projekcie klienta z sześcioma plikami i wskaźnikiem zajętego miejsca — Rys. 15W projekcie: pliki.

Cały plik

21ekranów
80komponentów
139ikon

Dwanaście ekranów desktopowych z pliku Figmy w czterech równych kolumnach: zadania, sesje, projekt klienta oraz stany pusty, ładowania i błędu — Dwanaście z 21 ekranów w pliku Figmy, wszystkie ze zmyślonymi danymi. Prywatne części narzędzia nie są udokumentowane.

(05)

System

Design system

274 zmienne w sześciu kolekcjach. Trzydzieści z nich to kolor marki: wystarczy zmienić jeden hex, a całe narzędzie pójdzie za nim.

Kolekcje zmiennych
Kolekcja	Zmienne	Tryby
Primitives	149	Jedna wartość
Brand	30	Pięć charakterów, trzy przykładowe kolory
Color	57	Light / Dark
Spacing	14	Jedna wartość
Radius	5	Jedna wartość
Typography	19	Jedna wartość

Co zmienia się między trybami
	Indigo	Emerald
Odcień 50	#F5F5FA	#F3FBF9
Odcień 500	#4136C9	#08F7AD
Odcień 700	#2D2682	#099F71
Odcień 900	#191736	#0D3F30
Status i priorytet	Stałe	Stałe
Obrys fokusu	Stały	Stały

Typografia

Geist
Regular / Medium / SemiBold / Bold

Komponenty

Przyciski, etykiety i pola formularzy
Zakładki, menu i nakładki
Wyszukiwanie i powiadomienia
Powłoka aplikacji
Wzorce zadań i projektów

W pliku

80 komponentów
139 ikon
45 stylów tekstu
18 stylów efektów

Pole koloru, dziesięć powstałych z niego odcieni z jasnością i nasyceniem oraz ta sama skala w pięciu charakterach obok przykładowych kontrolek — Rys. 16Jeden kolor na wejściu, dziesięć odcieni na wyjściu, w pięciu charakterach. Jasność i nasycenie każdego stopnia wyznacza krzywa.

(06)

Rezultat

Efekt

Jedno narzędzie, zaprojektowane i zbudowane przez jedną osobę: zadania w trzech widokach, projekty klientów, zaplanowany tydzień i interfejs, który bierze kolor z jednego pola.

Co powstało

Zadania jako tabela, tablica i kalendarz, z podzadaniami, checklistami i dyskusją
Projekty klientów z własną dyskusją, zadaniami, plikami i ustawieniami
Sesje pracy: tydzień zaplanowany w blokach czasu
Generator koloru: jeden hex, dziesięć odcieni, pięć charakterów
Design system w Figmie: 274 zmienne, 45 stylów tekstu, 80 komponentów
Dokumentacja w Figmie: 21 ekranów i 3 schematy