Wszystkie projekty
Case study · 2026

Redesign edytora kampanii wsparty AI

Projekt oparty na szybkim prototypowaniu z pomocą AI/Codexa. Celem było skrócenie czasu od koncepcji do kickoffu i szybsze sprawdzanie złożonych interakcji przed wdrożeniem.

Rola
UX/UI Designer
Zakres
Research konkurencji, definiowanie flow i use case’ów oraz projektowanie UI
Zespół
Product Manager, Frontend, Backend
Narzędzia
Codex, Miro
Canvas edytora kampanii — rozbudowana ścieżka z krokami email, LinkedIn i warunkiem aplikacja / edytor kampanii — canvas
Problem

Dotychczasowy edytor kampanii był oparty na liniowym flow z jednym warunkiem.

Nie pozwalał swobodnie budować rozbudowanych ścieżek ani wielu rozgałęzień.

Celem projektu było zaprojektowanie nowego edytora opartego na elastycznym canvasie - z obsługą wielu warunków i czytelnym widokiem całej kampanii.

Proces

Proces po nowemu
Prototyp w kilka dni, nie tygodni

01
Analiza

Zrozumienie ograniczeń starego edytora

Przegląd liniowego flow i problemów z budowaniem bardziej rozbudowanych kampanii.

02
Prototyp i iteracje

Działający prototyp bez Figmy

Projekt był omawiany z zespołem bezpośrednio na klikalnym prototypie tworzonym z pomocą AI/Codexa, komentowanym w Miro.

03
Doprecyzowanie i wdrożenie

Szybsze przejście do developmentu

Po feedbacku uprościliśmy rozwiązanie, usunęliśmy zbędne lub trudne technicznie elementy i szybciej domknęliśmy decyzje przed wdrożeniem.

Tablica Miro z przeglądem prototypu edytora kampanii — kolejne wersje i feedback zespołu Codex i Miro jako toole zamiast Figmy
Główne założenia projektu

Kluczowe elementy nowego edytora

01 / Elastyczny canvas

Budowanie kampanii bez sztywnej, liniowej struktury

Przed zmianą

Liniowy układ kroków - jedna ścieżka, pozwalająca tylko na jeden warunek

Widok obecnego edytora — jedna liniowa ścieżka kroków edytor kampanii / przed zmianą — liniowe kroki

Po zmianie

Canvas z dowolną liczbą ścieżek i gałęzi kampanii.

Widok canvasu nowego edytora z rozbudowaną ścieżką i wieloma gałęziami edytor kampanii / po zmianie — canvas
02 / Edycja kroku

Sidebar bez utraty kontekstu kampanii

Przed zmianą

Kroki kampanii były ułożone na długiej stronie, przez co trudniej było zobaczyć całe flow w jednym kontekście. Przy bardziej rozbudowanej kampanii poruszanie się między elementami wymagało dużo scrollowania.

Modal edycji kroku otwierający się na osobnym ekranie edytor kampanii / przed zmianą — edycja kroku

Po zmianie

Sidebar edycji kroku otwarty obok canvasu, bez utraty kontekstu.

Sidebar edycji kroku otwarty obok widocznego canvasu edytor kampanii / po zmianie — edycja kroku w sidebarze
03 / Struktura edytora

Taby zamiast długiej, scrollowanej strony

Przed zmianą

Kluczowe sekcje kampanii były ułożone jedna pod drugą na długiej stronie, więc użytkownik musiał scrollować, żeby przejść do ustawień, prospektów lub podsumowania.

Stary edytor kampanii z liniowym układem zakładek Path, Prospects, Summary edytor kampanii / przed zmianą — sekcje kampanii

Po zmianie

Najważniejsze obszary kampanii zostały przeniesione do tabów na górze ekranu, dzięki czemu użytkownik mógł szybciej przełączać się między nimi.

Nowy edytor kampanii z zakładkami Sequence, Workflows, Settings, Summary edytor kampanii / po zmianie — nawigacja w zakładkach
04 / Wiele warunków

Obsługa bardziej złożonych scenariuszy

Przed zmianą

