Bankowość online Pekao24.

Zaprojektowaliśmy nową bankowość online dla użytkowników Banku Pekao.
Widok pulpitu systemu Pekao24

Wyzwanie.

Bank Pekao zwrócił się do nas z prośbą o zaprojektowanie nowego serwisu transakcyjnego w ramach procesu Cyfrowej Transformacji banku. Dotychczasowy serwis dla klientów banku został zaprojektowany w 2009 roku, kiedy rynek digital jeszcze nie znał pojęcia responsywności. W związku z tym Bank Pekao rozwijał równolegle różne produkty mobilne – odrębne strony mobile, wersję aplikacji na tablet, aplikację mobilną dla klienta indywidualnego i inwestorów oraz dwa oddzielne serwisy maklerskie.

Poprzedni serwis Pekao24.
Poprzedni serwis Pekao24.

Tak obszerny portfel produktów cyfrowych stał się dla Banku drogi i nieefektywny w utrzymaniu. Pekao postanowiło więc stworzyć platformę omnichannel, która zapewni takie samo doświadczenie użytkownika bez względu na to, z jakiego urządzenia korzysta – na komputerze, smartfonie czy w oddziale banku.

Projektowanie zorientowane na użytkownika.

Podstawowym założeniem przy projektowaniu nowego serwisu była realizacja projektu z myślą o wygodzie jego użytkowania. Dlatego w pierwszym etapie przeprowadziliśmy, we współpracy z firmą badawczą, wywiady pogłębione z obecnymi klientami Banku Pekao i Domu Maklerskiego oraz przeanalizowaliśmy znane Bankowi problemy zgłaszane do centrum obsługi klienta.

Bankowość online Pekao24 mobile

Przyjęliśmy założenia, że:

  • większość użytkowników ma niewiele produktów,
  • najczęstsze scenariusze użycia są najważniejsze,
  • użytkownik progresywnie odkrywa nowe funkcje,
  • powinniśmy unikać dublowania funkcji,
  • serwis potrzebuje mieć system komunikacji z użytkownikiem,
  • serwis powinien mieć maksymalnie "spłaszczoną" architekturę informacji.

Sam proces projektowania podzieliliśmy na dwa etapy:

  1. Projektowanie Minimum Viable Product,
  2. Projektowanie funkcjonalności niższego priorytetu.

Taki podział pozwolił nam na zbadanie założeń projektu podczas testów użyteczności na interaktywnym prototypie MVP. Na podstawie wniosków byliśmy w stanie wprowadzić odpowiednie zmiany, które znacząco poprawiły wygodę użytkowania serwisu oraz upewnić się, że przyjęty, odważny styl graficzny z przewagą czerwonego koloru brandu jest akceptowany przez klientów banku. Pewne elementy graficzne, które nam, projektantom wydawały się oczywiste, okazały się niekorzystnie wpływać na doświadczenie użytkownika. Na tym etapie przetestowaliśmy najważniejsze funkcje serwisu, takie jak dashboard, zlecenie przelewu, wyszukiwanie operacji w historii.

Widok potwierdzania przelewu w aplikacji.

Jak wyróżnić serwis bankowy spośród innych na rynku?

Nie oszukujmy się, wszystkie serwisy bankowości online oferują podobne funkcje. Jaka może być unikalna wartość takiego produktu? Co może być istotną przewagą wobec konkurencji? Jak stworzyć serwis bankowy, który będzie zachęcał nowych klientów do założenia konta?

Podczas etapu projektowania koncepcji przeanalizowaliśmy różne nowoczesne aplikacje fintechowe w Polsce i na świecie pod kątem innowacji i wdrażania dyrektywy PSD2. Zaproponowaliśmy Pekao stworzenie omnibox – wyszukiwarki, która podpowiada czynności, informacje, przeszukuje wszystkie elementy serwisu i potrafi odpowiedzieć na zadane pytania.

Drugim konkurencyjnym na rynku rozwiązaniem jest połączenie historii konta z analizą transakcji. W nowym Pekao24 użytkownicy będą mogli przeglądać historię transakcji z podziałem na 14 kategorii wpływów i wydatków oraz analizować dane historyczne na wykresach.

Analiza finansowa i historia Pekao24
Analiza finansowa i historia.

Zwinne projektowanie.

Aby zoptymalizować koszty re-designu Pekao24, wspólnie z klientem postanowiliśmy wybrać zwinne podejście do procesu. Założyliśmy, że projektowanie będzie odbywać się równolegle do wdrożenia. W praktyce zespół K2 projektował funkcjonalności z wyprzedzeniem w stosunku do rozpoczęcia danego sprintu zespołu deweloperskiego. Dzięki temu podejściu mogliśmy na bieżąco weryfikować wykonalność projektów w kontekście technologii Banku. Nie musieliśmy również tworzyć klikalnych prototypów pod kątem badań użyteczności, co znacząco obniżyło koszt naszej pracy i wpłynęło pozytywnie na szybką realizację harmonogramu.

Możemy śmiało stwierdzić, że podejście Agile do realizacji tak dużego projektu sprawdziło się doskonale i nie wyobrażamy sobie realizacji takiej skali w podejściu kaskadowym (czyli najpierw projektujemy wszystko, potem wdrażamy wszystko).

Style-guide.

 

Jednym z istotnych problemów projektowych było zachowanie spójności wizualnej i funkcjonalnej przy jednoczesnej pracy kilku projektantów. Aby usprawnić pracę designerów i programistów front-end stworzyliśmy style-guide dla produktów cyfrowych Banku Pekao, który reguluje ogólne założenia (np. szerokość gridów, kolory, styl ikonografii) oraz elementy budujące interface użytkownika (np. wygląd przycisków i elementów formularza). Style-guide pomógł nam także podczas procesu projektowania: dzięki zbudowaniu odpowiedniej biblioteki elementów w Sketch, projektanci mogli szybko tworzyć nowe ekrany z gotowych „klocków”.

Zalety style-guide:

  • oszczędza czas. Korzystanie ze wspólnych bibliotek elementów już na etapie projektowania ekranów pozwala szybciej budować makiety, a projektanci nie muszą wymyślać każdego koła od nowa :)
  • ułatwia komunikację między-zespołową. Zarządzanie informacjami w dużych organizacjach jest dużym wyzwaniem. Jeden słownik dla wszystkich pomaga znaleźć wspólny język.
  • jest podstawą do stworzenia design systemu z prawdziwego zdarzenia.

 

Style-guide sam w sobie jest organizmem żyjącym – nie da się przewidzieć wszystkich elementów up-front. W miarę posuwania się prac projektowych, dodawaliśmy kolejne elementy stopniowo i zmienialiśmy wygląd istniejących, tak żeby lepiej spełniały swoją funkcję.

Design system Pekao24

Nowe Pekao24 w liczbach

  • 70wywiadów z klientami
  • 6 raportów z badań
  • 4 598makiet aplikacji desktop i mobile
  • 500+ elementów style-guide
Ekran desktop i mobile zakładki Oferta dla Ciebie
Business Unit:
K2 Create, K2 Digital Products
Client:
Bank Pekao S.A.
Online:
www.pekao24.pl
Sector:
Finance
Services:
Product Strategy & Ideation
UX & Visual Design