// case study · platforma lekta ai · moduł conversations

Tagging Panel

Przeprojektowanie tagowania tak, żeby zespoły przestały tracić z oczu rozmowę, którą tagują.

conversations — tagging without losing the conversation

rola: Senior Product Designer · jedyny projektant
czas: ~1 miesiąc
zespół: CTO · backend devowie · zespół anotatoró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 pracę anotatorom działają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 przy pojedynczych wypowiedziach.

// wynik

Tagowanie bez utraty kontekstu, komponenty użyte ponownie w całej platformie i doświadczenie spójne z design systemem.

fig. 01

kontekst

Tagging Panel to podmoduł Conversations — wewnętrznego narzędzia Lekty do przeglądania interakcji bot–user i zarządzania nimi. Jako część większej platformy AI pomaga zespołom oznaczać prawdziwe rozmowy, żeby ulepszać trening modelu. Etykiety idą wprost do rozpoznawania intencji — jakość tagowania przekłada się na jakość bota.

// kto siedział w tym codziennie

anotatorzy 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

pilnowali postępu i jakości anotacji, żeby przewidzieć zmiany w modelu

zespół r&d

wykorzystywał wyniki w eksperymentach poprawiających rozpoznawanie intencji

fig. 02

problem

Interfejs tagowania zasłaniał

dokładnie to, co było tagowane.

// przed — Lekta Platform Emerald: flyout tagów (po prawej) zasłaniał tagowaną rozmowę

// 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 rzucał się w oczy od razu: flyout tagowania łamał kontekst usera, zasłaniając widok rozmowy.
◈ więcej szczegółów◈ zwiń
Audyt wyłapał też mniejsze długi: nierówne 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 potrafi, 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, żeby wiedzieć, które ograniczenia to realne ściany, a które tylko domyślne ustawienia, których nikt nie podważył.
Panel boczny + skategoryzowane, wyszukiwalne tagi
Flyout stał się panelem bocznym, który nigdy nie zasłania rozmowy. Płaska, alfabetyczna lista zamieniła się w skategoryzowane grupy z wyszukiwarką — zbudowane jako współdzielony komponent, użyty potem w innych narzędziach platformy.
◈ więcej szczegółów◈ zwiń
Kategorie wzięły się z tego, jak anotatorzy naprawdę myśleli o tagach — po funkcji w rozmowie, nie po nazwie. Wyszukiwarkę zaprojektowałem pod rozpoznawanie (częściowe dopasowania, podpowiedzi kategorii), bo anotatorzy 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 wzrokiem, a nie stan, w który trzeba wchodzić.
Prototyp, handoff, wsparcie wdrożenia
Pełny prototyp, finalny UI i wsparcie developerów przy 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

Anotatorzy 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 trafiły do innych części 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ą anotatorzy 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

Wyniosłem roboczą typologię procesów konwersacyjnych i tego, jak userzy przekopują się przez duże ilości danych — wiedzę, która ukształtowała moje późniejsze decyzje projektowe w całej platformie.

Sprawiłeś, że cały zespół zobaczył, że dobrze ułożony proces służy każdemu.

— Arek · CTO · Lekta AI

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:

LinkedIn ↗