Opis i cel projektu

Ten projekt to redesign i usprawnienie systemu zakupu biletów online na pociągi na stronie publicznej PKP Intercity. Czas trwania projektu - 2 miesiące.

Problem skomplikowanego procesu pierwszy raz został poruszony na zajęciach z grafiki interaktywnej na ASP w Gdańsku. Od tego momentu postanowiłam zbadać ten problem głębiej.

Problem

Zespół i moja rola

Projekt został zrealizowany samodzielnie. Moim zadaniem było zadbać o cały proces od badań, aż po finalny prototyp. Projekt konsultowany był z programistą.

1. Badania UX

Audyt ekspercki

Szczegóły biletu

1. Podczas wybierania szczegółów biletu nie widać zmieniającej się ceny.

2. Proces rozbity jest na zbyt dużo stron i kroków. Komunikaty wyświetlają się jako ściany tekstu - lepsze byłoby stopniowe odkrywanie treści.

3. Otrzymany bilet jest jedynie plikiem pdf do wydrukowania - przydałby się bilet elektroniczny. Dodatkowo jest nieczytelny i niepraktyczny.

Lista tras

1. Brak paska postępu - użytkownik nie wie, w którym miejscu się znajduje oraz ile kroków zostało do ukończenia procesu.

2. Pionowa lista tras jest trudna w przewijaniu i umożliwia wyświetlenie na raz tylko trzech wyników z kilkunastu możliwych. Dodatkowo występuje tu brak logiki - zjechanie myszką w dół powoduje przesuwanie kafelków w lewo.

3. Strona jest bardzo nieczytelna i nieprzejrzysta, co utrudnia znalezienie odpowiednich informacji. Zawiera wiele zbędnych elementów, które tylko utrudniają jej czytelność.

Testy użyteczności obecnego systemu

metodologia

Indywidualny wywiad pogłębiony - rozmowa wstępna pozwoli zweryfikować uczestnika i osadzić go w odpowiednim kontekście zadań.

Moderowane testy zadaniowe - 8 testów stacjonarnych, 5 zadań do wykonania.

Karty reakcji - 20 kart z pozytywnymi i negatywnymi przymiotnikami. Zadaniem respondenta jest wybranie 3 kart, które najlepiej oddają jego wrażenia związane z aplikacją.

Grupa badawcza i wielkość próby

Do badania zostało zaproszonych 8 osób, które spełniają poniższe kryteria:

18 - 65 lat
rozumieją j. polski i mówią po polsku

Dodatkowo połowa badanych powinna być grupą, która nigdy nie miała styczności z kupowaniem biletów online, a druga połowa powinna regularnie korzystać z tej usługi. Połowa badanych powinna mieć doświadczenie w podróży pociągami dalekobieżnymi, a druga połowa nie.

Wyszukiwanie i lista tras

Oprócz potwierdzenia wniosków z wstępnego audytu strony respondenci zwrócili uwagę również na:

1. Nie można wyszukiwać dwóch biletów jednocześnie w dwóch różnych kartach.

2. Kafelki pionowe przesuwaja sie w dziwny sposób, nielogicznie - nie ma również żadnej strzałki sugerującej więcej wyników wyszukiwania.

Szczegóły biletu

1. Respondentka zgubiła się przy wybieraniu ulgi. Obecny sposób wyboru ulgi do każdego biletu jest nieintuicyjny. Można wybrać maksymalnie 6 biletów i 3 ulgi - dodatkowo nie ma na ten temat żadnego komunikatu. Użytkownik dowiaduje się o ograniczeniach po popełnieniu błędu.

2. Użytkownik ma za mało czasu na wykonanie płatności i jest to stresujące.

3. Niektóre komunikaty są niewidoczne i powinny być wyróżnione. Dodatkowo są zbyt profesjonalne i niezrozumiałe dla zwykłego użytkownika. Copy powinno zostać dostosowane do grupy docelowej. Dane powinny sie zapisywać - po popełnieniu błędu wszystkie wybrane opcje i wpisane informacje się resetują.

Analiza konkurencji

Użycie tagów, takich jak "najszybszy" i "najtanszy" bilet.

Szczegóły biletu i dane do płatności znajdują się na jednym ekranie.

Wymagane założenie konta - nie można kupić biletu jako gość.

Koleo

Trasy mają tagi, takie jak "bez przesiadek" czy "eko".

Wyszukiwarka nie znika po wyszukaniu listy tras i zapamiętuje wpisane dane.

Wybór szczegółów biletu i płatność znajdują się na tym samym ekranie.

Europodróże

2. Modelowanie produktu

Obecny userflow

Nowy userflow

Błędy

Wyszukiwarka powinna na wstępie mieć wyszukiwanie szczegółowe i filtry, a nie na następnej stronie.

Gdy chcemy zmienic dane wyszukiwania cofamy sie do poprzedniej strony bez zapisanych danych i filtrów.

