Pora pochwalić się na blogu niedawnym startem projektu, który wyjął mi kilka miesięcy z życia w ubiegłym roku 😉 Chodzi o kompletny redesign systemu transakcyjnego Pekao24 dla banku Pekao SA, przygotowany od strony projektowej przez K2 User Experience. Serwis został uruchomiony 17 kwietnia.
Cały nowy interfejs użytkownika (ponad 400 ekranów) zaprojektowaliśmy we dwoje z Magdą Bicką w ekspresowym tempie od czerwca do września 2009. Za świetny projekt graficzny (zgodny z CI portalu Pekao) odpowiada Arek Sobczyk.
Zakres naszych prac obejmował:
- redesign bankowego systemu transakcyjnego Pekao24;
- redesign systemu maklerskiego dla Domu Maklerskiego Pekao24 i Centralnego Domu Maklerskiego Pekao SA;
- zaprojektowanie wersji mobilnej obydwu systemów (która wystartuje w późniejszym czasie). (UPDATE: już jest.)
Przebudowa dotyczyła głównie interfejsu - nie mieliśmy zbyt dużych możliwości zmian jeśli chodzi o funkcjonalność. Zresztą zamiast wymyślać nowe funkcje woleliśmy namawiać bank do upraszczania i rezygnacji z kilku rzeczy, np. z list odbiorców, które dublowały funkcje przelewów i doładowań zdefiniowanych.
Mam nadzieję, że niedługo uda się nam przedstawić case study pokazujące jak przebiegał cały proces projektowy. (UPDATE: case już jest.)
Z tego co obserwuję, przyjęcie z jakim spotkał się nowy system jest pozytywne, choć klienci korzystający od lat ze starego serwisu będą oczywiście musieli się do nowego przyzwyczaić.
Miło mi zacytować komentarz Marka Kasperskiego zamieszczony w serwisie Interaktywnie.com:
Bardzo dobry interfejs! I co ważne - nowoczesny, a co ważniejsze - odważny! Brawa (również dla klienta)!!! Po chwili... Powiem więcej: jeśli ten interfejs będzie ostatecznie wdrożony, to poważnie się zastanawiam czy nie przejść na konta Pekao24.
Dzięki Marku! Chociaż dla mnie interfejs nowego Pekao24 jest jednak dość klasyczny i tak miało być w założeniu - burzenie schematów nie było tutaj celem. Innym razem 😉
Maciej Samcik, dziennikarz ekonomiczny Gazety Wyborczej, napisał na swoim blogu:
Nowy pekaowski serwis jest rzeczywiście wygodny w użyciu. Każdą ważną operację klient może zlecić za pomocą trzech-czterech kliknięć. Przy każdym koncie, kredycie, lokacie, karcie jest okienko „Operacje”, w którym po najechaniu myszą rozwijają się najczęściej potrzebne funkcje. W Pekao mi powiedzieli, że układ strony zaprojektowali na podstawie badań eye-tracking (czyli śledzenia ruchów gałek ocznych, dzięki czemu można ustalić w którym miejscu na stronie klienci szukają określonych informacji).
Takie badania, i wiele innych, faktycznie zostały wykonane w trakcie projektowania nowego systemu.
Joanna Kotala i Anna Radyno z Ideacto na zlecenie Interaktywnie.com przeprowadziły niezależne testy na grupie kilkunastu użytkowników, których wyniki pokazały, że podstawowe operacje w nowym serwisie wykonuje się znacząco szybciej, niż w starym (przelew jednorazowy 45 sekund krócej):
Ogólne wrażenie, jakie nowy system zrobił na badanych było bardzo pozytywne. Efektywność przy wykonywaniu zadania została znacząco poprawiona. Jednak przed nowym Pekao24 stoi jeszcze jedno, największe wyzwanie - przekonać do siebie swoich dotychczasowych użytkowników, którzy nie znajdą w nim wielu podobieństw do poprzedniej wersji.
To rzeczywiście wyzwanie dla banku. W sytuacji tak daleko idącego redesignu trzeba spokojnie podejść do często bardzo emocjonalnych pierwszych reakcji klientów, którzy mogą być zaskoczeni i zdezorientowani zmianami. Należy uważnie analizować feedback spływający od użytkowników. Nie wszystkie zgłaszane uwagi, to faktyczne problemy, które powinno się poprawić. W przypadku dużych zmian w popularnych serwisach zdarza się, że nawet połowa użytkowników początkowo głośno wyraża swoje niezadowolenie. Przy każdej zmianie na Facebooku powstają grupy typu "We hate the new Facebook!" Po pewnym czasie użytkownicy się przyzwyczajają i okazuje się, że nowe jest jednak lepsze od starego 🙂
Tak wygląda strona główna nowego Pekao24 po zalogowaniu (obrazek po lewej - po prawej ta sama strona w starej wersji):
Historia operacji na rachunku w nowym i starym serwisie:
Zlecenia na akcje w serwisie Pekao24Makler - nowym i starym:
Co o nowym Pekao24 pojawiło się w sieci:
- Informacja prasowa
- Wywiad wideo z Bartłomiejem Noconiem, Dyrektorem Departamentu Bankowości Elektronicznej Pekao SA
- Pekao zmienia system bankowości internetowej - o nowym systemie w Gazeta.pl
- Pekao odpala nowy system bankowania przez internet. Testowałem go! - wpis na blogu Macieja Samcika
- Nowy serwis Pekao24 pod lupą ekspertów - artykuł w Interaktywnie.com, czyli nasza konkurencja przebadała nowy i stary serwis Pekao.
- Projektowanie mobilnego serwisu bankowości elektronicznej na przykładzie systemu Pekao24
Witam, Jestem użytkownikiem PEKAO24. Przyzwyczaiłem się już do nowego interfejsu. Gratuluję. Jedyna rzecz jaka mnie denerwuje to to że nie można wyfiltrować wpłat na konto w operacjach bieżących. W operacjach archiwalnych można – jest coś takiego jak “uznania”. I jak tu wydrukować historię wpłat na konto z ostatnich miesięcy?
@css3.pl
Projektant interakcji daje wstępną makietę, później grafik to kształtuje, projekt graficzny często powoduje zmiany w architekturze informacji, projektant interakcji konsultuje projekt graficzny… To jest wspólna praca nad różnymi aspektami systemu – na pewno nie jest tak, że ktoś coś komuś narzuca.
Co do typografii, kolorystyki – to wszystko w dużej mierze jest zależne od CI klienta.
HTML/CSS/JS – tak to było wszystko robione przez K2.
Doprecyzuję, chodziło mi oto, że w case study były podane takie szczegóły jak odległości w px na przyciskach i inne elementy, które gdyby je pozostawić grafikowi, to wykonałby je tak jak uważa, a miałyby one wpływ na końcowy efekt nazwijmy to – uogólniając – użyteczności. Nie wiem jak to się odbywało u was, ale wyobrażam sobie, że ściśle współpracowaliście z grafikiem na każdym etapie jego pracy, korygując to co robi, aby zachować zgodność z waszym zamysłem. Inna opcja jest taka, że grafik otrzymał gotową makietę łącznie z wielkością i rozmieszczeniem wszystkich elementów, gdzie już nic nie mógł zmieniać, a jedynie pokolorować i dodać ozdobniki w stylu ramek itp. No właśnie, ale czy w takim wypadku był też odpowiedzialny za część typografii i dostępność (np. kontrasty, rodzaje i wielkości fontów, itd), czy to też może leżało po waszej stronie? Nie widzę za bardzo możliwości, jak można oddzielić design od całej reszty, tak aby to wszystko nadal ze sobą grało, dlatego wyobrażam sobie tutaj jakąś daleko posuniętą współpracę i mocno ograniczone pole manewru grafika, ale jak to naprawdę wyglądało wiecie tylko wy. Teraz wyraziłem się chyba dość jasno 🙂
Druga rzecz która mnie interesuje, to pocięcie i oskryptowanie stworzonych layoutów (HTML/CSS/JS) frontend. Czy to też było realizowane przez was, czy zlecane innej firmie, albo podwykonawcom?
Dzięki za odpowiedź.
@css3.pl
No co też mógł robić grafik w projekcie? Pewnie strzelał z procy do reniferów…
Czytałeś case’a?
Arek był odpowiedzialny za cały look and feel systemu, zaprojektowanie wszystkich tabel, żeby były spójne i czytelne (niełatwa sprawa), trudną walkę z CI ograniczającym do dwóch kolorów…
Ja mam pytanie, jaka rola była w tym wszystkim web designera czyli grafika (jak kto woli).
Taki miły news: http://www.pekao.com.pl/news/?r,main,newsId=31106&r,main,sourceId=916
@Jano
To jest bug, który powinien zostać niedługo poprawiony (system jest jeszcze tuningowany). Po kliknięciu w rachunek będzie od razu widoczna historia ostatnich operacji.
Obecnie najszybciej jest najechać na przycisk “Operacje” przy nazwie rachunku i w rozwijanym menu kliknąć w link “Historia operacji”.
Witam,
Tak się składa że jestem uzytkownikiem nowego PEKAO24 i musze przyznac że jest fajnie ale jako osoba kozystajca praktycznie na codzien ze strony pekao24 strasznie cierpie.
Stare przyzywczajenia co do struktury serwisu pozostały.
Osobiscie najbardziej męczy mnie ciągle poszukiwanie przycisku “historie operacji”
W starym serwisie aby sprawdzic czy pieniadze pojawiły sie na koncie czy tez nie wystarczyło otowrzyc główna strone konta rozliczeniowego i pojawiała sie histora ostatnich operacji. teraz musze znajesc link wsrod długiej listy, kliknąc i dopiero…
pozdrawiam
J.
@Dawid
http://demo.pekao24.pl/ Wpisujesz 123456, a potem dalej zera i powinno być git.
@ekke
Z wersja mobilną to dokładnie nie wiem, ale stawiam na wczesne lato.
@Marek Kasperski
Napisałem tak, bo dużo projektuję dla usług finansowych i kilka dość “innych” interfejsów ostatnio wymyśliliśmy. Premiera jednego we wrześniu 🙂
Wszystko co piszesz to prawda. Warto zauważyć, że część back-endowa często też pamięta czasy Mieszka I i wtedy okazuje się, że zrobienie prostej rzeczy w interfejsie typu dynamiczne dociągnięcie danych, sensowne stronicowanie, wyszukiwanie jest niewykonalne bez rewolucji na zapleczu, do której nikt się nie pali. Praca z tak dużymi instytucjami jak banki nie jest prosta – inercja jest tu duża, i często kończy się na nieciekawych kompromisach i malowaniu trupa.
Rozwinę może nieco swój komentarz, gdyż – jak widać – może zostać zinterpretowany nie do końca z myślą autora 🙂
Zgadza się, interfejs sam w sobie nie jest jakiś specjalnie nowoczesny, nie jest też odważny – na pewno to nie jest zmiana jak z menu kaskadowego na wstążkowe w MS Office – ale takie elementy jako nowoczesność czy odwaga, powinno się rozpatrywać w pewnym kontekście. W kontekście interfejsów transakcyjnych, czy ściślej mówiąc – finansowych, ten interfejs jawi się jako nowoczesny. A dość zasadnicza zmiana w wykonywaniu pewnych czynności czy też architekturze informacji, jednak powoduje, że można stwierdzić, że interfejs jest dość odważny (klient też, co wspominałem).
Tło interfejsów finansowych w naszym kraju jest takie, że spora część z nich pamięta jeszcze chrzest Polski, a i pewnie jak odpowiednio popytać to by powiedziały co Dobrawa jadała na śniadanie 😉
Pieniądze, które są wydawane przez banki i instytucje finansowe na poprawę tej sytuacji – analizy, badania, przebudowanie – w dużym stopniu idą w piach. Znam kilka takich casów, stąd moja opinia. Na domiar złego niejednokrotnie tzw. szumnie nazwany REDESIGN sprowadza się do zmiany kolorystyki przycisków i tła i z redesignem jako takim niewiele ma wspólnego (to akurat case interfejsu banku, w którym sam mam konto). Przy czym faktyczne problemy nie są rozwiązywane (ja wciąż u siebie w interfejsie bankowym nie wiem, czy jak jestem na 4 i dalej stronie historii moich transakcji i chcę przejść dalej to powinienem kliknąć przycisk Następne czy Poprzednie (sic!), tym bardziej, że usadowione są koło siebie. Nie wspominając, że w tej samej linii umieszczonych przycisków jest chyba z 6.
W tym samym interfejsie flow zlecenia przelewu wiąże się z faktem wykonania kilku kliknięć, by w końcu dojść do tego formularza. Crap nad crapy! A w innych jest nie lepiej.
Na pierwszy rzut oka wydaje się naprawdę przemyślanym projektem, na pewno dopracowanym (chyba obecnie najlepiej z pośród systemów bankowych dostępnych w Polsce). Nie pozostaje nic innego jak pogratulować.
Czekamy na wersje mobilna. Zdradzisz aproksymalny czas pojawienia się aplikacji, Maćku?
Wygląd na plus.
Jeśli chodzi o AI mogę tylko przytoczyć opinię znajomej, która była (jest?) nadal niezadowolona ze zmiany – głównie przez to, że musi uczyć się sytemu na nowo. Oczywiście to jedyna opinia jaką miałem okazję poznać.
Ps: jest jeszcze możliwość zalogowania się na wersji demo? Próbowałem 6 razy i zaczynam się zastanawiać czy aby na pewno nie powinienem wybrać się do okulisty.
Należą się słowa pochwały, osobiście widzę zmiany na duży +. Jakkolwiek z punktu widzenia użytkownika, nadal niektóre rzeczy mnie dziwią (doładowania i zaraz obok usługi maklerskie, czyli duże wtf).
Tak czy siak gud dżob.