Serwisy internetowe dla NGO dobre praktyki, case study

na przykładzie projektu “Biogazownia rolnicza - sprawa publiczna”

✔ Zespół ✔ Przygotowania ✔ Realizacja ✔ CMS i moduły ✔ RWD ✔ Podsumowanie ✔ Zarządzanie projektem

✔ Dajemy więcej ✔ Zaufali nam ✔ Referencje

Gotowi na wszystko :)Zespół projektowy

MACIEJ CHMIELOWSKICEO, ux/marketing

8 lat w marketingu (SEO, content marketing,

social media, growth hacking), 4 lata w UX, CRO (B2B &B2C)

Wybrane projekty:Fleet Poland

Emalia OlkuszICEportal4 CMS (UX Leader)

DAMIAN ŚWIERKCustomer Account

Manager

Obsługa Klienta przy wdrażaniu serwisów www

Wybrane projekty: FDPA - Biogazownia

rolnicza sprawa publicznaDinofach.pl, Krakchemia.pl

JUSTYNA WOSZCZYNACreative director, web

designer

8 lat w (web) designie, corporate identity, skład książek.

Wybrane projekty: mcarthur.com.pl, e-lango.pl

lcmedia.pl, gospodarzzenergia.plkampinoskiebagna.pl, caewse.pl

KONRADprogramista

front-end developer

6-letnie doświadczenie we wdrażaniu stron www

i programowaniu,PHP, Javascript, jQuery,

HTML/HTML5, CSS3, XML

www.sita.edu.pl www.kampinoskiebagna.pl

www.delphipoland.com

Przed podjęciem decyzji o współpracyEtap I Case study

❏ Zapytanie od FDPA z opisem projektu:

❏ Na starcie sprecyzowany cel: stworzenie serwisu internetowego, który będzie

przejrzysty i łatwy w obsłudze dla samorządowców chcących zdobyć wiedzę

na temat biogazwoni

❏ Pierwszy krok: zaproponowanie szeregu możliwych rozwiązań do osiągnięcia celu

❏ Wprowadzenie zasady Pareto (z racji na specyfikę projektu) :

❏ 20% czasu poświęconego na analizę oczekiwań i przygotowanie oferty zostało

poświęcone na naszkicowanie na kartce papieru roboczej makiety kluczowej strony

całego serwisu www

❏ Rezultat zastosowania zasady Pareto [slajd 6]

Przed podjęciem decyzji o współpracyEtap I Case study

❏ Dobór potrzebnych dla serwisu modułów

❏ Wysłanie kompleksowej oferty do FDPA

❏ Akceptacja wstępnego projektu przez FDPA

❏ Spotkanie organizacyjne

❏ doprecyzowanie oczekiwań klienta

❏ zasady promocji

❏ kwestie finansowe

❏ terminy

❏ zasady wsparcia technicznego

❏ Akceptacja udoskonalonej oferty przez FDPA

❏ Negocjacje oraz podpisanie umowy

❏ Rozpoczęcie prac nad serwisem

Realizacja projektuEtap II Case study

Schemat przebiegu realizacji:

Szkic - makieta na kartce Makieta klikalna - UxPin Finalny projekt graficzny widoku artykułu

Makietowanie pojedynczego artykułu Etap II Przygotowanie najważniejszego widoku serwisu

Wstępne projekty graficzneEtap II Case study

Wdrożenie finalnego projektuEtap II Case study

❏ Przedstawienie 2 indywidualnych, wstępnych projektów graficznych❏ wdrożenie uwag do wybranego (2 tury)❏ rozpoczęcie kodowania finalnego projektu na stronie

❏ Stworzenie logo projektu

❏ Prace programistyczne nad przygotowaniem specjalistycznych funkcji ❏ między innymi moduł publikacje - wielofunkcyjny moduł, przyjazny

dla wielu redaktorów❏ Wprowadzenie treści publikacji

❏ zwiększanie atrakcyjności przez dobór zdjęć oraz wysokiej jakości grafiki

Instalacja systemu ICEBERG CMSEtap III

❏ Nowoczesny i przejrzysty interfejs – zarządzanie stroną jest teraz jeszcze prostsze!

❏ Panel RWD - przystosowany do korzystania na urządzeniach mobilnych

❏ Szybki dostęp - zagregowane funkcje ułatwiają edycję modułów w jednym miejscu

❏ Indywidualne zarządzanie widokiem strony startowej❏ Analityka - Najważniejsze statystyki strony

Instalacja modułów podstawowychEtap III

Menu główne

Aktualności

Publikacje (artykuły)

Slider

Galeria zdjeć

Edytor tekstowy TinyMCE

Wyszukiwarka

Mapa Google

Boksy dodatkowe, tekstowo-graficzne

Newsletter

Formularz kontaktowy

Widgety social media

Programowanie modułów niestandardowychEtap III

Zestaw rozwiązań dla sprawnej nawigacji i użytkowania strony:

