Anna Natalia Nojek

Narzędzie do porównywania produktów i usług danej firmy z możliwością dostosowywania pod jej serwis.

​

Często pojawiającym się problemem na stronach oferujących usługi bądź produkty jest brak możliwości porównania ich między sobą.

Użytkownicy zmuszeni są otwierać nowe okna z różnymi artykułami i wyszukiwać interesujące ich różnice, co jest nieefektywne i frustrujące. Narzędzie, które zaprojektowałam, zapewnia możliwość porównania pięciu produktów tej samej kategorii na jednej karcie. Jego budowa umożliwia konfigurację pod każdy serwis oraz w zależności od potrzeb klienta.

​

​

Założenia:

• Narzędzie oferuje możliwość dostosowania porównywarki pod każdy serwis, umożliwia porównanie między sobą 5 produktów jednej kategorii, dostosowane jest pod widok mobilny i webowy. Dodatkowo uwzględnia zdjęcie, nazwę i kilka głównych parametrów produktów

• Parametryzacja narzędzia, tak aby w łatwy i intuicyjny osób można było dostosować je do potrzeby danej firmy i grupy produktów. Oznacza to nie tylko dowolną konfigurację pól porównywania, ale także sposób dostosowania wyglądu porównywarki. Dostosowanie powinno odbywać się bezpośrednio z panelu, bez konieczności angażowania programisty, jednakże z opcją do wklejenia kodu CSS
  
   

Proces:
Praca nad narzędziem była wyzwaniem, gdyż według dostarczonych mi informacji produkt musiał gwarantować bardzo szeroką elastyczność w konfiguracji, a dodatkowo flow używania musiało być jak najbardziej przejrzyste dla użytkownika. 
Moim założeniem było stworzenie funkcjonalnego, intuicyjnego, ale także estetycznego i nowoczesnego panelu admina, który zapewni użytkownikowi wygodę i przyjemność z użytkowania. Porównałam między sobą kilka stron do tworzenia witryn, aby przetestować ich funkcjonalności i odnaleźć dobre praktyki, które mogłyby posłużyć mi za inspirację. 
 

Następnie stworzyłam szablony panelu użytkownika przykładowego portalu. Według flow użytkownik ten zaznacza produkty do porównywarki i następnie może je między sobą porównać. Ma możliwość dodania ich do koszyka, edycji porównywarki, dodania kolejnych produktów (do 5 sztuk).
 

W celu pokazania możliwości dostosowania narzędzia pod web i mobile zaprojektowałam widoki frontendowe przykładowego portalu — widok mobilny dostosowany jest pod iOS.
 

Kolejnym krokiem było opracowanie UI panelu admina, gdzie przedstawiam możliwości konfigurowania porównywarki pod wybrany serwis. Scenariusz do tej części to: „Po wejściu w panel admina Comparatora, chcesz edytować porównywarkę swojej strony internetowej. Widzisz, że możesz edytować wiele opcji i zapoznajesz się z panelem, jednak decydujesz się na pracę z kodem. Wpisujesz go, następnie publikujesz swoje zmiany.”

​
 

Prezentuję dwie strony Comparator'a:

• Panel użytkownika w formie wireframów z opisami funkcji w kontekście dodawania produktów do porównywarki, z możliwością usunięcia i edycji

• Panel admina, gdzie usługodawca całą porównywarkę może dostosować do swojej strony internetowej