Jak budowaliśmy największą stronę główną w Polsce, czyli o szukaniu odpowiedzi – prezentacja z konferencji UX Poland 2015

English version is available on my Medium.

Według ekspertów z amerykańskiej Narodowej Służby Oceanicznej i Meteorologicznej lato 2014 było najgorętsze od 130 lat, czyli momentu rozpoczęcia pomiarów. Nie inaczej było w Wirtualnej Polsce. To właśnie pod koniec tego lata, 1 września 2014 roku, odpaliliśmy nową stronę główną, która już parę miesięcy potem okaże się najczęściej odwiedzaną w Polsce. Jeśli jednak sądzicie, że moja dzisiejsza prezentacja skończy się na dacie wdrożenia, muszę Was zaskoczyć. Najważniejsze było to, co wydarzyło się później.

Pozwólcie, że opowiem Wam historię o szukaniu odpowiedzi.

W okolicach 2014 roku na polskim rynku internetowym doszło do dwóch wielkich przetasowań. Wirtualna Polska i o2 połaczyły się, tworząc Grupę Wirtualna Polska, dziś jedną z największych grup medialnych w polskim internecie. Rok wcześniej doszło do innej, wielkiej konsolidacji medialnych graczy – Onet został kupiony przez Ringier Axel Springer. Rozpoczęła się zacięta rywalizacja o to, kto zostanie liderem polskiego internetu.

W Wirtualnej Polsce wiedzieliśmy, że aby zostać liderem, musimy pokazać Polakom, że nadchodzi nowe otwarcie, że płynie w naszych żyłach nowa krew. Nikt nie miał też wątpliwości, że nasza konkurencja na pewno pracuje już nad swoją ofensywą. Pod koniec czerwca 2014 roku postawiliśmy więc sobie odważny, ale i ryzykowny cel – zdecydowaliśmy, że 1 września odpalimy wielką kampanię marketingową, która zakomunikuje Polakom, że w polskim internecie właśnie zaczyna się coś nowego i ekscytującego.

Ale żeby to zrobić, musieliśmy być wiarygodni. Musieliśmy pokazać Polakom początek tej zmiany. A czy można sobie wyobrazić lepszy początek niż zmiana najważniejszej strony w całej naszej grupie?

Tu parę słów wyjaśnienia. Strona główna portalu to punkt, w którym styka się wszystko, co największe: największy ruch, największe pieniądze i najwięcej sprzecznych interesów.

  1. Ruch, bo stronę główną Wirtualnej Polski odwiedza miesięcznie 10 mln Polaków, wykonując ponad 470 mln odsłon. Średnio w ciągu dnia użytkownicy obecni na tej stronie wykonują niemal 300 tysięcy kliknięć co godzinę.
  2. Pieniądze, bo dla każdego z czterech największych polskich portali horyzontalnych strona główna to kluczowa linia przychodów, odpowiadająca za od 20 do 40 procent całego biznesu.
  3. Sprzeczne interesy, bo SG to także główne źródło ruchu dla większości serwisów wertykalnych w portalu, takich jak wiadomości, sport, moto, finanse itp. Z tego powodu szefowie poszczególnych serwisów jak lwy walczą o ekspozycję na SG. Równie zaciekle biją się o tę przestrzeń szefowie sprzedaży, dla których każdy piksel to potencjalna szansa na zgranięcie dodatkowych budżetów.

Tak więc strona główna to kocioł, w którym aż wrze od nieustannej walki wielu interesów. My postanowiliśmy podgrzać tę atmosferę jeszcze bardziej. Postanowiliśmy wszystko zmienić. W dwa miesiące.

I tu postawmy sprawę jasno.

Nasz przykład nie jest podręcznikowy i powinienem powiedzieć: nie róbcie tego w domu. Z reguły bowiem wielkie serwisy zmieniają się w zupełnie inny sposób. Drogą ewolucji. Często wręcz niezauważalnie dla przeciętnego użytkownika. Takie zmiany są bezpieczne, bo są testowane przez dziesiątki dni, zanim trafią do wszystkich użytkowników. Poniżej widzicie przykłady redesignów BBC, New York Timesa, Amazona, a nawet przykład z polskiego rynku – poniżej poprzedni redesign Onetu, czyli naszego głównego konkurenta.

