Case Study
Banking
Analiza UX
Projektowanie UI
Firma
Banking
Data ukończenia
Styczeń 2022
Rola w zespole
Projekt indywidualny
Wprowadzenie
Opracowanie narzędzia do wyszukiwania placówek, oddziałów i bankomatów dla klienta z branży finansowej.
Wytyczne klienta:
- obszar działania: Europa,
- prostota interfejsu,
- wpisanie adresu lub wskazanie aktualnej pozycji,
- możliwość wyboru najbliższej placówki,
- mapa z wynikami,
- możliwość wyboru rodzaju placówki/bankomatu,
- wskazanie udogodnień,
- wyświetlenie szczegółów danego miejsca,
- możliwość zarezerwowania spotkania,
- funkcja „Pokaż drogę” – zintegrowana z API Google Maps.
Plan działania
1 Desk research
Etap pierwszy pozwoli przeanalizować rozwiązania dostępne na rynku oraz wyłonić najlepsze rozwiązania do analizy konkurencji.
2 Analiza konkurencji
Drugi etap to szczegółowa analiza trzech najlepszych, dostępnych na rynku rozwiązań dostarczanych przez konkurencję.
3 Prototyp papierowy
Etap trzeci to stworzenie papierowego prototypu dla rozwiązania dostarczanego dla klienta.
4 Testy
Etap czwarty to testowanie papierowego prototypu z badanymi w celu sprawdzenia najważniejszych elementów prototypu względem użyteczności dla użytkowników.
5 Interactive Wireframes
Etap piąty to stworzenie interaktywnych, szczegółowych wireframes produktu dla widoku Large prezentujących całą logikę produktu.
6 Static Wireframes
Ostatni etap polega na przygotowaniu statycznych widoków Medium i Small prezentujących responsywność produktu.
1 Desk research
Wyszukiwarka placówek/bankomatów
Każda z firm na rynku finansowym posiada narzędzie do wyszukiwania placówek, oddziałów, bankomatów, wpłatomatów oraz wrzutni. Wyszukiwarka dostępna w wersji desktopowej w kilku przypadkach różni się od tej dostępnej w wersji mobilnej.
Większość wyszukiwarek wymaga wstępnego filtrowania i wyboru czy wyszukujemy oddział, bankomat czy wpłatomat. Takie rozwiązanie nie pozwala na pokazanie na mapie wszystkich punktów np. placówek i bankomatów. Zatem aby wyszukać oddział i bankomat należy dokonać dwukrotnego wyszukiwania.
Tylko część z dostępnych wyszukiwarek pozwala na ustalenie aktualnej lokalizacji bez potrzeby wpisywania adresu. Nieliczne wyszukiwarki wyświetlają listę najpopularnieszych miast z możliwością wyboru bez potrzeby wpisywania.
Po udostępnieniu lokalizacji lub wpisaniu adresu we wszystkich przypadkach jest wyświetlana mapa z pinezkami z wyszukanym rodzajem placówki. Niektóre wyszukiwarki za pomocą ikon na pinezce pokazują rodzaj obiektu (bankomat, placówka). Niektóre rozwiązania pozwalają wybrać czy ma zostać wyświetlona mapa czy lista wyszukanych wyników lub wyświetlane są obie na raz.
2 Analiza konkurencji
Konkurencja bezpośrednia
Do dalszej analizy na podstawie desk research do drugiego etapu zostały wybrane wyszukiwarki: ING Bank Śląski, PKO Bank Polski oraz Bank Millennium.
ING Bank Śląski
Produkt bardzo jasny i łatwy w użytkowaniu. Wstępne filtrowanie przez wybór oddziału placówki czy bankomatu. W wersji mobilnej należy wybrać nazwę grupy a nie zaznaczyć wszystkie rodzaje z listy aby wyświetlić wszystkie rodzaje bankomatów co może być niejasne i mylące dla użytkowników. Po wstępnej selekcji wpisujemy adres lub udostępniamy aktualną lokalizację, na mapie widzimy wyniki wyszukiwania w wersji desktopowej wraz z listą w wersji mobilnej możliwość zmiany mapy na listę. Po wybraniu pinezki wyświetlane są szczegóły danego punktu z możliwością wyznaczenia trasy.
Bank Millennium
Tak jak poprzedni produkt wymaga wstępnego filtrowania przez wybór oddziału czy bankomatu. W wersji mobilnej dostępne w jednej grupie placówki i bankomaty. Po wstępnej selekcji wpisujemy adres lub udostępniamy aktualną lokalizację. Domyślnie podpowiadane są najpopularniejsze nazwy miast co jest dużym ułatwieniem. Na mapie wyświetlane są wyniki wyszukiwania w wersji desktopowej wraz z listą w wersji mobilnej możliwość zmiany mapy na listę. Po wybraniu pinezki wyświetlane są szczegóły danego punktu z możliwością wyznaczenia trasy.
PKO Bank Polski
Jako jedyny produkt posiada możliwość wyświetlenia oddziałów i bankomatów w wersji desktopowej i mobilnej. Tak jak poprzednio wpisujemy adres lub udostępniamy aktualną lokalizację. Wyniki wyszukiwania są wyświetlane zarówno na mapie jak i na liście. Pinezki dodatkowo mają przypisaną ikonę określającą rodzaj punktu. Po wybraniu pinezki wyświetlane są szczegóły danego punktu z możliwością wyznaczenia trasy.
3 Prototyp papierowy
Prototyp
W początkowej fazie projektowania opracowanie papierowego prototypu pozwala znacznie przyspieszyć proces projektowy i szybko zwalidować stworzony produkt z badanymi na teście.
4 Testy
Wyniki testu
Przygotowany w poprzednim kroku prototyp papierowy został zwalidowany na teście z pięcioma użytkownikami. Podczas testu dokonano sprawdzenia użyteczności zaprojektowanego rozwiązania.
Użytkownicy w pierwszej kolejności wybierali nazwę „Bankomaty” zamiast „Filtry” w celu wyboru dodatkowych parametrów filtrowania wyników wyszukiwania.
Użytkownicy najczęściej korzystali z opcji „Zlokalizuj mnie”, drugim wyborem najczęściej było wybranie miasta z podanych propozycji.
5 Interactive Wireframes
Prototyp Hi-fidelity Wireframe Large Viewport
Etap piąty to zaprojektowanie widoku Large wireframe na podstawie papierowego prototypu i uwzględnieniu usprawnień zwalidowacych podczas testowania.
W wyszukiwarce zastosowano trzy metody wskazania lokalizacji:
– udostępnienie aktualnego położenia przeglądarce,
– wybranie miasta z podanych propozycji najpopularniejszych miast,
– wpisanie adresu „z ręki”.
Po wskazaniu adresu otrzymujemy wyniki wyszukiwania w formie listy oraz oznaczenia pinezkami na mapie. Użytkownik ma możliwość wybrania punktu z listy lub kliknięcia w pinezkę aby zobaczyć szczegóły danego punku i umówić spotkanie.
6 Static Wireframes
Hi-fidelity Wireframe Medium & Small Viewport
Ostatni etap to zaprojektowanie widoków Medium i Small zgodnie z Responsive web design.
