Admin Tool dla porównywarki
produktowej
Projekt narzÄ™dzia do konfiguracji oraz Front End porównywarki produktowej.
O projekcie
Moim zadaniem byÅ‚o zaprojektowanie porównywarki produktowej. NarzÄ™dzia, dziÄ™ki któremu, w obrÄ™bie jednego serwisu bÄ™dzie możliwe porównywanie wszystkich produktów czy usÅ‚ug danej firmy.
Ze wzglÄ™du na zÅ‚ożoność projektu, zostaÅ‚ on podzielony na dwie części - porównywarkÄ™ produktowÄ… i panel administracyjny.
​
Porównywarka produktowa
Koniecznością dla użytkownika była prostota użytkowania.
NarzÄ™dzie musiaÅ‚o pozwalać porównywać dowolne produkty, jednak w obrÄ™bie jednej kategorii, z maksymalnie 5 produktami. Dodatkowo porównywarka miaÅ‚a dziaÅ‚ać na desktop, jak i na mobile.
​
Panel administracyjny
Druga część projektu to sposób administracji, czyli parametryzowania narzÄ™dzia tak, aby w Å‚atwy i intuicyjny sposób można byÅ‚o dostosować go do potrzeby danej firmy i grupy produktów. Zatem, oprócz konfigurowalnych dowolnie pól porównywania, ważny byÅ‚ sposób dostosowania wyglÄ…du porównywarki.
CZAS TRWANIA
31 marca 2022 - 14 kwietnia 2022
UŻYTE NARZĘDZIA
Docs
Figma
Proces projektowania
1. Research
2. Hi-Fidelity
Wireframe
2. Hi-Fidelity
Wireframe
3. Guerrilla Testing
4. UI Design
PrzeglÄ…d projektu
01
Desk
research
Pierwszy krok polegał na zainspirowaniu się rozwiązaniami typu Wordpress. Następnie wiedząc
już na czym polega admin tool, znalazłam kilka aplikacji
i wtyczek porównywarek produktowych. Po ich analizie wiedziaÅ‚am już, co miÄ™dzy innymi powinno oferować takie narzÄ™dzie, ale również jak można je rozwinąć.
Natomiast drugim krokiem byÅ‚o przeglÄ…dniÄ™cie porównywarek produktowych w sklepach online. SprawdziÅ‚am m.in. jak wyglÄ…da porównywanie cech,
czy atrybuty są dodatkowo kategoryzowane i z jakich dodatkowych ustawień może skorzystać użytkownik.
Po researchu rozpisaÅ‚am sobie listÄ™ funkcji i elementów
z podziaÅ‚em na kategorie, które chciaÅ‚am umieÅ›cić
w tworzonym produkcie. W ten sposób zaczęłam planować i wizualizować sobie aplikacjÄ™.
Dzięki takiemu działaniu mogę na bieżąco dopisywać pomysły, jak i z drugiej strony - nie zapominam o nich, tylko je rozwijam.
02
High Fidelity
Porównywarka produktowa
Pierwszym do wykonania prototypem Hi-Fi byÅ‚o zaprojektowanie porównywarki produktowej, aby móc zorientować siÄ™, jakie elementy bÄ™dÄ… konieczne przy konfiguracji w panelu administracyjnym.
ZauważyÅ‚am, że wiele tego typu porównywarek opiera siÄ™ na tych samych funkcjach. Dlatego chciaÅ‚am skupić wiÄ™kszÄ… uwagÄ™ na swobodÄ™ porównywania.
Lista produktów
Po dodaniu produktu do porównania, wyÅ›wietla siÄ™ on w pasku na spodzie widoku.
Produkty można w każdej chwili usunąć, jak i ukryć całą listę.
Tabela
Oprócz samego porównania produktów i korzystania z podstawowych funkcji, jak usuniÄ™cie produktu czy dodanie do koszyka można:
Zmienić kolejność produktów
jak i atrybutów.
Ukryć produkt oraz atrybut.
WyczyÅ›cić porównywarkÄ™.
Zapisać porównanie.
Scrollowanie tabeli
Kiedy użytkownik zjeżdża w dóÅ‚, to górna część z nazwÄ… produktu i zdjÄ™ciem zmienia swój ukÅ‚ad, aby zająć jak najmniej miejsca, ale mimo wszystko sprawić, że informacje bÄ™dÄ… ciÄ…gle pod rÄ™kÄ….
02
High Fidelity
Panel administracyjny
Mając wyobrażenie tego co chcę osiągnąć
w ostatecznie gotowym narzÄ™dziu oraz majÄ…c już z góry pewne wymagania, mogÅ‚am przystÄ…pić do rysowania panelu administracyjnego.
​
Jednak szczegóÅ‚owy opis tego co tam siÄ™ znajduje pozostawiÄ™ na etap UI Design.
03
Guerrilla Testing
Panel administracyjny
Badani chÄ™tnie wypowiadali siÄ™, jak rozumiejÄ… dane ustawienie i co o nim myÅ›lÄ…. WykazaÅ‚o to kilka bÅ‚Ä™dów
w nomenklaturze. Dodatkowo pojawiły się momenty gdzie badany zastanawiał się, gdzie powinien wykonać daną czynność. Jednak po innym sformułowaniu zadania, wykonał polecenie poprawnie.
04
UI Design
Porównywarka produktowa
PrzykÅ‚adowy UI Design porównujÄ…cego karty graficzne.
04
UI Design
Panel administracyjny
Na tym etapie szczegóÅ‚owo opiszÄ™ funkcje panelu administracyjnego dla porównywarki produktowej.
Konfiguracja
W tym miejscu admin może ustawić ogólne preferencje dotyczÄ…ce porównywarki produktowej.
Ustawienia porównywarki
W tej karcie przechodzimy do kolejnych ustawieÅ„ porównywarki, jednak skupionych już na samych elementach widoku porównywania produktów.
Dostosowanie porównywarki
W tym miejscu można sprecyzować
z jakich funkcji może skorzystać użytkownik porównujÄ…c wybrane produkty.
​
Dodatkowo z lewej strony sÄ… do wyboru gÅ‚ówne atrybuty, które majÄ… pojawić siÄ™ w tabeli porównujÄ…cej
w każdej kategorii. Znajduje siÄ™ tu również możliwość zmiany kolejnoÅ›ci wyÅ›wietlania informacji.
Dostosowanie kategorii
Z prawej strony jest możliwość wyszukana dowolnej kategorii, którÄ… nastÄ™pnie można ustawić indywidualnie. Ma to na celu usuniÄ™cie atrybutów, które sÄ… niekonieczne przy porównywaniu produktów w tej kategorii.
Dostosowanie kategorii
Lista dodanych już kategorii jest zapisana pod linkiem "Zobacz dostosowane kategorie".
Otwiera siÄ™ wtedy lista dostosowanych już kategorii, które można usunąć lub edytować. Dodatkowo można szybko wyszukać, czy dana kategoria jest już na liÅ›cie.
WyglÄ…d porównywarki
SÄ… dwie możliwoÅ›ci, aby dostosować wyglÄ…d porównywarki.
Poprzez wklejenie kodu CSS
W ten sposób można w szybki i Å‚atwy sposób dostosować porównywarkÄ™ pod swojÄ… stronÄ™.
Lub manualnej zmianie elementów
Ten sposób zmiany wyglÄ…du polega na zaznaczeniu danego elementu
w podglądzie tabeli, aby następnie edytować go w ustawieniach obok.
​
Tabela aktualizuje się jednocześnie podczas zmiany ustawień. Jednak zostanie ostatecznie zatwierdzona
po zapisaniu zmian.
