Animality
Consulting i projektowanie strony www
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: Animality_platforma videostreamingowa i aplikacja mobilna.
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, potencjalni
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 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
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 aplikcji, dla zachowania spójności na stronie www użyliśmy tych samych zasad użycia buttonów, budowania sekcji czy grafik.
masz wizję, którą chcesz zrealizować?
Skontaktuj się z nami, a my pomożemy Ci zbudować markę, która zdobędzie rynek.