Strona produktowa z kontekstowym czatem dla narzędzia AI
Zaprojektowałam strukturę i interakcje strony, która przedstawia ofertę Verisearch i pokazuje działanie produktu podczas przeglądania kolejnych sekcji.
Zakres projektu obejmował także demo e-commerce, dwustopniowy konfigurator, ścieżki kontaktu oraz dostosowanie najważniejszych interakcji do urządzeń mobilnych.
01
Verisearch wspiera komunikację z klientami na stronie i w zewnętrznych kanałach.
Klient przekazał rozbudowane treści o produkcie. Moim zadaniem było ułożyć je w strukturę strony i połączyć z interaktywnym czatem.
Strona miała jednocześnie wyjaśniać ofertę i pokazywać działanie Verisearch podczas przeglądania kolejnych sekcji.
Czat został połączony z kluczowymi sekcjami i zmieniał komunikaty zależnie od oglądanej treści. Dzięki temu użytkownik poznawał działanie Verisearch podczas przeglądania oferty, bez przechodzenia do osobnego demo.
Klient dostarczył scenariusze dla e-commerce i biura podróży. W tym zakresie opracowaliśmy wariant e-commerce. Scenariusz dla biura podróży pozostał poza projektem.
02
Czat został osadzony bezpośrednio na stronie Verisearch i sam stał się częścią demo produktu. Nie prowadził jednej, stałej rozmowy — jego treść zmieniała się w zależności od miejsca, w którym znajdował się użytkownik.
Dostarczone przez klienta komunikaty powiązałam z treścią konkretnych sekcji, tak aby rozmowa zawsze odnosiła się do tego, co użytkownik właśnie oglądał.
Najbardziej rozbudowany wariant powstał w sekcji „Zastosowania”, gdzie komunikaty czatu zmieniały 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, następnie pojawiało się krótkie zagajenie, a pełna rozmowa rozwijała się dopiero po interakcji użytkownika.
Dzięki temu użytkownik mógł najpierw zapoznać się ze stroną, a następnie 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ę w zależności od aktywnej zakładki, bez powtarzania czterech niemal identycznych bloków na stronie.
W sekcji Cennik czat nie był stale widoczny. Otwierał się po kliknięciu „Zamów demo” albo „Zamów indywidualną wycenę” i prowadził użytkownika przez kolejny krok bez przechodzenia do osobnego formularza.
Dzięki temu samo zamówienie demo również pokazywało sposób działania Verisearch.
W sekcji Kontakt czat pomagał wybrać temat rozmowy:
W zależności od wyboru prowadził do odpowiedzi lub krótkiego formularza.
03
Obok czatu kontekstowego działającego na stronie Verisearch zaprojektowałam osobny scenariusz demo, pokazujący kontakt z tą samą klientką w kilku kanałach.
Klient dostarczył scenariusze dla sklepu e-commerce i biura podróży. W tej wersji projektu opracowałam wariant e-commerce, a scenariusz dla biura podróży pozostał poza zakresem.
Zamiast prezentować niezależne ekrany, 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
Marka publikuje post promujący wiosenne marynarki. Klientka pyta w komentarzu o model w kolorze butelkowej zieleni, a odpowiedź AI kieruje ją do konkretnego produktu w sklepie.
Rozmowa w kontekście produktu
Klientka trafia na stronę zielonej marynarki, gdzie może kontynuować rozmowę i dopytać o produkt oraz zakup.
Dla fikcyjnego sklepu Boutique Lavenda przygotowałam neutralną oprawę wizualną, aby nie konkurowała z interfejsem Verisearch.
Sprawdzenie statusu zamówienia
Po zakupie klientka pyta w Messengerze o termin dostawy. AI prosi o numer zamówienia i PIN, a następnie podaje aktualny status przesyłki.
Ten etap pokazuje dalszą obsługę tej samej osoby już poza stroną sklepu.
Odpowiedź na opinię klientki
Historia kończy się opinią pozostawioną w Google i odpowiedzią właściciela przygotowaną przez Verisearch.
W widokach Messengera i Google pozostałam blisko ich rzeczywistego wyglądu, zamiast dostosowywać je do stylistyki Verisearch.
04
Pierwotny konfigurator wymagał zbyt wielu decyzji, zanim pokazywał sensowną cenę. Trzeba było określić skalę ruchu, wielkość bazy wiedzy, kanały i limity rozmów, a także zdecydować o utrzymaniu i dodatkowym wsparciu - choć osoba poznająca produkt często nie znała jeszcze swoich potrzeb.
Sposób uproszczenia cennika ustaliliśmy wspólnie z klientem. Usunęliśmy trzeci krok dotyczący utrzymania i wsparcia, ponieważ zwiększał niepewność i nie pasował do obietnicy szybkiego wdrożenia. Moim zadaniem było przełożenie nowej logiki na dwustopniowy konfigurator, jego stany oraz dalszą ścieżkę prowadzącą do zamówienia demo.
W pierwszym kroku użytkownik wybierał przybliżony poziom ruchu i wielkość bazy wiedzy. Nie musiał znać dokładnych wartości, a cena po prawej aktualizowała się na bieżąco.
W drugim kroku dodawał kanały komunikacji. Czat i proaktywny doradca na stronie były już uwzględnione w cenie bazowej. Podsumowanie pokazywało osobno cenę bazową, koszt dodatkowych kanałów, rabat i cenę końcową.
Cena była wyliczana automatycznie na podstawie wybranej skali działania i dodatkowych kanałów.
Jeszcze przed wyborem kanałów podsumowanie informowało, że dodanie co najmniej dwóch aktywuje rabat pakietowy. Po dokonaniu wyboru rabat pojawiał się razem z aktualną ceną.
Przy największej skali ruchu konfigurator nie próbował wyliczać ceny, której nie dało się wiarygodnie określić. Zamiast tego pokazywał stan „Wycena indywidualna” i prowadził do kontaktu.
Po sprawdzeniu konfiguracji użytkownik nie przechodził do standardowego checkoutu, ponieważ kolejnym krokiem nie był jeszcze zakup, lecz zamówienie demo. Zaprojektowałam ten etap jako krótką rozmowę prowadzoną w tym samym panelu.
Po kliknięciu „Zamów demo” czat prosił tylko o dwie informacje: adres strony WWW i e-mail. Zamówienie demo samo stawało się więc przykładem działania Verisearch - zamiast otwierać osobny formularz, produkt prowadził użytkownika przez kolejny krok w rozmowie.
W przypadku konfiguracji wymagającej indywidualnej wyceny główna akcja zmieniała się na „Zamów indywidualną wycenę”.
05
W Cenniku użytkownik zamawiał demo, a w sekcji Kontakt mógł najpierw zapytać o demo lub wdrożenie. Po wybraniu odpowiedniego tematu czat prowadził go do krótkiego briefu.
Zamiast zaczynać od pustego pola, czat proponował cztery gotowe tematy:
Użytkownik mógł 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 trzeba było inaczej rozwiązać rozwijanie czatu, obsługę konfiguratora 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 pozostawał częścią demo również na mobile, ale po otwarciu nie mógł całkowicie zasłonić elementów strony potrzebnych do interakcji.
Dlatego w stanie zamkniętym zajmował niewiele miejsca, a po rozwinięciu około 85% wysokości ekranu. Fragment strony nadal pozostawał widoczny i dostępny.
Na mobile pełny zestaw etykiet pod suwakami był zbyt gęsty. Ograniczyłam liczbę widocznych etykiet, nie zmieniając 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, dlatego 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 jako komponenty i warianty w pliku Figma.
Uwzględniłam ich różne stany oraz wersje desktopowe i mobilne, aby zachować spójność w całym projekcie.
Przygotowałam warianty przycisków, pól formularzy i elementów czatu. Warianty obejmowały różne stany interfejsu oraz wersje desktopowe i mobilne, w tym zwinięty i rozwinięty czat na mobile.
Czat przygotowałam w dwóch wersjach wizualnych: ciemnej, używanej na stronie Verisearch, oraz jasnej, przeznaczonej do osadzania na stronach klientów.
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.
08
W projekcie Verisearch moim zadaniem było uporządkowanie treści i scenariuszy dostarczonych przez klienta oraz zaprojektowanie strony, która pokazuje działanie produktu podczas jej przeglądania.
Opracowałam strukturę strony, powiązałam jej sekcje z kontekstowym czatem i zaprojektowałam ścieżki prowadzące od poznania produktu, przez demo i konfigurację, aż do zamówienia demo lub kontaktu.
Połączyłam treści produktowe z czatem działającym w kontekście strony. 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 logikę cennika. Na tej podstawie zaprojektowałam dwustopniowy konfigurator oraz ścieżki zamówienia demo, indywidualnej wyceny i kontaktu przez czat.
Dostosowałam najważniejsze interakcje do mniejszych ekranów. Przygotowałam również komponenty, warianty i uporządkowałam plik w Figmie, aby potrzebne widoki i stany można było łatwo odnaleźć.