Rozwiązanie: Headless CMS
Branża: Sektor finansów i bankowości

Wdrożenie nowej strony internetowej mBanku 

Nowa architektura i responsywność serwisu
<system.improved >
Dostosowanie do standardów WCAG 2.2
<experience.improved >
Migracja do chmury
<scalability.reached >

Wyzwanie

mBank to jeden z liderów bankowości cyfrowej w Polsce, obsługujący miliony klientów, w tym ponad 2 mln użytkowników „mobile only”. Strona informacyjna mBanku notuje miesięcznie średnio 12 mln odsłon.

W obliczu zmieniających się wymagań technologicznych i użytkowych mBank podjął decyzję o modernizacji swojej strony internetowej.  W związku z dynamicznym wzrostem konsumpcji treści na urządzeniach mobilnych, kluczowe stało się stworzenie strony w duchu mobile-first by design, ukierunkowanej na wygodę użytkowników mobilnych. Ważne było także dostosowania serwisu do standardów dostępności dla osób ze szczególnymi potrzebami, w oparciu o wytyczne WCAG 2.2 .

Celem było zbudowanie nowego serwisu internetowego w chmurze. Strona miała działać szybciej i być mniej narażona na spowolnienia związane ze zwiększoną liczbą logowań oraz awarie.

  • Ewolucja, nie rewolucja / Kluczowe było zachowanie spójności graficznej i intuicyjności interfejsu przy jednoczesnym unowocześnieniu nawigacji. 
  • Strona zaprojektowana zgodnie z najnowszymi trendami / W warstwie wizualnej nowa strona miała być zaprojektowana w oparciu o najnowsze trendy, a sposób prezentacji treści np. dotyczący usług czy produktów bankowych miał być spójny i przejrzysty.
  • Ponadto, w zależności od decyzji odbiorcy, strona powinna być dostępna w trybie jasnym bądź ciemnym. Natomiast wzbogacenie o funkcjonalności, takie jak „przyklejone” menu oraz odnośniki do poszczególnych sekcji, miało pozwolić czytelnikom na sprawne poruszanie się po niej, zwłaszcza na mobile.
  • Przyspieszenie czasu publikacji stron, dzięki systemowi Headless CMS / Konieczne było wdrożenie nowego podejścia do tworzenia oraz publikowania contentu, które zoptymalizowałoby pracę edytorów.  
Adrian Wojtasik
Digital Customer Experience Manager
mBank

"Nowa wersja strony internetowej mBanku powstała we współpracy z Univio, odpowiedzialną za technologię z mServices, która opracowała nowoczesny design i interfejs. Dzięki temu projektowi mBank jeszcze lepiej odpowiada na potrzeby swoich klientów i umacnia swoją pozycję lidera bankowości cyfrowej.  "

Rozwiązanie

  • Nowa architektura i responsywność serwisu / Strona została zaprojektowana w modelu mobile-first, co oznacza, że najpierw opracowano jej wersję mobilną, a dopiero potem desktopową. Dzięki temu użytkownicy smartfonów i tabletów mogą komfortowo korzystać z serwisu. 
  • Dostosowanie do standardów WCAG 2.2 / Zespół projektowy dostosował serwis do wytycznych WCAG 2.2, dbając o czytelność treści, intuicyjną nawigację oraz zgodność z technologiami wspierającymi osoby ze szczególnymi potrzebami. 
  • Migracja do chmury / Przeniesienie strony do chmury pozwoliło na skrócenie czasu ładowania strony, zwiększenie stabilności serwisu i lepszą skalowalność w przypadku wzmożonego ruchu.
  • Optymalizacja UX i UI / Wprowadzenie „przyklejonego” menu oraz odnośników do poszczególnych sekcji. Przejrzysty układ treści zgodny z mKanonem – zasadami prostego języka stosowanymi w mBanku. Zastosowanie nowoczesnych technologii, które usprawniają doświadczenie użytkownika.
  • Nowoczesne technologie i CMS / Wdrożenie CMS umożliwia łatwą integrację z narzędziami analitycznymi i testami A/B. Podejście MACH zapewnia elastyczność i możliwość łatwej wymiany poszczególnych komponentów systemu. 
  • Szybsza publikacja stron / Wykorzystanie partial SSG (Server Side Generation) umożliwia publikację tylko wybranych stron zamiast całego serwisu, co znacząco skraca czas aktualizacji treści. 
  • Zwiększona dostępność i stabilność / Podejście SSG sprawia, że serwis jest dostępny nawet w przypadku problemów z CMS. Generowanie statycznych stron zapobiega przeciążeniom i wpływa na szybkość działania. 
  • Rozszerzenie CMS o dodatkowe funkcjonalności / Moduł do zarządzania wersjami treści, własne wtyczki do zarządzania kalkulatorami, dokumentami oraz integracjami z zewnętrznymi repozytoriami danych, moduł do zarządzania architekturą serwisu.
  • Nowoczesna wyszukiwarka / Implementacja rozproszonego systemu wyszukiwania pełnotekstowego wraz z indeksacją stron na podstawie wygenerowanych dokumentów HTML. Efektywne zarządzanie treścią dzięki nowemu CMS i dedykowanym wtyczkom. 

Rezultat

Nowa architektura i responsywność serwisu
Lepsza nawigacja na urządzeniach mobilnych, dzięki podejściu mobile-first.
<system.improved >
Dostosowanie do standardów WCAG 2.2
Zwiększona dostępność dla osób ze szczególnymi potrzebami oraz zgodności z najnowszymi trendami UX.
<experience.improved>
Migracja do chmury
Większa stabilność dzięki infrastrukturze chmurowej.
<scalability.reached >
Nowoczesna wyszukiwarka 
Pomaga w szybkim znajdowaniu treści przez użytkowników, co może prowadzić do wzrostu liczby stałych klientów i odciążeniu customer service. 
<search.upgraded >
Nowy system CMS
Większa niezależność zespołu edytorów tworzących strony serwisu.
<content.updated>
Krótszy czas ładowania stron
Wynik dla wersji desktop 90-100 oraz dla wersji mobile w przedziale min. 70 pkt. w ramach testu Google PageSpeed Insights. 
<speed.achieved >
Spadek współczynnika odrzuceń
Oznaczający większe zaangażowanie użytkowników. 
<customers.engaged >
Testy A/B
Wpływają na ciągły rozwój serwisu, zgodnie z oczekiwaniami użytkowników końcowych.
<development.enabled >

Tobie również
możemy pomóc

To tylko jeden z przykładów naszego doświadczenia, którym możemy się podzielić z Twoją firmą. Każdy projekt jest inny – tak jak każda współpraca. Skontaktuj się z nami i zacznijmy pracować nad czymś nowym – razem!