1. Badania
systemów
finansowych
Wyzwania. Metody. Efekty.
Paulina Makuch

4. K2 ♥ banki
Ja ♥ banki jeszcze bardziej

5. A dziś o
Zmiany w formularzach wniosków
we wdrożeniu
System transakcyjny dla korporacji
we wdrożeniu
Serwis informacyjny pkobp.pl
2012

6. Bank Cenzura
Elementy systemu transakcyjnego

7. Cele zmian w systemie
Poprawa konwersji formularza wniosku
jednego z popularniejszych produktów
Zmiana pozostałych wniosków w oparciu o
wypracowany schemat
Usparwnienie procesu sprzedaży online

8. Zaprojektowaliśmy
Przeprojektowaliśmy formularz
Zaprojektowaliśmy dwa kalkulatory
Stworzyliśmy sekcję dla wszystkich złożonych wniosków

9. + poza zakresem
Przeprojektowaliśmy sekcję ofertową – nowa architektura
informacji oraz nowy zakes treści
Zarekomendowaliśmy zmiany w sekcjach obsługowych
(na stronach kategorii produktowych)

10. Prototyp architektury informacji

11. Wyzwania badawcze

12. Prototyp do badań
Skomplikowana mechanika formularza i dużo,
dużo pól do walidacji
Zależności między kalkulatorami a formularzem
Kalkulator z suwakami

13. Prototyp do badań

14. Dlaczego prototyp developerski?
Oszczędność czasu mojego
Walidacja pól, dodanie elementów graficznych zajęłoby mi
podobną ilość czasu
Oszczędność czasu webdeveloperów
Webdeveloper w większość korzystał w biblioteki gotowych
elementów
Stworzony prototyp (kod) był podstawą do dalszych prac
developerskich
Oszczędnośc czasu grafika
Nie musiał przygotowywać szablonów graficznych, a tylko
dorysowywał brakujące elemnety

15. Przebieg badania

16. Respondenci
10 osób
Wiek 20 – 55 lat
Obecni klienci banku
Korzystający z bankowości przez Internet
Osoby zainteresowane produktem w ciągu ostatnich 6
miesięcy

17. Zastosowane metody
1 Wywiad wstępny
Doświadczenia i oczekiwania związane
z poszukiwaniem produktu
2 Obserwacja
użytkowników
Ewaluacja proponowanych zmian i
odbiór projektu graficznego
3 Wywiad końcowy
Ocena serwisu oraz
nowego, rozszerzonego procesu

18. 1. Doświadczenia i oczekiwania
Gdzie szukają produktu –
na stronie banku, w porównywarkach, idą do oddziału?
Jak podejmują decyzje –
długo rozważają czy spontanicznie?
Jak wypełniają wnioski –
online czy w oddziale z konsultantem?
Jakie są ich postawy –
czego się obawiają, co ich motywuje do działania?

19. 2. Wspólne przeżywanie historii
Wywiad wstępny wprowadzał respondenta w
potrzeba kontekst, a moderatorowi dawał wiedzę o
oczekiwaniach badanego
Zadania jako jedna historia
Wyobraź sobie, że jesteś zainteresowany kredytem.
Sprawdź ile będzie Cię kosztowała rata.
Zainteresowało Cię – sprawdź czy dostaniesz.
Chcesz kupić – co zrobisz?
Wypełniłeś wniosek, procesuje się w banku – czego się
spodziewasz?
Dostałes maila z treścią… – co robisz dalej?
cel
Ocena procesu

20. 3. Ocena procesu
Podsumowanie wrażeń No jeżeli dla mnie jest
to proste, to znaczy że
Ocena formularza i całego procesu to musi być proste, bo
mówię że ja naprawdę
jestem atechniczna
Wskazanie najtrudniejszych miejsc
Trochę trzeba było
Pochwalenie dobrych rozwiązań pobłądzić. Ale nie, nie jest
to aż tak
skomplikowane, tylko trzeba
tam tak poklikać metodą
prób i błędów.
Gdy już teraz ochłonąłem, całość
jest jak najbardziej do
zaakceptowania, poza
zawiłościami z odnajdywaniem
niektórych zakładek, ja nie widzę
tutaj większych problemów