Redesign BBC

Redesign BBC

Redesign New York Times

Redesign New York Times

Redesign Amazon

Redesign Amazon

Redesign Onet

Redesign Onet

Ewolucja. Oczywiście wiedzieliśmy o tym. Natomiast czasem po prostu nie ma takiego komfortu. My go nie mieliśmy. Gdy twoje window of opportunity jest tak wąskie, a szansa jego wykorzystania tylko jedna, to nie masz wyjścia. Płyniesz albo giniesz.

***

No więc zaczęliśmy. Projekt realizowaliśmy w całości metodyką agile’ową. Grupa robocza składała się z reprezentantów prawie każdego obszaru organizacji, bo zmiany na stronie głównej dotykały przekrojowo całej firmy. Codziennie odbywały się spotkania pełnego składu. Łącznie było tych spotkań 51. Do tego dziesiątki mniejszych, w różnych innych, adhocowych gronach. Nikt ich nie liczył, ale to zapewne drugie tyle. Sprawy nie ułatwiał fakt, że Wirtualna Polska jest zlokalizowana w dwóch odległych miastach – Warszawie i Gdańsku. Z ciekawości sprawdziłem, ile maili w ciągu tych dwóch miesięcy wpadło do mojego folderu z wiadomościami na temat strony głównej. 2890. Co bardziej przerażające, ja sam do swoich współpracowników wysłałem kolejne 1820.

Pierwsze kreski w Axure pojawiły się 29 czerwca i nie miały zbyt wiele wspólnego z docelowym projektem. Zresztą sami zobaczcie.

Pierwszy projekt

Pierwszy projekt

Projekt przeszedł łącznie blisko 80 iteracji. Kilku grafików pracowało jednocześnie nad każdym elementem strony. W konsekwencji webmasterzy i programiści pracowali na niemal nieustannie zmieniających się projektach. Nie robiliśmy specyfikacji, bo to mijało się z celem. Czasem jeden element zmieniał się nawet kilka razy dziennie, bo poranny projekt, po całodziennym przemyśleniu, wieczorem nie wydawał się już tak atrakcyjny. Przez te dwa miesiące zmiana była immanentną cechą każdego naszego dnia. Pod koniec wszyscy byliśmy do niej tak przyzwyczajeni, że kiedy osobiście dokonałem zmiany kluczowego elementu strony głownej – main topicu – na kilkanaście godzin przed jej uruchomieniem, nikt nie wykazał najmniejszego zaskoczenia. A pewnie wiecie, jak zazwyczaj reaguje się na zmiany w ostatniej chwili.

Kolejne wybrane iteracje projektu

Kolejne wybrane iteracje projektu

Pracowaliśmy wtedy w szalonym tempie. Mały przykład: mobilna wersja strony powstała od zera w nieco ponad 20 godzin. Ze wszystkimi niuansami typograficznymi, responsywnością, breakpointami, transformacjami javascriptowymi i logiką zachowań poszczególych elementów. Bez ani jednej kreski postawionej w jakimkolwiek programie graficznym czy UXowym. Wystarczyło trochę papieru, matematyki, świetny grafik i doskonały webmaster. Taki hackathon w prawdziwym świecie.

Jednocześnie z pracą nad layoutami, nasi specjaliści UX ruszyli na spotkania z użytkownikami. Nie mieliśmy czasu na organizowanie testów stacjonarnych, więc wybraliśmy szybszą metodykę: ambush guerilla usertesting, o której parę lat temu na tej samej konferencji, na której dziś przed Wami stoję, opowiadał jej pomysłodawca, Andy Budd z The Guardian. Przypomnę: chodzi w niej o testowanie użyteczności „na ulicy“. To mocno improwizowane, spontaniczne wywiady w parkach miejskich, galeriach handlowych i kawiarniach.

Jeden z naszych projektantów postanowił połączyć przyjemne z pożytecznym i w ten sposób pierwsze testy zrealizowaliśmy… na sopockiej i gdańskiej plaży. Nie mieliśmy wtedy jeszcze nic do pokazania, więc testowaliśmy starą stronę. Zdecydowaliśmy się też na niewinną zabawą projekcyjną: na koniec wywiadu prosiliśmy badanych, aby opisali jak wyglądałaby Wirtualna Polska, gdyby była człowiekiem. Pozwólcie, że przytoczę, co mówili wówczas nasi ankietowani:

