Redesign SaaS bez wielkiej przebudowy - TikChat | MattMedia - case study

Redesign TikChat: ile można zmienić, nie ruszając ani jednego słowa?

W redesignie TikChat zachowałem wszystkie teksty strony, zmieniając jej oprawę wizualną i wybrane elementy panelu LIVE. Uspokoiłem kolorystykę, rozbudowałem prezentację produktu, schowałem wyszukiwarkę pod przyciskiem i zwiększyłem widoczność liczby aktualnych widzów. Ten projekt pokazuje zakres możliwych zmian w hierarchii interfejsu, bez przypisywania im niezmierzonego wzrostu sprzedaży czy rejestracji.

TikChat to mój własny produkt SaaS dla osób prowadzących transmisje LIVE na TikToku. Jego redesign objął stronę internetową i panel do obsługi czatu. Zachowałem wszystkie teksty na stronie, zmieniłem oprawę wizualną i uporządkowałem wybrane elementy interfejsu.

To przykład mojego podejścia do projektowania: zakres zmian wynika z konkretnej sytuacji, w której człowiek korzysta z produktu. W tym przypadku tą sytuacją bywa trwający właśnie LIVE.

Jak MVP TikChat pozwoliło sprawdzić zainteresowanie produktem?

MVP TikChat pozwoliło sprawdzić zainteresowanie narzędziem do czytania czatu LIVE, zanim rozbudowałem jego oprawę wizualną. Przed redesignem pojawiały się po 2-3 nowe konta dziennie z różnych krajów oraz pierwsi płacący subskrybenci. Był to sygnał do dalszego rozwijania produktu, a nie dowód skuteczności zmian wizualnych wprowadzonych na kolejnym etapie.

TikChat uruchomiłem nieco ponad miesiąc przed rozpoczęciem redesignu. Pierwsza wersja była MVP, czyli minimalną wersją produktu pozwalającą sprawdzić pomysł w praktyce.

Chciałem odpowiedzieć sobie na kilka prostych pytań: czy podstawy SEO wystarczą, żeby przyciągnąć użytkowników? Czy odwiedzający założą konta? Czy pojawi się ktoś, kto będzie chciał za ten produkt zapłacić?

Zaczęło przybywać po 2-3 konta z całego świata dziennie. Pojawili się też pierwsi płacący subskrybenci.

To był sygnał, że warto rozwijać projekt. TikChat miał już pierwszych użytkowników, więc mogłem zająć się kolejnym etapem: dopracowaniem tego, jak produkt wygląda i z jaką hierarchią pokazuje informacje.

Jak zaprojektować interfejs dla kogoś, kto właśnie prowadzi LIVE?

Interfejs dla prowadzącego LIVE powinien uwzględniać podzieloną uwagę: rozmowę z widzami, czytanie komentarzy i równoczesne sterowanie transmisją. Przy redesignie TikChat uporządkowałem priorytety informacji oraz uspokoiłem oprawę strony i panelu. Projektowałem również z myślą o osobie, która szuka narzędzia już podczas transmisji i potrzebuje szybko zrozumieć jego działanie.

Na co dzień projektuję przede wszystkim dla branży medycznej. TikChat potraktowałem więc również jako wyzwanie poza obszarem, który znam najlepiej.

Tutaj odbiorcą jest twórca internetowy. Prowadzi transmisję, rozmawia z widzami, reaguje na komentarze i próbuje utrzymać tempo spotkania. Czasami równocześnie szuka narzędzia, które pomoże mu zapanować nad czatem.

Może trafić na stronę TikChat już w trakcie LIVE.

W takiej sytuacji uwaga jest mocno podzielona. Każdy element strony konkuruje z tym, co dzieje się na transmisji. Dlatego projektując nową wersję, zależało mi na spokojniejszej oprawie i czytelniejszych priorytetach.

Od fioletu do zieleni: kolor jako decyzja projektowa

Pierwszą dużą zmianą było zastąpienie fioletu zielenią.

Lubię fiolet. Ma charakter, potrafi wyglądać odważnie i kojarzy mi się z czymś królewskim. W TikChat przestał mi jednak pasować do doświadczenia, które chciałem zbudować.

Nowa kolorystyka miała wizualnie uspokoić produkt. Zieleń wybrałem jako kierunek, którym chciałem komunikować opanowanie i zaufanie.

Czy zielony interfejs automatycznie buduje zaufanie?

Zielony kolor interfejsu sam w sobie nie gwarantuje zaufania do produktu. W TikChat był częścią szerszego kierunku projektowego: ograniczenia jaskrawości, zachowania spójności i stworzenia spokojniejszego tła dla komentarzy oraz informacji o transmisji. Opisuję to jako decyzję wizualną i założenie dotyczące uwagi użytkownika, a nie zmierzony wpływ koloru na odbiorców.

Chodziło mi o to, żeby narzędzie pomagało skupić uwagę tam, gdzie jest potrzebna.

Redesign strony internetowej bez zmiany tekstów

Na stronie zmieniłem hero i oprawę kolejnych sekcji. Nowa wersja otrzymała kolorystykę zgodną z produktem, animacje oraz efekty paralaksy. Pojawiło się też więcej wizualnych przykładów użycia TikChat.

W całym tym procesie nie zmieniłem ani jednego słowa w istniejących tekstach strony.

