BadaniasystemówfinansowychWyzwania. Metody. Efekty.

Paulina Makuch

K2 ♥ banki

Ja ♥ banki jeszcze bardziej

A dziś o

Zmiany w formularzach wnioskówwe wdrożeniu

System transakcyjny dla korporacjiwe wdrożeniu

Serwis informacyjny pkobp.pl2012

Bank CenzuraElementy systemu transakcyjnego

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

Zaprojektowaliśmy

Przeprojektowaliśmy formularz

Zaprojektowaliśmy dwa kalkulatory

Stworzyliśmy sekcję dla wszystkich złożonych wniosków

Przeprojektowaliśmy sekcję ofertową – nowa architektura informacji oraz nowy zakes treści

Zarekomendowaliśmy zmiany w sekcjach obsługowych(na stronach kategorii produktowych)

+ poza zakresem

Prototyp architektury informacji

Wyzwania badawcze

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

Prototyp do badań

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

Przebieg badania

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

Zastosowane metody

Wywiad wstępny

Obserwacja użytkowników

Doświadczenia i oczekiwania związane z poszukiwaniem produktu

Ewaluacja proponowanych zmian i odbiór projektu graficznego

Wywiad końcowyOcena serwisu oraz nowego, rozszerzonego procesu

1

2

3

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?

2. Wspólne przeżywanie historii

potrzeba

Wywiad wstępny wprowadzał respondenta w 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?

Ocena procesu

cel

3. Ocena procesu

Podsumowanie wrażeń

Ocena formularza i całego procesu

Wskazanie najtrudniejszych miejsc

Pochwalenie dobrych rozwiązań

No jeżeli dla mnie jest to proste, to znaczy że to musi być proste, bo mówię że ja naprawdę jestem atechniczna

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

Trochę trzeba było pobłądzić. Ale nie, nie jest to aż tak skomplikowane, tylko trzeba tam tak poklikać metodą prób i błędów.

Efekty

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.

Zastowanie graficznego prototypu pozwoliło sprawdzić widoczność istotnych obszarów strony.

Mogliśmy poprawić szczegóły, jak np. widoczność pól opcjonalnych.

Zbadaliśmy szanse na pozytywny odbiór nowego sposobu sprzedaży.

Przedstawiliśmy odpowiednie rekomendacje, wychodzące poza zmiany w samym formularzu.

PekaoBiznes24System transakcyjny

dla korporacji

Obecny wygląd systemu

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

Główne wyzwania projektowe

Ważne narzędzie codziennej pracysetek tysięcy użytkowników

Jak projektować coś o czym nie wiemy, do czego służy i jak się z tego korzysta?

Wyzwania badawcze

Specyficzna grupa użytkowników

Pracownicy korporacji – księgowe, managerowie, prezesi

Jak do nich dotrzeć?

Specyficzna grupa użytkowników

Pracownicy korporacji – księgowe, menagerowie, prezesi

Jak do nich dotrzeć?

Bank nam pomógł

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?

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

Analiza starego serwisu i zebranie

wymagań

Projektowanie UX – klikalny

prototyp

Projektowanie graficzneE

tap

y

pro

jektu

Ankieta

Bad

an

ia

Cel. Zdefiniowanie najczęściej wykorzystywanych funkcji i najbardziej problemowych miejsc

Ankieta

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.

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

Wyniki. Najważniejsze cechy systemu

Series3

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.

Badania na prototypie

Prototyp architektury informacji

Nowa strukturaNowa strona główna

Badania w projekcie

Analiza starego serwisu i zebranie

wymagań

Projektowanie UX – klikalny

prototyp

Projektowanie graficzne

Ankieta Obserwacja użytkowników na

prototypie

Eta

py

pro

jektu

Bad

an

ia

Cel. Sprawdzenie reakcji na zmiany.Przetestowanie nowej architektury informacji.

Respondenci

12 osób

Klienci banku, korzystający z systemu

Rekrutacja

Mailing rozesłany przez Bank do aktywnych klientów,uczestniczących w warsztatach szkoleniowych

Badania w siedzibie klienta

Zorganizowanie specjalnych konsultancji z doradcami

1. Wywiad wstępny

Sposób korzystania z obecnego systemu

Najczęściej wykorzystywane funkcje

Przyzwyczajenia

