Budowa i rozwój portalu internetowego ING Banku
ING Bank Śląski
Content-driven design w jednym z najpopularniejszych portali bankowych w Polsce, opartym na e-point CMS
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 - e-point CMS (dawniej ActiveContent), przeszły niezwykłą ewolucję. Zdradzimy teraz, co wyróżnia nowy portal ING Banku Śląskiego spośród innych.
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 e-point CMS, która odpowiadała na wyzwania Google.
Wykorzystana technologia
e-point CMS
(dawniej ActiveContent)
Pozwala w pełni kontrolować cały ekosystem cyfrowego doświadczenia użytkownika, niezależnie od kanału: od urządzeń stacjonarnych poprzez mobilne, aż po ekrany w obiektach fizycznych.
Jest to rozwiązanie klasy enterprise, które zapewnia:
• pierwszorzędną obsługę klienta we wszystkich kanałach komunikacji
• zarządzanie wieloma witrynami językowymi z jednego, centralnego miejsca
• tworzenie niestandardowych kreacji w sposób niezależny, bez konieczności wsparcia agencji
ani wewnętrznego IT
• obsługę wieloetapowego procesu akceptacji treści
• gwarancję najwyższego standard suportu, dostępności i bezpieczeństwa
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".
5 elementów koncepcji Content Driven Design zastosowanych w serwisie ING Banku Śląskiego:
- Content strategiczny
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!"
- Wizualizacja i organizacja treści
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.
- Elementy interaktywne w treści
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.
- Walka z "banner blindness"
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ę.
- Standaryzacja
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.
ING Bank Śląski najbardziej cyfrowym bankiem
ING Bank Śląski został nagrodzony w konkursie e-Commerce Polska Awards 2017 w kategorii Najbardziej Cyfrowy Bank. Strategia oferowania najlepszego Customer Experience w kanale cyfrowym jest realizowana we współpracy z e-point.
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".
Nowa wersja platformy e-point CMS
Do realizacji nowego serwisu Banku używającego RWD użyliśmy swojej platformy e-point CMS, 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.
e-point CMS 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”
Możemy pomóc również Tobie. Napisz do nas, a my przeprowadzimy analizę Twoich potrzeb biznesowych i ustalimy, co możemy zrobić, aby poprawić doświadczenia pracowników i klientów Twojej firmy.
Porozmawiajmy. Napisz do nas.