Niepotrzebne jest wpisywanie dwa razy danych podróżnika. Mamy w sumie 4 ekrany, aby wpisać dane i kupic bilet. Bez sensu jest również podsumowanie.
Wszystko powinno być w jednym/dwóch krokach.

Wireflow

Design

Obecny design strony PKP Intercity jest nieczytelny i nieużyteczny. Na potrzeby projektu stworzyłam nowy design system oraz autorskie ilustracje i animacje. Graficzne elementy na stronie nawiązują do wyznaczonej trasy i podróży do celu. Nowy design nawiązuje do kolorów poprzedniego systemu PKP, ale jest bardziej estetyczny i nowoczesny.

3. Nowy system

1. Wyszukiwarka

W nowym systemie wyszukiwanie szczegółowe znajduje się już na pierwszym ekranie. Dzięki temu użytkownik może od razu skorzystać z najczęściej używanych filtrów. Po wyświetleniu listy tras wyszukiwarka nie znika, a dane wyszukiwania zostają zapisane. Użytkownik w każdym momecie może wyszukać inną trasę.

2. Pasek postępu

Dodany został pasek postępu nad wyszukiwarką. Dzięki temu użytkownik wie, w jakim miejscu się znajduje. Moż również przeskakiwać między krokami i cofać działania jeśli ma taką potrzebę.

3. Lista tras

Lista tras wyświetlana jest w formie poziomych kafelków scrollowanych w dół, dzięki czemu można wyświetlić od razu więcej wyników wyszukiwania. Cena w 1 i 2 klasie jest od razu pokazana - wcześniej trzeba było ją dodatkowo odsłaniać.

4. Testy użyteczności

metodologia

Indywidualny wywiad pogłębiony - rozmowa wstępna pozwoli zweryfikować uczestnika i osadzić go w odpowiednim kontekście zadań.

Moderowane testy zadaniowe - 8 testów na miejscu, 5 zadań d wykonania.

Karty reakcji - 10 kart z pozytywnymi i negatywnymi przymiotnikami. Zadaniem respondenta jest wybranie 3 kart, które najlepiej oddają jego wrażenia związane z procesem.

Grupa badawcza i wielkość próby

Do badania zostało zaproszonych 8 osób, które spełniają poniższe kryteria:

18 - 65 lat
rozumieją j. polski i mówią po polsku

Dodatkowo połowa badanych powinna być grupą, która nigdy nie miała styczności z kupowaniem biletów online, a druga połowa powinna regularnie korzystać z tej usługi.

Wyniki badań - błędy poważne i krytyczne

Respondenci nie rozumieli oznaczeń udogodnień w pociągach oraz oznaczenia procentowego obłożenia pociągu.

problem

Dodanie wyjaśnień wszystkich oznaczeń po najechaniu myszką lub kliknięciu na nie.

Rozwiązanie

Respondenci mieli problem z dodaniem kolejnego biletu. Nie zauważali przycisku.

problem

Wyróżnienie przycisku, aby był bardzo widoczny lub zmiana copy z "wybierz bilety" na "dodaj bilet" z plusem. Konieczne wykonanie testów AB.

Rozwiązanie

Link do prototypu

Testy AB

Odrzucony

Większość respondentów wskazała tę wersję jako mniej intuicyjną, mimo wyróżnienia przycisku. Mylił ich tytuł "wybierz bilety".

Zaakceptowany

Respondenci wskazali tę wersję jako bardziej intuicyjną i zrozumiałą. Dzięki zmianie copy i dodawaniu pierwszego biletu użytkownik od razu wie jak dodać kolejny bilet.

5. Finalny prototyp

4. Szczegóły biletu

Nowy system rozwiązuje problem wybierania biletów. Użytkownik może wybrać dowolną ilość biletów i do każdego z nich dodaje osobno ulgę oraz wybiera miejsce dowolne lub ze schematu pociągu. Podczas wybierania szczegółów biletu widoczna jest zmieniajaca się cena na pasku dolnym.

5. Ilość kroków i płatność

Cały proces zakupu biletu jest dużo prostszy i krótszy. Wszystkie etapy znajdują się na jednym ekranie. Ilość kroków została zredukowana do minimum.

6. Bilet

Użytkownik otrzymuje bilet do druku oraz bilet elektroniczny z kodem QR. W bilecie wyróżniony jest numer wagonu i miejsce, aby w pośpiechu podróżnik mógł łatwo odczytać je z biletu.

Respondenci mieli problem ze zrozumieniem wybierania miejsca. Myliła ich lista rozwijana z opcjami "wybierz miejsce" oraz "dowolne miejsce". Uznali również, że wybór konkretnego miejsca w pociągu jest dużo częściej wybieraną opcją.

problem

Zmiana rozwijanej listy na dwa punkty do zaznaczenia. Opcja wyboru konkretnego miejsca powinna być tą podstawową, natomiast dowolne miejsce jest opcją dodatkową do zaznaczenia.