Strona www Fundacji Rodzić po Ludzku
1346
portfolio_page-template-default,single,single-portfolio_page,postid-1346,bridge-core-1.0.4,ajax_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,qode-content-sidebar-responsive,qode-child-theme-ver-1.0.0,qode-theme-ver-18.0.7,qode-theme-bridge,disabled_footer_bottom,qode_header_in_grid,wpb-js-composer js-comp-ver-5.7,vc_responsive

Strona www Fundacji Rodzić po Ludzku

  • Strona mobilna
  • Projekt UI
  • Projekt strony internetowej
  • architektura informacji
  • Strona responsywna

O projekcie

Fundacji Rodzić po Ludzku, to fundacja działająca na rzecz kobiet i dzieci w okresie okołoporodowym od przeszło 25 lat. Tak długi czas działania pozwolił fundacji zgromadzić wiele merytorycznej wiedzy i rozbudować swoje działania. 

Fundacja zaprosiła nas do współpracy w ramach redesignu i wdrożenia nowej strony internetowej. Strony, która dobrze zaprezentuje oferowaną wiedzę i łatwo dotrze ze swoimi usługami do potrzebujących i wesprze fundację w realizacji strategii. Jasno określoną przez fundacje potrzebą było stworzenie responsywnej strony z dotrzymaniem zasad dostępności dla osób z niepełnosprawnościami (WCAG).

Rozpoczęliśmy od dogłębnego rozpoznania zawartości strony, aby móc przejść do dalszych kroków.

 

Jak wyglądał proces naszej pracy?

 

Warsztaty

Warsztaty z przedstawicielkami wszystkich działów fundacji pozwoliły nam zmapować wszystkie sytuacje, w jakich użytkownik styka się ze stroną www.  Omówiliśmy potrzeby i oczekiwania fundacji dotyczące nowej strony oraz omówiliśmy potrzeby użytkowniczek zdefiniowane przez NGO. 

Wspólnie z fundacją zdefiniowaliśmy dwie grupy docelowe i przystąpiliśmy do katalogowania zakresu wiedzy dostępnej  na stronie.

Powstała mapa zawierająca hierarchię i architekturę informacji nowej strony.

 

Przygotowanie projektu

Mobile First. To idea jaka przyświecała nam przy projektowaniu strony. Według danych z Google Analytics  90% użytkowników przegląda stronę na telefonach komórkowych. Dlatego jako pierwszy powstał projekt widoku dla rozdzielczości mobilnych Projektując stronę, korzystaliśmy z wytycznych fundacji zawartych w brandbooku i informacji o nastroju i emocjach jakie strona ma wywoływać. Projekt powstał z wykorzystaniem programu Adobe XD.Przedstawiliśmy fundacji propozycje designu bazując na projekcie trzech wybranych podstron. Drugim krokiem było doszlifowanie, a następnie przeniesienie wybranego projektu na pozostałe części serwisu.

W kolejnym kroku pracowaliśmy nad responsywnością, definiując zasady skalowania dla każdego z modułów.

Po zaprojektowaniu strony wizualnej i przetestowaniu prototypu przyszła kolej na wdrożenie.

 

Wdrożenie

Prace programistyczne czyli przeniesienie projektu na język programowania rozpoczęły się od przygotowania responsywnego layoutu strony w HTML, który miał zapewnić odpowiednie zachowanie elementów na wszystkich urządzeniach, niezależnie od ich rozdzielczości.

Kluczowym elementem była migracja treści ze starej strony, do przeniesienia była 25 letnia historia strony- choć musimy przyznać że Fundacja zrobiła przy okazji migracji duże porządki w archiwalnych treściach.  Przeniesione treści należało także uporządkować w nowej strukturze strony: przypisać do nowych kategorii, „otagować” a także zadbać o ich wygląd zgodny z nowym layoutem – gdyż nie wszystkie z tych zadań można było wykonać automatycznie.

 

Integracje

Dla odpowiedniego funkcjonowania strony musieliśmy zintegrować ją z zewnętrznymi narzędziami, które pomagają fundacji zarządzać treściami i komunikacją, m. in. Google, Facebook, SalesForce czy Systemem wpłat darowizn. 

 

Dostępność WCAG 2.1.

Strona została zaprojektowana i wdrożona z zachowaniem wymogów dotyczących dostępności cyfrowej. Została przystosowana do korzystania z użyciem syntezatorów mowy. Kontrast oraz wielkość elementów na stronie zachowują parametru korzystne do użycia przez osoby z dysfunkcjami.

 

Efekt

W wyniku naszych prac powstała responsywna strona internetowa informująca o działaniach fundacji oraz, będąca bazą wiedzy dla kobiet i profesjonalistów z branży okołoporodowej. Strona zawiera szereg narzędzi, takich jak generator zgłoszenia naruszeń w placówkach medycznych, ankieta głos matek, petycje. Strona ma przejrzystą strukturę, która wspomagana jest również zaawansowaną wyszukiwarką, która ułatwia poruszanie się po bogatej bazie wiedzy.

www.rodzicpoludzku.pl

Kategoria
Strategia komunikacji, UX/UI, www