Problemy

Pomysły na usprawnienie

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

Nowa nawigacja i strona główna zostały odebrane pozytywnie

Usłyszeliśmy też kilka kolejnych sugestii usprawnień

Eyetracking

Badany projekt graficzny

Badania w projekcie

Analiza starego serwisu i zebranie

wymagań

Projektowanie UX – klikalny

prototyp

Projektowanie graficzne

Ankieta Obserwacja użytkowników na

prototypie

Eta

py

pro

jektu

Bad

an

ia

Eyetracking nowych projektów

graficznych

Cel. Przetestowanie widoczności najważniejszych elementów. Ocena odbioru nowej szaty graficznej.

Respondenci

20 14 osób

Klienci banku, korzystający z systemu

Rekrutacja przez bank

Badania w Laboratorium K2 UX

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?

Strona logowania

Swobodne przeglądanie. 10 sekund.

Grafik był zachwycony!

Zadania wykonywali sprawniei w zdecydowanej większości bezbłędnie.

Zidentyfikowaliśmy też kilka niedociągnięć i wprowadziliśmy zmiany graficzne

Efekty

Udało się znacznieuprościć nawigację.

Osoba, która obecnie ma w głównym menu 27 elementów, w nowym systemie będzie miała 7

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.

Serwis informacyjny pkobp.plPKO Bank Polski

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

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

Badania z użytkownikami

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?

Uczniowie i studenciBankowość

osobista Klienci indywidualni

Małe i średnie firmy

Klienci PKO BP

Klienci konkurencji

Projekt porządnie przebadany!100 użytkowników. Różne grupy celowe. W kilku iteracjach.

24 osoby

Zastosowane metody

Wywiad wstępny

Eyetracking

Doświadczenia i oczekiwania związane z bankowością internetową

Badanie projektów graficznych

Obserwacja użytkowników

Ewaluacja użyteczności i realizacji celów biznesowych

Dyferencjał semantyczny

Ocena serwisu na skali z przeciwstawnymi przymiotnikami

Wywiad końcowy Wrażenia i ocena serwisu

1

2

3

4

5

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

Prototyp do badań

Liczył 326 stron

Strona grupy

Strona kategorii

Strona produktu

Projekty graficzne

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

Strona główna

Strona grupy

Strona kategorii

Strona produktu

Obserwacja na prototypie

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

Zidentyfikowaliśmy również kilka miejsc problemowych

Bankowość osobista

Nie rozumieli nazwy „Bankowość osobista” i czym ten dział różni się od sekcji „Klienci indywidualni”.

Z 10 rozwiązań Bank wybrał rozwijane podmenu

Może osobista, to już taka, że jestem dłużej, że już przychodzę do tego banku, a Indywidualni to może, że idę pierwszy raz

Ja wiem. To jest oferta spersonalizowana dla mnie. W tym dziale się zapamiętuje, to co ja wcześniej oglądałem na stronie.

Bankowość osobista – to co chcemy my osobiście zrobić, czyli kredyt, czy tam coś.

Firmy i rynek mieszkaniowy

Wybierane przy poszukiwaniukredytu mieszkaniowego

Nazwa została zmieniona naFirmy Wspólnoty Spółdzielnie

Wszyscy jesteśmy klientami rynku mieszkaniowego

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

Zamawianie produktów

Wizualizacje procesów zakupowych odciągały uwagę od formularza call back

Zarekomendowaliśmy zastosowanie opisu procesu w formie tekstowej

Eyetracking

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

1

23

65

7

8

910

11

4

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

21 4

35

6

Strona głównaZaloguj się do systemu iPKO

Strona grupyZnajdź pożyczkę gotówkową

Kredyty i pożyczkiZnajdź pożyczkę gotówkową

Strona MiniratkaZapoznaj się z produktem

Ocena serwisu

Pozytywny odbiór nowego portalu

Jest mądrze zrobiona. Szybko można się do niej przekonać.

Jest przejrzysta, te kwadraciki są bardzo 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 zapamiętać tą stronę.

Fajne są te kwadraciki takie. Wszystko widać. Dobrze jest zrobiona ta strona.

Dyferencjał semantyczny

Stary serwis

Nowy serwis

IXDA Awards

Dziękujępaulina@ifixux.pl

ifixux.pl