21. Efekty

22. Przetestowaliśmy sposób
nawigacji po formularzu i
zidentyfikowaliśmy miejsca
problemowe.
Zarekomendowaliśmy zmiany nie
tylko na poziomie pól, ale
również pewne formy wsparcia
użytkowników.

23. Zastowanie graficznego prototypu
pozwoliło sprawdzić widoczność
istotnych obszarów strony.
Mogliśmy poprawić szczegóły, jak
np. widoczność pól opcjonalnych.

24. Zbadaliśmy szanse na pozytywny
odbiór nowego sposobu
sprzedaży.
Przedstawiliśmy odpowiednie
rekomendacje, wychodzące poza
zmiany w samym formularzu.

25. PekaoBiznes24
System transakcyjny
dla korporacji

26. Obecny wygląd systemu

27. Cele projektu
Uproszczenie nawigacji –
obecne menu nie mieści się na ekranie
Intuicyjne rozmieszczanie treści
Usprawnienie działania systemu –
bardziej dynamicznie, bez przeładowywania
Bardziej nowoczesna szata graficzna –
z ładnego systemu przyjemniej się korzysta

28. Główne wyzwania projektowe
Ważne narzędzie codziennej pracy
setek tysięcy użytkowników
Jak projektować coś o czym nie
wiemy, do czego służy i jak się z tego
korzysta?

29. Wyzwania badawcze

30. Specyficzna grupa użytkowników
Pracownicy korporacji – księgowe, managerowie, prezesi
Jak do nich dotrzeć?

31. Specyficzna grupa użytkowników
Pracownicy korporacji – księgowe, menagerowie, prezesi
Jak do nich dotrzeć?
Bank nam pomógł

32. System o wielu twarzach
Dwie wizualizacje graficzne jednego systemu.
Każdy użytkownik może mieć inne moduły, inne uprawnienia
Jak badać system, który u każdego wygląda inaczej?

33. System o wielu twarzach
Dwie wizualizacje graficzne jednego systemu.
Każdy użytkownik może mieć inne moduły, inne uprawnienia
Jak badać system, który u każdego wygląda inaczej?
Odpowiednia konstrukcja ankiety

34. Etapy projektu
Analiza starego Projektowanie
Projektowanie
serwisu i zebranie UX – klikalny
graficzne
wymagań prototyp
Badania
Ankieta
Cel. Zdefiniowanie najczęściej wykorzystywanych funkcji i
najbardziej problemowych miejsc

35. Ankieta

36. Rekrutacja respondentów
Ankieta wyświetlająca się po zalogowaniu do systemu
Początkowo tylko użytkownikom najczęściej korzystającym z
systemu. Później również wszystkim pozostałym.

37. Budowa ankiety
Pytania o 14 wybranych
funkcjonalności serwisu
Kwestionariusz oceny satysfakcji
korzystania z serwisu
Wybór 3 najważniejszych cech
systemu transakcyjnego
Korzystanie z innych serwisów
transakcyjnych dla biznesu

38. Wyniki. Najważniejsze cechy systemu
Prostota
Atrakcyjny Logiczna
wygląd nawigacja
Intuicyjność
Nowoczesność Prędkość
działania
Dostępność
pomocy Kontekstowość
Bogactwo funkcji
Przejrzystość funkcjonalności

39. Dowiedzieliśmy się,
w których miejscach
użytkownicy napotykają na
problemy w korzystaniu.
Przeanalizowaliśmy ich
opinie oraz sugestie i
wzięliśmy je pod uwagę
projektując nowy system.

40. Badania na
prototypie

41. Prototyp architektury informacji

42. Etapy projektu
Badania w projekcie
Analiza starego Projektowanie
Projektowanie
serwisu i zebranie UX – klikalny
graficzne
wymagań prototyp
Badania
Ankieta Obserwacja
użytkowników na
prototypie
Cel. Sprawdzenie reakcji na zmiany.
Przetestowanie nowej architektury informacji.

43. Respondenci
12 osób
Klienci banku, korzystający z systemu

