Hackathon+ · 23–24.11.2019 · Warszawa
see4me — projekt aplikacji dla osób niewidomych i niedowidzących, który powstał w 24 godziny
Hackathon+ 2019 · zespół 6 osób · 3. miejsce w ocenie jury · moja rola: UX Design
Hackathon+
Zadanie na 24 godziny: więcej niezależności
„Celem Hackathon+ było opracowanie w 24h rozwiązania, które przyczyni się do podniesienia jakości i niezależności życia osób o szczególnych potrzebach, w tym osób starszych i osób z trwałymi lub czasowymi trudnościami w zakresie mobilności lub percepcji. See4me to rozwiązanie, które ma na celu poprawienie komfortu życia osobom niewidomym i niedowidzącym.”
- Kiedy
- 23–24 listopada 2019opis projektu
- Gdzie
- Warszawa, Stadion PGE Narodowyopis projektuPolskie Radio 24
- Organizator
- Ministerstwo Funduszy i Polityki Regionalnejopis projektuOpis projektu podaje też wcześniejszą nazwę ministerstwa: Ministerstwo Inwestycji i Rozwoju.
- Edycja
- drugaPolskie Radio 24
- Zespoły w konkursie
- 22Polskie Radio 24
- Uczestnicy
- ponad 100tweet MFiPR, 23.11.2019
- Wynik see4me
- 3. miejsce w ocenie juryopis projektu
- Zespół
- 6 osóblista zespołu
- Moja rola
- UX Designprzepływ ekranów i układ makiet, treść i architektura aplikacji, pitch deck i jego prezentacja przed jurywedług autora
Trzy przykłady z opisu projektu
„Pozwala m.in. znaleźć ławkę w parku na długim spacerze, informuje o mijanych pasach dla pieszych i ostrzega przed przeszkodami.”
Opis projektu mówi o nich w czasie teraźniejszym, ale według slajdu 9 zaimplementowano tylko rozpoznawanie obiektów i text to speech — wszystkie trzy przykłady były planem (rozdział 05).
- plan z pitchu
Ławka w parku
„…znaleźć ławkę w parku na długim spacerze…”
opis projektuNa makietach nie ma ekranu z ławką — ani na slajdzie 6, ani na miniaturze.
- plan z pitchu
Mijane pasy dla pieszych
Przejścia dla pieszychWłączonenajbliżej na makietachkategoria w ustawieniach (makieta)
- plan z pitchu
Przeszkody
Przeszkodynajbliżej na makietachkategoria w ustawieniach (makieta)
Makiety hi-fidelity
Pięć makiet hi-fi i ekran startowy — do kliknięcia
Napisy, kolory i układ są z makiet. Przy każdym przejściu między ekranami piszemy, skąd o nim wiemy: z napisu na przycisku albo od autora; jedno przejście (start aplikacji) to nasza rekonstrukcja.
see4me
Porównanie działa dla ekranów ze slajdu 6 — miniatura ma inne proporcje.
Przejścia między ekranami
Wybierz przejście: replika otworzy ekran, obrysuje przycisk ramką detektora i przejdzie dalej.
Spróbuj
Wykonane: 0 z 3
- Znajdź trasę „Praca”, do zrobieniaTwoje trasy, pole wyszukiwania w nagłówku
- Dodaj własną trasę, do zrobieniaNowa trasa, nazwa, Zapisz trasę
- Przełącz „Przystanki”, do zrobieniaekran Personalizacja
Kategorie w repliceWłączone: 2 z 5
Szczegóły makiet
- Dwa duże pola wypełniają ekran główny: górna połowa to „Wybierz trasę”, dolna — „Nowa trasa”.
- Każdy stan to symbol i słowo: Włączone, Wyłączone.
- Jedna przykładowa trasa zaczyna się na PGE Narodowym — tam, według Polskiego Radia 24, odbył się Hackathon+.Polskie Radio 24
- Przycisk „Prowadź mnie tam” to ikona psa przewodnika z podpisem pod spodem.
- Mikrofon na ekranie Dodaj trasę: obsługa głosem była w planie.slajd 5
Czym replika różni się od makiet
- Nagłówek ekranu głównego: na makiecie „see4mee”, w replice „see4me” (pisownia poprawiona).
- Slajd 6 pisze „bankomaty” małą literą; replika — „Bankomaty”, jak miniatura.
- Piąty wiersz, „Przeszkody”, pochodzi z miniatury. Słowo „Wyłączone” pod jego kółkiem to rekonstrukcja: na miniaturze zasłania je dolny pasek.rekonstrukcja
- Ikony są narysowane od nowa, a napisy złożone groteskiem systemowym urządzenia (Helvetica Neue, Arial albo Liberation Sans), więc krój może się nieco różnić od makiet.
- W oknie kamery gra fragment nagrania z hackathonu, a nie nieruchoma klatka z makiety.
- Mikrofon niczego nie nagrywa, a strona nigdy nie prosi o dostęp do kamery ani mikrofonu.
- Działanie wyszukiwarki (samo pole jest na makiecie), sprawdzanie pustej nazwy, nowy wiersz z dopiskiem „dodana w replice” oraz etykiety „wznów wykrywanie” i „pauza” są nasze.rekonstrukcja
Wykrywanie
Obraz z kamery, ramki i zielona ścieżka
Wśród makiet to jedyny ekran z rozpoznawaniem obiektów — funkcją, którą slajd 9 podaje jako zaimplementowaną. Według autora nagranie demo to zapis ekranu działającego prototypu z Hackathonu+ 2019, a ramki i ścieżkę liczył na żywo telefon.
W opisie projektu to „nawigacja z AR”. Na ekranie oznacza to konkretnie ramki i trapez nałożone na obraz z kamery. Ramki otaczają osobę, rower i leżaki; każdą podpisuje angielska nazwa klasy z liczbą, np. „bicycle: 0.9823”. Zielony trapez u dołu obrazu czyta się jak ścieżkę, choć żadna makieta go nie podpisuje.
Slajd 8 wymienia wśród technologii TensorFlow, ale żaden materiał nie łączy go z tymi ramkami ani nie podaje, który model je liczył.
Wykrywanie
Zatrzymuje nagranie w oknie kamery i kreski paska — tak jak „zatrzymaj wykrywanie” w telefonie.
W oknie kamery gra w pętli fragment nagrania demo (ok. 3,6 s, bez mignięć) — na makiecie jest tu nieruchoma klatka. Strzałka wstecz i dolny pasek przenoszą wyżej, do pełnej repliki w rozdziale 02.
Dwie klatki, etykieta po etykiecie
Klatka B pochodzi z miniatury projektu, klatka A ze slajdu 6. Obie to chwile tego samego nagrania demo: B jest jego pierwszą klatką, a A pokazuje te same wyniki co nagranie po ok. 3,1 s, w nieco innym kadrze. Etykiety przepisujemy dosłownie; „…” oznacza tekst ucięty przez kadr albo zasłonięty inną etykietą.
Etykiety na klatce B
Wybierz etykietę — obrysujemy jej ramkę na klatce.
Etykiety na klatce A
Wybierz etykietę — obrysujemy jej ramkę na klatce.
Czyta syntezator mowy Twojej przeglądarki — to dodatek tej strony. Nagranie demo jest bez dźwięku, więc nie słychać, jak brzmiała aplikacja. Czyta po angielsku tylko pewne, całe słowa i liczby; ucięte fragmenty pomija.
Nagranie demo z Hackathonu+ 2019
Według autora to nagranie ekranu działającego prototypu, a ramki i ścieżkę liczył na żywo telefon. Trwa 12,6 s i jest bez dźwięku (oryginalny plik też jest niemy). Przez większość nagrania ścieżka jest zielona; chwilami jej dalsza część, a niekiedy cała, robi się czerwona. Od ok. 10,3 s ścieżki nie ma. Materiały nie wyjaśniają, co oznacza czerwień.
Dlaczego
Według pitchu: 1,8 mln osób niewidomych i niedowidzących w Polsce
Na początku pitchu: dwie liczby ze slajdu „Statystyki”, a zaraz po nich misja i cel projektu.
Statystyki
- 1,8 miliona
- osób niewidomych i niedowidzących mieszka w Polsce
- 284 miliony
- osób niewidomych i niedowidzących mieszka na całym świecie
Liczby ze slajdu „Statystyki” pitchu z 2019 r.; slajd nie podaje źródła. Pisownia poprawiona.
Poprawienie bezpieczeństwa, komfortu oraz jakości życia osób niewidzących i niedowidzących.
Ułatwienie poruszania się w przestrzeni miejskiej oraz planowanie podróży przez osoby niewidzące i niedowidzące
Plan i realizacja
Co było w planie, a co zaimplementowano
Slajd 5 wymienia osiem planowanych funkcji. Slajd 9 jako zaimplementowane podaje tylko dwie rzeczy: text to speech z tej listy i rozpoznawanie obiektów, którego na slajdzie 5 nie ma. Przełącznik nad listą pokazuje obie.
Pozycje slajdu 5, złożone jak lista „Personalizacja” z makiet
Slajd 5: wszystkie 8 pozycji to plan.
Funkcjonalności
- Wykrywanie kolizjiplan, slajd 5
- Znajdowanie POIplan, slajd 5
- Opis otoczeniaplan, slajd 5
- Zapamiętywanie trasplan, slajd 5
Nawigacja aplikacji
- obsługa głosemplan, slajd 5
- obsługa bez widocznościplan, slajd 5brak ekranu na makietach
Komunikacja aplikacji
- wibracja — telefon/
smartwatchplan, slajd 5brak ekranu na makietach - text to speechplan, slajd 5brak ekranu na makietach
Pozycje i grupy ze slajdu 5, pisownia poprawiona. „Najbliżej na makietach” wskazuje tylko podobny ekran z makiet i nie mówi, co działało.
Stan realizacji
Progress
Pre—MVP
pomiar z obrazu slajdu — slajd nie podaje liczby
co zostało zaimplementowane
- Rozpoznawanie obiektówzobacz: Wykrywanie
- Text to speechzobacz: Wykrywanie
dane — deklaracje z pitchu
- „Zbieramy dane osobowe”
- „Zbieramy dane dla uczenia naszego algorytmu”
- „Zbieramy dane odnośnie poruszania się użytkowników dla rozwijania algorytmu i przyszłych funkcjonalności”
Materiały nie mówią, czy i jakie dane zbierano.
Transkrypcja slajdu 9, pisownia poprawiona.
System wizualny
Żółty na czarnym: kontrast 19,55 : 1
Kolory próbkowane z plików, policzone kontrasty, zmierzona wysokość wiersza, kroje decku i aplikacji. Kontrast, paleta, krój, pasek stanu i wiersz to działające narzędzia.
Kontrast
Gotowe pary
Progi z WCAG 2.2 (kryteria 1.4.3, 1.4.6 i 1.4.11) to wartości odniesienia, nie audyt makiet. Duży tekst: od 24 px albo od 18,66 px pogrubiony.
Ścieżka na żółtym ma tylko 1,18 : 1, dlatego na tej stronie zieleń ścieżki stoi wyłącznie na czerni.
Paleta
Mediany pikseli z plików JPEG, które szumią. Miniatura ma tło #FFF466, a slajd 6 rysuje ścieżkę w #4AFB00.
Pasek stanu
„A11Y” stoi na pasku stanu w miejscu nazwy operatora — na wszystkich pięciu makietach ze slajdu 6 i na ekranie Personalizacja z miniatury. Tak w branży skraca się angielskie słowo accessibility, czyli dostępność: pierwsza litera, 11 liter pomiędzy i ostatnia. Makiety nie mówią, skąd wziął się tam ten skrót.
Wiersz listy
Wiersz listy na makiecie: 106 px przy ekranie 317 px, czyli 125 pt przy szerokości 375 pt (przeliczenie). Dla porównania: 44 × 44 px — WCAG 2.5.5 (AAA).
Pomiar makiety, a nie działającej aplikacji. Wiersz na rysunku ma skalę repliki.
Krój
Exo 2
Funkcjonalności
Akcent decku
Znajdowanie POI
Slajd 5. Kursywą deck wyróżnia pojedyncze terminy i kwoty — tak samo „freemium”, „9,99 zł” i „wearables” na slajdach 11 i 13.
Grubości na slajdach
- etykiety i hasłaSemiBold 600
- podpisyRegular 400
- akcentyItalic 400
Pomiar grubości kresek na slajdach 8 i 10–13.
Grotesk makiet
Sygnalizacja świetlna
Makiety ze slajdu 6 i z miniatury są złożone groteskiem systemowym. Replika używa groteska dostępnego na urządzeniu: Helvetica Neue, Arial albo Liberation Sans.
Ikony
- Sygnalizacja świetlna
- Przejścia dla pieszych
- Przystanki
- Bankomaty
- Przeszkody
- Personalizacja
- Wybierz trasę
- Nowa trasa
- Znajdź trasę…
- 6 punktów
- Prowadź mnie tam
- Dodaj trasę
- Włączone
- Wyłączone
Znaczenie i miejsce ikon pochodzą z makiet (slajd 6, miniatura), podpisy to napisy z makiet. Kształty są narysowane od nowa na siatce 24 jednostek — żadna ikona nie jest wycięta z obrazu.
Wszystkie pary kolorów: 13 — 10 spełnia swój próg, 3 nie.
| Para | Gdzie | Kontrast | Próg |
|---|---|---|---|
| Z makiet i slajdów | |||
| #000000 na #FFF467tekst na slajdach | tekst na slajdach | 18,39 : 1 | spełniaTekst 4,5 : 1 |
| #000000 na #FFFFFFtekst na slajdzie 8 i w strefie Post—MVP slajdu 14 | tekst na slajdzie 8 i w strefie Post—MVP slajdu 14 | 21,00 : 1 | spełniaTekst 4,5 : 1 |
| #000000 na #FFF572napisy na paskach aplikacji (slajd 6) | napisy na paskach aplikacji (slajd 6) | 18,56 : 1 | spełniaTekst 4,5 : 1 |
| #FEFF29 na #000000tekst aplikacji (slajd 6) | tekst aplikacji (slajd 6) | 19,55 : 1 | spełniaTekst 4,5 : 1 |
| #FAEA25 na #000000ikony aplikacji (slajd 6) | ikony aplikacji (slajd 6) | 16,86 : 1 | spełniaElementy interfejsu 3 : 1 |
| #9B9646 na #000000linie listy (slajd 6) — nie tekst | linie listy (slajd 6) — nie tekst | 6,84 : 1 | spełniaElementy interfejsu 3 : 1 |
| #393D42 na #FFF467ramka telefonu na tle slajdu 6 | ramka telefonu na tle slajdu 6 | 9,58 : 1 | spełniaElementy interfejsu 3 : 1 |
| Na tej stronie | |||
| #42FF0F na #000000ścieżka — tylko na czerni | ścieżka — tylko na czerni | 15,54 : 1 | spełniaElementy interfejsu 3 : 1 |
| #000000 na #FEFF29wycięty akcent na czarnych pasmach | wycięty akcent na czarnych pasmach | 19,55 : 1 | spełniaTekst 4,5 : 1 |
| #8F8C1F na #000000przygaszone wiersze (odcień dobrany, nie próbka) | przygaszone wiersze (odcień dobrany, nie próbka) | 5,94 : 1 | spełniaTekst 4,5 : 1 |
| Nie używamy | |||
| #42FF0F na #FFF467ścieżka na żółtym | ścieżka na żółtym | 1,18 : 1 | nie spełniaElementy interfejsu 3 : 1 |
| #42FF0F na #FFFFFFścieżka na bieli | ścieżka na bieli | 1,35 : 1 | nie spełniaElementy interfejsu 3 : 1 |
| #FEFF29 na #FFF467tekst aplikacji na żółtym — dlatego tytuł strony nie wychodzi poza czarną wiązkę | tekst aplikacji na żółtym — dlatego tytuł strony nie wychodzi poza czarną wiązkę | 1,06 : 1 | nie spełniaTekst 4,5 : 1 |
Kontrasty policzone wzorem WCAG 2.x z median pikseli. „Spełnia” odnosi się do progu z kolumny „Próg”.
Pitch
Plan z pitchu: pół roku do pierwszego MVP
Biznesowa część pitchu — elementy projektu i technologie, wdrożenie, monetyzacja, licencjonowanie i koszty — tak, jak zespół ją przedstawił. Wszystko tu jest planem.
Każdy krok to jeden slajd: tytuł, pełny tekst i to, czego slajd nie mówi. Karta składa go od nowa krojem Exo 2 na siatce decku, a przełącznik „Oryginał” pokazuje na niej obraz slajdu.
Elementy projektu see4me
Slajd nie mówi, które technologie weszły do prototypu ani do której części.
Nazwy technologii podajemy tekstem; ich logotypy widać tylko na oryginale slajdu.
Tekst slajdu
- Aplikacja mobilna
- Chmura obliczeniowa
- Strona internetowa opisująca projekt
technologie
- Flutter
- Go
- Firebase
- Google Cloud
- Bazel
- TensorFlow
- Dialogflow
- Google Maps Platform
Transkrypcja slajdu 8.
Sposób i termin wdrożenia aplikacji
Slajd nie podaje, od kiedy liczy się to pół roku.
Tekst slajdu
- Przewidywany termin realizacji: pół roku dla pierwszego MVP
- Do korzystania z aplikacji nie będzie wymagane żadne dodatkowe oprogramowanie
Transkrypcja slajdu 10, pisownia poprawiona.
Monetyzacja
Slajd nie podaje, ile miesięcy byłoby za darmo.
Tekst slajdu
Model subskrypcyjny
- pierwsze miesiące za darmo freemium
- potem subskrypcja 9,99 złdopisek na slajdzie: „dyktowane lekką odczuwalnością w skali miesiąca”
współpraca naszego produktu z rządem
- refundacja kosztów w ramach poprawy warunków życia dla osób niedługo po utracie wzroku/stopniowym pogarszaniu się wzroku
Transkrypcja slajdu 11, pisownia poprawiona.
Licencjonowanie
Slajd nie wymienia rynków zagranicznych.
Tekst slajdu
chcemy rozwinąć się na rynki zagraniczne po pierwszych próbach na rynku testowym — Polska
Transkrypcja slajdu 12.
Szacunkowe koszty wdrożenia
Jedna suma, bez podziału na pozycje.
Tekst slajdu
1 mln zł
koszty
- User Driven Development
- Badanie grupy docelowej użytkowników
- Badanie rynku
- Testowanie produktu
- Iteracje produktu MVP to MLP
- Zakup wearables do testów.
koszty stałe
- Opłacenie chmury obliczeniowej
Transkrypcja slajdu 13.
Harmonogram
Harmonogram wydatków: dziewięć pozycji
Slajd 14 jako oś czasu: sześć pozycji w fazie „Pre—MVP release” i trzy w fazie „Post—MVP release”. Bez dat i kwot — slajd ich nie podaje.
Każda pozycja osi to przycisk, który otwiera jej opis (Enter lub spacja); strzałki też przenoszą między pozycjami, a Home i End na pierwszą i ostatnią.
Pre—MVP release
Na slajdzie sam tytuł, bez opisu.
Koszty serwerów, koszty zapytań do Google’a
Na slajdzie sam tytuł, bez opisu.
Na slajdzie sam tytuł, bez opisu.
Università Bocconi, Uniwersytet Warszawski, Uniwersytet Wrocławski
plan wydatków — nie opis konsultacji, które się odbyły
Dostosowanie zasad przetwarzania informacji do wymogów UE
Post—MVP release
Opłacanie spotkań z użytkownikami i zbieranie feedbacku przez cały proces rozwijania projektu
Zakup lub wypożyczenie różnych marek telefonów do testów aplikacji
Opis pod tą pozycją powtarza pozycję 7.
Plan wydatków z pitchu — bez dat i kwot. Pod pozycją 9 slajd powtarza opis pozycji 7, więc pokazujemy sam tytuł. Pisownia poprawiona.
Prasa
Hackathon+ w Polskim Radiu 24
Relacja Polskiego Radia 24 (24.11.2019) i tweet ministerstwa (23.11.2019) opisują hackathon, na którym powstał see4me.
Znaczniki
Wybierz fakt — ramka wskaże go na wycinku, a w transkrypcji podświetli się zdanie.
Polskie Radio 24, 24.11.2019
tweet MFiPR, 23.11.2019
Transkrypcja
Artykuł
- ostatnia aktualizacja: 24.11.2019 21:13
- Aplikacje na pomoc niepełnosprawnym. Znamy zwycięzców Hackatonu+ (pisownia oryginalna)
- IAR
- W Warszawie dobiegła końca druga edycja Hackathonu+.
- Podczas 24-godzinnego maratonu na Stadionie PGE Narodowy, programiści z całej Polski szukali rozwiązań ułatwiających niepełnosprawnym i seniorom poruszanie się między innymi w przestrzeni wirtualnej.
- […] (pominięty fragment strony)
- O zwycięstwo walczyły 22 zespoły.
- Jurorzy podkreślali, że poziom tegorocznej edycji był bardzo wysoki, a wybór zwycięzcy nie był prosty.
Transkrypcja
Tweet
- Aplikacje dla seniorów, osób niewidomych i niedowidzących, głuchych i niedosłyszących, a także tych, które mają problemy z mobilnością - nad tym pracuje ponad 100 uczestników #Hackathon+.
- Programiści na razie nie zdradzają szczegółów [dwa emoji: buzia bez ust i mrugnięcie]
Na zachowanym zrzucie strony artykuł opisuje wydarzenie i zwycięski zespół, ale see4me z nazwy nie wymienia. Opis projektu podaje 3. miejsce see4me. Nie wskazujemy, kto jest na zdjęciach w tweecie.
Wycinki zrzutu strony: od nagłówka do leadu, akapit o 22 zespołach i osadzony tweet. Resztę strony pominęliśmy.
Archiwum
Wszystkie materiały i zespół
Slajdy z materiałów (jako obrazy i jako tekst), miniatura, nagranie i wycinek prasowy, a na końcu zespół, źródła i prawa.
Gdy slajd ma fokus, strzałki w lewo i w prawo zmieniają slajd, a Home i End przechodzą do pierwszego i ostatniego.
- 7 — brak w materiałach
Inne materiały
Zespół
lista zespołu- UX Design: Jakub Nowakmoja rola
- przepływ ekranów i układ makiet
- treść i architektura aplikacji
- pitch deck i jego prezentacja przed jury
- Visual Design: Klaudiusz Kędziora
- Data Science: Aleksander Kuśmierczyk
- Data Science: Elton Arreza
- Front-end: Kamil Pilawka
- Back-end: Aleksander Kubych
Źródła i prawa
Źródła
Prawa
- slajd 3 — znak DC, niepokazany
- nazwy i logotypy technologii na slajdzie 8 należą do ich właścicieli
- zrzut artykułu (Polskie Radio 24 / IAR) oraz tweet i jego zdjęcia (Ministerstwo Funduszy i Polityki Regionalnej, @MFIPR_GOV_PL) należą do ich właścicieli
- Exo 2 — SIL Open Font License
Uwagi
- Dane w replice są przykładowe — z makiet.
- Głos: syntezator mowy przeglądarki, dodatek tej strony.