Portal ING Banku Śląskiego

Zobacz, jak powstawał jeden z najpopularniejszych i – zdaniem niektórych – najlepszy z portali bankowych w Polsce.

 
 
 

Nasza współpraca z ING Bankiem Śląskim nad rozwojem portalu ma długą historię. Zaczęliśmy jeszcze pod koniec lat 90, kiedy to zbudowaliśmy pierwszy portal internetowy Banku. Od tego czasu zarówno on, jak i wspierająca go platforma CMS - ActiveContent, przeszły niezwykłą ewolucję. Zdradzimy teraz, co wyróżnia nowy portal ING Banku Śląskiego spośród innych.

 
 
 

Masz pytanie?

 
 
 
Konrad Zimoląg
 
Konrad Zimoląg

Opiekun projektu
tel. +48 502 323 418
konrad.zimolag at e-point dot pl

 
 
 

Rok 2009 "Efekt Google"

Pierwsze wersje serwisu ING Banku Śląskiego były strukturami z wyraźną
hierarchią stron (główna, podstrony) i nawigacją. Pojawienie się Google
fundamentalnie zmieniło sposób budowania serwisów internetowych.

Dzięki Google użytkownicy mogą znaleźć konkretną informację w serwisie
bez wchodzenia na jego stronę główną. W wyniku „efektu Google” stary,
hierarchiczny serwis musiał zostać zastąpiony przez mechanizm do tworzenia
odrębnych, niezależnych struktur – miniserwisów czy tzw. landing pages.
To na nie, omijając stronę główną i nawigację serwisu WWW,
zaczął trafiać użytkownik.

Takie założenia stały za projektem budowy nowej wersji serwisu ING Banku
Śląskiego, który został zrealizowany w 2009. Jednocześnie wdrożyliśmy nową
wersję platformy ActiveContent, która odpowiadała na wyzwania Google.

 
 

 
 
 
 

ActiveContent

Platforma CMS w czasach Google

 
 
 
 

Komponenty

Komponenty (Widgety) to powtarzalne
wzorce wizualne i funkcjonalne, z których
buduje się stronę.

 
 

Wersjonowanie stron

System wersjonowania stron obejmuje daty automatycznych publikacji stron, testy A/B oraz możliwość powrotu do wersji historycznych.

 
 

Wiele serwisów

Na platformie istnieje możliwość publikacji wielu serwisów, miniserwisów, landing pages. Menedżer Szablonów umożliwia samodzielne wdrażania nowych wizualizacji.

 
 
 
 

Rok 2013 - Content Driven Design

W 2013 roku nastąpił przełom w dalszym rozwoju portalu ING Banku Śląskiego. Podstawą przebudowy portalu stała się nasza autorska koncepcja projektowania opartego na contencie (Content Driven Design).

 
 

Nie ma klikania bez czytania

Zauważyliśmy, że strony internetowe często projektowane są w sposób nieprzyjazny dla zawartej na nich treści, która staje się podrzędna w stosunku do nawigacji, zamieszczonych linków, pozycjonowania SEO itp. Content Driven Design odwraca tę sytuację – projektant skupia się na stworzeniu harmonijnego układu strony, aby struktura i funkcje służyły łatwemu czytaniu. My też wierzymy, że content poprzedza design, bo przecież serwis internetowy jest po to, by przekazywać treść.

 
 

 

“Design bez treści to nie design, ale zwykła dekoracja”

mawia projektant serwisów i autor
Jeffrey Zeldman

 
 
 
 

5 elementów koncepcji Content Driven Design zastosowanych w serwisie ING Banku Śląskiego:

 
 

Proces projektowania nowego portalu zaczynamy od spojrzenia na problem z szerokiej perspektywy. Chcemy zrozumieć strategię rynkową Klienta, prześledzić procesy sprzedażowe, sposób podejmowania decyzji przez jego klientów. Tak uzyskujemy odpowiedź na pytania: po co istnieje strona i jaką wartość ma dać odbiorcom. Dopiero mając te odpowiedzi zaczynamy zastanawiać się, w jaki sposób przedstawić ofertę i jak zaplanować jej funkcje i treść.

Na tym etapie bardzo blisko współpracujemy z Klientem. W przypadku ING zaczęliśmy od dokładnego audytu produktów detalicznych banku, żeby całościowo spojrzeć na ofertę. Sprawdziliśmy, jak i komu sprzedaje się poszczególne produkty i na czym polegają decyzje zakupowe. Na tej podstawie stworzyliśmy architekturę informacji i tzw. content strategiczny – zagospodarowanie struktury treści na bardziej ogólnym poziomie, np. po co mówimy o jakimś koncie czy po co pokazujemy dane cechy i parametry. Zindywidualizowaliśmy także przekaz dla poszczególnych linii produktowych.

"To e-point pokazał nam, że nasza wirtualna półka z produktami jest zbyt zawiła. Przekonał nas do skoncentrowania się na najważniejszych punktach, przez co teraz np. nie mówimy już o pięciu różnych kontach osobistych. Zamiast tego zgromadziliśmy ich zalety pod wspólną marką, wyróżniając jedynie cechy zmienne. Dziś już wiemy, że to działa!"

Cezary Żmuda
Szef Działu Internetowego, ING Bank Śląski

 
 

Kiedy już uporamy się z kwestią „co mówić”, przechodzimy do pytania „jak”. Staramy się wejść w rolę użytkownika strony i przeanalizować sposób, w jaki podejmuje decyzje. Dzięki temu możemy stworzyć optymalny układ i zaplanować interakcje ze stroną. Myślimy o niej jak o ciekawym magazynie, dlatego tak ważna jest dla nas typografia: zróżnicowane stylem i rozmiarem czcionki, lekkie grafiki, treść w centrum uwagi.

