Projektowanie stron www dla NGO (fundacji i stowarzyszeń) i projektów EKO - case study 2014

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 CHMIELOWSKI CEO, 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 Olkusz ICEportal4 CMS (UX Leader) DAMIAN ŚWIERK Customer Account Manager Obsługa Klienta przy wdrażaniu serwisów www Wybrane projekty: FDPA - Biogazownia rolnicza sprawa publiczna Dinofach.pl, Krakchemia.pl JUSTYNA WOSZCZYNA Creative 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.pl kampinoskiebagna.pl, caewse.pl KONRAD programista 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ółpracy Etap 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ółpracy Etap 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 projektu Etap 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 graficzne Etap II Case study Wdrożenie finalnego projektu Etap 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 ICEportal 4 CMS Etap 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 podstawowych Etap 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 niestandardowych Etap 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 niestandardowych Etap 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ń mobilnych Etap 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ń mobilnych Etap 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 Podsumowanie Case study ❏Czas realizacji: 45 dni [16.05 (podpisanie umowy) 01.07 (serwis gotowy do publikacji)] ❏Dotrzymanie terminu określonego w umowieTAK ❏System CMS TAK (ICEportal4 CMS - autorski system Krakweb.pl) ❏Liczba indywidualnych projektów graficznych2 (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 projektu osoba 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 <3 Asana.com pozwala na: ❏komunikację w zespole projektowym, ❏podział projektu na zadania, ❏przypisanie zadań członkom zespołu + terminów ❏monitorowanie postępów realizacji projektu Asana.com pomaga w przygotowaniu, realizacji i wdrożeniu projektu. Ułatwia jego kompleksową obsługę. Zaufali nam 1 2 3 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 http://goo.gl/Ll6vZs 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.pl www.krakweb.pl www.marketing.4www.pl ul. Rzemieślnicza 20/124B Kraków