Wybrane opinie z badań z użytkownikami

Wybrane opinie z badań z użytkownikami starej strony głównej

Na tym etapie zaczęliśmy zadawać sobie pytanie, co powiedzą użytkownicy, kiedy zadamy to samo pytanie po wdrożeniu nowej strony? Innymi słowy: Czy idziemy w dobrym kierunku?

Mówię o tych obawach, bo doskonale wiedzieliśmy, jak wielką rewolucję planujemy. Nowa strona główna niemal całkowicie zmieniała – utrwalany od lat – sposób jej eksplorowania. Podział na lewą część magazynową i prawą newsową miał zastąpić podział na poziome sekcje tematyczne. Morze niebieskich linków zamierzaliśmy zmienić na siatkę pełną zdjęć i wyrazistych kolorów. Do dotychczasowych 20-30 fotek na stronie zamierzaliśmy dodać… kilkaset. Usunęliśmy większość pozycji z nawigacji. Strona, która dotąd liczyła około 3 tys. pikseli w pionie, od września miała się wydłużyć… w nieskończoność, bo zastosowaliśmy infinite scrolling. Chcieliśmy wywrócić do góry nogami nie tylko elementy redakcyjne, ale i zmienić lokalizację i wymiary dużej części formatów reklamowych.

Stara strona główna w porównaniu do nowej

Stara strona główna w porównaniu do nowej

Oczywiście na bieżąco ograniczaliśmy potencjalne ryzyka pomyłek. Wraz z kolejnymi wersjami beta, przeprowadzaliśmy adhocowe badania z użytkownikami. Łącznie zrealizowaliśmy cztery takie serie. Zdążyliśmy też zrobić kilka testów A/B na starej stronie głównej. Sprawdzaliśmy najbardziej kontrowersyjne elementy, jakie mieliśmy zamiar wprowadzić na docelowym projekcie. To dawało nam spokój, że 1 września firma nie zbankrutuje, a my nie zostaniemy zwolnieni.

Wciąż pozostawało jednak mnóstwo pytań, na które w ciągu tych dwóch miesięcy nie byliśmy w stanie odpowiedzieć. Pokażę Wam przykłady. Jak widać mieliśmy wiele koncepcji prawej kolumny. Ale która z nich będzie najlepsza? Z miniaturami, czy bez? Z niebieskimi linkami czy może czarne wystarczą?

Różne warianty prawej kolumny z wiadomościami

Różne warianty prawej kolumny z wiadomościami

Chcieliśmy zmienić nawigację. Ale który z tych nagłówków będzie działał najlepiej? Czerwony? Biały? Z mniejszą liczbą linków, a może większą? Z linkami po prawej czy po lewej? Czy pogoda powinna być w nagłówku czy lepiej zapracuje w prawej kolumnie?

Różne warianty nagłówka

Różne warianty nagłówka

A co z main topiciem? Może powinniśmy zrobić w nim zakładki? Co z lewą kolumną z kolorowymi kabelkami? Będą funkcjonować lepiej ze zdjęciami czy bez? A sekcja motoryzacyjna – może powinna być nad a nie pod obszarem „kobieta“?

Nadszedł jednak czas wdrożenia, a wszystkie te pytania pozostały bez odpowiedzi.

***

1 września 2014 roku, dokładnie 2 minuty po północy, uruchomiliśmy nową stronę główną Wirtualnej Polski. Wystrzeliły szampany, radość wypełniła korytarze. Odnieśliśmy sukces. Ruszyła strona główna i wielka kampania. Mówili o nas wszyscy, w większości w samých superlatywach. Teoretycznie moglibyśmy odfajkować ten i zacząć nowy rozdział.

Męczyło nas jednak poczucie swoistej niepewności. Co z tymi wszystkimi pytaniami, na które nie zdążyliśmy znaleźć odpowiedzi? Wydawało się, że niektóre parametry mogłyby być wyższe, gdybyśmy tylko wiedzieli, co zmienić. Do pytań, które zadawaliśmy sobie przed startem, zaczęły dochodzić kolejne. Najważniejsze zaś brzmiało: czy nasza strona mogłaby być lepsza?