44. Rekrutacja
Mailing rozesłany przez Bank do aktywnych klientów,
uczestniczących w warsztatach szkoleniowych
Badania w siedzibie klienta
Zorganizowanie specjalnych konsultancji z doradcami

45. 1. Wywiad wstępny
Sposób korzystania z obecnego systemu
Najczęściej wykorzystywane funkcje
Przyzwyczajenia
Problemy
Pomysły na usprawnienie

46. 2. Obserwacja na prototypie
Swobodna eksploracji
Przetestowanie nowej strony głównej
Wybierali sekcje zgodnie z zainteresowaniami i zakresem
obowiązków
Zadania
Zrób… Czy robisz to na co dzień?
Robi – jak odbierze zmiany
Nie robi – jak będzie się tego uczył nowy użytkownik

47. Nowa nawigacja i strona
główna zostały odebrane
pozytywnie
Usłyszeliśmy też kilka
kolejnych sugestii
usprawnień

48. Eyetracking

49. Badany projekt graficzny

50. Etapy projektu
Badania w projekcie
Analiza starego Projektowanie
Projektowanie
serwisu i zebranie UX – klikalny
graficzne
wymagań prototyp
Badania
Ankieta Obserwacja Eyetracking
użytkowników na nowych projektów
prototypie graficznych
Cel. Przetestowanie widoczności najważniejszych
elementów. Ocena odbioru nowej szaty graficznej.

51. Respondenci
20 14 osób
Klienci banku, korzystający z systemu
Rekrutacja przez bank
Badania w Laboratorium K2 UX

52. Eyetracking
Prezentacja 15 statycznych projektów graficznych
1. Swobodne przeglądanie
Które obszary najbardziej zwracają uwagę
2. 22 jednoklikowe zadania
Intuicyjność rozmieszczenia elementów
3. Wywiad
Ogólne wrażenie
Przejrzystość, widoczność najważniejszych funkcji
Czy mieli z czymś problem?

53. Strona logowania
Swobodne przeglądanie. 10 sekund.

54. Zadania wykonywali sprawnie
i w zdecydowanej większości
bezbłędnie.
Zidentyfikowaliśmy też kilka
niedociągnięć i wprowadziliśmy
zmiany graficzne

55. Efekty

56. Udało się znacznie
uprościć nawigację.
Osoba, która obecnie ma w
głównym menu 27 elementów, w
nowym systemie będzie miała 7

57. Zoptymalizowaliśmy dotarcie
do wielu funkcji.
Aby znaleźć funkcję X,
w starym systemie należy wybrać
dział (1 z 27) a następnie
opcję przelewu (1 z 18).
W nowym systemie wybieramy link
bezpośrednio z pulpitu.

58. PKO Bank Polski
Serwis informacyjny pkobp.pl

59. Pkobp.pl w 2010
Skomplikowany i przeładowany
dużą ilością informacji

60. Oczekiwania
Budowanie wizerunku lidera branży finansowej
Serwis prosty i użyteczny dla wszystkich grup klientów
Zgodność z najnowszymi trendami
Odmłodzenie marki
Rebranding

61. Badania z
użytkownikami

62. Chcieliśmy się dowiedzieć
Jak użytkownicy nawigują poprzez treść
(bez tradycyjnego menu)?
Czy i jak korzystają z narzędzi (filtrowanie, porównywanie
produktów, wyszukiwanie bankomatów)?
Jak oceniają strony produktowe i czy potrafią zamówić
produkt?
Czy projekt graficzny jest przejrzysty i atrakcyjny dla
klientów?
Jak klienci PKO BP odbiorą zmianę starego serwisu na
nowy?

63. Uczniowie i studenci Małe i średnie firmy
Bankowość osobista
Klienci indywidualni
24 osoby
Projekt porządnie przebadany! Klienci PKO BP
100 użytkowników. Różne grupy
celowe. W kilku iteracjach. Klienci konkurencji

64. Zastosowane metody
1 Wywiad wstępny
Doświadczenia i oczekiwania związane
z bankowością internetową
2 Eyetracking Badanie projektów graficznych
3 Obserwacja
użytkowników
Ewaluacja użyteczności i realizacji
celów biznesowych
Dyferencjał Ocena serwisu na skali z
4 semantyczny przeciwstawnymi przymiotnikami
5 Wywiad końcowy Wrażenia i ocena serwisu

