Animality
Wdrożenie platformy videostreamingowej o zasięgu globalnym
O projekcie Animality
Animality to jeden z projektów Fundacji Centaurus, który realizowaliśmy od idei po gotowy, cyfrowy produkt. Celem projektu było stworzenie międzynarodowej platformy video, która edukuje i angażuje, prezentując działania na rzecz zwierząt prowadzone w różnych zakątkach świata. To przestrzeń wirtualna, która łączy organizacje, wolontariuszy i osoby, którym los zwierząt nie jest obojętny.
Zakres prac nad dokumentacją
Naszym zadaniem było kompleksowe opracowanie dokumentacji wdrożeniowej oraz projektów graficznych dla platformy videostreamingowej Animality w technologii JAVA oraz aplikacji mobilnej (iOS i Android). Jej zadaniem było przeniesienie doświadczenia Animality na urządzenia mobilne, tak by ułatwić przeglądanie video na urządzeniach mobilnych (wzorem np. aplikacji Netflix). Biorąc pod uwagę zasięg globalny projektu w pracach przedwdrożeniowych musieliśmy m.in. rozwiązać temat wersji językowych widoków dla Donatora Abonenta ale również panele do zarządzania contentem i platformą w modelu rozproszonym dla Twórców z całego świata.
Analiza ról użytkowników
i architektury systemu
Wspólnie z zespołem deweloperskim eFresh przeanalizowaliśmy role użytkowników, opracowaliśmy założenia funkcjonalne, a następnie przełożyliśmy je na opisy kluczowych widoków, ścieżki użytkownika i strukturę interfejsu. Powstała dokumentacja stała się bazą do przygotowania makiet low-fidelity, które uporządkowały cały system i pozwoliły płynnie przejść do projektowania docelowych layoutów.
Kluczowe role zdefiniowane na platformie:
Grupa A Donatorzy_Abonenci (Oglądający) – osoby wspierające projekt w tym zarówno Dorośli jak i dzieci (odbiorcy contentu)
Grupa B Ośrodki _Twórcy contentu – opiekunowie Zwierząt pokazujący swoją codzienną pracę i dzielący się doświadczeniem w opiece nad zwierzętami z całego świata
Grupa C Zespół Animality – scenarzyści, montażyści video, opiekunowie Ośrodków – czyli wszystkie osoby które przetwarzają content i obsługują platformę
Grupa D Managerowie Animality – zespół zarządzający procesami na platformie i podejmujący kluczowe decyzje
Na etapie analizy dużą uwagę poświęciliśmy na opracowanie architektury systemu wraz z zasadami komunikacji pomiędzy jego poszczególnymi modułami, z uwzględnieniem potrzeb poszczególnych grup użytkowników.
Lista widoków i funkcjonalności
Efektem analiz i prac koncepcyjnych był dokument tzw. userflow, w którym opisaliśmy procesy zachodzące na platformie, algorytmy rejestracji i logowania użytkowników oraz założenia działania poszczególnych widoków. Na potrzeby platformy videostreamingowej powstał ponad 600 stronnicowy dokument, który stanowił bazę do etapu projektowania i tworzenia klikalnych makiet.
Dla uporządkowania kolejnych prac opracowaliśmy w oprogramowaniu monday listę widoków (unikalnych oraz uzupełniających) wraz z wytycznymi dla designerów. Przy dużej ilości widoków konieczne jest dokładne zaplanowanie prac, by uniknąć braków i sprzeczności.
Na tym kroku powstał szkielet całej platformy: od ekranów rejestracji i logowania, przez onboarding i widoki startowe, aż po scenariusze użytkowników powracających oraz szczegółowe widoki materiałów wideo i ustawień konta. Każdy ekran miał swoją rolę i miejsce w architekturze aplikacji – nic nie było przypadkowe.
Projekty koncepcyjne kluczowe widoki
Po zakończeniu prac UX, realizację zadań przejął nasz zespół designerów i przygotował pierwsze, koncepcyjne projekty najważniejszych widoków, z punktu widzenia Właściciela projektu. Na tym etapie pokazaliśmy przykładowe widoki home (obrazujące m.in. zasady filtracji i tagowania video), widoki ośrodka (działające na zasadzie kanałów na YT), widoki wyświetlania wybranego video czy przykłady prostych widoków uzupełniających jak np. komunikaty specjalne.
Opracowanie design system dla platformy
Istotnym elementem naszej pracy, szczególnie przy rozbudowanych projektach, jest opracowanie spójnego Design Systemu czyli zasady tworzenia gridu (układu poszczególnych widoków), projektowania i używania buttonów, budowania sekcji czy tworzenia ilustracji. Dobrze zaprojektowany Design System ułatwia znacząco pracę zespołu deweloperskiego i pozwala uniknąć wielu błędów w fazie wdrożenia.
Donator_Abonent Makietowanie prototypów wersji web desktop
W tej fazie prac przekształciliśmy zdefiniowane wcześniej funkcjonalności i widoki w konkretne, interaktywne makiety dla wersji desktopowej platformy z punktu widzenia Donatora_Abonenta (inaczej nazywanego roboczo Oglądającym). Skupiliśmy się na ergonomii, intuicyjnej nawigacji oraz czytelności układu, aby zapewnić użytkownikom jak najlepsze doświadczenia podczas korzystania z platformy. Projektując bazowaliśmy na najlepszych doświadczeniach platform takich jak Netflix, HBO Max czy ShowTime.
Donator_Abonent wersja dark desktop
Poza standardowymi pracami, widoki desktop zostały zoptymalizowane pod potrzeby użytkowników i współczesne trendy, stąd wersja dark interfejsu. Zapewnia ona komfort użytkowania w warunkach słabego oświetlenia i podkreśla nowoczesny charakter platformy. Ponadto na platformie zaprojektowaliśmy system umożliwiający przystosowanie wielkości fontów dla osób słabowidzących.
Donator_Abonent Wersja mobilna – responsywny design platformy
Projektując mobilną wersję platformy, zadbaliśmy o intuicyjny i czytelny układ, który zapewnia wygodne korzystanie na różnych rozmiarach ekranów. Skupiliśmy się na płynnym dostępie do najważniejszych funkcji oraz wygodnej nawigacji, tak aby doświadczenie użytkownika było spójne z wersją desktopową.
Donator_Abonent wersja dark - mobilna wersja platformy
Dostosowaliśmy ciemny motyw do specyfiki urządzeń mobilnych, dbając o optymalne kontrasty i wygodę użytkowania w ruchu. Dzięki temu korzystanie z platformy na smartfonach i tabletach jest przyjemne niezależnie od warunków oświetleniowych.
Donator_Abonent aplikacja mobilna
Choć aplikacja mobilna Animality jest bardzo zbliżona funkcjonalnie do wersji web na urządzenia mobilne, jej makietowanie wymagało osobnego podejścia. Dzięki temu mogliśmy lepiej wykorzystać możliwości natywnej aplikacji, takie jak powiadomienia push, szybki dostęp z ekranu głównego czy praca offline. Nasze makiety skupiały się na wygodzie użytkowania i intuicyjnej nawigacji, dostosowując układ i elementy interfejsu do specyfiki urządzeń mobilnych z systemami Android i iOS.
Widoki aplikacji mobilnej zaprojektowaliśmy w wersji light oraz dark mode, dla wygody użytkowników. Prace graficzne nad layoutami aplikacji mobilnej obejmowały stworzenie wszystkich niezbędnych widoków: tych, które są istotne dla prawidłowego funkcjonowania i korzystania z aplikacji mobilnej, ale także widoków pomocniczych i dodatkowych.
Rozbudowany panel zarządzania procesami Zespołu Animality
Ważnym elementem platformy był opracowany i zaprojektowany przez nas rozbudowany system ERP wspomagający procesy na platformie w podziale na poszczególne działy: Marketing (działania promocyjne, mailingi, kontrola ruchu, kontakt z Celebrytami), BOK (Biuro Obsługi Klienta-Abonenta), Content (tworzenie i publikowanie video), Fundrasing czy IT i księgowość.
Opracowany system umożliwiał intuicyjne i łatwe planowanie pracy, kontrolę zadań, wymianę informacji pomiędzy działami oraz kontrolę np. sposobu rozwiązywania problemów zgłaszanych przez Abonentów.
Ośrodki i twórcy czyli zarządzanie contentem
Z punktu widzenia zasilania platformy contentem opracowaliśmy cały system dostępny po zalogowaniu umożliwiający kontrolę postępu pracy nad danym odcinkiem video. Z uwagi na bardzo duże plany, które zakładały współpracę z 200 ośrodkami i tworzenie ponad 800 odcinków w tygodniu, zarządzanie tym procesem było kluczowe dla prawidłowego działania Animality. Proces podzieliliśmy na: zadania przygotowawcze (tzw. plan zadań) czyli pracę nad scenariuszem i koncepcją, pracę nad odcinkami w przygotowaniu (tzw. plan publikacji) oraz bazę odcinków opublikowanych. Odpowiednio przystosowaliśmy do tego procesu zarządzanie zadaniami oraz plikami w projektowanym systemie.
Funkcjonalności dla Ośrodka i zespołu Animality
Zaprojektowany system umożliwiał łatwe kontrolowanie nie tylko procesu tworzenia odcinka (od scenariusza i inspiracji przygotowanych przez scenarzystów Animality, przez kontrolę materiałów surowych nagranych przez Twórców w Ośrodkach po nadzór nad fazami montażu) ale również praktycznie wszystkich procesów organizacyjnych. Naszym założeniem było stworzenie środowiska pracy i maksymalne ułatwienie pracy całego zespołu (stąd m.in. systemy alertów do zadań, czy możliwość komentowania każdego odcinka)
Moduł raportowania wyników platformy
Ważnym modułem opracowanym przez nas dla Animality jest zaawansowany system raportowania podzielony na kilka widoków : Raport Ogólny (kluczowe wyniki platformy, dostępny dla zespołu Animality), Raport Ośrodka (wybrane wyniki platformy pod kątem rozliczeń i donacji na rzecz Ośrodka tworzącego content na platformę, informacje o statusie rozliczeń), Raport Zarządu (skoncentrowany na wynikach finansowych platformy) oraz Raport dla Celebryty (uproszczony, pozwalający na prostą weryfikację rozliczeń z Celebrytą będącym brandface projektu). Uzyskanie wiarygodnych wyników w tych raportach wymagało zaprojektowania szczegółowych algorytmów umożliwiających pobieranie danych z platformy w trybie live.
Funkcje rozwojowe
W procesie tworzenia dokumentacji zawsze pojawia się sporo pomysłów i udoskonaleń na różnych etapach prac. Z doświadczenia wiemy, że aby projekt został wdrożony w rozsądnych kosztach i czasie, część z nich należy odłożyć jako funkcje rozwojowe. W projekcie Animality odłożyliśmy na ten etap m.in. niezwykle obiecujący moduł elearningowy czy live animality care.
masz wizję, którą chcesz zrealizować?
Skontaktuj się z nami, a my pomożemy Ci zbudować markę, która zdobędzie rynek.