I dopiero wtedy zaczęła się prawdziwa zabawa.

Już od połowy września zaczęliśmy aktywnie szukać odpowiedzi. Weryfikowalismy hipotezę za hipotezą za pomocą multiwariantowych testów A/B. Do końca miesiąca zrealizowaliśmy ich 13.

Jedna z badanych hipotez dotyczyła prawej kolumny z linkami. Okazało się, że nasza pierwotna decyzja była zła. Jeden z wariantów funkcjonował dużo lepiej, podnosząc konwersję całej strony głównej o parę procent (poniżej na zielonym tle). To ogrom przy naszej skali. Szybko wdrożyliśmy poprawkę i od razu zobaczyliśmy realną poprawę parametrów.

Najlepszy wariant zaznaczony na zielono

Najlepszy wariant zaznaczony na zielono

To było jak narkotyk. Chwila przygotowywania testu, krótkie oczekiwanie i – pstryk – realna, odczuwalna zmiana. Nic więc dziwnego, że szybko się uzależniliśmy. Zaczęliśmy testować na potęgę.

Ten proces szukania odpowiedzi dawał czasem zaskakujące wyniki. Przekonaliśmy się o tym, badając np. konstrukcję kafelków zdjęciowych, podstawowego budulca nowej strony głównej. Stawialiśmy hipotezę, że ich aktualna konstrukcja oparta na białym napisie na lekkim, ciemnym gradiencie, może być nieco nieczytelna. Stworzyliśmy więc kilka wariantów: ze zmienionym tłem, a także z innymi fontami. Wydawało nam się arcylogiczne, że wariant z jednolitą aplą zadziała najlepiej. Nic bardziej mylnego. Dużo lepszy od pozostałych okazał się wariant ze zmienionym fontem (poniżej na zielonym tle).

Najlepszy wariant zaznaczony na zielono

Najlepszy wariant zaznaczony na zielono

Podobnie zaskakujące było jedno z ostatnich badań, którego rezultaty nie zostały jeszcze wdrożone. Testowaliśmy 9 różnych układów nagłówka, ale pokażę Wam tylko trzy wybrane warianty.

W tym teście zauważyliśmy coś bardzo ciekawego. Najpopularniejszym elementem jest tutaj ikona poczty. Klikają w nią dziennie dziesiątki tysięcy internautów. W aktualnym nagłówku ta ikona występuje zawsze obok wyszukiwarki. Jednak w tych trzech wariantach zmieniliśmy jej lokalizację. Co się okazało, gdy wyemitowaliśmy test do użytkowników? Link, który znalazł się na miejscu zajmwanym poprzednio przez pocztę, czyli obok wyszukiwarki, w każdym z wariantów zawsze generował najwiecej kliknięć. Oznacza to, że uzytkownicy używali tego elementu po prostu na pamięć. Klikali w znane miejsce, nie zwracając uwagi, że zmieniła się zarówno ikona, jak i podpis.

Test A/B różnych wariantów nagłówka

Test A/B różnych wariantów nagłówka

Takie testy jak ten uczą więcej niż niejedna książka czy niejeden speech jakiegoś faceta na konferencji o UXie.

***

Szukamy odpowiedzi, stawiamy hipotezy i weryfikujemy je już od 7 miesięcy. Od czasu wdrożenia nowej strony do ubiegłego piątku wprowadziliśmy takich mniejszych i większych poprawek na stronie głównej blisko 60. Każdego miesiąca testujemy kilkadziesiąt wariantów. Nieustannie szukamy lepszych rozwiązań. Ale czy warto?

Oczywiście. Żmudną pracą byliśmy w stanie polepszyć podstawowy parametr konwersji naszej strony głównej aż o ponad 20 procent. Jesteśmy z tego dumni. Ale uzyskaliśmy jeszcze coś. Nieocenione źródło wiedzy. Każdy test A/B dodaje kolejny składnik do naszego secret sauce’u. To właśnie tak budujemy naszą przewagę konkurencyjną. Dzięki nim wiemy o wiele więcej i szybciej niż nasi konkurenci. Ta wartość jest nieoceniona.