65. Zadania
Najczęstsze ścieżki użycia serwisu –
znalezienie produktu, zamówienie, logowanie, zgłoszenie
zaginięcia karty, bankomat
Dla każdej grupy respondentów przygotowaliśmy odrębny
zestaw zadań, zgodny z ich celami

66. Prototyp do badań

67. Liczył 326 stron

68. Strona grupy

69. Strona kategorii

70. Strona produktu

72. Projekty
graficzne

73. Eyetracking
Strona główna starego serwisu oraz kilku konkurencyjnych
banków
6 statycznych projektów statycznych
1. Swobodne przeglądanie
Które obszary najbardziej zwracają uwagę
2. Zadania jednoklikowe
Intuicyjność rozmieszczenia elementów

74. Strona główna

75. Strona grupy

76. Strona kategorii

77. Strona produktu

78. Obserwacja na
prototypie

79. Najważniejsze wnioski
Nawigacja – bez przeszkód
Wybór kategorii i produktu – nie mieli większych problemów
Filtratory – chwalony sposób wyboru produktu
Logowanie – niestandardowe umiejscowienie nie było
problemem

80. Zidentyfikowaliśmy również
kilka miejsc problemowych

81. Bankowość osobista
Bankowość osobista – to co
chcemy my osobiście
zrobić, czyli kredyt, czy tam
coś.
Nie rozumieli nazwy „Bankowość
osobista” i czym ten dział różni się Może osobista, to już taka, że
od sekcji „Klienci indywidualni”. jestem dłużej, że już przychodzę
do tego banku, a Indywidualni to
może, że idę pierwszy raz
Z 10 rozwiązań Bank wybrał
rozwijane podmenu Ja wiem. To jest oferta
spersonalizowana dla mnie. W tym
dziale się zapamiętuje, to co ja
wcześniej oglądałem na stronie.

82. Firmy i rynek mieszkaniowy
Wybierane przy poszukiwaniu Wszyscy jesteśmy
kredytu mieszkaniowego klientami rynku
mieszkaniowego
Nazwa została zmieniona na
Firmy Wspólnoty Spółdzielnie

83. Porównywanie produktów
Nasz sposób nie sprawdził
się – użytkownicy nie
widzieli przycisku Porównaj
Zaprojektowaliśmy więc
tooltip, wyświetlający się
po zaznaczeniu produktu
do porównania

84. Zamawianie produktów
Wizualizacje procesów zakupowych odciągały uwagę od
formularza call back
Zarekomendowaliśmy zastosowanie opisu procesu w formie
tekstowej

85. Eyetracking

86. Poprzednia wersja serwisu PKO BP
Bardzo zróżnicowane ścieżki wzroku świadczą
o mało czytelnej hierarchii informacji.

87. 2 4
3
1 8
5
6
10 9 7
11

88. Projekt nowego serwisu PKO BP
Bardzo duża spójność ścieżek wzroku, wszystkie
najważniejsze elementy są łatwo zauważalne.

89. 4
1 2
3
5
6

90. Strona główna
Zaloguj się do systemu iPKO

91. Strona grupy
Znajdź pożyczkę gotówkową

92. Kredyty i pożyczki
Znajdź pożyczkę gotówkową

93. Strona Miniratka
Zapoznaj się z produktem

94. Ocena serwisu

95. Pozytywny odbiór nowego portalu
Jest mądrze zrobiona. Szybko Jest przejrzysta, te kwadraciki są bardzo
można się do niej przekonać. przejrzyste, gdzie wszystko jest ładnie
opisane. Nie trzeba właśnie tego
szukać, tych wszystkich informacji.
Spodobało mi się, że jest
bardzo czytelna ta
strona, jest łatwo wzrokowo Fajne są te kwadraciki takie.
zapamiętać tą stronę. Wszystko widać. Dobrze jest
zrobiona ta strona.

96. Dyferencjał semantyczny
Stary serwis Nowy serwis

97. IXDA Awards

98. Dziękuję
paulina@ifixux.pl
ifixux.pl