To istotne ograniczenie tego projektu. Pracowałem nad tym, jak treść jest przedstawiona: co użytkownik zobaczy najpierw, jak wyglądają sekcje i w jaki sposób pokazuję samo narzędzie.

Jak przykłady działania TikChat pomagają poznać produkt przed rejestracją?

Przykłady działania produktu pomagają odwiedzającemu zobaczyć interfejs i zrozumieć sposób jego używania jeszcze przed rejestracją. W redesignie TikChat rozbudowałem prezentację czatu i dodałem interaktywny prototyp fikcyjnej transmisji LIVE. Dzięki temu osoba szukająca narzędzia może obejrzeć układ informacji i sprawdzić przykładowe działanie, zamiast polegać wyłącznie na opisie funkcji.

Animacje i paralaksa nadały stronie nowy charakter. Przykłady produktu miały przybliżyć jego działanie.

Redesign panelu LIVE: spokojniejszy wygląd, wyraźniejsze priorytety

Zmiany objęły również główny panel do prowadzenia transmisji. Wcześniejsza wersja była bardziej jaskrawa. W nowej zastosowałem łagodniejsze kolory z delikatną zielenią, spójne z resztą produktu. Najciekawsze decyzje dotyczyły jednak dwóch niewielkich elementów UX.

Wyszukiwarka wiadomości trafiła pod przycisk

W poprzedniej wersji pole wyszukiwania było stale widoczne. To przydatna funkcja TikChat, ale uznałem, że podczas prowadzenia transmisji nie potrzebuje zajmować miejsca przez cały czas. Schowałem ją pod przyciskiem.

Wyszukiwanie pozostało dostępne, a dolny panel zyskał więcej przestrzeni. To świadomy kompromis: dotarcie do funkcji wymaga dodatkowego kliknięcia, za to jej pole nie konkuruje stale z pozostałymi elementami.

Takie decyzje są dla mnie ważną częścią projektowania UX. Sama obecność funkcji w produkcie nie przesądza jeszcze o tym, jak mocno trzeba ją eksponować.

Liczba widzów dostała więcej miejsca

Druga zmiana dotyczyła hierarchii statystyk.

Powiększyłem liczbę osób oglądających LIVE. Zmniejszyłem natomiast informacje o nowych obserwujących i polubieniach.

Przyjąłem, że podczas prowadzenia transmisji to aktualna liczba widzów powinna być najłatwiejsza do odczytania. Twórca może zerkać na nią na bieżąco i traktować ją jako jeden z sygnałów pomagających kontrolować tempo streama. Polubienia i nowi obserwujący nadal są widoczni. Otrzymali po prostu mniejszy priorytet wizualny.

Wielkość liczby na ekranie jest decyzją o tym, co użytkownik zauważy jako pierwsze. W panelu LIVE warto podejmować ją świadomie.

Co dał redesign TikChat?

Redesign TikChat przyniósł nową oprawę strony i panelu LIVE, spokojniejszą kolorystykę oraz wyraźniejsze priorytety w interfejsie. Wyszukiwarka trafiła pod przycisk, liczba aktualnych widzów stała się bardziej widoczna, a prezentacja produktu została rozbudowana. Na etapie opisanego case study nie miałem danych pozwalających przypisać tym zmianom wzrost rejestracji, sprzedaży lub wygody obsługi.

Powstała nowa, spójniejsza wizualnie wersja strony i panelu LIVE. Uporządkowałem kolorystykę, rozbudowałem prezentację produktu i zmieniłem hierarchię wybranych elementów interfejsu.

Na tym etapie mogę pokazać konkretne decyzje i ich efekt w projekcie. Nie mam jeszcze danych pozwalających przypisać redesignowi wzrost rejestracji, sprzedaży czy wygody obsługi.

Pierwsze konta i subskrypcje pojawiły się wcześniej. Pokazały, że projekt ma odbiorców. Redesign był kolejnym krokiem w jego rozwoju.

Kiedy niewielki redesign ma sens?

Niewielki redesign warto rozważyć, gdy produkt już działa, a problem dotyczy przede wszystkim jego oprawy, czytelności lub hierarchii informacji. Zakres prac może wtedy obejmować kolory, prezentację produktu i wybrane elementy interfejsu. W TikChat właśnie taki zakres uznałem za odpowiedni na tym etapie rozwoju.

Ten projekt dobrze pokazuje, jak podchodzę w MattMedia do projektowania interfejsów UI/UX. Przyglądam się temu, co użytkownik robi w danej chwili, i na tej podstawie ustalam, co powinno znaleźć się na pierwszym planie.

Kiedy warto zlecić redesign strony lub aplikacji?

Redesign warto rozważyć, gdy strona lub aplikacja działa, ale jej hierarchia informacji, oprawa wizualna albo obsługa wymagają uporządkowania. W MattMedia przyglądam się istniejącemu produktowi i temu, co obecnie utrudnia korzystanie z niego. Na tej podstawie dobieram zakres zmian: od konkretnych usprawnień interfejsu po szersze przeprojektowanie strony lub panelu użytkownika.

Pokaż mi swój projekt i opowiedz, co dziś Ci w nim przeszkadza. Przyjrzymy się temu, gdzie zmiana rzeczywiście ma sens i jakiego zakresu potrzebujesz.

Dowód - przyrost nowych kont:

Bezpłatna konsultacja