ZADANIE REKRUTACYJNE · GETRESPONSE
Od identyfikacji marki
do samodzielnej pracy zespołów
Moje podejście do tworzenia szablonów i narzędzi wspieranych przez AI, które pomagają Marketingowi i Sales działać sprawniej i zgodnie z marką.
Moje podejście
Spójna marka w codziennej pracy zespołów
Pokazuję, jak przełożyć identyfikację wizualną na szablony i narzędzia wspierane przez AI, które przyspieszają tworzenie materiałów i pomagają zespołom zachować spójność marki.
Priorytety:
01
Samodzielność Marketingu i Sales
02
Zasady marki zapisane w narzędziach
03
Jasne granice edycji i kontroli jakości
04
Oszczędność czasu i kosztów
01 / Priorytety wdrożenia
Od czego zacząć?
Trudno jednoznacznie ustalić priorytety bez znajomości zapotrzebowania zespołów i obecnego sposobu tworzenia materiałów. Najpierw sprawdziłbym, jak często powstają poszczególne formaty, ile czasu zajmuje ich przygotowanie i gdzie pojawia się najwięcej poprawek. Poniższe oceny traktuję więc jako wstępne założenia, uwzględniające potencjalne korzyści, złożoność wdrożenia i ryzyko błędów.
Ocena wstępna, do zweryfikowania z Marketingiem i Sales na podstawie rzeczywistych potrzeb i procesu produkcji.
Dlaczego zaczynam od social mediów?
Zacząłbym od narzędzia do tworzenia postów social media. Zakładam, że to jeden z podstawowych formatów codziennej komunikacji marki. W mojej ocenie daje dobry stosunek potencjalnych korzyści do nakładu pracy potrzebnego na wdrożenie.
Pierwsza wersja obejmowałaby statyczne grafiki oparte na zatwierdzonych szablonach. Ograniczony zakres pozwoliłby sprawdzić cały proces: od wprowadzenia treści, przez dopasowanie jej do układu, po eksport gotowego materiału.
Wypracowane komponenty, zasady i mechanizmy edycji mogłyby następnie posłużyć do budowy kolejnych narzędzi, np. do bannerów czy wybranych elementów case studies.
Powtarzalna potrzeba
Wsparcie codziennej komunikacji i ograniczenie czasu poświęcanego na podobne materiały.
Ograniczony zakres na start
Statyczne grafiki, określone formaty i zatwierdzone układy ułatwiają wdrożenie oraz kontrolę jakości.
Podstawa dalszego rozwoju
Raz opracowane komponenty i zasady mogą zostać wykorzystane w kolejnych narzędziach.
Spójność wpisana w szablon
Każdy szablon zaprojektowałbym w Figmie wraz z zasadami jego użycia, a następnie odwzorował w logice aplikacji. Użytkownik miałby swobodę edycji treści w określonych granicach, co ograniczałoby ryzyko przypadkowego odejścia od identyfikacji.
Stałe logo
Pozycja, wielkość i pole ochronne logo są zapisane w szablonie i niedostępne do swobodnej edycji.
Kontrolowana typografia
Limity znaków i dopasowanie wielkości tekstu w ustalonym zakresie pozwalają obsłużyć krótsze i dłuższe treści bez utraty czytelności.
Zabezpieczony układ
Siatka, wyrównanie elementów, hierarchia i dozwolone zestawienia kolorów wynikają z zatwierdzonego projektu.
Zdjęcia w określonych ramach
Użytkownik może podmienić zdjęcie i dostosować kadr w wyznaczonym obszarze, zachowując układ i proporcje szablonu.
Jeśli treść przekracza możliwości szablonu, narzędzie prosi o jej skrócenie lub proponuje inny układ. Nie zmniejsza tekstu bez ograniczeń.
Po sprawdzeniu wersji statycznej rozważyłbym proste animacje wybranych elementów posta. Ruch mógłby pomóc przyciągnąć uwagę, a zdefiniowane wcześniej animacje pozwoliłyby zachować kontrolę nad wyglądem materiałów.
Jak podszedłbym do kolejnych materiałów?
Dalsza kolejność zależałaby od potrzeb zespołów i wyników pierwszego wdrożenia. Każdy format wymaga nieco innego zakresu automatyzacji i kontroli.
Co sprawdzę po pilotażu?
Po pierwszym wdrożeniu porównałbym sposób pracy przed uruchomieniem narzędzia i po nim. Pozwoliłoby to ocenić, czy rozwiązanie faktycznie oszczędza czas i daje zespołom większą samodzielność.
Czas przygotowania materiału
Od wprowadzenia treści do gotowego eksportu.
Liczba poprawek
Ile zmian jest potrzebnych, zanim materiał nadaje się do wykorzystania.
Potrzeba wsparcia designera
Jaki odsetek materiałów wymaga interwencji projektanta.
Na tej podstawie zdecydowałbym, co poprawić w pierwszym narzędziu i który format wdrożyć jako następny.
02 NARZĘDZIA W PRAKTYCE
Spójna marka.
Działające narzędzia.
Jasne granice edycji.
Jak przekładam identyfikację wizualną na szablony, instrukcje dla AI i narzędzia, z których zespoły mogą korzystać samodzielnie. Dwa przykłady pokazują proces wdrożenia oraz zabezpieczenia pomagające zachować spójność materiałów.
Przykład 01 / TERADYNE Post Builder
Od szablonu w Figmie do działającego edytora
W tym podejściu zasady marki stają się częścią działania narzędzia. Szablony przygotowane w Figmie określają wygląd materiałów, a następnie ich reguły są przekładane na kod i ograniczenia edytora.
Prototyp demonstracyjny
Ten projekt powstał jako punkt wyjścia do rozmowy z Kasią Pawlik (byłą szefową ABM) o potrzebach i możliwościach docelowego narzędzia DLA TERADYNE. To wczesne demo z wieloma niedopracowanymi elementami.
Jak przekładam projekt na działające narzędzie
01
Figma: projekt i zasady
Przygotowuję szablony postów: logo, typografię, układy, tła, kolory i elementy graficzne. Określam również, które części użytkownik może edytować i jak powinny zachowywać się przy zmianie treści.
02
MCP: dostęp do projektu
Połączenie przez MCP pozwala przekazać do ChatGPT strukturę i parametry szablonów z Figmy. Projekt staje się konkretnym punktem odniesienia podczas opisywania działania edytora.
03
ChatGPT: instrukcje wdrożenia
Na podstawie projektu i moich poleceń ChatGPT pomaga opisać reguły szablonu oraz przygotować instrukcje dla Lovable. Doprecyzowuję zachowanie tekstów, zdjęć i zablokowanych elementów.
04
Lovable: działający prototyp
Instrukcje przekazuję przez kolejne połączenie MCP do Lovable, gdzie powstaje aplikacja. Porównuję jej działanie z projektem i poprawiam rozbieżności.
MCP zapewnia połączenie między narzędziami. Zgodność z projektem wymaga jasno opisanych reguł, sprawdzenia rezultatu i kolejnych poprawek.
Szablony w Figmie
(sprawdź wideo poniżej)
Elementy marki w Figmie: warianty logo i tła stanowiące podstawę szablonów.
Dwa typy postów: układy z cytatem pracownika oraz materiały promujące publikacje.
Różne formaty i kompozycje: kwadrat, poziom i pion oraz warianty rozmieszczenia tekstu i zdjęcia.
Jasna i ciemna wersja: zestaw spójnych szablonów przygotowanych jako baza do dalszego wdrożenia w edytorze.
Edytor w Lovable
(sprawdź wideo poniżej)
Wybór szablonu i formatu: przełączanie między postem z cytatem a publikacją oraz układem kwadratowym, poziomym i pionowym.
Gotowe warianty wyglądu: zmiana jasnej i ciemnej wersji oraz ustawienia tekstu po lewej lub prawej stronie.
Edycja treści z podglądem: zmiana tekstu i danych autora bez ręcznego przebudowywania grafiki.
Dodawanie i kadrowanie zdjęcia: dopasowanie fotografii wewnątrz wyznaczonej ramki przy zachowaniu układu szablonu.
Jak zasady projektu działają w praktyce?
Zdjęcie można dopasować. Rama pozostaje na miejscu.
Użytkownik może przesuwać zdjęcie wewnątrz wyznaczonego obszaru, aby poprawić kadr. Nie może samodzielnie przesunąć ani zmienić rozmiaru ramki. Dzięki temu podmiana zdjęcia zachowuje kompozycję posta.
Edytowalne: kadr zdjęcia
Zablokowane: pozycja i wymiary ramki
Dłuższy tekst, kontrolowane dopasowanie
W prototypie wielkość tekstu zmniejsza się wraz ze wzrostem jego długości, aby zachować układ posta. W docelowym narzędziu określiłbym również minimalny rozmiar fontu i maksymalną długość treści. Po przekroczeniu tych granic użytkownik otrzymałby prośbę o skrócenie tekstu.
Automatyczne: dopasowanie wielkości tekstu
Docelowe zabezpieczenie: limit długości i minimalny rozmiar fontu
Co pokazuje ten przykład?
To demonstracja sposobu przełożenia projektu na narzędzie samoobsługowe. Część zasad marki można zapisać jako stałe parametry i ograniczenia edytora, dzięki czemu użytkownik nie musi podejmować każdej decyzji projektowej samodzielnie. AI wspiera interpretację i wdrożenie tych zasad, a ich poprawne działanie sprawdzam na konkretnych przykładach.
Przykład 02 / RTB HOUSE CHART STUDIO
RTB House Chart Builder: dane w ramach identyfikacji marki
Narzędzie, które buduję, pozwala samodzielnie tworzyć wykresy na podstawie gotowych szablonów lub odtworzyć je z obrazu przy wsparciu AI. Zasady wizualne są wpisane w edytor, dzięki czemu użytkownik może skupić się na danych i przekazie.
Stała typografia: brak możliwości zmiany fontu pomaga zachować spójność z identyfikacją.
Ograniczona kolorystyka: użytkownik wybiera spośród przygotowanych palet i wariantów wyróżnienia danych.
Gotowe szablony: określają wygląd wykresów, a dostępne ustawienia pozwalają dopasować je bez projektowania od zera.
Weryfikacja importu AI: przed zastosowaniem odczytanych danych użytkownik może sprawdzić i poprawić wartości oraz zobaczyć podgląd wykresu.
Work in progress
Narzędzie jest nadal w rozwoju, po pierwszej fazie testów. Wstępny feedback jest bardzo pozytywny, a zebrane uwagi wykorzystuję do dalszych usprawnień.
Co pokazuje ten przykład?
To przykład przełożenia wytycznych marki na codzienny proces samoobsługowy. Ograniczenia edytora wspierają spójność wizualną, a etap weryfikacji pomaga wychwycić błędy odczytu AI. Poprawność danych nadal wymaga sprawdzenia przez użytkownika.
Co użytkownik może zmienić?
Zakres edycji dopasowuję do rodzaju materiału. Użytkownik może zmieniać treść i korzystać z przygotowanych wariantów, a zasady wizualne są zapisane w narzędziu.
TERADYNE Post Builder
Edytować cytat, imię i stanowisko w granicach pól
Fonty, hierarchię i sposób dopasowania tekstu
Wybierać dostępny format i układ tekstu
Siatkę oraz rozmieszczenie elementów w danym wariancie
Przełączać jasny i ciemny wariant
Kolorystykę i tła przypisane do szablonu
Dodawać zdjęcie i dopasowywać jego kadr
Pozycję i wymiary ramki zdjęcia
Wybierać dostępny typ posta
Logo, jego proporcje i położenie w szablonie
RTB House Chart Builder
Wprowadzać i poprawiać dane
Sposób ich wizualnego przedstawienia w wybranym szablonie
Edytować tytuł, opisy i etykiety
Krój pisma zgodny z identyfikacją
Wybierać gotowe szablony wykresów
Wygląd i ustawienia bazowe poszczególnych wariantów
Wybierać dostępne palety i wyróżnienia danych
Zakres kolorów dostępnych w edytorze
Importować wykres z obrazu przy wsparciu AI
Etap sprawdzenia i korekty odczytanych danych przed ich zastosowaniem
Ograniczenia wizualne nie gwarantują poprawności danych. Użytkownik sprawdza wartości odczytane przez AI oraz to, czy wybrany wykres właściwie przedstawia informacje.
Kiedy potrzebny
jest designer?
Designer jest potrzebny, gdy materiał wykracza poza dostępne szablony: wymaga nowego układu, formatu, sposobu prezentacji danych lub dodatkowej obróbki grafiki. Zatwierdza również nowe szablony i zmiany zasad przed udostępnieniem ich zespołom.
Osoba przygotowująca materiał odpowiada za poprawność treści i danych oraz możliwość wykorzystania zdjęć i innych materiałów.
05 / PYTANIA DO AGENCJI
Co trzeba ustalić przed wdrożeniem z agencją dostarczającą rebranding?
01 Stałe zasady i dopuszczalne warianty
Chciałbym ustalić, które elementy należy zablokować w narzędziu, a gdzie użytkownik może mieć swobodę. Dotyczy to m.in. logo, kolorystyki, typografii i kompozycji.
02 Materiały źródłowe do budowy szablonów
Potrzebowałbym uporządkowanej biblioteki plików i komponentów wraz z parametrami ich użycia. Ułatwi to wierne przeniesienie projektu do działającego edytora. Najlepiej działał by tutaj plik Figma, ale jeżeli nie jest to możliwę, to będę w stanie przygotować taką bibliotekę samodzielnie.
03 Zachowanie w różnych warunkach
Warto określić minimalne rozmiary tekstu, limity treści i alternatywne układy. Dzięki temu narzędzie będzie wiedziało, kiedy dopasować kompozycję, a kiedy poprosić o skrócenie tekstu lub wsparcie designera.
04 Przykłady poprawnego i błędnego użycia
Zatwierdzone przykłady z krótkim uzasadnieniem pomogą przełożyć ogólne wytyczne na konkretne instrukcje dla AI i kryteria oceny rezultatów.
05 Licencje i zakres wykorzystania
Chciałbym potwierdzić możliwość osadzania fontów i grafik w aplikacji oraz przekazywania materiałów do narzędzi AI. Pozwoli to dobrać zasoby do planowanego sposobu pracy.