WSB
Wyższe Szkoły Bankowe to największa grupa prywatnych uczelni wyższych w Polsce10 kampusów, różnorodne programy edukacyjne, znana, rozpoznawalna marka. Dowiedz się, jak opracowaliśmy i wdrożyliśmy najnowszą witrynę Wyższych Szkół Bankowych dla wszystkich kampusów.
Problem
Najważniejsze powody, dla których został powołany projekt nowych stron internetowych dla Wyższych Szkół Bankowych, to przede wszystkim wysłuchanie oczekiwań i potrzeb użytkowników końcowych oraz konieczność dostosowania się do szybko zmieniających się trendów w Internecie i odświeżenia technologicznego.
Z punktu widzenia technologicznego, za największy problem można było uznać to, co jest widoczne dla użytkownika końcowego zaraz po wejściu na stronę. W porównaniu do aktualnych, responsywnych stron internetowych, poprzednia strona WSB była połączeniem dwóch stron Internetowych – strony mobilnej i desktopowej. Choć takie połączenie w efekcie dawało możliwość poprawnego renderingu strony na urządzeniach zarówno mobilnych, jak i komputerach stacjonarnych, trzeba zwrócić uwagę na fakt, że strony różniły się pod kątem dostępu do pełnej zawartości merytorycznej oraz funkcjonalnością. Można stwierdzić, że strona mobilna ustępowała swoją zawartością i funkcjonalnością stronie desktopowej – co tworzyło problem dla użytkownika końcowego, który odwiedzał stronę np. ze smartfona.
Co więcej, dwie strony działające niemal zupełnie oddzielnie tworzyły problem w zarządzaniu. Dwie witryny – desktopowa i mobilna – powodowały, że konieczne było utrzymywanie dwóch serwisów nie tylko pod względem technicznym, ale również graficznym.
Oprócz problemów związanych z funkcjonalnością i użytecznością w warstwie wizualnej dochodziły również problemy związane z obsługą panelu administracyjnego przez redaktorów treści, który cechował się małą ergonomicznością i elastycznością w tworzeniu treści.
Do wyżej wymienionych dodać można również problemy technologiczne back-endu. Dotychczasowa strona Wyższych Szkół Bankowych została opracowana w oparciu o open-sourcową technologię Drupal, jednak mnogość instancji, osobne wersje mobilne i desktopowe oraz niezgodność ze standardami wykorzystanej technologii, spowodowały problemy natury technicznej w tym: utrudnione aktualizacje oprogramowania do najnowszej wersji i rozwój witryny o nowe funkcjonalności, brak mechanizmów auto-optymalizacji, czy problemy z wydajnością witryn.
Nasze rozwiązanie
Biorąc pod uwagę zakres działalności Klienta oraz branżę, opracowaliśmy nową, responsywną, dynamiczną i łatwą do aktualizacji stronę internetową opartą o technologię, w której mamy wieloletnie, eksperckie doświadczenie: Drupal.
Decyzja o użyciu Drupala jest uzasadniona wieloma korzyściami dla Klienta. Po pierwsze, jako system CMS (Content Management System), Drupal pozwoli Klientom na ergonomiczne i własnoręczne aktualizacje strony internetowej. Technologia Drupal jest więc dokładną odpowiedzią na potrzebę grupy placówek edukacyjnych, które dość często aktualizują stronę, dodają nowe treści i obsługują imponującą ilość użytkowników – studentów.
Drupal jest bardzo elastyczny i z łatwością pozwala na rozwój funkcjonalności – co w dzisiejszych czasach jest niemal standardem, biorąc pod uwagę, że technologie i standardy internetowe potrafią się zmienić z roku na rok. W przeciwieństwie do innych platform lub „własnoręcznego”, autorskiego tworzenia stron internetowych, Drupal pozwoli Klientowi w przyszłości z łatwością rozszerzyć funkcjonalność strony.
Czy to będą galerie zdjęć, dodawanie filmów, tłumaczenia na nowe języki lub wtyczki do mediów społecznościowych – platforma Drupal jest cały czas rozwijana przez programistów na całym świecie, co gwarantuje, że dodatkowa, nowoczesna funkcjonalność zawsze będzie w zasięgu ręki.
Bardzo istotną korzyścią wyboru Drupala do tego projektu jest sama natura tej platformy. Drupal jest technologią open-source, co oznacza, że strona internetowa nie będzie podlegała dodatkowemu licencjonowaniu ani generowała dodatkowych kosztów związanych z utrzymaniem witryny. Drupal oferuje bardzo dobrą stabilność i bezpieczeństwo strony internetowej, co powinno być kluczem do tworzenia profesjonalnego wizerunku uczelni oraz bezpieczeństwa danych jej użytkowników. Przy starannym oparciu się o dokumentację i wytyczne standardów Drupala, Klient pozyskuje stronę responsywną i atrakcyjną dla użytkownika końcowego oraz stabilną i łatwą w zarządzaniu dla personelu na co dzień zarządzającego stroną.
Szczegóły rozwiązania
Biorąc pod uwagę fakt, że Wyższe Szkoły Bankowe znajdują się w 10 miastach, a każda uczelnia posiada niezależną witrynę, doszliśmy do wniosku, że najlepszym rozwiązaniem byłoby stworzenie odpowiedniej hierarchii kodu, na której będziemy budowali nową stronę internetową.
Jako podstawę projektu ustawiliśmy multi-instalację opartą na jednym codebase – co w efekcie daje nam całą stronę opartą na jednym kodzie źródłowym, w którym modyfikacje wykonane w jednej instancji (w tym wypadku głównej witryny 10 szkół) automatycznie są powielane na wszystkich instancjach. Oczywiście, mowa tutaj o fundamentach strony – czyli na przykład o aktualizacjach czy przyszłym rozbudowaniu funkcjonalności. Takim sposobem, zamiast aktualizować każdą stronę internetową wszystkich szkół oddzielnie, Klient może zaktualizować jeden kod źródłowy i tym sposobem zadbać np. o nowoczesne zabezpieczenie danych wszystkich szkół jednocześnie.
Na fundamencie jednego codebase’u zostały wgrane instancje, posiadające własną bazę danych. Jest to odzwierciedleniem potrzeb Klienta, który posiada placówki edukacyjne w wielu miastach a każda z Wyższych Szkół Bankowych ma swoje wyróżniki i dedykowaną ofertę. W tym wypadku osobne bazy danych pozwalają na spersonalizowaną stronę dla każdej ze szkół, jednocześnie zachowując integralność ogólnych wytycznych Wyższych Szkół Bankowych oraz poziomu zabezpieczeń danych oferowanych przez Grupę.
Kolejnym aspektem był User Interface, czyli wdrożenie nowoczesnego interfejsu dla użytkownika. Zgodnie z wcześniej przygotowanymi przez Klienta wytycznymi i założeniami odnośnie rozwiązań funkcjonalnych, oszacowaliśmy i wdrożyliśmy serię rozwiązań technologicznych, które są bezpośrednią odpowiedzią na ich potrzeby, m.in.: system logowania CAS, listingi i moduły cen oparte o ElasticSearch i Vue, indeksacja treści do Elastic Search, kastomizowane moduły breadcrumbów i integracje z systemem CRM (Customer Relationship Management).
- System logowania CAS pozwala na dynamiczne logowanie na każdej instancji strony.
- Listingi oraz moduł cen oparte o Elastic Search i Vue znacznie przyspieszają działanie tak zwanych „listingów” - czyli listy rezultatów w wyszukiwarce. W tym przypadku filtry działają momentalnie, a doczytywanie treści odbywa się w tle, co daje efekt zupełnego braku opóźnienia.
- Indeksacja treści do Elastic Search i wyszukiwarki globalnej odbywa się automatycznie. Dla użytkownika końcowego, jak i zarządzającego stroną jest to wielką korzyścią, ponieważ podczas aktualizacji treści są one indeksowane w słownikach Elastic Search, co znacznie przyspiesza funkcjonowanie wyszukiwarki.
- Kastomizacja modułów breadcrumbów pozwala na dokładne dopasowanie i przystosowanie wyświetlanej ścieżki za pomocą okruszków, jako bezpośrednia odpowiedź na potrzeby Klienta.
- Wielowątkowa integracja z systemem CRM: integracja cen, listingów oraz formularza zapisu na szkolenia z tym systemem daje korzyści zarządzania informacjami wpływającymi ze strony internetowej przez dział obsługi klienta lub odpowiedni dział uczelni.
Poza strukturalnymi zmianami takimi jak kastomowe moduły breadcrumbów, w odpowiedzi na potrzebę Klienta opracowaliśmy wdrożenie dodatkowych zmian UI w panelu administracyjnym, które spotkały się z aprobatą Klienta. Jest to między innymi odmienny wygląd graficzny dla różnych wersji językowych oraz oparcie strony na koncepcji „paragrafów”, co pozwala elastycznie budować stronę i przemieszczać elementy wewnątrz pojedynczej podstrony bez tracenia czasu na formatowanie tekstu wewnątrz szablonu. Warto zaznaczyć, że koncepcja „paragrafów” jest naszą innowacją dla Wyższych Szkół Bankowych, biorąc pod uwagę fakt, że strona automatycznie renderuje tekst w odpowiednich blokach i dynamicznie rozmieszcza je w polu widocznym dla użytkownika końcowego.
W odpowiedzi na oczekiwania Klienta związane z nowoczesnym UI i UX, nowa strona została zbudowana na strukturze dynamicznego interfejsu RWD, co oznacza, że cała strona jest responsywna i przystosowana do urządzeń z ekranem od 320px i wyżej. W przeciwieństwie do poprzedniej strony nowa automatycznie się skaluje i dopasowuje do rozmiaru i rozdzielczości ekranu użytkownika końcowego, odzwierciedlając nowoczesne trendy technologiczne oraz profesjonalny i przyjazny wizerunek Wyższych Szkół Bankowych.
Projekt w liczbach
Strona powstawała w metodyce Agile: 2 sprinty dwutygodniowe i 8 sprintów ogólnie.
Na tworzenie strony poświęciliśmy około 1700 godzin!
Zespół składał się z Project Managera, Testera, dwóch Senior Drupal Developerów i dwóch Junior Drupal Developerów.
Wdrożyliśmy 45 widoków graficznych na stronę przeznaczoną na komputery stacjonarne i 35 widoków graficznych na interfejs mobilny.
Widoki stron obcojęzycznych.
Poświęciliśmy 100 godzin spotkań i omówień.
Wypiliśmy 150 litrów kawy!
Końcowy projekt to 170 000 linii kodu.
Efekty pracy
- Podniesienie bezpieczeństwa serwisu internetowego
- Prostsza aktualizacja systemu
- Bardzo szybkie działanie serwisu
- „Mobile first” - strona świetnie dopasowująca się do urządzeń mobilnych
- Intuicyjny interfejs do zarządzania stroną
- Zaawansowany system uprawnień do strony
- Szybkie wyszukiwanie i filtrowanie treści na stronie
- Integracja z systemem CRM i innymi zewnętrznymi narzędziami
- Nieograniczona możliwość rozwoju strony
Technologie
Nasi Klienci
