Admin Tool
O projekcie
Admin Tool dla Font-Endu, czyli korelacja warstw abstrakcji
Pewna firma słynąca z elastycznych rozwiązań klasy Enterprise zwróciła się do mnie z pytaniem czy nie zaprojektuję im porównywarki wraz z panelem administracyjnym, które będzie mogło być szeroko implementowane przez przedsiębiorstwa lub mniejsze e-commercy, tak aby w łatwy i intuicyjny sposób można było dostosować do potrzeby danej firmy i grupy produktów, gdzie integracja będzie odbywała się w szeroko konfigurowanym API. A ja odpowiedziałem, że nie ma problemu.
Rola
Projekt indywidualny
Czas
3 tygodnie
01
Desk Research
Prostota słowo klucz dla panelu administracyjnego
Popularne rozwiązania mają to do siebie, że są zbyt skomplikowane. Ja szukałem czegoś prostszego. Dlatego to była pierwsza część mojego researchu. Wpisałem w wyszukiwarce odpowiednią frazę i napotkałem na artykuł, który oświecił mnie jasnym i klarownym rozwiązaniem. Widzisz. Klikasz. Edytujesz. Tego właśnie szukałem.
Rozwiązania dla porównywarki
Nie obyło się bez szukania rozwiązań dla samej porównywarki. I tu również poszukałem rozwiązań. I tak szukałem, dopóki nie natrafiłem na obszerny artykuł o porównywarkach produktów. Nie sposób zliczyć wszystkich rozwiązań, którymi się zainspirowałem, ale kilka z nich opisałem w części z designem.
02
Front End Design
Design dla użytkownika końcowego
Wpierw zaprojektowałem rozwiązanie dla end usera, aby móc później dostarczyć skrojony na miarę Admin Tool. Cała porównywarka musiała się charakteryzować elastycznością, a flow powinno być czytelne dla użytkownika.
Intuicyjność korzystania
Użytkownik może bezproblemowo dodawać i usuwać produkty z przed, jak i w trackie porównywania. Sekcja “W skrócie” streszcza porównanie do najistotniejszych funkcji i różnic między produktami. Całość ułatwia panel nawigacyjny, który jednym kliknięciem szybko przeniesie Cię do interesującej sekcji.
Mobile experience
Nie mogłem zapomnieć o wersji mobilnej. Tutaj przygotowałem Hi-Fi Wireframes. Upewniłem się, że doświadczenia płynące z wersji mobile jak i na desktop będą takie same. Czyli na wysokim poziomie.
03
Admin Tool Wireframes
Wstępne zarysy panelu administracyjnego
Jeszcze przed stworzeniem ostatecznego designu wykonałem Hi-Fi Wireframes. Tego typu narzędzie musiało zostać poddane walidacji z użytkownikiem. Badałem przekrojowo i weryfikowałem rozumienie rozwiązania. Dodatkowo musiałem się upewnić, że badani rozumieją korelacje miedzy warstwami abstrakcji.
Testy z badanymi
Całość okazała się na tyle zrozumiała, że badani nie wykazywali większych problemów z prototypem. Bez większego wysiłku potrafili dodać sekcję, wybrać element do edycji, edytować go oraz przejść do panelu z CSS’em. Musiałem się upewnić, że w każdym aspekcie narzędzie jest klarowne w użytkowaniu.
04
Admin Tool Design
Styl wizualny
Nie chciałem pozostawić ją pospolitą, ale żeby swoim urokiem zachęcała i umilała w korzystaniu z panelu administracyjnego. Dlatego design jaki stworzyłem jest miły dla oka.
Typografia
Kolory
Główne ustawienia
W głównej części admin ma dostęp do głównych funkcji porównywarki jak i edycji sekcji, które może dodawać, zmieniać i usuwać.
Wgląd w wygląd
Dla lepszego wglądu, w to jak będzie wyglądała porównywarka, użytkownik może wybrać kategorię produktów oraz ilość jaką chce zobaczyć. A co jeśli tworzony jest nowy e-commerce i nie ma jeszcze bazy danych z produktami lub usługami? Wtedy porównywarka wstawia placeholdery.
Łatwość w edytowaniu
Oprócz dziecinnie prostego sposobu edytowania każdego elementu, użytkownik ma nieprzytłaczający wachlarz opcji, tak aby mógł skonfigurować porównywarkę pod swoją stronę. Czegokolwiek użytkownik by nie widział, to może w to kliknąć i zacząć edytować.
05
Czego się nauczyłem?
Skomplikowane rozwiązania wymagają prostych rozwiązań.
Po przeczytaniu briefu zaczęły przychodzić mi do głowy różne rozwiązania, ale każde z nich okazały się być nieużyteczne, głównie ze względu na zbyt dużą ilość kliknięć. A te proste okazują się być kluczem do sukcesu.
Kto szuka ten znajduje
Przez chwilę wątpiłem w to, czy znajdę odpowiednie rozwiązanie, ale jaki byłby sens w zaproponowaniu beznadziejnego rozwiązania? Nie mogłem się poddać. Musiałem dowieźć coś, co zachwyci mojego klienta.