nowoczesne
produkty bankowe

Rozwiązania potrzeb wokół finansowych

ux case study

 
 

Założenia Projektu

Projekt realizowany dla klienta z rynku finansowego, który jest jednym z najszybciej rozwijających się banków na świecie. Dostarcza nowoczesne produkty bankowe dostępne zarówno online jak i w tradycyjnych placówkach bankowych. Tym razem klient potrzebuje narzędzia do wyszukiwania placówek, oddziałów oraz bankomatów jego banku.
 
 

Potrzeby klienta

  • Proste narzędzie do wyszukiwania placówek i odziałów banku
  • Narzędzie dostępne na desktop i mobile – RWD
  • Wyszukanie najbliższych punktów od swojej aktualnej pozycji lub po ulicy, lub mieście
  • Wyszukiwanie z filtrami ( dodtkowymi informacjami, możliwościami )
  • Po wybraniu punktu pojawienie się dodatkowych szczegółowych informacji dotyczących punktu
  • Wyniki pojawiające się na mapie i możliwość wytyczenia trasy ( integracja z Google maps )
  • Możliwość zarezerwowania spotkania w danej placówce
  • Rynek Europejski (MVP)

 
 

Narzędzia

  • Low-Fidelity Wireframes
  • High-Fidelity Wireframes
  • Prototypowanie
  • Testy
  • Iteracja

Wireframes

 
 

Low – fidelity wireframes

Prototyp narzędzia – wyszukiwarki, dzięki której klient znajdzie placówki i oddziały banku, oraz będzie miał możliwość wyświetlenia ważnych informacji dotyczących placówki oraz rezerwacji spotkania.
 
 
Widoki large
 

 
 
Widoki small
 

 
 

testy i iteracja

Pierwsze widoki, które zaprojektowałam przetestowałam z 5 osobami. Dzięki informacjom, które uzuskałam wprowadziłam poprawki do projektu.

  • Wyszukiwarka nie była wystarczajaco intuicyjna i skupiająca uwagę użytkowników, input do wpisania ulicy lub miasta, w którym jednocześnie była możliwość kliknięcia buttonu “użyj mojej lokalizacji” nie był czytelny, dlatego umieściłam go poniżej.
  • Wątpliwość budziło także umieszczenie mapy na dole okna, w celu lepszego doświadczenia użytkownika umieściłam mapę po prawej stronie, aby użytkownik widział ją całą w pierwszym widoku.
  • Wybrane podczas filtrowania preferencji wyszukiwania tagi, które umieściłam nad mapą wprowadzały za dużo niepewności, dlatego zostały przeniesione tylko do widoku, w którym prezentowane są szczegółowe informacje na temat wybranej placówki.
  • Zrezygnowałam w widoku large z możliwości wyboru wyszukiwania po mapie lub liście na rzecz umieszczenia obu opcji obok siebie, zostawiłam jednak o rozwiązanie w widoku small.
  • Przeniosłam możliwość wyboru wyszukiwania placówki lub bankomatu na listę z pozostałymi dostępnymi filtrami.
  • Kolejnym problemem, jaki zauważyłam było niewystarczająco czytelna informacja o placówce prezentowana w pop – upie na mapie. Zdecydowałam się z niego zrezygnować na rzecz oddzielnej strony, na której użytkownik znajdzie wszystkie niezbędne informacje o danym punkcie czy placówce, takie jak: adres godziny otwarcia, usługach wybranej placówki lub bankomatu.

 
 
Widoki large
 

 
 
Widoki small
 

 
 

hi – fidelity

 
 

Hi – fidelity wireframes

Na podstwie przetestowanych wireframeów low – fidelity stworzyłam wireframy hi – fidelity dla widoków large i small.
 
Widoki large
 

 
 

Widoki small
 

 
 

Prototyping

 
 

 
 
 

zródła | wykorzystane zasoby

Tło pliki psd utworzone przez pixcel3d – pl.freepik.com
Biznes pliki psd utworzone przez pixcel3d – pl.freepik.com