Wireflow
Wireflow
Pokazanie zakładek konta już w nawigacji głównej pozwala na łatwiejszy dostęp, oraz jest to spójne z widokiem mobile.
Wprowadzenie zmian na makietach UX
Wprowadzenie zmian na makietach UX
Propozycja zmiany prezentacji zakładek mojego konta.
Pierwsza iteracja
Zakładka "Moje konto"
Celem projektu był redesign istniejącego portalu Oferia.pl. Portal notował duże spadki w ruchu i dodawaniu nowych zleceń, dlatego celem biznesowym było przeprojektowanie strony oraz odświeżenie szaty graficznej.
Projekt portalu Majsteria.pl
Pierwsza iteracja
Projekt portalu Majsteria
Projekt portalu Majsteria
Testy użyteczności
Tworzenie rozwiązania
Jak pracowaliśmy
Tworzenie rozwiązania
Przed redesignem
Dziękuję za twój czas!
Moją propozycją było pokazanie wszystkich akcji na dashboardzie mojego konta - zlecam, wykonuje, obserwuję. Jeśli użytkownik nie podjął jeszcze żadnej akcji, wyświetlana jest apla z informacją co znajdzie się w danej sekcji.
Kolejna iteracja - pokazanie wszystkich akcji
Pierwsza iteracja
Moje konto
Mapowanie ścieżek - Wireflow
Ze względu na ograniczony czas projektu, mieliśmy wątpliwości czy wszystkie ścieżki użytkownika zostały zaopiekowane. Rozrysowałam wireflow który ułatwił nam zrozumienie jakie jeszcze przypadki wymagają dopracowania przed wejściem w etap UI.
Fragment flow.
Moja rola
Byłam jedną z projektantek UX/UI wchodzących w skład zespołu ze strony Leroy Merlin. Ściśle współpracowałam z resztą projektantów w projekcie. Główną metodą pracy były liczne warsztaty które pozwoliły na wypracowanie jak najlepszych rozwiązań, biorąc pod uwagę wytyczne z dokumentacji oraz ograniczenia technologiczne i czasowe.
Zespół
Do zaprojektowania, zakodowania oraz utrzymania strony, firma Leroy Merlin zatrudniła agencję zewnętrzną z którą współpracowaliśmy przy redesignie. Został stworzony zespół projektowy w którego skład wchodzili:
Ze strony agencji - Project manager, Projektant UX, Projektant UI, Analityk
Ze strony Leroy Merlin - Project manager, Projektanci UX/UI x2 Specjaliści ds. rozwoju usług x2.
Jak pracowaliśmy
Oferia.pl był to portal do umawiania się na usługi, najczęściej związane z budową. Strona miała bazę wykonawców którzy rejestrowali się aby świadczyć swoje usługi zleceniodawcom. Witryna była przestarzała i nieresponsywna oraz miała problemy z użytecznością. Strona w trakcie redesignu zmieniła nazwę na Majsteria.pl.
Razem z agencją przeprowadziliśmy testy użyteczności wypracowanych prototypów portalu. Moją rolą była obserwacja testów i analiza zebranych danych w celu poprawy niektórych rozwiązań. Ze strony agencji w testach brał udział badacz UX. Testy były przeprowadzane zdalnie.
Testy użyteczności
Według założeń wynikających z dokumentacji, wyszukiwarka miała wymagać wybrania kategorii w której użytkownik chcę zlecić usługę, oraz lokalizacji w jakiej dana usługa będzie świadczona.
Aby oszczędzić użytkownikowi przeciążenia poznawczego, zaproponowałam rozbicie wyszukiwanie na mniejsze kroki. Dzięki temu klient na jednym ekranie ma do wykonania tylko jedną czynność, co powoduje że płynnie przechodzi przez cały proces wyszukiwania ofert, dokładnie wiedząc na jakim etapie się znajduje.
Wyszukiwarka mobile
Wyszukiwarka
W kolejnej iteracji zaproponowałam uproszczenie wyglądu filtrów, tak aby użytkownik mógł oznaczyć wybór jednym kliknięciem. Dopracowaliśmy również lepsze zgrupowanie elementów.
Kolejna iteracja - projekt UI
Wygląd filtrów zawężających wybór zlecenia oraz dopasowania wykonawcy do zlecenia.
Pierwsza iteracja
Filtry
Podjęliśmy decyzję o rezygnacji z zakładek na widoku logowania i rejestracji. Ekran ten wykorzystuje animację zajęcia większej ilości przestrzeni na ekranie i rozwinięcia inputów dla opcji którą user wybiera (benchmark - Reserved). Dzięki temu użytkownik łatwiej nawiguje pomiędzy opcjami a komunikaty są przejrzyste. Dodatkowo rozwiązanie to jest korzystne dla biznesu, gdyż na ekranie od razu widać wypunktowane korzyści dla założenia konta.
Kolejna iteracja
Logowanie i rejestracja
Przed zalogowaniem
Po zalogowaniu
Po zalogowaniu z aktywowaną funkcją wykonawcy
Bottom nav - przed zalogowaniem
Bottom nav - po zalogowaniu
Bottom nav - po zalogowaniu z aktywowaną funkcją wykonawcy
Zaproponowałam stworzenie paska nawigacji dolnej dla wersji mobilnej. Pozwoliło to na łatwiejszy dostęp do najważniejszych opcji witryny. Dodatkowo powołałam się na badania mówiące o łatwiejszym dostępie nawigacji dolnej dla użytkownika ponieważ największy obszar ruchu kciukiem znajduje się w dolnej części ekranu. Dodatkowo ilość elementów nawigacji desktop została zredukowana i lepiej zgrupowana.
Na etapie UI wprowadziłam zaznaczenie elementów aktywnych on-hover prostym czarnym podkreśleniem. Jest to związane z dostępnością cyfrową zgodną z WCAG, gdzie elementy aktywne nie powinny być wyróżniane jedynie kolorem ponieważ utrudnia to odbiór osobom niewidzącym kolorów.
Kolejna iteracja - zmiana koncepcji
Przed zalogowaniem
Po zalogowaniu - konto zleceniodawcy
Po zalogowaniu - konto zleceniodawcy i wykonawcy
Przed zalogowaniem
Po zalogowaniu - konto zleceniodawcy i wykonawcy
Nawigacja
Tworzenie rozwiązania
To jest element tekstowy. Kliknij ten element dwukrotnie, aby edytować tekst. Możesz też dowolnie zmieniać rozmiar i położenie tego elementu oraz wszelkie parametry wliczając w to tło, obramowanie i wiele innych. Elementom tekstowych możesz też ustawić animację, dzięki czemu, gdy użytkownik strony wyświetli je na ekranie, pokażą się one z wybranym efektem.
To jest element tekstowy. Kliknij ten element dwukrotnie, aby edytować tekst. Możesz też dowolnie zmieniać rozmiar i położenie tego elementu oraz wszelkie parametry wliczając w to tło, obramowanie i wiele innych. Elementom tekstowych możesz też ustawić animację, dzięki czemu, gdy użytkownik strony wyświetli je na ekranie, pokażą się one z wybranym efektem.
To jest element tekstowy. Kliknij ten element dwukrotnie, aby edytować tekst. Możesz też dowolnie zmieniać rozmiar i położenie tego elementu oraz wszelkie parametry wliczając w to tło, obramowanie i wiele innych. Elementom tekstowych możesz też ustawić animację, dzięki czemu, gdy użytkownik strony wyświetli je na ekranie, pokażą się one z wybranym efektem.