Animality
Wdrożenie strony www dla globalnej inicjatywy prozwierzęcej
O Projekcie Animality i naszej roli
Projekt Animality narodził się z pasji Fundacji Centaurus do ochrony zwierząt i chęci stworzenia przestrzeni online, która połączy ośrodki zajmujące się pomocą zwierzętom z całego świata. Celem tej charytatywnej platformy edukacyjnej jest udostępnienie materiałów wideo, które dokumentują działania na rzecz zwierząt – bez granic, na skalę globalną. Jednak, aby ta wizja mogła stać się rzeczywistością, niezbędne było wykonanie pierwszego kroku czyli stworzenie strony www prezentującej założenia projektu.
Więcej o samej platformie w naszym case study:
https://www.efresh.com.pl/portfolio/animality/
Etap 1: Analiza potrzeb i funkcji
Z uwagi na prospołeczny i edukacyjny charakter projektu założenia projektowe opracowaliśmy w drodze warsztatowej. Potrzeby zbadaliśmy w dwóch rodzajach warsztatów: po pierwsze pracując z Pracownikami Fundacji Centaurus, którzy od ponad 18 lat opiekują się zwierzętami, po drugie rozmawiając z Donatorami z baz ponad 1 mln darczyńców Fundacji. Dzięki temu, zrozumieliśmy, co ich napędza do działania, jaki cel chcą osiągnąć i dlaczego angażują swój czas i pieniądze w pomaganie. Efektem etapu intensywnych analiz są zazwyczaj mapy myśli, userflow oraz kreacja pomysłów na unikalne funkcjonalności.
Etap 2: Kształtowanie rozwiązań wg potrzeb poszczególnych person
Założeniem wypracowanym na warsztatach było zaprojektowanie strony internetowej będącej przestrzenią, która zbuduje pierwsze emocjonalne więzi Animality z użytkownikami. Zastanawialiśmy się, jak przedstawić projekt, jak przyciągnąć uwagę i sprawić, by zainteresowanie nie opadło, zanim platforma ruszy na pełną skalę.
Persona A: potencjalni darczyńcy
Persona B: ośrodki pomocy Zwierzętom i twórcy contentu
Persona C: interesariusze tacy jak media, potencjalni sponsorzy, agencje PR
Po analizie potrzeb poszczególnych Person krok po kroku, zaczęliśmy planować tematykę contentu.
Etap 3: Od szkicu do struktury - makiety low-fidelity i projekt strony głównej
Zebrane wcześniej wnioski przekształciliśmy w pierwsze szkice – powstały makiety low-fidelity, które pozwoliły szybko przetestować strukturę strony i logikę treści. Skupiliśmy się przede wszystkim na stronie głównej, bo to ona miała jako pierwsza wprowadzać użytkownika w świat Animality. Bez zbędnych ozdobników – tylko czarno-białe siatki, które pokazały, co naprawdę jest ważne.
Klikalny prototyp high-fidelity desktop
Po zatwierdzeniu home (desktop i mobile) wykonaliśmy projekty 22 unikalnych widoków podstron oraz 13 widoków uzupełniających. Na tym etapie strona zaczęła wyglądać tak, jak miała wyglądać naprawdę – z typografią, kolorami i stylem, który od początku mieliśmy w głowie oraz założeniami funkcjonalnymi.
Dzięki klikalnym widokom mogliśmy sprawdzić jak użytkownicy będą poruszać się po stronie, co przyciąga ich uwagę i gdzie mogą się zgubić. Prototyp to dla nas narzędzie testowe i dokumentacyjne – stanowi bazę dla wdrożenia.
Funkcjonalności na www przed uruchomieniem platformy:
- Rozbudowany blog stanowiący „przedsmak” contentu, który będzie publikowany po uruchomieniu platformy
- Moduł zarządzania webinarami umożliwiający lepszy kontakt z uczestnikami i organizację webinarów oraz budowanie baz uczestników
- Newsletter zintegrowany z bazą zarządzania zgodami wg wymogów RODO
- Moduł kariery zachęcający ośrodki z całego świata oraz twórców contentu do współpracy z Animality
- „Pudełko pomysłów” czyli przestrzeń, w której każdy z użytkowników-wolontariusz może włożyć swój wkład inicjując ciekawe rozwiązanie na rzecz Zwierząt
Makietowanie desktop
Zaprojektowaliśmy layout strony www prezentującej projekt Animality. Naszym zadaniem było nie tylko opracowanie wizualne strony, ale także zaproponowanie funkcjonalności niezbędnych na etapie startu projektu oraz rozwojowych, które będą mogły być wprowadzane w kolejnych etapach. Byliśmy odpowiedzialni również za wdrożenie strony, czego podjął się nasz zespół deweloperski eFresh.
Klikalny prototyp high-fidelity
mobile
Wersja mobilna była niezwykle istotna w całym projekcie, ponieważ Animality ma trafiać do ludzi, którzy niekoniecznie zasiadają przy biurku. Chcieliśmy, aby wizualnie był to dla nich element zabawy, odskoczni, lepszego świata, a warstwie funkcjonalnej możliwe zbliżenie się do prostoty działania aplikacji mobilnych.
Prototyp na urządzenia mobilne to w naszym rozumieniu nie tylko przeskalowanie – to osobna historia. Odmiennie od desktopu układaliśmy priorytety, inaczej prowadzone były interakcje. Chcieliśmy, żeby strona była lekka, szybka i intuicyjna – nawet w biegu, między spotkaniami czy w drodze do schroniska.
Klikalny prototyp pozwolił sprawdzić, jak użytkownicy odbierają mobilny flow. Gdzie klikają? Co pomijają? A co wywołuje efekt „ok, to działa”. Czy fajnie działa musicie ocenić już sami.
Makietowanie mobile
W erze dominacji smartfonów i tabletów priorytetem było zapewnienie użytkownikom wygodnego dostępu do platformy w każdych warunkach.
Podczas projektowania Animality kluczowym elementem było stworzenie intuicyjnego i estetycznego interfejsu dostosowanego do urządzeń mobilnych. Dzięki temu Animality gwarantuje płynne i przyjazne korzystanie z platformy na każdym urządzeniu
Wdrożenie desktop i mobile
Z uwagi na specyfikę wdrożenia (strona www stanowiła tylko część “ekosysytemu Animality) proces pracy deweloperskiej zajął ok. 4 miesięcy. Strona www stanowiła “wizytówkę” platformy i docelowo miała pozostać jako jej część przed zalogowaniem.
Prace wdrożeniowe podzielone zostały na sprinty (każdy sprint miał 5 dni roboczych) w tym: 4 dni robocze zajmowała praca developerów, 2-4 h testowanie QA testera, poprawki 2-4 h, testowanie po stronie Klienta 4 h. W każdym sprincie planowaliśmy niewielki okres czasu na poprawki z uwagi na stosunkowo mały zakres prac, w przypadku szybszego wykonania zaczynaliśmy kolejny sprint.
Zarządzanie i kontrola postępów:
- w systemie Monday.com prowadziliśmy board dostępny dla Klienta i zespołu, w którym kontrolowaliśmy postęp projektu
- Klient sprawdzał dany sprint i zwracał uwagi w komentarzach do danego sprintu
- zamykanie danego sprintu, protokół odbiorczy i rozliczenie prac odbywało się całkowicie zdalnie
- po zakończeniu wdrożenia całości ok. 4-5 dni zajęło nam przetestowanie i w tzw. wersji BETA czyli gotowej do uzupełnienia contentem
Dokumentacja uzupełniająca
Za każdym dobrze zaprojektowanym interfejsem stoi jeszcze coś mniej widowiskowego, ale
kluczowego – dokumentacja wdrożeniowa. Zazwyczaj w jej skład wchodzą w naszych pracach:
Specyfikacja contentu – czyli opisanie dla dewelopera jakie są wytyczne techniczne do budowy kontenerów tekstowych (ilość znaków, sposób zachowania np. zwiń-rozwiń), określenie wielkości zdjęć i video (wymiary, rozdzielczość, max. wielkość plików)
Specyfikacja edytowalne-nieedytowalne – opis przeznaczony zarówno dla deweloperów jak i Klienta, określający jakie pola będą edytowalne i wykonalne z panelu administratora (bezpośrednio przez pracownika Klienta), a jakie będą wymagały ewentualnej pomocy deweloperskiej
Specyfikacja integracji – opis integracji z systemami zewnętrznymi – w przypadku Animality musieliśmy opisać zasady integracji z międzynarodowymi systemami rozliczeniowymi (m.in. PayPal, PayU)
Design system – zespół UX_UI przygotował design system dla platformy i aplikacji, dla zachowania spójności na stronie www użyliśmy tych samych zasad użycia buttonów, budowania sekcji czy grafik
Przygotowanie do publikacji
strony www
Przy każdym wdrożeniu proces przygotowania do publikacji jest niemalże taki sam. Naszym celem jest zachowanie jakości i uniknięcie popełnienia błędów przy przenoszeniu na LIVE.
- wersja BETA – powstaje jako gotowy mechanizm do obsługi przez administratorów i redaktorów po stronie Klienta, posiada pełne funkcjonalności, na tej wersji Klient pracował uzupełniając content
- szkolenie i wsparcie dla administratora po stronie Klienta na wersji BETA – standardowo szkolimy i w przypadku jakichkolwiek problemów zapewniamy asystę dla zespołu Klienta
- wprowadzenie contentu w wersjach językowych – w tym wypadku w dwóch wersjach
- testowanie manualne na środowisku testowym w tym formularze, linki do mediów społecznościowych
- optymalizacja szybkości ładowania strony
- optymalizacja pod SEO, uruchomienie baz remarketingowych, opomiarowanie strony www
Wsparcie techniczne
i rozwój
Zawsze oferujemy wsparcie powdrożeniowe, w którym planujemy taski rozwojowe z 3 miesięcznym wyprzedzeniem, statusy prac i bieżącą komunikację prowadzimy w oparciu o system Monday.com, cyklicznie spotykamy się na warsztatach w celu udoskonalenia powstałej strony.
Co zapewniamy w trakcie obsługi stałej?
- ciągłość wiedzy zespołu – pomimo kilkukrotnej zmiany zespołu w ciągu tak długiego okresu współpracy
- design system / design lab / klikalne makiety – utrzymujemy kluczowe projekty graficzne w stanie gotowym do zmian/rozwoju
- środowisko testowe 1:1 oraz repozytorium kodu – utrzymujemy kopię systemu na środowisku testowym, prowadzimy archiwum kodu
- bieżące update’y utrzymaniowe – dbamy o aktualizację i niezawodność działania
W cenie wdrożenia zawsze przekazujemy pełne prawa autorskie do projektów i kodu z prawem do ich dowolnych zmian.
masz wizję, którą chcesz zrealizować?
Skontaktuj się z nami, a my pomożemy Ci zbudować markę, która zdobędzie rynek.