❏ Rozwijane menu boczne ze strukturą rozdziałów❏ Ścieżka dostępu (okruszki)❏ FAQ❏ Wyszukiwarka❏ Chmurki z podpowiedziami❏ Mapa strony❏ Rejestracja i logowanie❏ Dodanie do ulubionych❏ Ostatnio przeglądane artykuły

Programowanie modułów niestandardowychEtap III

Zaawansowany moduł „Publikacje”

❏ Nieograniczona liczba autorów (dostęp tylko do swojej sekcji)❏ Drukowanie / pobieranie❏ Tagi❏ Zdjęcie główne artykułu❏ Powiązane artykuły („zobacz też”)❏ Komentarze❏ Pytania do autorów❏ Inne artykuły danego autora❏ Krótkie adresy poszczególnych treści (sprzyjające pozycjonowaniu)

Dostosowanie do urządzeń mobilnychEtap IV

❏ Wyzwanie

Aby w pełni wykorzystać potencjał swojej strony internetowej nie wystarczy już strona zaprojektowana z myślą tylko o komputerach. FDPA było tego świadome od początku.

❏ Rozwiązanie

Responsive Web Design (RWD) to technika projektowania, dzięki której strona www automatycznie dopasowuje się do wielkości ekranów różnych urządzeń.

Dostosowanie do urządzeń mobilnychEtap IV

Efekt:

❏ wygodne przeglądanie treści witryny na laptopie, tablecie czy telefonie komórkowym (smartfonie)

❏ Mechanizm działania RWD jest skuteczny, bo prosty: wraz ze zmianą rozdzielczości ekranu zmienia się układ, rozmiar, a nawet forma zawartości strony: tekstów, grafik, menu

❏ Witryna pozostaje zawsze czytelna, bez konieczności niewygodnego przybliżania, oddalania czy przesuwania na boki w urządzeniach mobilnych

PodsumowanieCase study

❏ Czas realizacji: 45 dni [16.05 (podpisanie umowy)

01.07 (serwis gotowy do publikacji)]

❏ Dotrzymanie terminu określonego w umowie TAK❏ System CMS TAK (ICEBERG CMS - autorski system Krakweb.pl)❏ Liczba indywidualnych projektów graficznych 2 (każdy po 2 widoki: strona główna + artykuł)❏ Dostosowanie do urzędzeń mobilnych TAK (Responsive Web Design)❏ Makietowanie TAK (1 widok artykułu)❏ Liczba roboczogodzin ok. 145❏ Pozostałe:

❏ hosting, ❏ konfiguracja domeny, wsparcie techniczne (czas reakcji do 2h od zgłoszenia), ❏ gwarancja 12 miesięcy

Znamy i rozumiemy specyfikę pracy

zaufanie

wybór projektów graficznych także przy wariancie z jednym indywidualnym

gwarancja + wsparcie techniczne

RWD - strona mobilna

doradztwo (użyteczność, grafika, rozmieszczenie informacji, struktura)

dotrzymywanie terminów

przejrzysta umowa

podstawowe logo projektuosoba kontaktowa dedykowana do projektu

szkolenie

łatwy w obsłudze system CMS

dobór zdjęć i pomoc w zakupie z portali stockowych

pomoc przy opisie strony (np. technologie) do złożenia wniosku

gwarancja nieprzekraczalnego budżetu

niestandardowe rozwiązania: rozbudowane ankiety, sondy, mapy obiektów itp.

doradztwo w zakresie domeny, hostingu

Zapisy na eventy (konferencje, szkolenia) online

specyficzne warunki rozliczenia - czasem bez możliwości zaliczki

dłuższe terminy za zgłoszenie uwag

Zarządzanie projektem

Prowadzimy projekty w:❏ Asana.com <3Asana.com pozwala na:❏ komunikację w zespole projektowym,❏ podział projektu na zadania, ❏ przypisanie zadań członkom zespołu + terminów❏ monitorowanie postępów realizacji projektuAsana.com pomaga w przygotowaniu, realizacji i wdrożeniu projektu. Ułatwia jego kompleksową obsługę.

Zaufali nam

1

23

4

“Jakość Państwa pracy oceniam bardzo wysoko, w szczególności terminowość.“

Marek Wiśniewski, Korporacja Samorządowa im. Józefa Dietla

“Dziękuję. Muszę przyznać, że pana "opieka" nad nami daje mi bardzo dobre "customer experience" :)” Kamil Dudwał, MDT

“Elastyczność, profesjonalizm, szybkość działania, a przede wszystkim fachowa pomoc w administracji systemem [...] polecamy Agencję Interaktywną Krakweb.pl jako rzetelnego partnera.” Aleksandra Skawiniak, Genesis Consulting

Zaufali nam także: http://goo.gl/Ll6vZs

Mówią o nas

Zapraszamy do współpracy

Damian Świerk

✉ damian@krakweb.pl☎ (+48) 530 555 521☏ (12) 429-30-13

Agencja Interaktywna Krakweb.plwww.krakweb.pl

www.marketing.4www.pl

ul. Rzemieślnicza 20/124B Kraków