Kampania mogła opierać się na prostym scenariuszu z jednym warunkiem, bez swobodnego budowania wielu wariantów zachowania.

Stary edytor z pojedynczym warunkiem — email, wait 3 days, jeden warunek Yes/No edytor kampanii / przed zmianą — pojedynczy warunek

Po zmianie

Edytor pozwalał tworzyć bardziej rozbudowane flow z wieloma warunkami i różnymi ścieżkami zależnie od reakcji prospecta.

Nowy edytor z rozbudowanym warunkiem — wiele reguł AND i różne ścieżki edytor kampanii / po zmianie — rozbudowane warunki
05 / Statystyki kampanii

Lepszy podgląd wyników kampanii

Przed zmianą

Dostęp do wyników kampanii był mniej powiązany z pracą nad edytorem i wymagał przechodzenia do osobnego widoku lub sekcji.

Statystyki kampanii w osobnym widoku Stats — general, email, wykres statystyki kampanii / przed zmianą — rozproszony widok danych

Po zmianie

Statystyki stały się częścią struktury edytora, dzięki czemu użytkownik mógł szybciej sprawdzić wyniki i wrócić do edycji kampanii.

Statystyki kampanii w taboku Stats — campaign performance, email performance, LinkedIn performance statystyki kampanii / po zmianie — uporządkowany widok wyników
06 / Lista kampanii

Więcej kampanii widocznych na liście

Przed zmianą

Lista była bardziej rozciągnięta pionowo, a pojedynczy wiersz zajmował dużo miejsca. Przy większej liczbie kampanii oznaczało to więcej scrollowania i mniej wygodne porównywanie wyników.

Stara lista kampanii z rozciągniętymi wierszami lista kampanii / przed zmianą — podstawowe informacje

Po zmianie

Wiersze zostały uproszczone i lepiej wykorzystują dostępną przestrzeń. Użytkownik widzi więcej kampanii na jednym ekranie i może szybciej porównać ich stan oraz wyniki.

Nowa lista kampanii ze skondensowanymi wierszami lista kampanii / po zmianie — statusy i szybkie akcje
Edge cases & stany

Scenariusze
dodatkowe

01 / Preview wiadomości

Podgląd z poziomu konkretnego kroku

Użytkownik mógł sprawdzić wygląd wiadomości bez wychodzenia z miejsca, w którym edytuje dany krok.

Modal preview kroku z wariantami A/B i podglądem treści wiadomości edytor kampanii / preview
02 / Generate with AI

Generowanie treści z poziomu edytora

Modal pozwalał tworzyć treść wiadomości na dwa sposoby: przez zwykły prompt albo z użyciem gotowych frameworków copywriterskich, takich jak PAS, BAB czy 4T.

Modal Choose a framework z opcjami PAS, BAB, 4T edytor kampanii / generowanie tresci
03 / Ustawienia workflow

Kontrola zachowania kampanii z poziomu edytora

Opcje wpływające na działanie kampanii zostały pokazane bliżej miejsca, w którym użytkownik buduje flow. Dzięki temu łatwiej było zrozumieć, jak ustawienia wpływają na wysyłkę i kolejne kroki ścieżki.

Workflows tab z opcją Set up workflows for prospects edytor kampanii / workflows
04 / Hinty w edytorze

Pomoc bez wychodzenia z flow

Podpowiedzi były osadzone w kontekście konkretnego kroku lub ustawienia. Dzięki temu użytkownik mógł zrozumieć problem i poprawić kampanię bez przechodzenia do bloga z helpem.

Step insights panel z podpowiedziami o follow-up wiadomościach i snippetach edytor kampanii / hints
Efekt

Proces projektowy został znacząco skrócony, co przełożyło się również na szybsze wdrożenie. Praca na działającym prototypie pozwoliła wcześniej podjąć kluczowe decyzje i ograniczyć liczbę zmian na późnym etapie developmentu.

Dzięki temu gotowe rozwiązanie mogło trafić do produktu znacznie szybciej niż w klasycznym procesie opartym na pełnym zestawie makiet.

Następny projekt
Zakup domen i skrzynek
Zobacz