Pewnie zastanawiacie się jednak, czy jesteśmy zadowoleni z całego projektu nowej strony głównej. Oczywiście móglbym mówić długo o ciepłym przyjęciu w domach mediowych, o zadowolonych klientach, rozmaitych rosnących parametrach czy pozytywnych komentarzach branży. Na samym końcu w każdym biznesie chodzi jednak o pieniądze. Pozwólcie więc, że pochwalimy się tylko jedną liczbą. Taką, która reprezentuje wzrost przychodów rok do roku z reklam na stronie głównej.

Ta liczba to 100%.

***

Zachęcam Was – nie zadowalajcie się pierwszymi pomysłami, nawet jeśli już je wdrożycie. Eksplorujcie swoje własne hipotezy. Szukajcie odpowiedzi. Podważajcie swoje zdanie. Kopcie zawsze głębiej niż inni. Wyniesiecie z tego morze nauki, a Wasza duma z projektów będzie jeszcze większa. To nie muszą być testy A/B, to nie muszą być badania fokusowe. Chodzi o to, by nieustannie kwestionować swoje własne decyzje. Sprawdzać kolejne hipotezy, czasem nawet te, które z pozoru wyglądają nielogicznie. Nieustępliwe poszukiwanie odpowiedzi to cechy dobrego projektanta UX, product managera czy przedsiębiorcy.

Szukajcie odpowiedzi.
Warto.

To był transkrypt prezentacji, którą pokazałem podczas konferencji UX Poland 2015.

Ten wpis umieszczono w kategorii badania, case studies, prezentacje, projektowanie. Możesz dodać go do zakładek permalink. Dodaj komentarz lub dodaj odpowiedź (trackback): Trackback URL.

7 Komentarze

  1. Opublikowano 1 czerwca 2015 at 20:27 | Permalink

    Podziwiam determinację i skutek! Brawo!
    Dziękuję jednak przede wszystkim za podzielenie się wiedzą!
    Powodzenia!

  2. Opublikowano 2 czerwca 2015 at 07:21 | Permalink

    Nie byłoby takiej walki, gdybyście wcześniej popytali kilka osób ze starej WP, jak to ma wyglądać i wprowadzić poprawki jeszcze przed startem ;)

  3. Opublikowano 2 czerwca 2015 at 09:03 | Permalink

    Dzięki za świetny tekst. To naprawdę kawał dobrej wiedzy, który w 15min nauczył mnie więcej niż niejedna książka.

    Powodzenia w dalszym testowaniu!

  4. Paulina
    Opublikowano 3 czerwca 2015 at 10:30 | Permalink

    Dlaczego w obecnej wersji serwisu nie ma tego rozwiązania prawej kolumny, które podniosło konwersję o kilka procent? (Czy może dalej testujecie? :) )

  5. Opublikowano 4 czerwca 2015 at 19:11 | Permalink

    @Paulina: aktualne rozwiązanie jest tym, które działa najlepiej :) Testów nie zakończyliśmy na wariantach, które pokazałem w tekście – potem szukaliśmy jeszcze lepszych :) To zresztą na pewno nie koniec tych poszukiwań.

  6. Cyryl
    Opublikowano 5 czerwca 2015 at 07:36 | Permalink

    Fajny case. Zastanawiam się co przyłożyło się do wzrostu przychodów najmocniej, tj. czy wynika to z ogólnie rosnącego czasu i zaangażowania (np. przez bogatsze zdjęcia) czy np. także ze zmiany formatów reklam na lepiej wkompowanowane a jednak wciąż odróżniające się od treści? Oraz czy konwersja to przeklik czy odsłona? : D

  7. Maciej
    Opublikowano 7 czerwca 2015 at 18:58 | Permalink

    Świetny tekst. Dla mnie interesującą kwestią jest podejście do tematu SEO. Bo każda zmiana strony powoduje także możliwe zmiany jeśli chodzi o ruch organiczny. A w przypadku takiego serwisu to bardzo ważne aby minimalizować potencjalne spadki. Tak więc ciekaw jestem jak od tej strony wyglado planowanie i wdrożenie zmian:)

Skomentuj

Twój adres email nie zostanie opublikowany i nie będzie rozpowszechniany. Wymagane pola są oznaczone *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>