Olimpia
Któregoś dnia wyskoczyło mi powiadomienie, że w PPNT Gdynia odbywa się maraton SPEAK IN_UX. To był ostatni dzień rejestracji. Ostatnio chodzę w różne miejsca, żeby doświadczać nowych rzeczy, a od dawna chciałam się dowiedzieć, czym właściwie jest UX. No to się zapisałam. Myślałam, że to hackathon, także to tak z rozpędu 😅.
To nie był hackathon, tylko maraton, ale organizatorzy zapraszali też osoby, które się na tym nie znają, więc bardzo się na niego cieszyłam.
Start był falstartem. Kiedy przyszłam, okazało się, że w wyniku jakiegoś nieporozumienia nie ma mnie na liście. Na szczęście udało się to wyjaśnić.
Czym jest maraton SPEAK IN_UX?
To trzydniowy maraton projektowania doświadczeń użytkownika (UX, czyli user experience), który PPNT Gdynia razem ze Strefą Startup Gdynia organizuje przy okazji konferencji SPEAK IN_UX. W tym roku trwał od 16 do 18 października. Uczestnicy pracują w zespołach nad prawdziwym wyzwaniem od firmy, a na koniec pokazują swoje rozwiązania na scenie konferencji.
Wyzwanie: Bentos, czyli Bałtyk w jednym spojrzeniu
Wyzwanie przyniosła gdyńska firma EmbeddedSystems.do, która razem z Instytutem Oceanologii PAN rozwija Bentos. To system monitoringu, analizy i prognozowania jakości wody w Zatoce Gdańskiej, stworzony po to, żeby każdy mógł korzystać z kąpielisk bezpiecznie i świadomie. Pod wodą pracuje sieć czujników, która zbiera dane co 60 sekund, przez całą dobę: temperaturę wody, zasolenie, przejrzystość, tlen i inne parametry. Do tego dochodzą kamery podwodne i dane satelitarne. Projekt jest dofinansowany z Funduszy Europejskich dla Pomorza.
Danych jest więc mnóstwo, tylko że zwykły człowiek, który stoi na plaży w Orłowie, nie potrzebuje wykresu zasolenia. Naszym zadaniem było zaprojektowanie interfejsu, który pokazuje te dane prosto i zrozumiale dla każdego. Sprowadziliśmy to do jednego pytania: czy wejdę dziś do Bałtyku?
Kim jest Filip?
Filip to nasza persona. Od lat spędza tydzień w roku na trójmiejskich plażach, dba o zdrowie i bezpieczeństwo i ma dobre chęci, ale wpada w chaos informacyjny. Czy można się dziś kąpać, zależy od wielu czynników, a co właściwie znaczy wysokie stężenie chlorofilu albo fala 20 centymetrów? Dziś szukałby odpowiedzi rozsianych po całym internecie.
Żeby go poznać, połączyliśmy kilka form badań: sygnały od potencjalnych użytkowników i hipotezy (na przykład, że ludzie niewiele wiedzą o sinicach, i to się potwierdziło), deep research forów i istniejących badań oraz ankietę wśród urlopowiczów. Najciekawsze okazało się to, że stan wody sprawdzają praktycznie wtedy, kiedy jedną nogą stoją już w Bałtyku, a niektórzy dopiero wtedy, gdy coś im wizualnie nie pasuje. Dlatego zamiast profilu demograficznego zbudowaliśmy personę behawioralną: Filipa, który sięga po informacje, kiedy jest już na plaży.
Dwa światy
Trochę nie umiałam się w tym odnaleźć, bo pracuję zupełnie odwrotnie niż UX-owcy. Wiedziałam, że UX to doświadczenie użytkownika, ale nie miałam pojęcia, że to taki złożony proces: karteczki, badania, ankiety, hipotezy, systemy, długie zastanawianie się nad problemem.
Ja robię wszystko na odwrót. Najpierw buduję prototyp metodą vibe codingu, razem z moim zespołem agentów AI, potem go edytuję według tego, co czuję, według intuicji i poczucia estetyki, a testy z użytkownikami robię już na gotowym, działającym produkcie i dopiero wtedy go dopracowuję. Lubię, kiedy rzeczy dzieją się szybko. Tutaj działo się odwrotnie, rzeczy działy się długo.
I to było fascynujące, bo w naszym zespole połączyliśmy oba podejścia. Pracowaliśmy na żywym prototypie od samego początku, reszta grupy robiła makiety, testowaliśmy to wszystko, a równolegle trwał cały proces UX-owy: badania, ankiety, analiza problemu.
Jak wyglądał proces
Szliśmy według Double Diamond, czyli podwójnego diamentu: najpierw szeroko odkrywaliśmy problem (discover), potem go zawężaliśmy i definiowaliśmy (define), dalej szukaliśmy rozwiązań (develop) i doprowadzaliśmy je do końca (deliver). U nas między tymi etapami cały czas kręciło się szybkie prototypowanie, a po drodze wracaliśmy, żeby odkryć coś więcej i jeszcze raz przedefiniować problem.
Na wspólnej tablicy w Miro zbieraliśmy benchmarki, czyli podpatrzone rozwiązania z innych aplikacji, hipotezy i pytania do wywiadów, wymagania dostępności i personalizacji, pomysły z burzy mózgów metodą SCAMPER i kolejne prototypy. Hipotezy sprawdzaliśmy ankietą i testami, a to, co się potwierdziło, od razu trafiało do projektu. Agata Ciesielska, która prowadziła maraton, napisała potem, że nasza grupa jako pierwsza od dawna użyła przy wymyślaniu rozwiązań bibuły i plasteliny 🙂. Całe jej podsumowanie maratonu i prac wszystkich trzech grup znajdziecie tutaj.
Rzeźbiarz i malarz
Na prezentacji ujęliśmy to tak: rzeźbiarz tworzy przez redukcję, malarz tworzy na pustym płótnie, a my zrobiliśmy obie te rzeczy naraz. Połączyliśmy znany i lubiany Double Diamond z szybkim prototypowaniem z agentami AI, audytowaniem na żywo i testami na użytkownikach.
Dzięki temu już pierwszego wieczoru mieliśmy działający prototyp online, który można było testować z ludźmi. Testujący zachowywali się naturalnie, bo klikali w prawdziwą stronę, a nie w obrazek, więc łatwiej było wyłapać błędy. Potem audyt na żywo, świadome zmiany w makietach i tak w kółko, aż do finalnego projektu. Zaletą takiego procesu było też to, że każdy w zespole mógł być w niego włączony, niezależnie od tego, czy umiał korzystać na przykład z Figmy.
Połączenie tych dwóch podejść było fascynującym wyzwaniem. Każdy z nas przyniósł inne doświadczenia i inny sposób pracy, a AI pomagało nam zarówno w researchu, jak i w budowaniu aplikacji. Przez cały weekend uczyliśmy się od siebie nawzajem i szukaliśmy, jak te metody ze sobą zgrać, aż powstał projekt, z którego wszyscy byliśmy zadowoleni. Miałam okazję pracować w szalenie utalentowanym zespole, z ludźmi, z których każdy z osobna jest wybitnym specjalistą i artystą zarazem.
Co powstało
Powstał prototyp gotowy do wdrożenia, działający na żywych danych z internetu, poparty badaniami i świadomymi decyzjami projektowymi.
Na samej górze aplikacji jest werdykt, czyli jednoznaczna odpowiedź na pytanie, czy można dziś wejść do wody: „Tak, jest okej”, „Tak, ale uważaj” albo „Nie, jest zakaz”. Wylicza go algorytm Instytutu Oceanologii PAN we współpracy z EmbeddedSystems.do, a pokazujemy go jednocześnie kolorem, kształtem, tekstem i animacją, żeby zrozumiało go jak najwięcej osób. Dalej odpowiadamy na pytanie „a dlaczego?”: sześć parametrów, które składają się na werdykt, mapa okolicy z geolokalizacją i wykresy dla tych, którzy śledzą trendy. Jest też wersja nocna.
Dostępność potraktowaliśmy szeroko. Poza WCAG myśleliśmy o tym, że z aplikacji skorzysta dziecko na prośbę dorosłych, osoba starsza ze słabszym wzrokiem albo ktoś w pośpiechu, w ostrym słońcu, z jedną wolną ręką i dwiema sekundami na przeczytanie werdyktu. Ważna była też wiarygodność, dlatego wyraźnie pokazujemy źródła danych.
Pod werdyktem schodzimy coraz głębiej, od strefy laika po strefę geeka: temperatura wody, fala, wiatr, prognoza na kolejne godziny, mapa kąpielisk i surowe dane dla tych, którzy chcą wiedzieć więcej. Przy każdym wyniku jest pytanie „Dlaczego taki wynik?”, które wyjaśnia, z czego wzięła się odpowiedź.
Złowieszcza sinica i gang Siniaków
Na prezentacji mówiliśmy, że przez cały weekend próbowała nam przeszkodzić złowieszcza sinica, ale się nie daliśmy. To ta zielona, ręcznie zrobiona postać, która towarzyszyła nam do samej sceny.
Zaproponowałam też Siniaka, animowaną maskotkę, która miała pokazywać stan wody: wygląda dobrze, uważaj albo nie wchodź do wody. Była to jedna z propozycji, ale ostatecznie jej nie użyliśmy, bo nie była dość czytelna.
W rekomendacjach na przyszłość pojawił się za to Bentoś, przyjaciel i opiekun najsłodszego morza na świecie, który mógłby pomóc w edukacji rodzin i kolejnego pokolenia.
Od pierwszej wersji do finału
Wersji było mnóstwo. Pracowaliśmy równolegle na prostych makietach, czyli szkicach układu ekranu, i na żywych wersjach aplikacji, a po drodze sprawdziliśmy wiele różnych prób i kierunków. Pierwsza powstała już w piątek wieczorem i od razu dało się ją klikać. Potem przez cały weekend zmienialiśmy ją po każdym teście i audycie: wyrzucaliśmy powtórzenia, upraszczaliśmy ekran główny, przesuwaliśmy mapę, zmienialiśmy kolory. Na koniec zaprojektowaliśmy finalny ekran w Figmie, a ja przeniosłam go do prototypu i podłączyłam prawdziwe dane dostępne w internecie, bo do danych z boi Bentosa nie mamy jeszcze dostępu.
Prototyp: 963.intuflow.pl/bentos
Strona naszego zespołu z opisem, makietą i mockupem: maratonux.pl. Tak, mamy taką super domenę 🙂
Na dużej scenie
27 października, na konferencji SPEAK IN_UX w PPNT Gdynia, wszystkie zespoły pokazały swoje rozwiązania na dużej scenie. Nasz zespół reprezentowaliśmy we trójkę: Basia, Jacek i ja. Dostaliśmy sporo pochwał, to bardzo miłe. Praca zespołowa nabiera dla mnie nowych barw, uczę się coraz więcej, a póki co dużo obserwuję. Lubię być w tym procesie doświadczania 🙂
Na koniec pokazaliśmy też, co dalej. Copywriting, czyli personifikowany storytelling o Bałtyku, u którego „coś nowego słychać”. Bentoś, nasza maskotka, która skraca dystans i daje szansę na edukację nowego pokolenia. I mikrolearning: zawsze tłumaczyć „Dlaczego?”, bo to szansa na obalanie mitów.
Na koniec powiedzieliśmy, czego nauczył nas ten maraton: że w krótkim czasie można zbudować zgrany zespół, który stworzy wartościowy prototyp technologii w służbie humanizmu. Mimo bardzo różnych doświadczeń i metod pracy doszliśmy przez dyskusję i wielokrotne prototypowanie do wspólnej wersji. Mamy nadzieję, że pomoże ona Bentosowi lepiej zaistnieć w świadomości ludzi.
Grupa nr 2
Dziękuję całemu zespołowi, Agacie Ciesielskiej, naszemu opiekunowi Filipowi Makowieckiemu, PPNT Gdynia i Strefie Startup Gdynia za organizację oraz EmbeddedSystems.do za wyzwanie.
A Wy jak pracujecie: najpierw prototyp czy najpierw badania? 🙂
Wypróbuj prototyp Strona zespołu
Jeśli chcesz być na bieżąco z hackathonami w Polsce, zapraszam na mój portal nahackathon.pl.
Źródła
- bentos.info, opis projektu Bentos.
- speak in_UX, PPNT Gdynia, informacje o maratonie.
- maratonux.pl, strona grupy nr 2.