Projekt komercyjny · UX/UI Design · grudzień 2025 - czerwiec 2026
Strona produktowa z kontekstowym czatem dla narzędzia AI
Zaprojektowałam strukturę i warstwę wizualną całej strony Verisearch, pracując na treściach i scenariuszach dostarczonych przez klienta. Strona miała nie tylko przedstawiać ofertę, ale też pokazywać działanie produktu podczas jej przeglądania.
Projekt obejmował też demo e-commerce, dwustopniowy konfigurator, ścieżki kontaktu oraz dostosowanie najważniejszych interakcji do urządzeń mobilnych.
01
Verisearch to narzędzie AI wspierające komunikację z klientami na stronie oraz w zewnętrznych kanałach.
Klient dostarczył rozbudowane treści o produkcie, komunikaty czatu i scenariusze demo. Moim zadaniem było uporządkować je w spójną strukturę strony, która nie tylko przedstawia ofertę, ale też pokazuje produkt w działaniu.
Czat pojawiał się w kluczowych miejscach i zmieniał treść zależnie od kontekstu. Dzięki temu użytkownik mógł poznawać Verisearch podczas przeglądania strony, bez przechodzenia do osobnego demo.
Klient dostarczył scenariusze dla e-commerce i biura podróży. W tej wersji projektu opracowaliśmy wariant e-commerce, a scenariusz biura podróży pozostał poza zakresem.
02
Czat był częścią demo produktu i zmieniał treść zależnie od miejsca na stronie. Powiązałam dostarczone przez klienta komunikaty z konkretnymi sekcjami i stanami, tak aby rozmowa odnosiła się do tego, co użytkownik właśnie oglądał.
Najbardziej rozbudowany wariant powstał w sekcji „Zastosowania”, gdzie treść czatu zmieniała się również wraz z aktywną zakładką.
Czat nie otwierał się od razu jako duży panel zasłaniający stronę. Najpierw widoczny był niewielki przycisk, potem krótkie zagajenie, a pełna rozmowa rozwijała się dopiero po interakcji użytkownika.
Dzięki temu można było najpierw zapoznać się ze stroną, a dopiero potem zdecydować o otwarciu czatu.
Zmiana zakładki aktualizowała zarówno treść sekcji, jak i komunikaty w czacie. Rozmowa odnosiła się do wybranego obszaru: Sprzedaży, Obsługi 24/7, Komunikacji lub Analityki.
Ten sam komponent prowadził więc inną rozmowę zależnie od aktywnej zakładki, bez tworzenia czterech osobnych bloków.
Czat nie był tu stale widoczny. Otwierał się dopiero po kliknięciu „Zamów demo” albo „Zamów indywidualną wycenę” i prowadził przez kolejny krok bez otwierania osobnego formularza.
Dzięki temu także zamówienie demo pokazywało działanie Verisearch.
W sekcji Kontakt czat pomagał wybrać temat rozmowy:
W zależności od wyboru prowadził do odpowiedzi albo krótkiego formularza.
03
Obok czatu działającego na stronie Verisearch zaprojektowałam osobne demo pokazujące kontakt z tą samą klientką w kilku kanałach.
Klient dostarczył scenariusze dla e-commerce i biura podróży. W tej wersji projektu opracowałam wariant e-commerce, a drugi scenariusz pozostał poza zakresem.
Zamiast pokazywać kilka niezależnych ekranów, ułożyłam demo jako jedną historię: od komentarza na Facebooku, przez rozmowę na stronie produktu, po obsługę zamówienia w Messengerze i odpowiedź na opinię w Google.
Pytanie przed zakupem
Klientka pyta w komentarzu o marynarkę w konkretnym kolorze. Odpowiedź AI kieruje ją do odpowiedniego produktu w sklepie.
Rozmowa w kontekście produktu
Klientka trafia na stronę produktu, gdzie może kontynuować rozmowę i dopytać o zakup.
Dla fikcyjnego sklepu Boutique Lavenda przygotowałam neutralną oprawę wizualną, która nie konkurowała z interfejsem Verisearch.
Sprawdzenie statusu zamówienia
Po zakupie klientka pyta w Messengerze o termin dostawy. Po podaniu numeru zamówienia i PIN-u otrzymuje aktualny status przesyłki.
Odpowiedź na opinię klientki
Historia kończy się opinią pozostawioną w Google i odpowiedzią przygotowaną przez Verisearch.
04
Pierwotny konfigurator wymagał wielu decyzji, zanim pokazywał cenę. Użytkownik musiał określić skalę ruchu, wielkość bazy wiedzy, kanały i limity rozmów, a także wybrać opcje związane z utrzymaniem i dodatkowym wsparciem.
Sposób uproszczenia cennika ustaliliśmy wspólnie z klientem. Usunęliśmy trzeci krok dotyczący utrzymania i wsparcia, a ja przełożyłam nową logikę na dwustopniowy konfigurator, jego stany i dalszą ścieżkę do zamówienia demo.
W pierwszym kroku użytkownik wybierał przybliżony poziom ruchu i wielkość bazy wiedzy. Cena aktualizowała się na bieżąco.
W drugim dodawał kanały komunikacji. Czat i proaktywny doradca były już uwzględnione w cenie bazowej, a podsumowanie pokazywało koszt dodatkowych kanałów, rabat i cenę końcową.
Cena była wyliczana automatycznie na podstawie wybranej skali działania i dodatkowych kanałów.
Po dodaniu co najmniej dwóch dodatkowych kanałów konfigurator uwzględniał rabat pakietowy i aktualizował cenę.
Przy największej skali ruchu konfigurator nie wyliczał ceny automatycznie. Zamiast tego pokazywał stan „Wycena indywidualna” i prowadził do kontaktu.
Po sprawdzeniu konfiguracji kolejnym krokiem było zamówienie demo. Zaprojektowałam ten etap jako krótką rozmowę w tym samym panelu.
Po kliknięciu „Zamów demo” czat prosił o adres strony WWW i e-mail. Przy konfiguracji wymagającej indywidualnej wyceny główna akcja zmieniała się na „Zamów indywidualną wycenę”.
05
Sekcja Kontakt służyła do pytań o demo, wdrożenie, automatyzację obsługi i współpracę partnerską. Zamiast od razu pokazywać formularz, czat proponował gotowe tematy i prowadził dalej zależnie od wyboru.
Czat proponował cztery gotowe tematy:
Można było też od razu wpisać własne pytanie.
Po wybraniu ścieżki wdrożeniowej czat wyświetlał krótki brief. Po wysłaniu danych potwierdzał ich przyjęcie i pozwalał kontynuować rozmowę.
06
Widoki mobilne były adaptacją wersji desktopowej, ale samo zwężenie układu nie wystarczało. Na mniejszym ekranie inaczej trzeba było rozwiązać rozwijanie czatu, konfigurator i korzystanie z demo e-commerce.
Skupiłam się na trzech decyzjach, które pozwalały zachować funkcjonalność tych elementów bez przeciążania ekranu.
Czat nadal był częścią demo, ale po otwarciu nie powinien całkowicie zasłaniać strony.
Dlatego w stanie zamkniętym zajmował niewiele miejsca, a po rozwinięciu około 85% wysokości ekranu. Fragment strony nadal pozostawał widoczny.
Na mobile pełny zestaw etykiet pod suwakami był zbyt gęsty. Ograniczyłam liczbę widocznych etykiet, bez zmiany zakresu ani dostępnych wartości.
Ponieważ konfigurator wymagał przewijania, aktualną cenę i CTA „Zamów demo” umieściłam w panelu przyklejonym do dolnej krawędzi ekranu.
Na mobile pytania demonstracyjne znajdowały się nad czatem, więc mogło nie być jasne, gdzie pojawi się odpowiedź.
Dodałam w rozmowie krótką wskazówkę: Wybierz pytanie z panelu powyżej, aby zobaczyć odpowiedź AI.
07
Po zaprojektowaniu kluczowych widoków uporządkowałam powtarzalne elementy w Figmie, tak aby można było korzystać z nich w różnych częściach projektu.
Przygotowałam warianty przycisków, pól formularzy i elementów czatu dla stanów używanych w projekcie oraz wersji desktopowych i mobilnych.
W przypadku czatu obejmowały one także widok zwinięty i rozwinięty na mobile. Dzięki temu tych samych elementów nie trzeba było za każdym razem tworzyć od początku.
Czat przygotowałam w dwóch wersjach wizualnych: ciemnej, używanej na stronie Verisearch, oraz jasnej, przeznaczonej do osadzania na stronach klientów.
Obie miały tę samą strukturę i zestaw stanów, ale różniły się kolorystyką dopasowaną do miejsca użycia.
Finalne widoki, komponenty, warianty i assety uporządkowałam w osobnych częściach pliku. Style i variables były dostępne bezpośrednio w Figmie.
Dzięki temu potrzebne ekrany i stany można było łatwo odnaleźć podczas dalszej pracy nad projektem.
08
W Verisearch połączyłam treści i scenariusze dostarczone przez klienta w spójną stronę produktową, która nie tylko przedstawia ofertę, ale też pokazuje działanie produktu.
Finalne widoki zostały zaakceptowane przez klienta, a strona jest obecnie w trakcie wdrożenia.
Powiązałam treści strony z komunikatami czatu, dzięki czemu rozmowa zmieniała się zależnie od kontekstu. Osobne demo e-commerce ułożyłam jako historię jednej klientki prowadzoną przez kilka kanałów kontaktu.
Wspólnie z klientem uprościliśmy cennik do dwóch kroków i trzech scenariuszy wyceny. Na tej podstawie zaprojektowałam ścieżki prowadzące do zamówienia demo, indywidualnej wyceny i kontaktu przez czat.
Dostosowałam najważniejsze interakcje do mniejszych ekranów oraz przygotowałam komponenty i warianty powtarzalnych elementów.