Wirtualna Polska chciała umieścić najważniejsze wydarzenia 2024 roku tam, gdzie patrzą miliony.
Jako Lead UX Designer prowadziłem interdyscyplinarny zespół budujący widgety wydarzeń na Euro 2024 i Igrzyska Olimpijskie. Znalazły się nad głównymi informacjami, w najcenniejszym miejscu strony głównej. Cel był prosty do wypowiedzenia i trudny do wykonania: dać milionom czytelników to, co najważniejsze, w jednym spojrzeniu.
Pomysł wziął się z widgetu, który już wcześniej się sprawdził.
Zbudowaliśmy podobny widget na wybory parlamentarne w Polsce i zadziałał. Rozprowadzał treść po serwisie i dawał rzetelną informację w skondensowanej formie. Przeniesienie tego wzorca na sport było naturalnym krokiem, z jednym zastrzeżeniem: sport nie zachowuje się jak wybory.
Ten sam 40-pikselowy pasek musiał obsłużyć dwie różne imprezy, oddalone o tygodnie.
Euro trwało w czerwcu i lipcu, Igrzyska w lipcu i sierpniu. Nigdy nie występowały razem, a każda impreza rządziła się zupełnie inną logiką informacji. Postawiłem sobie za cel zbudować jeden, maksymalnie uniwersalny system, który udźwignie obie, zamiast dwóch projektów od zera.
Jeden system, trzy stany, dwie formy
W obu przypadkach każde wydarzenie trzeba było pokazać przed startem, na żywo i po zakończeniu. I każdy widget istniał w dwóch spójnych ze sobą formach:
- Zwinięty pasek, około 40 pikseli wysokości
- Rozwinięty, pogłębiony widok
Postawiłem jeden zakład, który uporządkował oba widgety: najpierw Polacy.
Polskiego czytelnika najbardziej interesują polscy sportowcy, więc wokół tego zbudowałem cały system. To skupienie na Polsce sprawiło, że natłok wydarzeń stał się do ogarnięcia, a użytkownik zawsze mógł przejść do pełnego terminarza w osobnym serwisie.
Co świadomie odpuściłem
- Pełny terminarz wydarzeń w samym widgecie (kierowałem do niego linkiem)
- Równe traktowanie wydarzeń wszystkich państw i drużyn
- Wszystko, co konkurowało z polskim wątkiem o uwagę
Euro przyszło pierwsze, a jego struktura zmieniała się z każdą fazą turnieju.
Polska musiała się wyróżniać, ale pozostałych meczów nie można było zmarginalizować. W fazie grupowej rozwinięty widok miał trzy kolumny: ważny mecz, terminarz dnia i tabelę grupy. W fazie pucharowej przełączał się na dwie, ważny mecz obok drabinki. W środku działały wyniki na żywo i status „mecz trwa", więc widget nigdy nie był statycznym terminarzem.
Jedna ósma finału oznaczała zmieszczenie ośmiu meczów w pasku zbudowanym dla jednego
Osiem spotkań w tej przestrzeni, zwłaszcza na mobile, było najtrudniejszym układem w całym projekcie. W miarę jak drabinka zwężała się przez ćwierćfinały, półfinały i finał, ta sama ramka musiała mieścić coraz mniej wydarzeń, nie wyglądając pusto. Rozwiązałem to, dając każdemu wydarzeniu więcej miejsca, nigdy nie powiększając fontu.
Kilka tygodni później Igrzyska przyniosły sto dyscyplin, każdą o innej strukturze.
Bieg na 100 metrów przez płotki potrzebuje tylko nazwy konkurencji. Mecz siatkówki musi pokazać, kto z kim gra. W trakcie Igrzysk siedem wydarzeń mogło toczyć się naraz, każde o własnej strukturze, walcząc o miejsce w tym samym pasku. Na skrawku przestrzeni musiałem zmieścić dzień, godzinę, dyscyplinę, nazwiska zawodników oraz to, czy walczą o medal, czy są jeszcze w eliminacjach.
Klasyfikacja medalowa kotwiczyła układ
Klasyfikacja stała po prawej na stałej wysokości, a Polska pojawiała się w niej zawsze, nawet z zerem medali. Ta wysokość nadawała rytm całości, więc gdy Polska miała cztery starty jednego dnia i jeden następnego, utrzymywałem stałą przestrzeń zmianą centrowania, a nie rozmiaru fontu.
Wszystkie ikony dyscyplin narysowałem od zera
Użycie oficjalnych ikon organizatora byłoby plagiatem, więc namalowaliśmy je sami. Ograniczenie stało się atutem: autorskie ikony pozwoliły pokazać każdy start Polaka w formie, która należała do WP.
Gdy Polakom skończyły się starty, strategia trafiła na swój limit.
Pod koniec Igrzysk, po ostatnim meczu polskich siatkarzy, polskie starty się wyczerpały. Cały system działał na tym paliwie, więc zaprojektowałem wersję awaryjną. Redakcja uznała pozostałą treść za zbyt ubogą, by ją pokazać, i widget zamknął Igrzyska tak, jak je otworzył, klasyfikacją medalową.
Rezultaty
Buttony call-to-action prowadziły do relacji live oraz do pełnego terminarza w naszym serwisie siostrzanym, Sportowych Faktach.
- Statystyki przejść były wyższe niż zakładane.
- Sportowe Fakty zanotowały wyraźny wzrost ruchu.
- Nawet gdy pasek startował zwinięty, wiele osób rozwijało go intencjonalnie — bezpośredni sygnał, że treść była pożądana.
Czego nauczyłem się, projektując dla milionów na 40 pikselach
Oba widgety wdrożyliśmy na bardzo napiętych terminach, interesariusze byli zadowoleni, a projekt wytrzymał realny ruch.
- Jeden dobrze pomyślany system obsłużył dwie skrajnie różne imprezy w dwóch różnych okresach, bez budowania każdej od zera.
- Rzeczy, które wyglądają na proste i oczywiste, wymagają najwięcej czasu, skupienia i zrozumienia zasad pod spodem.
- Twarde ograniczenie, jak zakaz ikon czy stała przestrzeń, potrafi popchnąć w stronę lepszego rozwiązania.
- Wróciłbym do stanu końcowego widgetu skupionego na wydarzeniach, żeby degradował się z gracją, gdy główny wątek się kończy.
- Robiąc to dziś, przejście od konceptu do realizacji z AI byłoby wielokrotnie szybsze.