Wbrew dominującej do niedawna opinii, nie trzeba całej zawartości strony koniecznie zmieścić powyżej stopki. Internauci mogą, a nawet lubią scrollować i czytać – robią to cały czas na swoich urządzeniach mobilnych. Strona może być długa i zawierać dużo contentu pod warunkiem, że jest on atrakcyjnie zaprezentowany.

Oto różnica między stronami zaprojektowanymi według pierwszej i drugiej koncepcji:

ING porównanie stron

 
 

Nietypowe jest też zamieszczenie elementów interaktywnych bezpośrednio w treści strony produktowej – kalkulatory, suwaki itd. Zgodnie z logiką „strony się czyta” uznaliśmy, że nie trzeba ich chować, bo są dla użytkownika funkcjonalne i ciekawe. Nie pomyliliśmy się. Internauci chętnie zapoznają się z odświeżoną treścią i np. w przypadku pożyczki gotówkowej średni czas spędzony na stronie wzrósł z 3 min. 38 sek. do 4 min. 2 sek. Wzrósł także ogólny ruch na stronie i poszczególne wskaźniki konwersji.

ING elementy interaktywne w treści

 
 

Do stworzenia portalu przyjaznego użytkownikom konieczna była zmiana postrzegania go wewnątrz banku jako przestrzeni reklamowej dla poszczególnych działów. Bank to duża korporacja i każdy departament dąży do jak najpełniejszego zaprezentowania swoich produktów na stronie. Niestety, użytkownik jest zwykle odporny na przekaz, który choć trochę przypomina reklamę. Im lepiej dany element wtapia się w treść strony, tym większa szansa, że zaangażuje odbiorcę. Ustaliliśmy nowe reguły, wedle których treści promocyjne muszą stanowić integralną część contentu. Konsekwentnie eliminowaliśmy elementy kojarzące się z bannerami albo innymi placementami reklamowymi - zależało nam na tym, by użytkownik odbierał całość jako użyteczną informację, a nie reklamę.

heatmap ING

 
 

Ponieważ przebudowa ING w modelu Content Driven Design realizowana była sekcja po sekcji i produkt po produkcie, ostatnim etapem projektu musiała być standaryzacja. Celem było maksymalne usprawnienie późniejszej obsługi serwisu przez pracowników banku. Aby to osiągnąć, dla powtarzających się elementów stworzyliśmy komponenty i formatki do ActiveContent. Z ich pomocą redaktorzy obsługujący CMS będą mogli budować nowe strony, zachowując spójność wizualną z całością portalu.

 
 
 
 
 
 

Rok 2014 - Responsive Web Design

Po zrewolucjonizowaniu portalu pod kątem atrakcyjnej prezentacji contentu w 2014 roku stanęliśmy przed wyzwaniem dostosowania strony do urządzeń mobilnych. Zdecydowaliśmy się oprzeć na modelu RWD (Responsive Web Design). Dzięki temu zespół marketingowy ING Banku Śląskiego utrzymuje i rozwija jeden serwis dla wszystkich typów urządzeń.

 
 

UX Design oparty na treści

W wielu wdrożeniach portali internetowych zagadnienie treści pojawia się na końcu projektu. Zwykle pojawia się jako problem. W efekcie strony są zaaranżowane w sposób, w którym treść staje się podrzędna wobec nawigacji, bannerów, linków. Opakowanie staje się ważniejsze niż zawartość.

Według nas to jednak treść jest rzeczywistą wartością każdego portalu. Od tego założenia wyszliśmy projektując nowy portal ING Banku Śląskiego. Projektowanie to obejmowało analizę założeń komunikacji marketingowej poszczególnych produktów, przygotowanie treści strukturalnej (structural copy), a następnie architektury informacji i projektu graficznego poszczególnych stron. W 2013 roku pojawiły się pierwsze sekcje i strony nowego serwisu Banku zyskując pozytywne opinie użytkowników oraz zwiększając wskaźniki oglądalności i konwersji.

Responsive Web Design

Na początku 2014 roku rozpoczęliśmy transformację serwisu ING Banku Śląskiego do modelu RWD. Projekt dotyczył nie tylko warstwy technicznej projektu, ale także na odpowiedniej transformacji treści.

 
 

 

"Zależało nam na tym, by prezentacja treści była doskonale dostosowana do każdego urządzenia i jednocześnie spełniała wymogi skutecznej komunikacji marketingowej"

podkreśla Łukasz Franczuk,
Kierownik Zespołu UX Design w e-point SA

 
 
 
 

Nowa wersja platformy ActiveContent

Do realizacji nowego serwisu Banku używającego RWD użyliśmy swojej platformy ActiveContent, w której nową funkcją jest wsparcie budowy stron responsywnych w modelu wizualnym WYSIWYG (ang. What You See Is What You Get). Za pomocą jednego widoku redaktor Banku jest w stanie obsłużyć budowę strony WWW od 4-calowych smartfonów do 40-calowych telewizorów Full HD.

ActiveContent to platforma dla zaawansowanych portali korporacyjnych. Obok wspomnianego wsparcia dla RWD, umożliwia budowanie stron z komponentów (widget’ów), pełną kontrolę ich wyglądem dzięki menadżerowi szablonów, zarządzanie wersjami i datami publikacji stron. Nieograniczony dostęp do kodu HTML, CSS i JavaScript pozwala wdrożyć każdy projekt graficzny i zaimplementować dowolną interakcję. Integracja z Google Analytics oraz wsparcie dla testów A/B pozwala zrozumieć zachowanie osób odwiedzających serwis. Dzięki połączeniu z silnikiem do budowy formularzy internetowych – ActiveForms, platforma pozwala inicjować procesy sprzedaży.

 
 

Portal “od kuchni”