// case study · platforma lekta ai · moduł conversations
Tagging Panel
Przeprojektowanie tagowania tak, żeby zespoły przestały tracić z oczu rozmowę, którą tagują.
- rola
- Senior Product Designer · jedyny projektant
- czas
- ~1 miesiąc
- zespół
- CTO · backend devowie · zespół annotatorów
- firma
- Lekta AI — conversational AI SaaS
- zakres
- przeprojektowanie istniejącego MVP
// problem
Flyout tagowania zasłaniał rozmowę, którą się tagowało, a płaska, alfabetyczna lista tagów spowalniała analizę annotatorom pracującym na skalę.
// podejście
Panel boczny zamiast flyoutu, skategoryzowana i wyszukiwalna lista tagów, oraz tagi pokazane wprost na liście rozmów i pojedynczych wypowiedziach.
// wynik
Tagowanie bez utraty kontekstu, komponenty użyte ponownie w całej platformie i spójne doświadczenie zgodne z design systemem.
fig. 01
kontekst
Tagging Panel to podmoduł Conversations — wewnętrznego narzędzia Lekty do przeglądania i zarządzania interakcjami bot-user. Jako część większej platformy AI pomaga zespołom oznaczać prawdziwe rozmowy, żeby ulepszać trening modelu. Etykiety trafiają wprost do rozpoznawania intencji — jakość tagowania kształtuje jakość bota.
// kto pracował w tym codziennie
annotatorzy danych
codziennie oznaczali dane treningowe — potrzebowali szybszego, spójnego procesu
badacze ai
analizowali wyniki tagowania i wpływ jakości danych na model
projektanci i pm-owie
monitorowali postęp i jakość annotacji, by przewidzieć zmiany w modelu
zespół r&d
używał wyników w eksperymentach poprawiających rozpoznawanie intencji
fig. 02
problem
Interfejs tagowania zasłaniał
dokładnie to, co było tagowane.
// ograniczenia
- ~1 miesiąc na projekt
- struktura węzłów backendu była zamrożona
- pełna zgodność z design systemem platformy
- brak bezpośredniej pętli feedbacku z użytkownikami końcowymi
- sztywna architektura paneli ograniczała layout i interakcje
fig. 03
proces
// ślad rozumowania — każdy krok wynika z poprzedniego
Audyt istniejącego MVP
Zacząłem od zmapowania kluczowych problemów UX i niespójności z resztą platformy. Główny winowajca był oczywisty od razu: flyout tagowania łamał kontekst usera, zasłaniając widok rozmowy.
◈ więcej szczegółów◈ zwiń
Audyt wyłapał też mniejsze długi: niespójne odstępy, ad-hocowe komponenty spoza design systemu i interakcje działające inaczej niż w bliźniaczych modułach.
Zrozumienie struktury tagów
Sesje robocze z CTO i backend developerami — jak tagi mapują się na węzły danych, co system może, a czego nie. Decyzje projektowe musiały respektować zamrożoną strukturę węzłów backendu.
◈ więcej szczegółów◈ zwiń
To wzorzec, który powtarzam w każdym złożonym projekcie: zrozum system na tyle głęboko, by wiedzieć, które ograniczenia to realne ściany, a które tylko domyślne ustawienia, których nikt nie zakwestionował.
Panel boczny + skategoryzowane, wyszukiwalne tagi
Flyout stał się panelem bocznym, który nigdy nie zasłania rozmowy. Płaska, alfabetyczna lista stała się skategoryzowanymi grupami z wyszukiwarką — zbudowanymi jako współdzielony komponent, użyty potem w innych narzędziach platformy.
◈ więcej szczegółów◈ zwiń
Kategorie wzięły się z tego, jak annotatorzy naprawdę myśleli o tagach — po funkcji w rozmowie, nie po nazwie. Wyszukiwarkę zaprojektowałem pod rozpoznawanie (częściowe dopasowania, podpowiedzi kategorii), bo annotatorzy wiedzieli mniej więcej, czego szukają, a nie dokładnej nazwy tagu.
Tagi widoczne w kontekście
Największa zmiana w workflow: tagi stały się widoczne wprost na liście rozmów i przy pojedynczych wypowiedziach. Koniec z otwieraniem każdej rozmowy, żeby sprawdzić, co jest w środku.
◈ więcej szczegółów◈ zwiń
To zamieniło tagowanie z zadania modalnego w otoczeniową warstwę interfejsu — status, który skanujesz, a nie stan, w który musisz wejść.
Prototyp, handoff, wsparcie wdrożenia
Pełny prototyp, finalny UI i wsparcie developerów podczas implementacji, żeby projekt wytrzymał starcie z realną logiką danych — duże boty, długie rozmowy, brzegowe struktury tagów.
// artefakty procesu — od architektury informacji po hi-fi
kliknij dowolną klatkę, żeby otworzyć w pełnym rozmiarze
// model treści — pełna architektura informacji
// panel wyszukiwania — drzewo IA → wireframe → hi-fi
// panel tagowania — drzewo IA → wireframe → hi-fi
// model treści — pełna architektura informacji
// panel wyszukiwania — drzewo IA → wireframe → hi-fi
// panel tagowania — drzewo IA → wireframe → hi-fi
// kluczowy wniosek
Tagowanie nie powinno zasłaniać tego, co tagujesz.
fig. 04
wynik
Zachowany kontekst
Annotatorzy tagują widząc rozmowę — panel nigdy nie zasłania analizowanej treści.
// interfejs przestał walczyć z zadaniem
Komponenty przyjęte w całej platformie
Skategoryzowana lista i komponent wyszukiwarki zbudowane tutaj zostały użyte w innych częściach platformy.
// fix jednego modułu stał się wzorcem platformy
Spójny z systemem
Typografia, wzorce i zachowania interakcji zgodne z resztą platformy — koniec z jednorazowym modułem.
// spójność to funkcja, którą annotatorzy czują, a nie widzą
fig. 05
refleksje
Co powiem Ci o metrykach
Nie robiliśmy formalnych pomiarów przed/po — uczciwym dowodem jest sama zmiana workflow, widoczna na ekranach. Tam, gdzie nie ma liczb, nie wymyślam ich.
Czego nauczył mnie ten projekt
Zyskałem roboczą typologię procesów konwersacyjnych i tego, jak userzy przeszukują duże ilości danych — wiedza, która ukształtowała moje późniejsze decyzje projektowe w całej platformie.
Sprawiłeś, że cały zespół zobaczył, iż dobrze ustalony proces służy wszystkim.
Masz złożony produkt, któremu brakuje jasności?
Otwarty na długoterminowy kontrakt B2B, projekt freelance albo jednorazową konsultację.
albo napisz bezpośrednio: